@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================
   HERO
========================= */
.hero {
  background: linear-gradient(135deg, #005bab, #003d82);
  padding: 120px 0;
  color: #fff;
}

.hero .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 24px;
}

.btn-primary {
  background: #E39B2F;
  color: #fff;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 700;
}

/* =========================
   トップページ（LP）専用
   ※既存ページに影響しないよう必ず top- でスコープ
========================= */

/* LPの基本余白（必要なら） */
.top-section {
  padding: 80px 0;
}

@media (max-width: 768px) {
  .top-section {
    padding: 56px 0;
  }
}

/* LP内だけのコンテナ（.container は使わない） */
.top-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .top-container {
    padding: 0 16px;
  }
}

/* LP用ボタン（.btn / .btn-primary は使わない） */
.top-btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
}

.top-btn-primary {
  background: #E39B2F;
  color: #fff;
}

.top-btn-primary:hover {
  opacity: 0.9;
}

/* =========================
   トップページ（LP）共通土台
========================= */

.top-lp {
  --color-primary: #005bab;
  --color-primary-dark: #003d82;
  --color-primary-darker: #002447;
  --color-accent: #E39B2F;
  --color-accent-hover: #d88b1f;
  --color-text: #1a1a1a;
  --color-text-light: #4a5568;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-white: #ffffff;
}

/* =========================
   TOP LP: HERO
========================= */

.top-hero {
  position: relative;
  background: linear-gradient(135deg, #001a33 0%, #002447 50%, #003d82 100%);
  min-height: 600px;
  overflow: hidden;
}

/* 背景画像（必要なら） */
.top-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/hero-background.jpeg");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

.top-hero__content {
  position: relative;
  z-index: 10;
  padding: 8rem 0;
  color: #fff;
}

.top-hero__inner {
  max-width: 64rem;
}

.top-hero__subcopy {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.top-hero__headline {
  position: relative;
  margin-bottom: 2rem;
}

.top-hero__accent-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent, #E39B2F);
}

.top-hero__main-text {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  padding-left: 1.5rem;
}

.top-hero__organization {
  font-size: 1rem;
  margin-bottom: 2.5rem;
  opacity: 0.8;
  letter-spacing: 0.05em;
}

.top-hero__tagline {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  opacity: 0.9;
}

.top-hero__cta {
  display: inline-block;
  background: var(--color-accent, #E39B2F);
  color: #fff;
  padding: 1.25rem 2.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 10px 30px rgba(227, 155, 47, 0.3);
}

.top-hero__cta:hover {
  background: var(--color-accent-hover, #d88b1f);
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(227, 155, 47, 0.4);
}

@media (min-width: 768px) {
  .top-hero__subcopy { font-size: 1.25rem; }
  .top-hero__main-text { font-size: 3.75rem; }
  .top-hero__organization { font-size: 1.125rem; }
  .top-hero__tagline { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  .top-hero__main-text { font-size: 4.5rem; }
}

/* =========================
   TOP LP: 幅を広げる（LPだけ）
========================= */

/* SWELLの標準コンテナをLP内だけ拡張 */
.top-lp .l-container {
  max-width: 1280px;  /* 1200〜1400で好み */
}

/* さらにhero内のテキストブロックも広げたい場合 */
.top-lp .top-hero__inner {
  max-width: 72rem; /* 64rem→72rem（=1152px） */
}

/* =========================
   TOP LP: DECLARATION
========================= */

.top-declaration {
  padding: 6rem 0;
  background: #fff;
}

.top-declaration__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.top-declaration__text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.top-declaration__text p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text);
}

.top-declaration__visual {
  position: relative;
  height: 16rem;
  opacity: 0.12;
}

.top-declaration__grid-pattern {
  width: 100%;
  height: 100%;
}

.top-declaration__node {
  position: absolute;
  border-radius: 50%;
  background: var(--color-primary);
}

.top-declaration__node--1 {
  top: 25%;
  left: 25%;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.2;
}

.top-declaration__node--2 {
  top: 33%;
  right: 25%;
  width: 1rem;
  height: 1rem;
  opacity: 0.25;
}

.top-declaration__node--3 {
  bottom: 33%;
  left: 33%;
  width: 0.5rem;
  height: 0.5rem;
  opacity: 0.15;
}

.top-declaration__node--4 {
  bottom: 25%;
  right: 33%;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.2;
}

.top-declaration__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  stroke: var(--color-primary);
  stroke-width: 1;
}

.top-declaration__shape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12rem;
  height: 12rem;
  border: 2px solid var(--color-primary);
  opacity: 0.05;
  border-radius: 0.5rem;
  transform: translate(-50%, -50%) rotate(12deg);
}

@media (min-width: 768px) {
  .top-declaration {
    padding: 7rem 0;
  }

  .top-declaration__grid {
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
  }

  .top-declaration__text p {
    font-size: 1.25rem;
  }

  .top-declaration__visual {
    height: 24rem;
  }
}

@media (min-width: 1024px) {
  .top-declaration {
    padding: 10rem 0;
  }

  .top-declaration__text p {
    font-size: 1.5rem;
  }
}

/* =========================
   TOP LP: WHY RESKILLING
========================= */

.top-why {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
  overflow: hidden;
}

.top-why__decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  opacity: 0.05;
}

.top-why__decoration-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.top-why__header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 10;
}

.top-why__tag {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.top-why__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary-darker);
  margin-bottom: 0;
  line-height: 1.3;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.top-why__content {
  max-width: 56rem;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.top-why__lead {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 3rem;
}

.top-why__lead p {
  margin-bottom: 1.5rem;
}

.top-why__blocks {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.top-why__block {
  background: #fff;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--color-primary);
}

.top-why__block-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-darker);
  margin-bottom: 1rem;
}

.top-why__block-text {
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
}

@media (min-width: 768px) {
  .top-why {
    padding: 8rem 0;
  }

  .top-why__title {
    font-size: 2.25rem;
  }

  .top-why__lead {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .top-why {
    padding: 10rem 0;
  }

  .top-why__title {
    font-size: 3rem;
  }
}

/* =========================
   TOP LP: PAGE NAV
========================= */

.top-page-nav {
  position: sticky;
  top: 73px; /* ヘッダー高さに合わせる */
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.top-page-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 0;
  overflow-x: auto;
  list-style: none;
  margin: 0;
}

.top-page-nav__list::-webkit-scrollbar {
  height: 4px;
}

.top-page-nav__list::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 4px;
}

.top-page-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-light, #4a5568);
  white-space: nowrap;
  transition: color 0.3s ease;
  text-decoration: none;
}

.top-page-nav__link:hover {
  color: var(--color-primary, #005bab);
}

@media (min-width: 768px) {
  .top-page-nav__list {
    gap: 2rem;
  }

  .top-page-nav__link {
    font-size: 1rem;
  }
}

/* =========================
   TOP LP: PART 1
   05 Career Potential / 06 Bridge / 07 Courses
========================= */

/* 共通：この3セクション内の見出し・文章の基本 */
.top-lp .top-career-potential,
.top-lp .top-bridge,
.top-lp .top-courses {
  padding: 6rem 0;
}

/* ------------- 05: Career Potential ------------- */

.top-lp .top-career-potential {
  background: #fff;
}

.top-lp .top-career-potential__header {
  text-align: center;
  margin-bottom: 3rem;
}

.top-lp .top-career-potential__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.top-lp .top-career-potential__badge-text {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: var(--color-gray-100);
}

.top-lp .top-career-potential__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary-darker);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.top-lp .top-career-potential__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  margin: 0 0 1rem;
}

.top-lp .top-career-potential__description {
  color: var(--color-text);
  line-height: 1.9;
  margin: 0 auto;
  max-width: 56rem;
}

.top-lp .top-career-potential__grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.top-lp .top-career-potential__card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.top-lp .top-career-potential__icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.top-lp .top-career-potential__icon {
  width: 22px;
  height: 22px;
  display: block;
}

.top-lp .top-career-potential__card-title {
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--color-primary-darker);
}

.top-lp .top-career-potential__card-text {
  margin: 0;
  color: var(--color-text);
  line-height: 1.9;
}

.top-lp .top-career-potential__cta {
  margin-top: 2.5rem;
  text-align: center;
}

.top-lp .top-career-potential__cta-text {
  color: var(--color-text);
  margin: 0 0 1rem;
  font-weight: 700;
}

.top-lp .top-career-potential__button {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.top-lp .top-career-potential__button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .top-lp .top-career-potential__title { font-size: 2.5rem; }
  .top-lp .top-career-potential__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .top-lp .top-career-potential__card { padding: 1.75rem; }
}

@media (min-width: 1024px) {
  .top-lp .top-career-potential__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------- 06: Bridge ------------- */

.top-lp .top-bridge {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary-darker), var(--color-primary-dark));
  color: #fff;
  overflow: hidden;
}

.top-lp .top-bridge__bg-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: radial-gradient(circle at 20% 20%, #ffffff 0 2px, transparent 3px),
                    radial-gradient(circle at 80% 40%, #ffffff 0 2px, transparent 3px),
                    radial-gradient(circle at 40% 80%, #ffffff 0 2px, transparent 3px);
  background-size: 120px 120px;
  pointer-events: none;
}

.top-lp .top-bridge__container {
  position: relative;
  z-index: 1;
}

.top-lp .top-bridge__content {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

.top-lp .top-bridge__title {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 1rem;
  line-height: 1.3;
}

.top-lp .top-bridge__lead {
  margin: 0 auto 2rem;
  max-width: 56rem;
  line-height: 1.9;
  opacity: 0.92;
}

.top-lp .top-bridge__features {
  display: grid;
  gap: 0.75rem;
  margin: 0 auto 2rem;
  max-width: 56rem;
  text-align: left;
}

.top-lp .top-bridge__feature {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.75rem;
  align-items: start;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.top-lp .top-bridge__check {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-accent);
}

.top-lp .top-bridge__feature-text {
  margin: 0;
  line-height: 1.8;
}

.top-lp .top-bridge__button {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 1.1rem 2.2rem;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.top-lp .top-bridge__button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .top-lp .top-bridge__title { font-size: 2.5rem; }
  .top-lp .top-bridge__features { gap: 1rem; }
}

/* ------------- 07: Courses ------------- */

.top-lp .top-courses {
  background: linear-gradient(to bottom, var(--color-gray-50), #fff);
}

.top-lp .top-courses__header {
  text-align: center;
  margin-bottom: 3rem;
}

.top-lp .top-courses__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.top-lp .top-courses__badge-text {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: var(--color-gray-100);
}

.top-lp .top-courses__title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary-darker);
  margin: 0 0 1rem;
  line-height: 1.35;
}

.top-lp .top-courses__lead,
.top-lp .top-courses__description {
  margin: 0 auto 1rem;
  max-width: 60rem;
  line-height: 1.9;
  color: var(--color-text);
}

.top-lp .top-courses__lead {
  color: var(--color-text-light);
}

.top-lp .top-courses__main-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.top-lp .top-courses__card {
  display: block;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
}

.top-lp .top-courses__card-image {
  position: relative;
}

.top-lp .top-courses__image {
  width: 100%;
  height: auto;
  display: block;
}

.top-lp .top-courses__badge-reskill {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
}

.top-lp .top-courses__card-body {
  padding: 1.5rem;
}

.top-lp .top-courses__card-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.top-lp .top-courses__card-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-primary-darker);
  margin: 0 0 0.75rem;
  line-height: 1.35;
}

.top-lp .top-courses__card-text {
  margin: 0 0 1.25rem;
  line-height: 1.9;
  color: var(--color-text);
}

.top-lp .top-courses__price-box {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  padding: 1rem;
}

.top-lp .top-courses__price-note {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

.top-lp .top-courses__price {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-primary-darker);
}

.top-lp .top-courses__price-tax {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-light);
}

.top-lp .top-courses__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.top-lp .top-courses__feature {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-text);
}

.top-lp .top-courses__check-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .top-lp .top-courses__title { font-size: 2.5rem; }
  .top-lp .top-courses__main-grid { grid-template-columns: repeat(2, 1fr); }
  .top-lp .top-courses__card-body { padding: 1.75rem; }
}

/* 業界特化型 */
.top-lp .top-courses__industry {
  margin-top: 3rem;
}

.top-lp .top-courses__industry-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.top-lp .top-courses__industry-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
  background: var(--color-gray-100);
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.top-lp .top-courses__industry-title {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-primary-darker);
}

.top-lp .top-courses__industry-description {
  margin: 0 auto;
  max-width: 56rem;
  line-height: 1.9;
  color: var(--color-text);
}

.top-lp .top-courses__industry-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.top-lp .top-courses__industry-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.top-lp .top-courses__industry-image img {
  width: 100%;
  display: block;
}

.top-lp .top-courses__industry-body {
  padding: 1rem 1.25rem 1.25rem;
}

.top-lp .top-courses__industry-label {
  margin: 0;
  font-weight: 900;
  color: var(--color-primary);
}

.top-lp .top-courses__industry-name {
  margin: 0.25rem 0 0.25rem;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--color-primary-darker);
}

.top-lp .top-courses__industry-course {
  margin: 0;
  color: var(--color-text-light);
  line-height: 1.8;
}

@media (min-width: 768px) {
  .top-lp .top-courses__industry-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   TOP LP (V0): Career Potential / Bridge / Reskilling Explanation
   既存CSSは消さず、LPページ(.top-lp)だけ上書きする
========================================================= */

/* ---- Career Potential ---- */
.top-lp .top-career-potential {
  padding: 80px 0;
  background: #fff;
}

.top-lp .top-career-potential__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.top-lp .top-career-potential__header {
  text-align: center;
  margin-bottom: 40px;
}

.top-lp .top-career-potential__badge-text {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #E39B2F);
  margin-bottom: 12px;
}

.top-lp .top-career-potential__title {
  font-size: 2rem;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--color-primary-darker, #002447);
  font-weight: 800;
}

.top-lp .top-career-potential__subtitle {
  margin: 0 0 16px;
  color: var(--color-text-light, #4a5568);
  font-weight: 600;
}

.top-lp .top-career-potential__description {
  max-width: 860px;
  margin: 0 auto 16px;
  color: var(--color-text, #1a1a1a);
  line-height: 1.8;
}

.top-lp .top-career-potential__lead {
  margin: 16px 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary-darker, #002447);
}

.top-lp .top-career-potential__emphasis {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary, #005bab);
}

.top-lp .top-career-potential__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .top-lp .top-career-potential__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.top-lp .top-career-potential__card {
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

.top-lp .top-career-potential__card--primary {
  background: #ffffff;
}

.top-lp .top-career-potential__card--dark {
  background: var(--color-primary-darker, #002447);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}

.top-lp .top-career-potential__card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(0, 91, 171, 0.10);
}

.top-lp .top-career-potential__card--dark .top-career-potential__card-icon {
  background: rgba(255,255,255,0.12);
}

.top-lp .top-career-potential__icon {
  width: 24px;
  height: 24px;
}

.top-lp .top-career-potential__card-title {
  font-size: 1.05rem;
  margin: 0 0 8px;
  font-weight: 800;
}

.top-lp .top-career-potential__card-text {
  margin: 0;
  line-height: 1.8;
  color: inherit;
  opacity: 0.92;
}

/* ---- Bridge ---- */
.top-lp .top-bridge {
  padding: 0;
  background: #fff;
}

.top-lp .top-bridge__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.top-lp .top-bridge__image-container {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.top-lp .top-bridge__image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .top-lp .top-bridge__image { height: 320px; }
}

.top-lp .top-bridge__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
}

.top-lp .top-bridge__content-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.top-lp .top-bridge__title {
  color: #fff;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 900;
  margin: 0;
  text-align: center;
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

@media (min-width: 768px) {
  .top-lp .top-bridge__title { font-size: 2.6rem; }
}

.top-lp .top-bridge__content-below {
  margin-top: 28px;
  text-align: center;
}

.top-lp .top-bridge__lead {
  margin: 0 auto 22px;
  max-width: 900px;
  line-height: 1.9;
  color: var(--color-text, #1a1a1a);
  font-size: 1.05rem;
}

.top-lp .top-bridge__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 18px 0 26px;
}

@media (min-width: 768px) {
  .top-lp .top-bridge__points {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

.top-lp .top-bridge__point {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  text-align: left;
}

.top-lp .top-bridge__check-icon {
  width: 22px;
  height: 22px;
  color: var(--color-accent, #E39B2F);
}

.top-lp .top-bridge__point-text {
  margin: 0;
  line-height: 1.7;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}

.top-lp .top-bridge__cta-button {
  display: inline-block;
  background: var(--color-accent, #E39B2F);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
}

.top-lp .top-bridge__cta-button:hover {
  opacity: 0.92;
}

/* ---- Reskilling Explanation ---- */
/* ここは長いので、最低限 “余白とコンテナ” だけ定義（必要なら後で増やす） */
.top-lp .top-reskilling-explanation {
  padding: 80px 0;
  background: #fff;
}

.top-lp .top-reskilling-explanation__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
/* ---- Reskilling Explanation: comparison + CTA ---- */
.top-lp .top-reskilling-explanation__comparison{
  display:grid;
  gap:16px;
  margin-top:28px;
}
@media(min-width:768px){
  .top-lp .top-reskilling-explanation__comparison{ grid-template-columns: 1fr 1fr; }
}

.top-lp .top-reskilling-explanation__comparison-item{
  border-radius:14px;
  padding:20px;
  border:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

.top-lp .top-reskilling-explanation__comparison-item--failure{
  border-left:6px solid #ef4444;
}
.top-lp .top-reskilling-explanation__comparison-item--success{
  border-left:6px solid #22c55e;
}

.top-lp .top-reskilling-explanation__comparison-header{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.top-lp .top-reskilling-explanation__comparison-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:10px;
}
.top-lp .top-reskilling-explanation__comparison-icon--failure{ background: rgba(239,68,68,0.12); }
.top-lp .top-reskilling-explanation__comparison-icon--success{ background: rgba(34,197,94,0.12); }

.top-lp .top-reskilling-explanation__comparison-title{ margin:0; font-weight:800; }
.top-lp .top-reskilling-explanation__comparison-intro{ margin:0 0 10px; color:var(--color-text-light,#4a5568); }

.top-lp .top-reskilling-explanation__comparison-list{
  margin:0; padding-left:0;
  list-style:none;
  display:flex; flex-direction:column; gap:8px;
}
.top-lp .top-reskilling-explanation__comparison-list-item{ display:flex; gap:10px; align-items:flex-start; }
.top-lp .top-reskilling-explanation__comparison-marker{ font-weight:900; width:1.2em; flex:0 0 auto; }
.top-lp .top-reskilling-explanation__comparison-marker--failure{ color:#ef4444; }
.top-lp .top-reskilling-explanation__comparison-marker--success{ color:#22c55e; }

.top-lp .top-reskilling-explanation__comparison-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#f9fafb;
  border:1px solid #eef2f7;
}
.top-lp .top-reskilling-explanation__comparison-note--failure{ background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.15); }
.top-lp .top-reskilling-explanation__comparison-note--success{ background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.15); }

.top-lp .top-reskilling-explanation__cta-box{
  margin-top:28px;
  padding:22px;
  border-radius:16px;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
  border:1px solid #e5e7eb;
}
.top-lp .top-reskilling-explanation__cta-list{
  list-style:none;
  padding-left:0;
  margin:10px 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.top-lp .top-reskilling-explanation__cta-list-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.top-lp .top-reskilling-explanation__cta-marker{
  font-weight:900;
  color: var(--color-accent,#E39B2F);
}
.top-lp .top-reskilling-explanation__cta-button{
  display:inline-block;
  background: var(--color-accent,#E39B2F);
  color:#fff;
  padding:14px 22px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
}
.top-lp .top-reskilling-explanation__cta-button:hover{ opacity:0.92; }

/* =========================================================
   FIX: LP内のSVGアイコンが巨大になる問題を強制的に止める
   ・原因がどのCSSでも、LP(.top-lp)内だけ確実に固定
   ========================================================= */

/* まずはLP内のSVGの暴走を止血（共通） */
.top-lp svg {
  max-width: 100% !important;
  height: auto;
}

/* 1) チェックマーク系（リスト/ポイント用） */
.top-lp .top-bridge__check-icon,
.top-lp .top-reskilling-explanation__check-icon,
.top-lp .top-reskilling-explanation__hero-check {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: inline-block;
  vertical-align: middle;
}

/* 2) 比較セクションの丸アイコン（注意/成功/失敗など） */
.top-lp .top-reskilling-explanation__icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-block;
  vertical-align: middle;
}

/* 3) Career Potential のカード内アイコン（カバン・円など） */
.top-lp .top-career-potential__icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  display: inline-block;
  vertical-align: middle;
}

/* 4) アイコンを包む要素がある場合の保険（中央寄せ/はみ出し防止） */
.top-lp .top-career-potential__card-icon,
.top-lp .top-bridge__point-icon,
.top-lp .top-reskilling-explanation__box-icon,
.top-lp .top-reskilling-explanation__comparison-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 5) もし "svg { width:1em; height:1em; }" みたいな指定に負けるならここで上書き */
.top-lp .top-career-potential__card-icon svg,
.top-lp .top-bridge__point-icon svg,
.top-lp .top-reskilling-explanation__box-icon svg,
.top-lp .top-reskilling-explanation__comparison-icon svg {
  width: inherit !important;
  height: inherit !important;
}

/* =========================
   Top LP - Common helpers (Part2)
   追記運用OK：必要ならこの塊ごと下に追加
========================= */

.top-lp img {
  max-width: 100%;
  height: auto;
  display: block;
}

.top-lp .top-learning-flow__container,
.top-lp .top-certificate__container,
.top-lp .top-career-vision__container,
.top-lp .top-testimonials__container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* =========================
   08-learning-flow
========================= */
.top-lp .top-learning-flow {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}

.top-lp .top-learning-flow__bg-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.top-lp .top-learning-flow__circle {
  position: absolute;
  border-radius: 9999px;
  filter: blur(0px);
  opacity: 0.25;
}

.top-lp .top-learning-flow__circle--blue {
  width: 360px;
  height: 360px;
  left: -120px;
  top: -120px;
}

.top-lp .top-learning-flow__circle--orange {
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: -160px;
}

.top-lp .top-learning-flow__header {
  position: relative;
  margin-bottom: 40px;
}

.top-lp .top-learning-flow__badge {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 12px;
}

.top-lp .top-learning-flow__title {
  margin: 0 0 12px;
}

.top-lp .top-learning-flow__steps {
  position: relative;
}

.top-lp .top-learning-flow__step {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: center;
  margin: 24px 0;
}

.top-lp .top-learning-flow__step--reverse {
  grid-template-columns: 1.2fr 1fr;
}

.top-lp .top-learning-flow__step--reverse .top-learning-flow__step-image {
  order: 2;
}
.top-lp .top-learning-flow__step--reverse .top-learning-flow__step-content {
  order: 1;
}

.top-lp .top-learning-flow__step-image img {
  width: 100%;
  border-radius: 16px;
}

.top-lp .top-learning-flow__step-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.top-lp .top-learning-flow__step-number {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: 0 0 auto;
}

.top-lp .top-learning-flow__problem,
.top-lp .top-learning-flow__solution {
  padding: 12px 14px;
  border-radius: 12px;
  margin: 10px 0;
}

.top-lp .top-learning-flow__problem-label,
.top-lp .top-learning-flow__solution-label {
  font-weight: 800;
  margin: 0 0 4px;
}

.top-lp .top-learning-flow__problem-text,
.top-lp .top-learning-flow__solution-text {
  margin: 0;
}

.top-lp .top-learning-flow__arrow {
  text-align: center;
  font-weight: 800;
  margin: 8px 0;
}

.top-lp .top-learning-flow__cta {
  margin-top: 40px;
  padding: 24px;
  border-radius: 16px;
}

.top-lp a.top-learning-flow__cta-button {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 9999px;
  font-weight: 800;
  text-decoration: none;
}

/* =========================
   09-certificate
========================= */
.top-lp .top-certificate {
  padding: 72px 0;
}

.top-lp .top-certificate__content {
  position: relative;
  margin-top: 24px;
}

.top-lp .top-certificate__inner {
  position: relative;
  padding: 28px;
  border-radius: 16px;
}

.top-lp .top-certificate__benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.top-lp .top-certificate__example {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
}

/* =========================
   10-career-vision
========================= */
.top-lp .top-career-vision {
  padding: 72px 0;
}

.top-lp .top-career-vision__block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
  margin-top: 28px;
}

.top-lp .top-career-vision__image img {
  width: 100%;
  border-radius: 16px;
}

.top-lp .top-career-vision__cta {
  margin-top: 26px;
}

.top-lp a.top-career-vision__cta-button {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 18px;
  border-radius: 9999px;
  font-weight: 800;
  text-decoration: none;
}

/* =========================
   11-testimonials
========================= */
.top-lp .top-testimonials {
  padding: 72px 0;
}

.top-lp .top-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.top-lp .top-testimonials__card {
  border-radius: 16px;
  padding: 18px;
}

.top-lp .top-testimonials__card-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.top-lp .top-testimonials__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  object-fit: cover;
}

.top-lp .top-testimonials__summary p {
  margin: 6px 0;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px) {
  .top-lp .top-learning-flow__step,
  .top-lp .top-learning-flow__step--reverse,
  .top-lp .top-career-vision__block {
    grid-template-columns: 1fr;
  }

  .top-lp .top-learning-flow__step--reverse .top-learning-flow__step-image,
  .top-lp .top-learning-flow__step--reverse .top-learning-flow__step-content {
    order: initial;
  }

  .top-lp .top-certificate__benefits {
    grid-template-columns: 1fr;
  }

  .top-lp .top-testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Top LP SVG ICON FIX (再止血)
   必ず style.css の最下部へ
========================= */

.top-lp svg {
  width: 1em !important;
  height: 1em !important;
}

.top-lp svg[width],
.top-lp svg[height] {
  width: 1em !important;
  height: 1em !important;
}

.top-lp svg:not([class*="top-why__decoration-svg"]) {
  max-width: 1em !important;
  max-height: 1em !important;
}

/* =========================
   Top LP - 見た目の最低限復元（カード/余白）
   必ず style.css の最下部へ
========================= */

.top-lp section {
  padding: 72px 0;
}

.top-lp .l-container,
.top-lp [class$="__container"] {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* よくあるカード見た目の下支え（必要最低限） */
.top-lp [class*="__card"],
.top-lp [class*="__block"],
.top-lp [class*="__benefit"],
.top-lp [class*="__step-content"],
.top-lp [class*="__inner"] {
  border-radius: 16px;
}

/* 画像が崩れて “見た目が消えた感” を防ぐ */
.top-lp img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   Career Potential: follow-up block
========================= */
.top-lp .top-career-potential-followup {
  margin-top: 28px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
  border: 1px solid #e5e7eb;
}

.top-lp .top-career-potential-followup__lead {
  margin: 0 0 16px;
  line-height: 1.9;
  color: var(--color-text, #1a1a1a);
  font-weight: 800;
}

.top-lp .top-career-potential-followup__points {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .top-lp .top-career-potential-followup__points {
    grid-template-columns: repeat(3, 1fr);
  }
}

.top-lp .top-career-potential-followup__point {
  padding: 14px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eef2f7;
  line-height: 1.8;
  font-weight: 700;
}

.top-lp .top-career-potential-followup__cta {
  margin-top: 16px;
}

.top-lp a.top-career-potential-followup__button {
  display: inline-block;
  background: var(--color-accent, #E39B2F);
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
}

.top-lp a.top-career-potential-followup__button:hover {
  opacity: 0.92;
}

/* ========================================
   Reskilling Explanation Section
   ======================================== */

.top-lp .top-reskilling-explanation {
  position: relative;
  padding: 8rem 0;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
  overflow: hidden;
}

.top-lp .top-reskilling-explanation__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- Header ---------- */
.top-lp .top-reskilling-explanation__header {
  text-align: center;
  margin-bottom: 5rem;
}

.top-lp .top-reskilling-explanation__badge {
  display: inline-block;
  color: #E39B2F;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.top-lp .top-reskilling-explanation__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #002447;
  line-height: 1.3;
  max-width: 56rem;
  margin: 0 auto 2rem;
}

.top-lp .top-reskilling-explanation__intro {
  max-width: 48rem;
  margin: 0 auto;
  color: #374151;
  line-height: 1.8;
}

/* ---------- Warning Box ---------- */
.top-lp .top-reskilling-explanation__box {
  background: #ffffff;
  border-left: 5px solid #E39B2F;
  padding: 2.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin: 5rem auto;
  max-width: 900px;
}

/* ---------- Comparison ---------- */
.top-lp .top-reskilling-explanation__comparison {
  display: grid;
  gap: 2rem;
  margin: 6rem 0;
}

@media (min-width: 768px) {
  .top-lp .top-reskilling-explanation__comparison {
    grid-template-columns: 1fr 1fr;
  }
}

.top-lp .top-reskilling-explanation__comparison-item {
  background: #ffffff;
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.top-lp .top-reskilling-explanation__comparison-item--failure {
  border-top: 4px solid #ef4444;
}

.top-lp .top-reskilling-explanation__comparison-item--success {
  border-top: 4px solid #10b981;
}

/* ---------- CTA ---------- */
.top-lp .top-reskilling-explanation__cta-box {
  background: linear-gradient(135deg, #002447, #005bab);
  color: #ffffff;
  padding: 4rem 2rem;
  border-radius: 1.5rem;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

.top-lp .top-reskilling-explanation__cta-button {
  display: inline-block;
  margin-top: 2rem;
  background: #E39B2F;
  color: #ffffff;
  padding: 1rem 2.5rem;
  border-radius: 0.75rem;
  font-weight: 700;
  transition: transform 0.2s;
}

.top-lp .top-reskilling-explanation__cta-button:hover {
  transform: translateY(-3px);
}
/* ========================================
   Reskilling Explanation: blocks + hero-box（特別感版）
   ※LP内のみ
======================================== */

/* intro（段落間の余白＋強調を上品に） */
.top-lp .top-reskilling-explanation__intro{
  margin-top: 18px;
}
.top-lp .top-reskilling-explanation__intro-text{
  margin: 0 0 16px;
  line-height: 1.95;
  color: rgba(26,26,26,0.88);
  font-size: 1.05rem;
}
.top-lp .top-reskilling-explanation__intro-text:last-child{ margin-bottom: 0; }
.top-lp .top-reskilling-explanation__intro-highlight{
  font-weight: 900;
  color: var(--color-primary-darker, #002447);
  background: linear-gradient(transparent 70%, rgba(227,155,47,0.22) 0);
  padding: 0 0.15em;
}

/* 3ブロック：カードっぽさを減らして “特集の小見出し” に寄せる */
.top-lp .top-reskilling-explanation__blocks{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 40px;
  padding: 28px 22px;
  border-radius: 18px;
  background: linear-gradient(to bottom, rgba(0,36,71,0.04), rgba(0,91,171,0.02));
  border: 1px solid rgba(0,36,71,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* うっすら装飾（“特別感”の正体：情報量ではなく空気感） */
.top-lp .top-reskilling-explanation__blocks::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,91,171,0.12), transparent 52%),
    radial-gradient(circle at 85% 70%, rgba(227,155,47,0.14), transparent 55%);
  pointer-events:none;
}

@media (min-width: 768px){
  .top-lp .top-reskilling-explanation__blocks{
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 34px 30px;
  }
}

.top-lp .top-reskilling-explanation__block{
  position: relative;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,36,71,0.10);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  backdrop-filter: blur(6px);
}

.top-lp .top-reskilling-explanation__block-title{
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--color-primary-darker, #002447);
}

.top-lp .top-reskilling-explanation__block-title::after{
  content:"";
  display:block;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--color-accent,#E39B2F), rgba(0,91,171,0.55));
  opacity: 0.9;
}

.top-lp .top-reskilling-explanation__block-text{
  margin: 0;
  line-height: 1.95;
  color: rgba(26,26,26,0.86);
}

/* 下のヒーローボックス：ゆったり・高級感（余白 + 控えめな光） */
.top-lp .top-reskilling-explanation__hero-box{
  position: relative;
  margin-top: 36px;
  border-radius: 22px;
  padding: 34px 24px;
  background: linear-gradient(135deg, #001a33, #002447 55%, #003d82);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,0.18);
  overflow: hidden;
}

/* うっすら光沢 */
.top-lp .top-reskilling-explanation__hero-box::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(227,155,47,0.18), transparent 60%);
  pointer-events:none;
}

@media (min-width: 768px){
  .top-lp .top-reskilling-explanation__hero-box{
    padding: 44px 40px;
  }
}

.top-lp .top-reskilling-explanation__hero-badge{
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  margin-bottom: 14px;
}

.top-lp .top-reskilling-explanation__hero-title{
  margin: 0 0 14px;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

@media (min-width: 768px){
  .top-lp .top-reskilling-explanation__hero-title{
    font-size: 2.15rem;
  }
}

.top-lp .top-reskilling-explanation__hero-lead{
  margin: 0 0 18px;
  line-height: 1.95;
  opacity: 0.92;
  max-width: 56rem;
}

.top-lp .top-reskilling-explanation__hero-points{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  max-width: 56rem;
}

.top-lp .top-reskilling-explanation__hero-point{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 14px 16px;
  line-height: 1.75;
  font-weight: 800;
}

.top-lp .top-reskilling-explanation__hero-note{
  margin: 18px 0 0;
  line-height: 1.95;
  opacity: 0.95;
  max-width: 56rem;
}

/* FIX: top-why-reskilling のカード内がテキストべたになるのを防ぐ（最小） */
.top-lp .top-why-reskilling__card-text p{
  margin: 0 0 12px;
  line-height: 1.9;
}
.top-lp .top-why-reskilling__card-text p:last-child{
  margin-bottom: 0;
}

/* ========================================
   Why Reskilling Now Section
   ======================================== */
.top-why-reskilling {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
  overflow: hidden;
}

.top-why-reskilling__decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  opacity: 0.05;
  pointer-events: none;
}

.top-why-reskilling__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

.top-why-reskilling__header {
  text-align: center;
  margin-bottom: 4rem;
}

.top-why-reskilling__badge {
  display: inline-block;
  color: #E39B2F;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.top-why-reskilling__title {
  font-size: 2rem;
  font-weight: 700;
  color: #002447;
  margin-bottom: 2rem;
  line-height: 1.3;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .top-why-reskilling__title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .top-why-reskilling__title {
    font-size: 3rem;
  }
}

.top-why-reskilling__content {
  max-width: 56rem;
  margin: 0 auto;
}

.top-why-reskilling__lead {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 3rem;
  color: #1f2937;
}

@media (min-width: 768px) {
  .top-why-reskilling__lead {
    font-size: 1.25rem;
  }
}

.top-why-reskilling__lead p {
  margin-bottom: 1.5rem;
}

.top-why-reskilling__lead p:last-child {
  margin-bottom: 0;
}

.top-why-reskilling__cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.top-why-reskilling__card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #005bab;
}

@media (min-width: 768px) {
  .top-why-reskilling__card {
    padding: 2rem 3rem;
  }
}

.top-why-reskilling__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #002447;
  margin-bottom: 1rem;
}

.top-why-reskilling__card-text {
  color: #4b5563;
  line-height: 1.75;
}

/* ========================================
   Three Core Skills Section
   ======================================== */
.top-core-skills {
  padding: 5rem 0;
  background: #f9fafb;
}

.top-core-skills__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.top-core-skills__header {
  text-align: center;
  margin-bottom: 4rem;
}

.top-core-skills__badge {
  display: inline-block;
  color: #E39B2F;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.top-core-skills__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .top-core-skills__title {
    font-size: 2.5rem;
  }
}

.top-core-skills__subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.75;
}

.top-core-skills__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .top-core-skills__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.top-core-skills__item {
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.top-core-skills__item:hover {
  transform: translateY(-4px);
}

.top-core-skills__item-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  color: #005bab;
}

.top-core-skills__item-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
}

.top-core-skills__item-text {
  color: #6b7280;
  line-height: 1.75;
}

.top-core-skills__venn {
  text-align: center;
  padding: 3rem 0;
}

.top-core-skills__venn-image {
  max-width: 100%;
  height: auto;
}

/* ========================================
   Business Use Cases Section
   ======================================== */
.top-use-cases {
  position: relative;
  padding: 8rem 0;
  background: linear-gradient(135deg, #001a33 0%, #002447 50%, #003d82 100%);
  overflow: hidden;
}

.top-use-cases__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

.top-use-cases__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 91, 171, 0.9) 0%, rgba(0, 36, 71, 0.9) 100%);
}

.top-use-cases__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

.top-use-cases__header {
  text-align: center;
  margin-bottom: 4rem;
  color: #ffffff;
}

.top-use-cases__badge {
  display: inline-block;
  color: #00d4ff;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.top-use-cases__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .top-use-cases__title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .top-use-cases__title {
    font-size: 3rem;
  }
}

.top-use-cases__subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.75;
}

.top-use-cases__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .top-use-cases__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.top-use-cases__item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s;
}

.top-use-cases__item:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.15);
}

.top-use-cases__item-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  color: #00d4ff;
}

.top-use-cases__item-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}

.top-use-cases__item-text {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.top-use-cases__item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-use-cases__item-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.top-use-cases__item-list-item:last-child {
  margin-bottom: 0;
}

.top-use-cases__item-list-icon {
  color: #00d4ff;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* ========================================
   Courses Section
   ======================================== */
.top-courses {
  padding: 5rem 0;
  background: #ffffff;
}

.top-courses__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.top-courses__header {
  text-align: center;
  margin-bottom: 4rem;
}

.top-courses__badge {
  display: inline-block;
  color: #E39B2F;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.top-courses__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .top-courses__title {
    font-size: 2.5rem;
  }
}

.top-courses__subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  max-width: 56rem;
  margin: 0 auto;
  line-height: 1.75;
}

.top-courses__main {
  margin-bottom: 4rem;
}

.top-courses__main-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .top-courses__main-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.top-courses__card {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.2s;
}

.top-courses__card:hover {
  border-color: #005bab;
  box-shadow: 0 4px 12px rgba(0, 91, 171, 0.1);
}

.top-courses__card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
}

.top-courses__card-text {
  color: #6b7280;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.top-courses__card-price-box {
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(0, 91, 171, 0.2);
  margin-bottom: 1.5rem;
}

.top-courses__card-price-note {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.top-courses__card-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: #005bab;
  margin-bottom: 0.25rem;
}

.top-courses__card-price-small {
  font-size: 1.25rem;
  color: #6b7280;
}

.top-courses__card-subsidy {
  font-size: 0.875rem;
  color: #059669;
  font-weight: 600;
}

.top-courses__card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.top-courses__card-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: #374151;
  line-height: 1.5;
}

.top-courses__card-feature:last-child {
  margin-bottom: 0;
}

.top-courses__card-feature-icon {
  color: #005bab;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.top-courses__card-link {
  display: inline-block;
  background: #E39B2F;
  color: #ffffff;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}

.top-courses__card-link:hover {
  background: #d88b1f;
  transform: translateY(-2px);
}

.top-courses__specialized {
  margin-top: 4rem;
}

.top-courses__specialized-header {
  text-align: center;
  margin-bottom: 3rem;
}

.top-courses__specialized-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
}

.top-courses__specialized-text {
  color: #6b7280;
  line-height: 1.75;
}

.top-courses__specialized-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .top-courses__specialized-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.top-courses__specialized-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.2s;
}

.top-courses__specialized-card:hover {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.top-courses__specialized-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

.top-courses__specialized-card-text {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
}
/* =========================================================
   STEP1-2: 無料キャリア相談（FAQ）
   - #e39b30 を主役に
   - 高級感（余白 / 影 / 角丸 / バッジ）
   - ネイビーは控えめに“締め色”
========================================================= */

.top-lp .top-consult{
  padding: 84px 0;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(227,155,48,0.18), transparent 55%),
    radial-gradient(700px 400px at 90% 10%, rgba(0,91,171,0.08), transparent 55%),
    linear-gradient(to bottom, #ffffff, #f9fafb);
}

.top-lp .top-consult__container{
  width: min(1120px, 92%);
  margin: 0 auto;
}

/* Header */
.top-lp .top-consult__header{
  text-align: center;
  margin-bottom: 26px;
}

.top-lp .top-consult__badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: .06em;
  color: #a25e00;
  background: rgba(227,155,48,0.14);
  border: 1px solid rgba(227,155,48,0.35);
  padding: .45rem .9rem;
  border-radius: 999px;
  margin-bottom: 14px;
}

.top-lp .top-consult__badge::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e39b30;
  box-shadow: 0 0 0 4px rgba(227,155,48,0.18);
}

.top-lp .top-consult__title{
  margin: 0 0 10px;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1.25;
  color: #002447;
}

@media (min-width: 768px){
  .top-lp .top-consult__title{ font-size: 2.55rem; }
}

.top-lp .top-consult__lead{
  max-width: 56rem;
  margin: 0 auto;
  color: #475569;
  line-height: 1.95;
}

/* Layout */
.top-lp .top-consult__grid{
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

@media (min-width: 900px){
  .top-lp .top-consult__grid{
    grid-template-columns: 1.55fr 1fr;
    gap: 22px;
    align-items: start;
  }
}

/* Card base */
.top-lp .top-consult__faq,
.top-lp .top-consult__cta{
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.9) inset;
  backdrop-filter: blur(10px);
}

/* FAQ */
.top-lp .top-consult__faq{
  padding: 24px;
}

.top-lp .top-consult__faq-title{
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #002447;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.top-lp .top-consult__faq-title::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e39b30;
}

.top-lp .top-consult__faq-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.top-lp .top-consult__faq-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 14px;
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
  border: 1px solid rgba(226,232,240,0.9);
  line-height: 1.85;
  color: #0f172a;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.top-lp .top-consult__faq-item:hover{
  transform: translateY(-1px);
  border-color: rgba(227,155,48,0.35);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.top-lp .top-consult__faq-q{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #ffffff;
  background: #e39b30;
  box-shadow: 0 10px 22px rgba(227,155,48,0.25);
  margin-top: 1px;
}

/* CTA（オレンジ主役） */
.top-lp .top-consult__cta{
  padding: 24px;
  border: 1px solid rgba(227,155,48,0.35);
  background:
    radial-gradient(900px 450px at 30% 0%, rgba(227,155,48,0.26), transparent 60%),
    linear-gradient(to bottom, #ffffff, #fff7ea);
}

.top-lp .top-consult__cta-lead{
  margin: 0 0 10px;
  font-weight: 900;
  color: #002447;
  font-size: 1.05rem;
}

.top-lp .top-consult__cta-text{
  margin: 0 0 12px;
  line-height: 1.9;
  color: #0f172a;
  font-weight: 700;
}

.top-lp .top-consult__cta-note{
  margin: 0 0 16px;
  font-size: .95rem;
  line-height: 1.85;
  color: #475569;
}

/* Button */
.top-lp .top-consult__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(135deg, #e39b30, #ffb545);
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  box-shadow:
    0 18px 38px rgba(227,155,48,0.28),
    0 1px 0 rgba(255,255,255,0.25) inset;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.top-lp .top-consult__button:hover{
  opacity: .95;
  transform: translateY(-1px);
  box-shadow:
    0 22px 46px rgba(227,155,48,0.34),
    0 1px 0 rgba(255,255,255,0.25) inset;
}

/* Mobile */
@media (max-width: 480px){
  .top-lp .top-consult__faq,
  .top-lp .top-consult__cta{
    padding: 18px;
  }
}
/* =========================================================
   STEP2: Why Reskilling Now 導入強化 + 画像/チェックリスト
   白 / #005bab / #002447 中心（オレンジは最小限の差し色）
   追加するだけ（既存を壊さない）
========================================================= */

.top-lp .top-reskilling-explanation__prelude{
  max-width: 56rem;
  margin: 0 auto 2.75rem;
  padding: 1.5rem 1.6rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 36, 71, 0.12);
  box-shadow: 0 18px 44px rgba(0,0,0,0.06);
}

.top-lp .top-reskilling-explanation__prelude-text{
  margin: 0 0 12px;
  line-height: 2.0;
  color: #0f172a;
  font-weight: 600;
}

.top-lp .top-reskilling-explanation__prelude-text:last-child{
  margin-bottom: 0;
}

/* "前提条件" の強調：ネイビー寄り＋下線っぽいハイライト */
.top-lp .top-reskilling-explanation__prelude-accent{
  color: #002447;
  background: linear-gradient(transparent 62%, rgba(0, 91, 171, 0.16) 62%);
  padding: 0.1em 0.2em;
  border-radius: 6px;
  font-weight: 900;
}

/* 画像 + チェック */
.top-lp .top-reskilling-explanation__shift{
  margin: 0 auto 3.25rem;
  max-width: 1100px;
}

.top-lp .top-reskilling-explanation__shift-grid{
  display: grid;
  gap: 18px;
  align-items: center;
}

@media (min-width: 900px){
  .top-lp .top-reskilling-explanation__shift-grid{
    grid-template-columns: 1.15fr 1fr;
    gap: 26px;
  }
}

.top-lp .top-reskilling-explanation__shift-image{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 56px rgba(0,0,0,0.12);
  border: 1px solid rgba(0, 36, 71, 0.12);
  background: #fff;
}

.top-lp .top-reskilling-explanation__shift-image img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px){
  .top-lp .top-reskilling-explanation__shift-image img{ height: 280px; }
}

.top-lp .top-reskilling-explanation__shift-body{
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 36, 71, 0.12);
  box-shadow: 0 20px 46px rgba(0,0,0,0.07);
  padding: 22px;
}

/* ラベル：青系に */
.top-lp .top-reskilling-explanation__shift-label{
  display: inline-block;
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: .06em;
  color: #005bab;
  background: rgba(0, 91, 171, 0.10);
  border: 1px solid rgba(0, 91, 171, 0.22);
  padding: .42rem .9rem;
  border-radius: 999px;
  margin-bottom: 12px;
}

.top-lp .top-reskilling-explanation__shift-title{
  margin: 0 0 10px;
  font-size: 1.45rem;
  font-weight: 900;
  color: #002447;
  line-height: 1.35;
}

.top-lp .top-reskilling-explanation__shift-lead{
  margin: 0 0 12px;
  color: #475569;
  line-height: 1.9;
  font-weight: 600;
}

.top-lp .top-reskilling-explanation__shift-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* リストカードも青系の“端正”な雰囲気 */
.top-lp .top-reskilling-explanation__shift-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: linear-gradient(to bottom, #ffffff, #f6f9ff);
  border: 1px solid rgba(0, 91, 171, 0.14);
  line-height: 1.85;
  color: #0f172a;
  font-weight: 700;
}

/* チェック：基本は青。オレンジは“少しだけ”発色させたいのでリングで使う */
.top-lp .top-reskilling-explanation__shift-check{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #005bab;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0, 91, 171, 0.25);
  margin-top: 2px;
  outline: 2px solid rgba(227, 155, 48, 0.25); /* オレンジは“縁”だけ */
  outline-offset: 0;
}

/* ノート：青系で締める（オレンジは使わない） */
.top-lp .top-reskilling-explanation__shift-note{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(0, 36, 71, 0.05);
  border: 1px solid rgba(0, 36, 71, 0.14);
  line-height: 1.9;
  color: #002447;
  font-weight: 700;
}

/* =========================================================
   STEP2（調整）: 写真を大きく / フラット化（影を減らす）
   ※既存のSTEP2の下に「追記」推奨
========================================================= */

/* 1) Preludeもフラットに（影・濃い枠を弱める） */
.top-lp .top-reskilling-explanation__prelude{
  box-shadow: none;
  border: 1px solid rgba(0, 36, 71, 0.10);
}

/* 2) 全体の立体感を減らす（画像枠・本文枠の影を消す） */
.top-lp .top-reskilling-explanation__shift-image,
.top-lp .top-reskilling-explanation__shift-body{
  box-shadow: none;
  border: 1px solid rgba(0, 36, 71, 0.10);
}

/* 3) 写真を大きく：高さUP＋画面幅に応じてさらに伸ばす */
.top-lp .top-reskilling-explanation__shift-image img{
  height: 560px;              /* ← 大きく */
}

@media (max-width: 1024px){
  .top-lp .top-reskilling-explanation__shift-image img{
    height: 480px;
  }
}
@media (max-width: 768px){
  .top-lp .top-reskilling-explanation__shift-image img{
    height: 360px;            /* モバイルでも大きめ */
  }
}

/* 4) レイアウトも“写真優先”に：左をより大きく */
@media (min-width: 900px){
  .top-lp .top-reskilling-explanation__shift-grid{
    grid-template-columns: 1.35fr 0.85fr; /* ← 写真を太らせる */
    gap: 24px;
    align-items: start;
  }
}

/* 5) 要素のフラット化：リストも影なし・グラデなしに */
.top-lp .top-reskilling-explanation__shift-item{
  background: #ffffff;
  border: 1px solid rgba(0, 91, 171, 0.12);
}

/* 6) チェックもフラットに（影なし、リングも薄く） */
.top-lp .top-reskilling-explanation__shift-check{
  box-shadow: none;
  outline: 1px solid rgba(0, 91, 171, 0.20);
}

/* 7) ノートもフラットに */
.top-lp .top-reskilling-explanation__shift-note{
  background: rgba(0, 91, 171, 0.06);
  border: 1px solid rgba(0, 91, 171, 0.14);
}

/* =========================================================
   STEP3: LP全体をフラット化（影・グラデ・強い境界を抑える）
   ※style.css 最下部に追記
========================================================= */

/* 3) 角丸を少し控えめに（フラット寄り） */
.top-lp [class*="__card"],
.top-lp [class*="__box"],
.top-lp [class*="__inner"],
.top-lp [class*="__item"],
.top-lp [class*="__block"] {
  border-radius: 14px !important;
}

/* 4) “グラデ背景”の主張を弱めたい箱は白基調へ（必要な分だけ対象追加OK） */
.top-lp .top-reskilling-explanation__prelude,
.top-lp .top-career-potential-followup,
.top-lp .top-reskilling-summary__cta-box {
  background: #fff !important;
}

/* 5) ボタンはそのまま主役（青×オレンジ） */
.top-lp a.top-btn-primary,
.top-lp .top-hero__cta,
.top-lp .top-career-potential__button,
.top-lp .top-bridge__cta-button,
.top-lp .top-reskilling-explanation__cta-button {
  box-shadow: none !important;
}

/* =========================================================
   FIX: top-consult（HTMLに合わせてCSSを噛み合わせる）
   ・HTMLは top-consult__body / top-consult__q を使用
   ・既存STEP1-2を壊さず、差分だけ上書き
========================================================= */

/* レイアウト：__body を grid として扱う */
.top-lp .top-consult__body{
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

@media (min-width: 900px){
  .top-lp .top-consult__body{
    grid-template-columns: 1.55fr 1fr;
    gap: 22px;
    align-items: start;
  }
}

/* Qバッジ：HTMLは __q なのでここに当てる */
.top-lp .top-consult__q{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #ffffff;
  background: var(--color-accent, #E39B2F);
  margin-top: 1px;
}

/* 既存CSSの __faq-q は不要なので影響を消す（保険） */
.top-lp .top-consult__faq-q{ display:none !important; }

/* =========================================================
   HOTFIX: フラット化CSSの副作用を「該当セクションだけ」復元
   ・対象：Reskilling Explanation（評価軸/DX/共通言語）/ Why Reskilling Now（失敗/成功）
   ・他セクション（講座紹介など）には影響しないよう、セクタを限定
========================================================= */

/* -----------------------------------------
   A) 評価軸/DX/共通言語（Reskilling Explanation の3ブロック）
----------------------------------------- */
.top-lp .top-reskilling-explanation .top-reskilling-explanation__blocks{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.top-lp .top-reskilling-explanation .top-reskilling-explanation__block{
  background: #ffffff !important;
  border: 1px solid rgba(0, 36, 71, 0.10) !important;
  border-left: 4px solid #005bab !important; /* 色を戻す */
  border-radius: 14px !important;
  padding: 20px 18px !important;
}

.top-lp .top-reskilling-explanation .top-reskilling-explanation__block-title{
  color: #002447 !important;
  font-weight: 900 !important;
  margin: 0 0 10px !important;
}

.top-lp .top-reskilling-explanation .top-reskilling-explanation__block-text{
  color: #1a1a1a !important;
  line-height: 1.95 !important;
  margin: 0 !important;
}

/* -----------------------------------------
   B) 失敗/成功（Why Reskilling Now の2カード）
----------------------------------------- */
.top-lp .top-why-reskilling .top-why-reskilling__cards{
  display: grid !important;
  gap: 16px !important;
}

@media (min-width: 768px){
  .top-lp .top-why-reskilling .top-why-reskilling__cards{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* カードの“色”とアクセントを復元（影は付けずフラット） */
.top-lp .top-why-reskilling .top-why-reskilling__card{
  background: #ffffff !important;
  border: 1px solid rgba(0, 36, 71, 0.10) !important;
  border-left-width: 6px !important;
  border-radius: 14px !important;
  box-shadow: none !important; /* フラット維持 */
}

/* 左：失敗カード（×は赤） */
.top-lp .top-why-reskilling .top-why-reskilling__card:first-child{
  border-left-color: #ef4444 !important;
}

/* 右：成功カード（✓は緑） */
.top-lp .top-why-reskilling .top-why-reskilling__card:last-child{
  border-left-color: #10b981 !important;
}

/* タイトル色を戻す */
.top-lp .top-why-reskilling .top-why-reskilling__card-title{
  color: #002447 !important;
  font-weight: 900 !important;
}

/* 本文の読みやすさ */
.top-lp .top-why-reskilling .top-why-reskilling__card-text{
  color: #1a1a1a !important;
  line-height: 1.95 !important;
}

/* リスト内の「✕ / ✓」だけ色を付ける（HTMLが aria-hidden のspanになっている前提） */
.top-lp .top-why-reskilling .top-why-reskilling__card:first-child .top-why-reskilling__card-text span[aria-hidden="true"]{
  color: #ef4444 !important;
  font-weight: 900 !important;
}

.top-lp .top-why-reskilling .top-why-reskilling__card:last-child .top-why-reskilling__card-text span[aria-hidden="true"]{
  color: #10b981 !important;
  font-weight: 900 !important;
}

/* =========================================
   FIX: 失敗/成功カード内の「四角の中の四角」感を消す
   （内側の枠線・背景をフラット化）
========================================= */

/* 失敗/成功カード内の各行（li）の枠線や背景を消す */
.top-lp .top-why-reskilling .top-why-reskilling__card ul li{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

/* 最後の行だけ余白を消す */
.top-lp .top-why-reskilling .top-why-reskilling__card ul li:last-child{
  margin-bottom: 0 !important;
}

/* =========================================================
   PATCH: V0 HTML と「もらったCSS」を一致させる
   - 影響範囲：.top-lp 内のみ
   - 目的：
     1) containerを top-container 扱いにする
     2) label/badge、grid/card 等 “クラス違い” を吸収
     3) 例の「薄いグリッド/枠線」だけ確実に消す（この4セクション限定）
========================================================= */

/* --- 0) コンテナ合わせ（V0は __container） --- */
.top-lp .top-reskilling-summary__container,
.top-lp .top-core-skills__container,
.top-lp .top-use-cases__container,
.top-lp .top-courses__container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width:768px){
  .top-lp .top-reskilling-summary__container,
  .top-lp .top-core-skills__container,
  .top-lp .top-use-cases__container,
  .top-lp .top-courses__container{
    padding: 0 1.5rem;
  }
}

/* --- 1) Reskilling Summary：badge/blocks版→V0のlabel/comparison/ctaに対応 --- */
.top-lp .top-reskilling-summary__label{
  display:inline-block;
  color: var(--color-accent);
  font-weight:700;
  font-size:.875rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:1rem;
}

/* 比較カード（V0: comparison-item）を、blocksの見た目に寄せる */
.top-lp .top-reskilling-summary__comparison{
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px){
  .top-lp .top-reskilling-summary__comparison{
    grid-template-columns: 1fr 1fr;
  }
}

.top-lp .top-reskilling-summary__comparison-item{
  background: var(--color-white);
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

/* fail/successのアクセント */
.top-lp .top-reskilling-summary__comparison-item--fail{
  border-left: 4px solid var(--color-accent);
}
.top-lp .top-reskilling-summary__comparison-item--success{
  border-left: 4px solid var(--color-primary);
}

.top-lp .top-reskilling-summary__comparison-title{
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 1rem;
}

/* リスト（余計な枠線を出さない） */
.top-lp .top-reskilling-summary__comparison-list{
  margin:0;
  padding-left: 1.1rem;
  color: var(--color-gray-700);
  line-height: 1.75;
}

/* CTA */
.top-lp .top-reskilling-summary__cta{
  max-width: 64rem;
  margin: 2rem auto 0;
  text-align: center;
}
.top-lp .top-reskilling-summary__cta-button{
  display:inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: .5rem;
  font-weight:700;
  text-decoration:none;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(227,155,47,.22);
}
.top-lp .top-reskilling-summary__cta-button:hover{
  background:#d88b1f;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(227,155,47,.28);
}

/* --- 2) Core Skills：V0の skill → もらったCSSの card に寄せる --- */
.top-lp .top-core-skills__label{
  display:inline-block;
  color: var(--color-accent);
  font-weight:700;
  font-size:.875rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:1rem;
}

/* V0: skill を card と同等に */
.top-lp .top-core-skills__skill{
  background: var(--color-white);
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  text-align: center;
}

/* SVGが 1em固定にされてても、ここだけ適正サイズへ */
.top-lp .top-core-skills__icon{
  width: 2rem !important;
  height: 2rem !important;
}
.top-lp .top-core-skills__skill-icon{
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  display:grid;
  place-items:center;
  color: var(--color-primary);
}
.top-lp .top-core-skills__skill-title{
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 1rem;
}
.top-lp .top-core-skills__skill-text{
  color: var(--color-gray-600);
  line-height: 1.75;
  margin: 0;
}
.top-lp .top-core-skills__venn{
  text-align:center;
  margin-top: 2rem;
}
.top-lp .top-core-skills__venn-text{
  color: var(--color-gray-600);
  line-height: 1.75;
  margin: 0;
}

/* --- 3) Use Cases：V0の case → もらったCSSの card に寄せる --- */
.top-lp .top-use-cases__label{
  display:inline-block;
  color: var(--color-accent);
  font-weight:700;
  font-size:.875rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:1rem;
}
.top-lp .top-use-cases__case{
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
}
.top-lp .top-use-cases__icon{
  width: 1.75rem !important;
  height: 1.75rem !important;
}
.top-lp .top-use-cases__case-title{
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.top-lp .top-use-cases__case-list{
  margin: 1rem 0 0;
  padding-left: 1.1rem;
}
.top-lp .top-use-cases__case-list-item{
  color: rgba(255,255,255,0.85);
  line-height: 1.75;
}
.top-lp .top-use-cases__case-list-item strong{
  color:#fff;
  font-weight:700;
}

/* --- 4) Courses：V0の course/industry-course を card として整える --- */
.top-lp .top-courses__main-courses{
  display:grid;
  gap: 3rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width:1024px){
  .top-lp .top-courses__main-courses{
    grid-template-columns: repeat(2,1fr);
  }
}

/* V0: course を card化 */
.top-lp .top-courses__course{
  background: var(--color-white);
  border: 2px solid var(--color-gray-100);
  border-radius: 1rem;
  padding: 2rem;
  transition: all .3s ease;
}
@media (min-width:768px){
  .top-lp .top-courses__course{ padding: 3rem; }
}
.top-lp .top-courses__course:hover{
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px rgba(0,91,171,.10);
}

/* おすすめバッジ */
.top-lp .top-courses__course-badge{
  display:inline-block;
  background: var(--color-accent);
  color:#fff;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-weight:700;
  font-size:.875rem;
  margin-bottom: 1rem;
}

/* price box */
.top-lp .top-courses__course-price-box{
  background: linear-gradient(to bottom right, #eff6ff, #e0e7ff);
  padding: 1.5rem;
  border-radius: .75rem;
  border: 2px solid rgba(0,91,171,0.2);
  margin-top: 1.5rem;
}
.top-lp .top-courses__course-note{
  font-size:.75rem;
  color: var(--color-gray-600);
  line-height: 1.5;
  margin: 0 0 .75rem;
}
.top-lp .top-courses__course-price{
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 .25rem;
}
@media (min-width:768px){
  .top-lp .top-courses__course-price{ font-size: 3rem; }
}
.top-lp .top-courses__course-price-tax{
  font-size: 1.25rem;
  color: var(--color-gray-600);
}
.top-lp .top-courses__course-subsidy{
  font-size: .875rem;
  color: var(--color-gray-600);
  margin: 0 0 1rem;
}
.top-lp .top-courses__course-button{
  display:inline-block;
  background: var(--color-accent);
  color:#fff;
  padding: .9rem 1.6rem;
  border-radius:.5rem;
  font-weight:700;
  text-decoration:none;
}

/* 業界特化：V0は industry-header / industry-courses / industry-course */
.top-lp .top-courses__industry-header{
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--color-gray-100);
  text-align:center;
}
.top-lp .top-courses__industry-courses{
  display:grid;
  gap: 2rem;
  max-width: 80rem;
  margin: 2rem auto 0;
}
@media (min-width:768px){
  .top-lp .top-courses__industry-courses{
    grid-template-columns: repeat(3,1fr);
  }
}
.top-lp .top-courses__industry-course{
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: .75rem;
  padding: 1.5rem;
}
.top-lp .top-courses__icon{
  width: 1.5rem !important;
  height: 1.5rem !important;
}

/* =========================================================
   5) “薄いグリッド/枠線” をこの4セクションだけ確実に消す
   ※他セクションには触らない
========================================================= */
.top-lp .top-reskilling-summary,
.top-lp .top-core-skills,
.top-lp .top-use-cases,
.top-lp .top-courses{
  background-image: none !important;
}
.top-lp .top-reskilling-summary * ,
.top-lp .top-core-skills * ,
.top-lp .top-use-cases * ,
.top-lp .top-courses * {
  outline: none !important;
}
.top-lp .top-reskilling-summary [class*="__price-box"],
.top-lp .top-courses [class*="__price-box"]{
  box-shadow: none !important;
}
/* =========================================================
   FIX: Business Use Cases が白背景/白文字になったのを復元（LP内のみ）
   style.css の最下部に追記
========================================================= */
.top-lp .top-use-cases{
  background: linear-gradient(to bottom right, #001a33, #002447, #003d82) !important;
  color: #fff;
}

.top-lp .top-use-cases__label,
.top-lp .top-use-cases__title,
.top-lp .top-use-cases__subtitle{
  color: #fff !important;
}

.top-lp .top-use-cases__subtitle{
  opacity: .9;
}

.top-lp .top-use-cases__case{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.top-lp .top-use-cases__case-title{
  color: #fff !important;
}

.top-lp .top-use-cases__case-list{
  color: rgba(255,255,255,0.88) !important;
}

.top-lp .top-use-cases__case-list-item strong{
  color: #fff !important;
}


/* ===========================
   Mentor Support
   =========================== */

.top-mentor-support{
  padding: 80px 0;
  background: #ffffff;
}

.top-mentor-support__container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.top-mentor-support__header{
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.top-mentor-support__title{
  font-size: 36px;
  font-weight: 700;
  color: #005bab;
  margin: 0 0 12px;
  line-height: 1.2;
}

.top-mentor-support__subtitle{
  font-size: 18px;
  color: #4a5568;
  margin: 0;
  line-height: 1.6;
}

.top-mentor-support__highlight{
  background: #f0f7ff;
  border: 1px solid rgba(0, 91, 171, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 220px;
  text-align: center;
}

.top-mentor-support__highlight-label{
  font-size: 14px;
  color: #4a5568;
  margin: 0 0 6px;
}

.top-mentor-support__highlight-value{
  font-size: 24px;
  font-weight: 800;
  color: #005bab;
  margin: 0 0 6px;
}

.top-mentor-support__highlight-note{
  font-size: 12px;
  color: #718096;
  margin: 0;
}

.top-mentor-support__problem-solution{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}

.top-mentor-support__image img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.top-mentor-support__heading{
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
}

.top-mentor-support__description{
  font-size: 16px;
  color: #4a5568;
  line-height: 1.8;
  margin: 0;
}

.top-mentor-support__features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.top-mentor-support__feature{
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  background: #ffffff;
}

.top-mentor-support__feature-icon{
  font-size: 28px;
  margin-bottom: 12px;
}

.top-mentor-support__feature-title{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1a1a1a;
}

.top-mentor-support__feature-text{
  font-size: 14px;
  line-height: 1.7;
  color: #4a5568;
  margin: 0 0 8px;
}

.top-mentor-support__feature-example{
  font-size: 13px;
  color: #718096;
  margin: 0;
}

.top-mentor-support__flow-title{
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #1a1a1a;
}

.top-mentor-support__steps{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 12px;
}

.top-mentor-support__step{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f7fafc;
}

.top-mentor-support__step-number{
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #005bab;
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.top-mentor-support__step-label{
  font-weight: 700;
  margin: 0 0 4px;
  color: #1a1a1a;
}

.top-mentor-support__step-text{
  margin: 0;
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
}

.top-mentor-support__cta{
  margin-top: 32px;
  text-align: center;
  padding: 28px 20px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
}

.top-mentor-support__cta-text{
  margin: 0 0 18px;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.7;
}

.top-mentor-support__cta-button{
  display: inline-block;
  background: #E39B2F;
  color: #fff;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 10px;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 900px){
  .top-mentor-support__problem-solution{
    grid-template-columns: 1fr;
  }
  .top-mentor-support__features{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
  Mentor Support（メンターサポート）- 本番CSS
  ※ WordPressの「追加CSS」最下部に貼る
========================================================= */

.top-mentor-support{
  padding: 88px 0;
  background: #ffffff;
}

.top-mentor-support__container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
.top-mentor-support__header{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid #e8eef7;
  margin-bottom: 36px;
}

.top-mentor-support__badge-wrapper{
  display: inline-flex;
  margin-bottom: 10px;
}

.top-mentor-support__badge{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  background: #f3f7ff;
  color: #1f4aa8;
  font-weight: 700;
}

.top-mentor-support__title{
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
  color: #0b1b3a;
}

.top-mentor-support__subtitle{
  margin: 0;
  color: #51637a;
  line-height: 1.8;
  font-size: 15px;
}

.top-mentor-support__highlight{
  min-width: 220px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #0b2a6b;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(11,42,107,.18);
}

.top-mentor-support__highlight-label{
  margin: 0;
  font-size: 12px;
  opacity: .9;
  letter-spacing: .05em;
}

.top-mentor-support__highlight-value{
  margin: 6px 0 2px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .02em;
}

.top-mentor-support__highlight-note{
  margin: 0;
  font-size: 12px;
  opacity: .9;
}

/* Problem / Solution */
.top-mentor-support__problem-solution{
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  align-items: center;
  margin: 28px 0 36px;
  padding: 22px;
  border-radius: 18px;
  background: #f7f9ff;
  border: 1px solid #e6ecff;
}

.top-mentor-support__image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.top-mentor-support__heading{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
  color: #0b1b3a;
}

.top-mentor-support__description{
  margin: 0;
  color: #3f536b;
  line-height: 1.9;
  font-size: 15px;
}

/* Features */
.top-mentor-support__features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 34px;
}

.top-mentor-support__feature{
  border: 1px solid #e8eef7;
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15,30,60,.06);
}

.top-mentor-support__feature-icon{
  font-size: 24px;
  margin-bottom: 10px;
}

.top-mentor-support__feature-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #0b1b3a;
}

.top-mentor-support__feature-text{
  margin: 0 0 10px;
  color: #3f536b;
  line-height: 1.8;
  font-size: 14px;
}

.top-mentor-support__feature-example{
  margin: 0;
  font-size: 13px;
  color: #6a7c92;
}

/* Flow */
.top-mentor-support__flow{
  padding: 22px;
  border-radius: 18px;
  border: 1px solid #e8eef7;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15,30,60,.06);
  margin-bottom: 28px;
}

.top-mentor-support__flow-title{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #0b1b3a;
}

.top-mentor-support__steps{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.top-mentor-support__step{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 14px;
  background: #f7f9ff;
  border: 1px solid #e6ecff;
}

.top-mentor-support__step-number{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #ffffff;
  background: #1f4aa8;
}

.top-mentor-support__step-label{
  margin: 0;
  font-weight: 800;
  color: #0b1b3a;
  font-size: 14px;
}

.top-mentor-support__step-text{
  margin: 4px 0 0;
  color: #3f536b;
  line-height: 1.8;
  font-size: 14px;
}

.top-mentor-support__flow-summary{
  margin: 14px 0 0;
  color: #3f536b;
  line-height: 1.9;
  font-size: 14px;
}

/* CTA */
.top-mentor-support__cta{
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 26px 18px;
  border-radius: 18px;
  background: #0b2a6b;
  color: #ffffff;
}

.top-mentor-support__cta-text{
  margin: 0;
  line-height: 1.8;
  font-size: 14px;
  opacity: .95;
}

.top-mentor-support__cta-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b2a6b;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

/* Responsive */
@media (max-width: 900px){
  .top-mentor-support{
    padding: 72px 0;
  }

  .top-mentor-support__header{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .top-mentor-support__highlight{
    width: 100%;
  }

  .top-mentor-support__problem-solution{
    grid-template-columns: 1fr;
  }

  .top-mentor-support__features{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Mentor Support：理想（全面ブルー背景 + 白カード）に寄せる上書き
   ※style.css 最下部に追記
========================= */

/* 1) セクション背景を全面ブルーに固定 */
.top-lp .top-mentor-support{
  background: #0b2a6b !important; /* 濃いブルー */
  padding: 88px 0;
}

/* 2) 中央の“白い面”（ページ中央の土台） */
.top-lp .top-mentor-support__container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 3) ヘッダーはブルー上に載るので文字は白系 */
.top-lp .top-mentor-support__title,
.top-lp .top-mentor-support__subtitle{
  color: #ffffff !important;
}
.top-lp .top-mentor-support__subtitle{ opacity: .9; }

/* 右上の「1年間サポート」だけを目立たせる（オレンジ寄り） */
.top-lp .top-mentor-support__highlight{
  background: #E39B2F !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.top-lp .top-mentor-support__highlight-label,
.top-lp .top-mentor-support__highlight-note{
  color: rgba(255,255,255,.9) !important;
}

/* 4) 画像＋説明のブロックは“白カード”に */
.top-lp .top-mentor-support__problem-solution{
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 22px;
}
.top-lp .top-mentor-support__heading{ color:#0b1b3a !important; }
.top-lp .top-mentor-support__description{ color:#3f536b !important; }

/* 5) 3つの特徴カード（白カード） */
.top-lp .top-mentor-support__feature{
  background: #ffffff !important;
  border: 1px solid rgba(15,30,60,.10);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(15,30,60,.10);
}
.top-lp .top-mentor-support__feature-title{ color:#0b1b3a !important; }
.top-lp .top-mentor-support__feature-text{ color:#3f536b !important; }
.top-lp .top-mentor-support__feature-example{ color:#6a7c92 !important; }

/* 6) フローも白カード */
.top-lp .top-mentor-support__flow{
  background: #ffffff !important;
  border: 1px solid rgba(15,30,60,.10);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(15,30,60,.10);
}
.top-lp .top-mentor-support__flow-title{ color:#0b1b3a !important; }
.top-lp .top-mentor-support__step{
  background: #f7f9ff !important;
  border: 1px solid #e6ecff;
}
.top-lp .top-mentor-support__step-label{ color:#0b1b3a !important; }
.top-lp .top-mentor-support__step-text,
.top-lp .top-mentor-support__flow-summary{ color:#3f536b !important; }

/* 7) 下のCTAは“濃紺の帯”にして、ボタンは白 */
.top-lp .top-mentor-support__cta{
  background: #062052 !important;
  color: #ffffff !important;
  border-radius: 18px;
}
.top-lp .top-mentor-support__cta-text{ color: rgba(255,255,255,.92) !important; }
.top-lp .top-mentor-support__cta-button{
  background: #ffffff !important;
  color: #062052 !important;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
}

/* =========================
   Career Window（転職後・受講後の活躍例）
   ========================= */
.top-lp .top-career-window{
  padding: 96px 0;
  background: linear-gradient(135deg, #001a33 0%, #002447 55%, #003d82 100%);
  color: #fff;
}

.top-lp .top-career-window__container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.top-lp .top-career-window__header{
  text-align: center;
  margin-bottom: 44px;
}

.top-lp .top-career-window__badge{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-weight: 800;
  margin-bottom: 12px;
}

.top-lp .top-career-window__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.25;
  font-weight: 900;
}

.top-lp .top-career-window__title-accent{
  color: #E39B2F;
}

.top-lp .top-career-window__subtitle{
  margin: 0 auto;
  max-width: 56rem;
  line-height: 1.9;
  color: rgba(255,255,255,.82);
  font-weight: 600;
}

.top-lp .top-career-window__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px){
  .top-lp .top-career-window__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.top-lp .top-career-window__card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.top-lp .top-career-window__card-image{
  position: relative;
}

.top-lp .top-career-window__card-image img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.top-lp .top-career-window__card-label{
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
}

.top-lp .top-career-window__card-label-badge{
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(255,255,255,.88);
}

.top-lp .top-career-window__card-label-title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  color: #fff;
}

.top-lp .top-career-window__card-content{
  padding: 16px 16px 18px;
}

.top-lp .top-career-window__card-catchphrase{
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
}

.top-lp .top-career-window__card-box{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 12px 12px;
  margin-bottom: 12px;
}

.top-lp .top-career-window__card-box-label{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #E39B2F;
}

.top-lp .top-career-window__card-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.top-lp .top-career-window__card-list-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.75;
  color: rgba(255,255,255,.86);
  font-weight: 600;
}

.top-lp .top-career-window__card-list-bullet{
  color: #E39B2F;
  font-weight: 900;
  flex: 0 0 auto;
}

.top-lp .top-career-window__card-description{
  margin: 0;
  line-height: 1.85;
  color: rgba(255,255,255,.78);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 900px){
  .top-lp .top-career-window{
    padding: 72px 0;
  }
  .top-lp .top-career-window__card-image img{
    height: 220px;
  }
}
/* =========================================================
   PART3: Career Window / Payment / Financial Support / FAQ / Final CTA / Footer
   影響範囲：.top-lp 内のみ
   追記場所：style.css 最下部
========================================================= */

/* ---------- Common: section spacing & container ---------- */
.top-lp .top-career-window,
.top-lp .top-payment,
.top-lp .top-financial-support,
.top-lp .top-faq,
.top-lp .top-final-cta{
  padding: 88px 0;
}

@media (max-width: 768px){
  .top-lp .top-career-window,
  .top-lp .top-payment,
  .top-lp .top-financial-support,
  .top-lp .top-faq,
  .top-lp .top-final-cta{
    padding: 64px 0;
  }
}

.top-lp .top-career-window__container,
.top-lp .top-payment__container,
.top-lp .top-financial-support__container,
.top-lp .top-faq__container,
.top-lp .top-final-cta__container{
  width: min(1120px, 92%);
  margin: 0 auto;
}

/* badge (共通表現) */
.top-lp [class$="__badge-wrapper"]{
  display: inline-flex;
  margin-bottom: 12px;
}
.top-lp [class$="__badge"]{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 800;
  color: #1f4aa8;
  background: rgba(0,91,171,0.10);
  border: 1px solid rgba(0,91,171,0.18);
}

/* title/subtitle（各セクション） */
.top-lp .top-career-window__title,
.top-lp .top-payment__title,
.top-lp .top-financial-support__title,
.top-lp .top-faq__title{
  margin: 0 0 10px;
  font-weight: 900;
  line-height: 1.25;
  color: #0b1b3a;
  font-size: clamp(24px, 2.4vw, 34px);
}
.top-lp .top-career-window__subtitle,
.top-lp .top-payment__subtitle-main,
.top-lp .top-payment__subtitle-sub,
.top-lp .top-financial-support__subtitle,
.top-lp .top-faq__subtitle{
  margin: 0;
  color: #51637a;
  line-height: 1.9;
  font-weight: 600;
}

/* =========================================================
   1) Career Window
========================================================= */
.top-lp .top-career-window{
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
}

.top-lp .top-career-window__title-accent{
  color: #005bab;
}

.top-lp .top-career-window__header{
  text-align: center;
  margin-bottom: 36px;
}

.top-lp .top-career-window__grid{
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

@media (min-width: 900px){
  .top-lp .top-career-window__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

.top-lp .top-career-window__card{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15,30,60,.06);
}

.top-lp .top-career-window__card-image{
  position: relative;
}
.top-lp .top-career-window__card-image img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px){
  .top-lp .top-career-window__card-image img{ height: 200px; }
}

.top-lp .top-career-window__card-label{
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  background: rgba(0, 26, 51, 0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px 12px;
  backdrop-filter: blur(10px);
}

.top-lp .top-career-window__card-label-badge{
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.92);
}

.top-lp .top-career-window__card-label-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}

.top-lp .top-career-window__card-content{
  padding: 18px 18px 16px;
}

.top-lp .top-career-window__card-catchphrase{
  margin: 0 0 12px;
  font-weight: 900;
  color: #0b1b3a;
  line-height: 1.6;
}

.top-lp .top-career-window__card-box{
  margin: 0 0 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,91,171,0.14);
  background: rgba(0,91,171,0.05);
}

.top-lp .top-career-window__card-box-label{
  margin: 0 0 10px;
  font-weight: 900;
  color: #005bab;
  letter-spacing: .04em;
}

.top-lp .top-career-window__card-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.top-lp .top-career-window__card-list-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.85;
  color: #0f172a;
  font-weight: 700;
}

.top-lp .top-career-window__card-list-bullet{
  color: #E39B2F;
  font-weight: 900;
  flex: 0 0 auto;
  margin-top: 1px;
}

.top-lp .top-career-window__card-description{
  margin: 0;
  color: #3f536b;
  line-height: 1.9;
  font-weight: 600;
}

/* =========================================================
   2) Payment
========================================================= */
.top-lp .top-payment{
  background: #ffffff;
}

.top-lp .top-payment__header{
  text-align: center;
  margin-bottom: 32px;
}

.top-lp .top-payment__options{
  display: grid;
  gap: 18px;
}

@media (min-width: 900px){
  .top-lp .top-payment__options{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.top-lp .top-payment__option{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 22px rgba(15,30,60,.06);
  position: relative;
}

.top-lp .top-payment__option--recommended{
  border-color: rgba(227,155,47,0.45);
  box-shadow: 0 16px 34px rgba(227,155,47,0.14);
}

.top-lp .top-payment__recommended-badge{
  position: absolute;
  top: 16px;
  right: 16px;
  background: #E39B2F;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.top-lp .top-payment__option-title{
  margin: 0 0 10px;
  font-weight: 900;
  color: #0b1b3a;
  font-size: 18px;
  line-height: 1.4;
}

.top-lp .top-payment__option-text{
  margin: 0 0 14px;
  color: #3f536b;
  line-height: 1.9;
  font-weight: 600;
}

.top-lp .top-payment__example{
  border-radius: 16px;
  border: 1px solid rgba(0,91,171,0.12);
  background: rgba(0,91,171,0.04);
  padding: 14px;
  margin-bottom: 12px;
}

.top-lp .top-payment__example-label{
  margin: 0 0 10px;
  font-weight: 900;
  color: #005bab;
}

.top-lp .top-payment__example-table{
  display: grid;
  gap: 10px;
}

.top-lp .top-payment__example-row{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
}

.top-lp .top-payment__example-label-cell{
  font-weight: 900;
  color: #0b1b3a;
}

.top-lp .top-payment__example-value-cell{
  font-weight: 900;
  color: #0b1b3a;
}
.top-lp .top-payment__example-tax{
  font-weight: 700;
  color: #51637a;
}

.top-lp .top-payment__note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(227,155,47,0.22);
}

.top-lp .top-payment__note-title{
  margin: 0 0 6px;
  font-weight: 900;
  color: #a25e00;
}

.top-lp .top-payment__note-text{
  margin: 0;
  color: #3f536b;
  line-height: 1.9;
  font-weight: 600;
}

.top-lp .top-payment__cards{
  margin-top: 16px;
}

.top-lp .top-payment__cards-title{
  margin: 0 0 10px;
  font-weight: 900;
  color: #0b1b3a;
}

.top-lp .top-payment__cards-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.top-lp .top-payment__card-item{
  width: 72px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.top-lp .top-payment__card-item img{
  max-width: 90%;
  max-height: 70%;
  display: block;
}

/* =========================================================
   3) Financial Support
========================================================= */
.top-lp .top-financial-support{
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}

.top-lp .top-financial-support__header{
  text-align: center;
  margin-bottom: 32px;
}

.top-lp .top-financial-support__content{
  display: grid;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

@media (min-width: 900px){
  .top-lp .top-financial-support__content{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
  }
}

.top-lp .top-financial-support__image{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.10);
  background: #fff;
}
.top-lp .top-financial-support__image img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px){
  .top-lp .top-financial-support__image img{ height: 280px; }
}

.top-lp .top-financial-support__info{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(15,30,60,.06);
}

.top-lp .top-financial-support__highlight{
  border-radius: 18px;
  background: linear-gradient(135deg, #001a33, #002447 55%, #003d82);
  color: #fff;
  padding: 18px 16px;
  margin-bottom: 16px;
}

.top-lp .top-financial-support__highlight-label{
  margin: 0;
  opacity: .9;
  font-weight: 800;
  letter-spacing: .05em;
}
.top-lp .top-financial-support__highlight-value{
  margin: 6px 0 2px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}
.top-lp .top-financial-support__highlight-text{
  margin: 0;
  opacity: .9;
  font-weight: 700;
}

.top-lp .top-financial-support__cards{
  display: grid;
  gap: 12px;
}

.top-lp .top-financial-support__card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 16px;
}

.top-lp .top-financial-support__card--primary{
  border-left: 6px solid #005bab;
}

.top-lp .top-financial-support__card--secondary{
  border-left: 6px solid #E39B2F;
}

.top-lp .top-financial-support__card-badge{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #a25e00;
  background: rgba(227,155,47,0.14);
  border: 1px solid rgba(227,155,47,0.30);
  margin-bottom: 10px;
}

.top-lp .top-financial-support__card-title{
  margin: 0 0 10px;
  font-weight: 900;
  color: #0b1b3a;
  line-height: 1.5;
}

.top-lp .top-financial-support__card-text{
  margin: 0 0 10px;
  color: #3f536b;
  line-height: 1.9;
  font-weight: 600;
}

.top-lp .top-financial-support__card-note{
  margin: 0;
  color: #51637a;
  line-height: 1.8;
  font-weight: 600;
  font-size: 13px;
}

.top-lp .top-financial-support__benefits{
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

@media (min-width: 900px){
  .top-lp .top-financial-support__benefits{
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

.top-lp .top-financial-support__benefit{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: 0 10px 22px rgba(15,30,60,.06);
}

.top-lp .top-financial-support__benefit-icon{
  font-size: 22px;
  margin-bottom: 8px;
}
.top-lp .top-financial-support__benefit-title{
  margin: 0 0 8px;
  font-weight: 900;
  color: #0b1b3a;
}
.top-lp .top-financial-support__benefit-text{
  margin: 0;
  color: #3f536b;
  line-height: 1.9;
  font-weight: 600;
}

.top-lp .top-financial-support__cta{
  margin-top: 22px;
  text-align: center;
  padding: 18px 16px;
  border-radius: 18px;
  background: #0b2a6b;
  color: #fff;
}

.top-lp .top-financial-support__cta-text{
  margin: 0 0 12px;
  line-height: 1.9;
  opacity: .95;
  font-weight: 700;
}

.top-lp .top-financial-support__cta-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b2a6b;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
}

/* =========================================================
   4) FAQ
========================================================= */
.top-lp .top-faq{
  background: #ffffff;
}

.top-lp .top-faq__header{
  text-align: center;
  margin-bottom: 28px;
}

.top-lp .top-faq__list{
  display: grid;
  gap: 12px;
}

.top-lp .top-faq__item{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.top-lp .top-faq__question{
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px;
  list-style: none;
}

.top-lp .top-faq__question::-webkit-details-marker{ display:none; }

.top-lp .top-faq__question-content{
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 900;
  color: #0b1b3a;
  line-height: 1.6;
}

.top-lp .top-faq__question-icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,91,171,0.10);
  border: 1px solid rgba(0,91,171,0.18);
  color: #1f4aa8;
  font-weight: 900;
  flex: 0 0 auto;
}

.top-lp .top-faq__question-toggle{
  color: #51637a;
  font-weight: 900;
}

.top-lp .top-faq__answer{
  padding: 0 16px 16px;
}

.top-lp .top-faq__answer-text{
  margin: 0 0 10px;
  color: #3f536b;
  line-height: 1.9;
  font-weight: 600;
}

.top-lp .top-faq__answer-note{
  margin: 0;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(227,155,47,0.10);
  border: 1px solid rgba(227,155,47,0.22);
  color: #0b1b3a;
  line-height: 1.9;
  font-weight: 700;
}

/* =========================================================
   5) Final CTA
========================================================= */
.top-lp .top-final-cta{
  background: linear-gradient(135deg, #001a33, #002447 55%, #003d82);
  color: #fff;
  text-align: center;
}

.top-lp .top-final-cta__container{
  padding: 72px 0;
}

@media (max-width: 768px){
  .top-lp .top-final-cta__container{
    padding: 56px 0;
  }
}

.top-lp .top-final-cta__title{
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 1.2;
  font-size: clamp(28px, 3.2vw, 44px);
}

.top-lp .top-final-cta__subtitle{
  margin: 0 auto 18px;
  max-width: 46rem;
  line-height: 1.9;
  opacity: .92;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.top-lp .top-final-cta__action{
  margin-top: 18px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.top-lp .top-final-cta__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  background: #E39B2F;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
}

.top-lp .top-final-cta__note{
  margin: 0;
  opacity: .85;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

/* =========================================================
   6) Footer (LP専用)
========================================================= */
.top-lp .top-footer{
  background: #0b1b3a;
  color: rgba(255,255,255,0.88);
}

.top-lp .top-footer__nav{
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.top-lp .top-footer__nav-container{
  width: min(1120px, 92%);
  margin: 0 auto;
  padding: 34px 0;
  display: grid;
  gap: 18px;
}

@media (min-width: 900px){
  .top-lp .top-footer__nav-container{
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

.top-lp .top-footer__nav-title{
  margin: 0 0 12px;
  font-weight: 900;
  color: #fff;
}

.top-lp .top-footer__nav-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.top-lp .top-footer__nav-link{
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-weight: 700;
}
.top-lp .top-footer__nav-link:hover{
  color: #ffffff;
  text-decoration: underline;
}

.top-lp .top-footer__company-name{
  margin: 0 0 8px;
  font-weight: 900;
  color: #fff;
}
.top-lp .top-footer__company-address{
  margin: 0;
  line-height: 1.9;
  font-weight: 600;
}

.top-lp .top-footer__certifications{
  padding: 16px 0;
}
.top-lp .top-footer__certifications-container{
  width: min(1120px, 92%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
}

.top-lp .top-footer__certification-separator{
  opacity: .55;
}

.top-lp .top-footer__copyright{
  padding: 14px 0 18px;
}
.top-lp .top-footer__copyright-container{
  width: min(1120px, 92%);
  margin: 0 auto;
  text-align: center;
}
.top-lp .top-footer__copyright-text{
  margin: 0;
  opacity: .7;
  font-weight: 600;
}

/* --- 働き方の変化：画像を大きく表示 --- */
.top-reskilling-explanation__shift-image img{
  width: 100% !important;
  height: 420px !important;   /* ←大きさはここで調整（360〜520くらい） */
  object-fit: cover !important;
  display: block !important;
}

/* --- 下のカードとの余白を詰める --- */
.top-reskilling-explanation__shift{
  margin-bottom: 24px !important;  /* ←余白。12pxとかでもOK */
  padding-bottom: 0 !important;
}

/* ==========================
   HERO 背景画像を表示
========================== */
.top-hero{
  background-image: url("http://datascience-lab.jp/wp-content/uploads/2026/02/professional-business-woman-in-lab-coat-analyzing-.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================
   HEROに青いフィルターをかける
========================== */
.top-hero{
  position: relative;
  overflow: hidden;
}

/* 青い膜（オーバーレイ） */
.top-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 60, 120, 0.70); /* ←青の濃さ */
  z-index: 1;
}

/* 文字・ボタンを膜の上に出す */
.top-hero .l-container{
  position: relative;
  z-index: 2;
}

.top-hero__content,
.top-hero__inner{
  position: relative;
}

.top-hero__content::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,60,120,.55) !important;
  z-index: 1;
}

.top-hero__inner{
  position: relative;
  z-index: 2;
}

/* ==========================
   HERO：青を背景全体にかける（理想形）
========================== */

/* いま出ている四角い青背景を消す */
.top-hero__content,
.top-hero__inner{
  background: transparent !important;
}

/* HERO全体に青い膜をかける */
.top-hero{
  position: relative;
  overflow: hidden;
}

.top-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 60, 120, 0.55); /* ←青の濃さ */
  z-index: 1;
}

/* 文字を青の膜より前に出す */
.top-hero .l-container{
  position: relative;
  z-index: 2;
}

/* 四角い青（箱側）を消す */
.top-hero__content,
.top-hero__inner{
  background: transparent !important;
}

/* ヒーロー全体を画面幅いっぱいにする（コンテナ制限を回避） */
.top-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* ヒーロー全体に青フィルター */
.top-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0, 60, 120, 0.55);
  z-index: 1;
}

/* 文字はフィルターより前 */
.top-hero .l-container{
  position: relative;
  z-index: 2;
}

/* ===== HERO FIX: 写真 + 全体オーバーレイ + 四角を消す ===== */

/* 1) 四角の原因を消す */
.top-hero__content::before{
  content: none !important;
}
.top-hero__content,
.top-hero__inner{
  background: transparent !important;
}

/* 2) HEROを画面幅いっぱいに */
.top-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background-image: url("http://datascience-lab.jp/wp-content/uploads/2026/02/professional-business-woman-in-lab-coat-analyzing-.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 3) HERO全体に青フィルター（全幅） */
.top-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0, 60, 120, 0.55);
  z-index: 1;
}

/* 4) テキストはフィルターより前 */
.top-hero .l-container{
  position: relative;
  z-index: 2;
}

/* ===== HERO overlayを「写真が乗ってる要素」に適用する ===== */

/* 1) 写真が乗ってる箱を全幅にする（四角化の原因を消す） */
.top-hero__content{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* 2) オーバーレイ（これが見えるはず） */
.top-hero__content::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0, 60, 120, 0.55) !important;
  z-index: 1;
  pointer-events: none;
}

/* 3) テキストをオーバーレイより前に */
.top-hero__content > *{
  position: relative;
  z-index: 2;
}

/* 4) 親側に入れてたオーバーレイは無効化（念のため） */
.top-hero::before{
  content: none !important;
}

/* =========================================
   HERO 緊急復旧パッチ（最下部に貼る）
   - 1) 変な full-bleed を止める
   - 2) 青オーバーレイを確実に出す
   - 3) 文字の位置とサイズを元に戻す
========================================= */

/* 1) ヒーローの幅・位置の暴走を止める */
.top-lp .top-hero{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;

  position: relative !important;
  overflow: hidden !important;

  /* 背景画像（ここは必要ならURL差し替え） */
  background-image: url("http://datascience-lab.jp/wp-content/uploads/2026/02/professional-business-woman-in-lab-coat-analyzing-.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 2) 青オーバーレイ（これが“出ない”問題を強制的に解決） */
.top-lp .top-hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 60, 120, 0.55) !important;
  z-index: 1 !important;
}

/* 3) 以前入れた「四角い青」や内側オーバーレイを完全停止 */
.top-lp .top-hero__content,
.top-lp .top-hero__inner{
  background: transparent !important;
}
.top-lp .top-hero__content::before{
  content: none !important;
}

/* 4) 文字をオーバーレイより前へ。位置も中央寄りに復旧 */
.top-lp .top-hero .l-container{
  position: relative !important;
  z-index: 2 !important;
  margin: 0 auto !important;
}

/* 5) ヒーローの高さ・余白を安定させる（文字が左に寄る/潰れるのを防ぐ） */
.top-lp .top-hero__content{
  padding: 8rem 0 !important;
  min-height: 600px !important;
  display: flex !important;
  align-items: center !important;
}

.top-lp .top-hero__inner{
  max-width: 720px !important;
}

/* 6) 念のため：文字が小さくなったのを戻す */
.top-lp .top-hero__main-text{
  font-size: 3.75rem !important;
  line-height: 1.15 !important;
}
@media (max-width: 768px){
  .top-lp .top-hero__main-text{
    font-size: 2.4rem !important;
  }
  .top-lp .top-hero__content{
    padding: 5rem 0 !important;
    min-height: 420px !important;
  }
}

/* === SWELL: メインビジュアルに青いオーバーレイを確実に乗せる === */
.p-mainVisual__slide,
.p-mainVisual,
.p-mainVisual__bg {
  position: relative;
}

.p-mainVisual__slide::before,
.p-mainVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 120, 255, 0.35); /* ←青オーバーレイ */
  z-index: 1;
  pointer-events: none;
}

/* テキストをオーバーレイより前面に */
.p-mainVisual__inner,
.p-mainVisual__content,
.p-mainVisual__text {
  position: relative;
  z-index: 2;
}

/* === テキストの左寄りを強制的に戻す（中央寄せ）=== */
.p-mainVisual__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.p-mainVisual__content,
.p-mainVisual__text {
  width: min(920px, 92%);
  margin: 0 auto;
  text-align: left; /* 中身の文章は左でOKなら left。全部中央にしたいなら center に */
}

/* 全部中央にしたい場合はこれに変える
.p-mainVisual__content,
.p-mainVisual__text { text-align: center; }
*/

/* --- SWELL メインビジュアル：確実にオーバーレイを出す --- */
.p-mainVisual__slideInner{
  position: relative;
}

.p-mainVisual__slideInner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 90, 200, 0.35); /* ←青オーバーレイ。濃さは最後0.35を調整 */
  z-index: 1;
  pointer-events: none;
}

/* テキストはオーバーレイより上 */
.p-mainVisual__text{
  position: relative;
  z-index: 2;
}

/* 画像（または動画）が変に前面に来てたら最背面へ */
.p-mainVisual__bg,
.p-mainVisual__bg img,
.p-mainVisual__bg video{
  position: relative;
  z-index: 0;
}

.p-mainVisual,
.p-mainVisual__slide,
.p-mainVisual__slideInner,
.p-mainVisual__bg{
  position: relative !important;
}

/* ヒーローの中身を中央寄せに固定 */
.top-lp #top.top-hero .top-hero__content{
  display: flex !important;
  justify-content: center !important;
}

.top-lp #top.top-hero .top-hero__inner{
  width: min(720px, 100%) !important;   /* 文章ブロックの幅を作る */
  margin: 0 auto !important;
  text-align: center !important;       /* 文字中央 */
}

/* ヒーロー土台（必要なら背景画像もここで） */
.top-lp #top.top-hero{
  position: relative !important;
  overflow: hidden !important;
  /* background: url("画像URL") center/cover no-repeat !important; */
}

/* 青オーバーレイ */
.top-lp #top.top-hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 91, 171, 0.72) !important; /* まずは単色で確実に */
  z-index: 0 !important;
}

/* テキストはオーバーレイより上 */
.top-lp #top.top-hero .l-container,
.top-lp #top.top-hero .top-hero__content,
.top-lp #top.top-hero .top-hero__inner{
  position: relative !important;
  z-index: 1 !important;
}

.top-lp #top.top-hero::before{
  background: rgba(0, 91, 171, 0.72) !important;
}

.top-lp #top.top-hero::before{
  background:
    linear-gradient(180deg,
      rgba(0, 36, 71, 0.55) 0%,
      rgba(0, 91, 171, 0.72) 45%,
      rgba(0, 36, 71, 0.75) 100%
    ) !important;
}

/* =========================================================
   HERO FINAL FIX（最終完全版）
   - 写真を表示
   - 青オーバーレイを必ず乗せる
   - 文字を中央寄せ
   - 四角い青背景（内側のbefore等）を完全に消す
   ========================================================= */

/* 0) HEROの土台 */
.top-lp #top.top-hero{
  position: relative !important;
  overflow: hidden !important;

  /* 背景写真（必要ならここだけ差し替え） */
  background-image: url("http://datascience-lab.jp/wp-content/uploads/2026/02/professional-business-woman-in-lab-coat-analyzing-.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 1) 青オーバーレイ（必ず見える） */
.top-lp #top.top-hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  /* ←青の濃さ（0.55〜0.80で調整） */
  background: rgba(0, 91, 171, 0.72) !important;

  z-index: 0 !important;
  pointer-events: none !important;
}

/* 2) 文字・ボタンは青膜より前に出す */
.top-lp #top.top-hero .l-container,
.top-lp #top.top-hero .top-hero__content,
.top-lp #top.top-hero .top-hero__inner{
  position: relative !important;
  z-index: 1 !important;
}

/* 3) “四角い青” の原因（内側before）を完全停止 */
.top-lp #top.top-hero .top-hero__content::before{
  content: none !important;
}
.top-lp #top.top-hero .top-hero__content,
.top-lp #top.top-hero .top-hero__inner{
  background: transparent !important;
}

/* 4) HERO内テキストを中央寄せ */
.top-lp #top.top-hero .top-hero__content{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  min-height: 600px !important;
  padding: 8rem 0 !important;
}

.top-lp #top.top-hero .top-hero__inner{
  width: min(720px, 92%) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* 5) 見出しサイズを安定（スマホも崩れない） */
.top-lp #top.top-hero .top-hero__main-text{
  font-size: 3.6rem !important;
  line-height: 1.15 !important;
}

@media (max-width: 768px){
  .top-lp #top.top-hero .top-hero__content{
    min-height: 420px !important;
    padding: 5rem 0 !important;
  }

  .top-lp #top.top-hero .top-hero__main-text{
    font-size: 2.2rem !important;
  }
}

/* =========================================
   HERO FIX（青オーバーレイ＋白文字＋左寄せ＋オレンジ線）
   対象：front-page.php の #top.top-hero
========================================= */

.top-lp #top.top-hero{
  position: relative;
  overflow: hidden;
}

/* 背景画像（すでに出てるならここは不要だけど保険） */
.top-lp #top.top-hero{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 青いオーバーレイ（全体にかける） */
.top-lp #top.top-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 91, 171, 0.55); /* ←濃さ調整ここ */
  z-index: 0;
}

/* 中身を前面に出す */
.top-lp #top.top-hero .l-container,
.top-lp #top.top-hero .top-hero__content,
.top-lp #top.top-hero .top-hero__inner{
  position: relative;
  z-index: 1;
}

/* 文字：白にする（SWELLの上書きを潰す） */
.top-lp #top.top-hero,
.top-lp #top.top-hero *{
  color: #fff !important;
}

/* 文字を左寄せに戻す */
.top-lp #top.top-hero .top-hero__inner{
  text-align: left !important;
  max-width: 720px; /* ←左側の塊の幅。お好みで */
}

/* オレンジの縦線（見出し左） */
.top-lp #top.top-hero .top-hero__accent-line{
  display: inline-block !important;
  width: 4px;
  height: 72px; /* ←線の長さ */
  background: #E39B2F;
  margin-right: 14px;
  vertical-align: middle;
}

/* 見出しを「線＋文字」で横並びにする */
.top-lp #top.top-hero .top-hero__headline{
  display: flex;
  align-items: center;
  gap: 0; /* accent-line側でmargin取ってるので0でOK */
  margin: 10px 0 16px;
}

/* 見出しの文字を大きく（理想寄せ） */
.top-lp #top.top-hero .top-hero__main-text{
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.15;
}

/* ボタンはオレンジ維持（白に潰されないように） */
.top-lp #top.top-hero .top-hero__cta{
  display: inline-block;
  background: #E39B2F !important;
  color: #fff !important;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
/* =========================================================
   HERO FINAL（確定版）
   対象：<section id="top" class="top-hero">
   目的：写真 + 青オーバーレイ + 白文字 + 左寄せ + オレンジ線
========================================================= */

/* 1) HERO土台：背景写真 */
.top-lp #top.top-hero{
  position: relative !important;
  overflow: hidden !important;

  background-image: url("http://datascience-lab.jp/wp-content/uploads/2026/02/professional-business-woman-in-lab-coat-analyzing-.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 2) 青オーバーレイ（HERO全体にかける） */
.top-lp #top.top-hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 91, 171, 0.55) !important; /* 濃さはここ */
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 3) 中身を前面に出す */
.top-lp #top.top-hero .l-container,
.top-lp #top.top-hero .top-hero__content,
.top-lp #top.top-hero .top-hero__inner{
  position: relative !important;
  z-index: 1 !important;
}

/* 4) 変な「四角い青背景」を完全に無効化 */
.top-lp #top.top-hero .top-hero__content::before{
  content: none !important;
}
.top-lp #top.top-hero .top-hero__content,
.top-lp #top.top-hero .top-hero__inner{
  background: transparent !important;
}

/* 5) HEROの高さと余白を安定 */
.top-lp #top.top-hero .top-hero__content{
  padding: 8rem 0 !important;
  min-height: 600px !important;
  display: flex !important;
  align-items: center !important;
}

/* 6) 文字は白に固定 */
.top-lp #top.top-hero,
.top-lp #top.top-hero *{
  color: #fff !important;
}

/* 7) 左寄せ + 横幅 */
.top-lp #top.top-hero .top-hero__inner{
  max-width: 720px !important;
  text-align: left !important;
}

/* 8) 見出し（オレンジ線＋文字） */
.top-lp #top.top-hero .top-hero__headline{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 10px 0 16px !important;
}

.top-lp #top.top-hero .top-hero__accent-line{
  width: 4px !important;
  height: 72px !important;
  background: #E39B2F !important;
  flex: 0 0 4px !important;
}

/* 9) 見出し文字 */
.top-lp #top.top-hero .top-hero__main-text{
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

/* 10) ボタン（オレンジを維持） */
.top-lp #top.top-hero .top-hero__cta{
  display: inline-block !important;
  background: #E39B2F !important;
  color: #fff !important;
  padding: 14px 26px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* スマホ調整 */
@media (max-width: 768px){
  .top-lp #top.top-hero .top-hero__content{
    padding: 5rem 0 !important;
    min-height: 420px !important;
  }
  .top-lp #top.top-hero .top-hero__accent-line{
    height: 56px !important;
  }
}

/* ========================================
   Header Styles
   ======================================== */

.top-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Utility bar */
.top-header__utility {
  background-color: #002447;
  color: #ffffff;
  padding: 0.5rem 0;
}

.top-header__utility-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.top-header__utility-link {
  font-size: 0.875rem;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;
  text-align: center;
}

.top-header__utility-link:hover {
  color: #E39B2F;
}

@media (min-width: 768px) {
  .top-header__utility-link {
    text-align: left;
  }
}

/* Main header */
.top-header__main {
  border-bottom: 1px solid #e5e7eb;
}

.top-header__main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.top-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo */
.top-header__logo {
  font-size: 1.125rem;
  font-weight: 700;
  color: #005bab;
  text-decoration: none;
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.top-header__logo:hover {
  color: #003d82;
}

@media (min-width: 768px) {
  .top-header__logo {
    font-size: 1.25rem;
  }
}

/* Navigation */
.top-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .top-header__nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}

.top-header__nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-header__nav-item {
  margin: 0;
}

.top-header__nav-link {
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.top-header__nav-link:hover {
  color: #005bab;
}

/* Primary CTA */
.top-header__cta {
  background-color: #E39B2F;
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease;
}

.top-header__cta:hover {
  background-color: #e09612;
}

@media (min-width: 768px) {
  .top-header__cta {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}


/* =========================================
   TOPヒーロー（確定版）
   左寄せ + 手書き下線（オレンジ＋青） + subcopy暖色タグ
   ========================================= */

/* --- 色（必要ならここだけ調整） --- */
:root{
  --ds-accent-orange: rgba(255, 190, 80, 0.90);
  --ds-accent-blue: rgba(31, 90, 166, 0.90); /* サイトの青に合わせて変更OK */
}

/* 1) 文字ブロックを左へ（顎から離す） */
.top-hero__inner{
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;

  /* 左余白を減らす（＝左へ寄る） */
  padding-left: clamp(6px, 1.6vw, 20px);

  /* さらに少し左へ“押す” */
  transform: translateX(clamp(-48px, -2vw, -12px));
}

/* 2) 「ビジネスパーソンのための」＝上品に協調＆元気さ */
.top-hero__subcopy{
  display: inline-block;
  font-size: clamp(18px, 2.3vw, 26px);
  font-weight: 900;
  letter-spacing: .06em;
  margin: 0 0 14px;

  /* 暖色で目立たせる（下品にならないトーン） */
  color: rgba(255, 220, 150, 0.98);

  /* タグ感（上品なガラス） */
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20, 24, 28, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);

  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* 3) 見出し全体の余白 */
.top-hero__headline{
  margin: 0 0 16px;
}

/* 4) 見出し：手書き下線（オレンジ＋青） */
.top-hero__main-text{
  display: inline-block;
  position: relative;
  padding: 0 0 14px;

  background: transparent;
  border: none;
  border-radius: 0;

  color: #fff;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: .02em;
  font-size: clamp(34px, 4.4vw, 58px);

  text-shadow: 0 3px 18px rgba(0,0,0,.35);
}

/* 1本目（主線）：オレンジ→青 */
.top-hero__main-text::after{
  content: "";
  position: absolute;
  left: -6px;
  bottom: 2px;
  width: calc(100% + 12px);
  height: 16px;

  background: linear-gradient(
    90deg,
    var(--ds-accent-orange) 0%,
    var(--ds-accent-orange) 62%,
    var(--ds-accent-blue) 62%,
    var(--ds-accent-blue) 100%
  );

  border-radius: 999px;
  transform: rotate(-1.2deg);
  z-index: -1;
}

/* 2本目（薄い追い線）：同配色で薄く */
.top-hero__main-text::before{
  content: "";
  position: absolute;
  left: 10px;
  bottom: -1px;
  width: calc(100% - 20px);
  height: 10px;

  background: linear-gradient(
    90deg,
    rgba(255, 190, 80, 0.35) 0%,
    rgba(255, 190, 80, 0.35) 60%,
    rgba(31, 90, 166, 0.30) 60%,
    rgba(31, 90, 166, 0.30) 100%
  );

  border-radius: 999px;
  transform: rotate(0.8deg);
  z-index: -1;
}

/* 5) 元のアクセント線は使わない */
.top-hero__accent-line{
  display: none;
}

/* bridge直後のつなぎ */
.top-consult-bridge { padding: 16px 0 8px; }
.top-consult-bridge__container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.top-consult-bridge__text { line-height: 1.9; margin: 0; }

/* 比較カード */
.top-consult-contrast { padding: 16px 0 24px; }
.top-consult-contrast__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.top-consult-contrast__card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  padding: 18px 18px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.top-consult-contrast__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.top-consult-contrast__icon { font-size: 20px; line-height: 1; }
.top-consult-contrast__title { margin: 0; font-size: 18px; }

.top-consult-contrast__lead { margin: 8px 0 12px; font-size: 14px; opacity: .85; }

.top-consult-contrast__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.top-consult-contrast__item {
  padding: 12px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid rgba(0,0,0,.06);
}

.top-consult-contrast__card--warn .top-consult-contrast__item { background: rgba(255, 173, 51, .10); }
.top-consult-contrast__card--ok   .top-consult-contrast__item { background: rgba(46, 134, 255, .10); }

.top-consult-contrast__foot {
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

.top-consult-contrast__foot--warn { background: rgba(255, 173, 51, .12); border-left: 4px solid rgba(255, 173, 51, .85); }
.top-consult-contrast__foot--ok   { background: rgba(46, 134, 255, .12); border-left: 4px solid rgba(46, 134, 255, .85); }

/* レスポンシブ */
@media (max-width: 900px) {
  .top-consult-contrast__grid { grid-template-columns: 1fr; }
}

/* つなぎ（読み物感） */
.top-consult-story { padding: 10px 0 22px; }
.top-consult-story__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
}

.top-consult-story__kicker{
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  opacity: .75;
}

.top-consult-story__title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.5;
}

.top-consult-story__em{
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.top-consult-story__lead{
  margin: 0 0 12px;
  line-height: 1.9;
}

.top-consult-story__bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.top-consult-story__bullets li{
  padding: 12px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  line-height: 1.8;
}

.top-consult-story__dot{
  display: inline-block;
  margin-right: 8px;
  font-weight: 900;
}

.top-consult-story__note{
  margin: 12px 0 0;
  font-size: 14px;
  opacity: .85;
}

/* 1枚表示時に間延びしないように */
.top-courses__main-grid--single {
  grid-template-columns: 1fr;
}

/* featuredカード：画像（上）＋本文（左）＋価格（右） */
.top-courses__main-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "image image"
    "info  price";
  gap: 24px;
  padding: 24px;
  text-decoration: none; /* aタグ下線対策（必要なら） */
}

/* 画像は上段で横いっぱい */
.top-courses__main-image-wrapper--featured {
  grid-area: image;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
}

/* 画像の見え方を安定 */
.top-courses__main-image-wrapper--featured .top-courses__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 左：説明 */
.top-courses__main-info {
  grid-area: info;
  min-width: 0;
}

/* 右：価格枠 */
.top-courses__price-box--featured {
  grid-area: price;
  margin-top: 0; /* 既存で上marginが強い場合の打ち消し */
}

/* 右カラムの箱が伸びすぎないように */
.top-courses__price-box--featured .top-courses__note {
  line-height: 1.6;
}

/* レスポンシブ：タブレット以下は縦積み */
@media (max-width: 900px) {
  .top-courses__main-card--featured {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "info"
      "price";
  }

  .top-courses__main-image-wrapper--featured {
    min-height: 200px;
  }
}

/* featuredカード全体 */
.top-courses__main-card--featured {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-areas:
    "image image"
    "info  price";
  gap: 32px;
  padding: 32px;
}

/* 画像：上段いっぱい */
.top-courses__main-image-wrapper--featured {
  grid-area: image;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
}

.top-courses__main-image-wrapper--featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左：講座説明 */
.top-courses__main-info {
  grid-area: info;
  min-width: 0;
}

/* 右：価格・条件ボックス */
.top-courses__price-box--featured {
  grid-area: price;
  align-self: flex-start; /* 高さを内容分だけに */
  padding: 24px;
  border-radius: 16px;
}

/* 価格を少し強調（任意） */
.top-courses__price-box--featured .top-courses__price {
  font-size: 28px;
  font-weight: 700;
}

/* ====== レスポンシブ ====== */
@media (max-width: 900px) {
  .top-courses__main-card--featured {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "info"
      "price";
  }

  .top-courses__main-image-wrapper--featured {
    min-height: 200px;
  }
}

/* ===== CTAボタンが白抜きになる問題を強制修正 ===== */
.top-financial-support__cta-button,
.top-mentor-support__cta-button,
.top-career-consultation__cta-button,
.top-career-consultation a,
a.top-financial-support__cta-button,
a.top-mentor-support__cta-button {
  background-color: #0b2d6b !important;
  color: #fff !important;
  border-color: #0b2d6b !important;
  text-decoration: none !important;
}

/* ボタンっぽく見せる（displayがaタグの初期値に戻ってる場合に備える） */
.top-financial-support__cta-button,
.top-mentor-support__cta-button,
.top-career-consultation__cta-button {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 700 !important;
}