/* === from index.html === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --navy:    #0D2340;
    --navy-md: #1A3A5C;
    --navy-lt: #2C5282;
    --gold:    #C9A84C;
    --gold-lt: #E8C97A;
    --gold-pale:#FDF6E3;
    --cream:   #FAFAF7;
    --white:   #FFFFFF;
    --gray-1:  #F4F4F2;
    --gray-2:  #E8E8E4;
    --gray-3:  #9A9A94;
    --gray-4:  #5A5A55;
    --text:    #1A1A18;
    --text-lt: #4A4A46;
    --red-acc: #C0392B;
    --serif:   'Noto Serif JP', 'DM Serif Display', serif;
    --sans:    'Noto Sans JP', sans-serif;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--cream);
    overflow-x: hidden;
    line-height: 1.75;
  }

  /* ==============================
     HEADER / NAV
  ============================== */
  header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-2);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 2rem;
  }
  .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  .logo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
  }
  .logo-sub {
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--gray-3);
    font-family: var(--sans);
    font-weight: 300;
  }
  .logo-main {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  nav a {
    font-size: 13px;
    color: var(--text-lt);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color .2s;
  }
  nav a:hover { color: var(--navy); }
  .nav-cta {
    background: var(--gold);
    color: var(--white) !important;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 13px !important;
    letter-spacing: 0.06em;
    text-decoration: none;
    display: inline-block;
    transition: background .2s;
  }
  .nav-cta:hover { background: var(--navy) !important; }

  /* ==============================
     HERO
  ============================== */
  .hero {
    background: var(--navy);
    position: relative;
    overflow: hidden;
    padding: 0;
  }
  .hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 40px,
        rgba(201,168,76,0.04) 40px,
        rgba(201,168,76,0.04) 41px
      );
    pointer-events: none;
  }
  .hero-gold-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--gold);
  }
  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 2rem 100px 5rem;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 4rem;
    align-items: center;
    position: relative;
  }
  .hero-label {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--gold);
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .hero-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--gold);
  }
  .hero-headline {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.35;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
  }
  .hero-headline em {
    color: var(--gold-lt);
    font-style: normal;
  }
  .hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.9;
    margin-bottom: 2.5rem;
    max-width: 520px;
  }
  .hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .btn-primary {
    background: var(--gold);
    color: var(--navy);
    padding: 16px 32px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    border: 2px solid var(--gold);
  }
  .btn-primary:hover {
    background: var(--gold-lt);
    border-color: var(--gold-lt);
  }
  .btn-secondary {
    background: transparent;
    color: var(--white);
    padding: 14px 30px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-decoration: none;
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,0.4);
    transition: all .2s;
  }
  .btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  /* hero right card */
  .hero-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(201,168,76,0.3);
    padding: 2rem;
    backdrop-filter: blur(4px);
  }
  .hero-card-title {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 0.1em;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    padding-bottom: 0.8rem;
  }
  .hero-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
  }
  .hero-stat {
    text-align: center;
  }
  .hero-stat-num {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    display: block;
  }
  .hero-stat-num span {
    font-size: 1.1rem;
    color: var(--gold);
  }
  .hero-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.05em;
    margin-top: 4px;
    display: block;
  }
  .hero-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.3);
    font-size: 10px;
    letter-spacing: 0.15em;
    animation: bounce 2s infinite;
  }
  .hero-scroll-hint::after {
    content: '';
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
  }
  @keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
  }

  /* ==============================
     SECTION COMMON
  ============================== */
  section { padding: 80px 2rem; }
  .container { max-width: 1200px; margin: 0 auto; }
  .section-label {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .section-label::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--gold);
  }
  .section-title {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 0.8rem;
    letter-spacing: 0.02em;
  }
  .section-desc {
    font-size: 14px;
    color: var(--text-lt);
    line-height: 1.9;
    max-width: 600px;
  }
  .section-header {
    margin-bottom: 3rem;
  }

  /* ==============================
     PROBLEM NAV（課題別入口）
  ============================== */
  .problem-nav {
    background: var(--navy);
    padding: 0;
  }
  .problem-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .problem-nav-inner::-webkit-scrollbar { display: none; }
  .problem-item {
    flex: 1;
    min-width: 160px;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid rgba(255,255,255,0.07);
    transition: all .2s;
    text-decoration: none;
    display: block;
  }
  .problem-item:hover {
    background: rgba(201,168,76,0.12);
  }
  .problem-item-icon {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
  }
  .problem-item-text {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .problem-item:hover .problem-item-text { color: var(--gold-lt); }

  /* ==============================
     TRUST NUMBERS
  ============================== */
  .trust-section {
    background: var(--gold-pale);
    border-top: 3px solid var(--gold);
    padding: 60px 2rem;
  }
  .trust-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  .trust-item {
    background: var(--white);
    padding: 2.5rem 1.5rem;
    text-align: center;
  }
  .trust-num {
    font-family: var(--serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    display: block;
  }
  .trust-num sup {
    font-size: 1.2rem;
    vertical-align: super;
    color: var(--gold);
  }
  .trust-unit {
    font-size: 1rem;
    color: var(--gold);
  }
  .trust-label {
    font-size: 12px;
    color: var(--gray-3);
    letter-spacing: 0.08em;
    margin-top: 8px;
    display: block;
  }

  /* ==============================
     SERVICE CARDS
  ============================== */
  .services-section { background: var(--white); }
  .service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px;
    background: var(--gray-2);
    border: 1.5px solid var(--gray-2);
  }
  .service-card {
    background: var(--white);
    padding: 2.5rem 2rem;
    cursor: pointer;
    transition: all .25s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
  }
  .service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gold);
    transition: width .3s;
  }
  .service-card:hover::after { width: 100%; }
  .service-card:hover { background: var(--navy); }
  .service-card:hover .service-card-title { color: var(--white); }
  .service-card:hover .service-card-desc { color: rgba(255,255,255,0.6); }
  .service-card:hover .service-card-num { color: rgba(201,168,76,0.3); }
  .service-card:hover .service-card-icon { filter: brightness(0) invert(1) opacity(0.6); }
  .service-card:hover .service-tag { background: rgba(201,168,76,0.15); color: var(--gold); }

  .service-card-num {
    font-family: var(--serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--gray-1);
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    line-height: 1;
    transition: color .25s;
  }
  .service-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-pale);
    border: 1px solid var(--gold);
  }
  .service-card-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .service-card:hover .service-card-icon {
    background: rgba(201,168,76,0.1);
    border-color: rgba(201,168,76,0.4);
  }
  .service-card:hover .service-card-icon svg { stroke: var(--gold); }
  .service-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--gold);
    background: var(--gold-pale);
    padding: 3px 10px;
    margin-bottom: 0.8rem;
    font-weight: 500;
    transition: all .25s;
  }
  .service-card-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.8rem;
    line-height: 1.4;
    transition: color .25s;
  }
  .service-card-desc {
    font-size: 13px;
    color: var(--text-lt);
    line-height: 1.8;
    transition: color .25s;
  }
  .service-card-arrow {
    margin-top: 1.5rem;
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .service-card:hover .service-card-arrow { color: var(--gold-lt); }

  /* ==============================
     FLOW SECTION（支援の流れ）
  ============================== */
  .flow-section { background: var(--navy); padding: 80px 2rem; }
  .flow-section .section-title { color: var(--white); }
  .flow-section .section-desc { color: rgba(255,255,255,0.6); }
  .flow-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 3rem;
    position: relative;
  }
  .flow-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
  }
  .flow-step {
    text-align: center;
    padding: 1rem;
    position: relative;
  }
  .flow-step-num {
    width: 72px;
    height: 72px;
    border: 1.5px solid var(--gold);
    background: var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    position: relative;
    z-index: 1;
  }
  .flow-step-num span {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold);
  }
  .flow-step-title {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
  }
  .flow-step-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
  }

  /* ==============================
     CASES
  ============================== */
  .cases-section { background: var(--gray-1); }
  .case-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }
  .case-tab {
    padding: 8px 18px;
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    background: var(--white);
    color: var(--gray-3);
    border: 1px solid var(--gray-2);
    transition: all .2s;
  }
  .case-tab.active, .case-tab:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
  }
  .case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .case-card {
    background: var(--white);
    padding: 1.5rem;
    border-left: 3px solid var(--gold);
    transition: all .2s;
    cursor: pointer;
  }
  .case-card:hover {
    border-left-color: var(--navy);
    box-shadow: 4px 0 0 0 var(--navy);
  }
  .case-industry {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  .case-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.8rem;
    line-height: 1.5;
  }
  .case-result {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 0.4rem;
  }
  .case-result-label {
    font-size: 11px;
    color: var(--gray-3);
    width: 80px;
    flex-shrink: 0;
  }
  .case-result-val {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--navy);
  }
  .case-result-val.up { color: #1a7a4a; }
  .case-result-unit { font-size: 11px; color: var(--gray-3); }

  /* ==============================
     SEMINAR
  ============================== */
  .seminar-section { background: var(--white); }
  .seminar-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-2);
    border: 1px solid var(--gray-2);
    margin-bottom: 2rem;
  }
  .seminar-item {
    background: var(--white);
    padding: 1.4rem 2rem;
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    transition: background .15s;
    cursor: pointer;
    text-decoration: none;
  }
  .seminar-item:hover { background: var(--gold-pale); }
  .seminar-date {
    text-align: center;
  }
  .seminar-date-num {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    display: block;
  }
  .seminar-date-month {
    font-size: 11px;
    color: var(--gray-3);
    letter-spacing: 0.1em;
    display: block;
    margin-top: 2px;
  }
  .seminar-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .seminar-badge.free { background: #e8f5e9; color: #2e7d32; }
  .seminar-badge.online { background: #e3f2fd; color: #1565c0; }
  .seminar-badge.paid { background: var(--gold-pale); color: var(--gold); }
  .seminar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.5;
  }
  .seminar-meta {
    font-size: 11px;
    color: var(--gray-3);
    margin-top: 4px;
  }
  .seminar-cta-btn {
    font-size: 12px;
    padding: 8px 16px;
    background: var(--navy);
    color: var(--white);
    white-space: nowrap;
    cursor: pointer;
    border: none;
    font-family: var(--sans);
    letter-spacing: 0.06em;
    transition: background .2s;
  }
  .seminar-cta-btn:hover { background: var(--gold); color: var(--navy); }

  /* ==============================
     VOICE / TESTIMONIAL
  ============================== */
  .voice-section { background: var(--navy); padding: 80px 2rem; }
  .voice-section .section-title { color: var(--white); }
  .voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .voice-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201,168,76,0.2);
    padding: 2rem;
    position: relative;
  }
  .voice-quote {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-family: var(--serif);
    font-size: 4rem;
    color: rgba(201,168,76,0.12);
    line-height: 1;
    font-style: italic;
  }
  .voice-stars {
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 1rem;
  }
  .voice-text {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.9;
    margin-bottom: 1.5rem;
  }
  .voice-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1rem;
  }
  .voice-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    flex-shrink: 0;
  }
  .voice-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    display: block;
  }
  .voice-company {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    display: block;
  }

  /* ==============================
     MEMBERSHIP
  ============================== */
  .member-section { background: var(--gray-1); }
  .member-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .member-card {
    background: var(--white);
    border: 1.5px solid var(--gray-2);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    transition: all .25s;
  }
  .member-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(13,35,64,0.1);
  }
  .member-card.featured {
    border-color: var(--gold);
    border-width: 2px;
  }
  .member-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--navy);
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 700;
    padding: 4px 16px;
    white-space: nowrap;
  }
  .member-tier {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
  }
  .member-name {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 1.5rem;
  }
  .member-price {
    margin-bottom: 2rem;
  }
  .member-price-num {
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--navy);
  }
  .member-price-unit {
    font-size: 13px;
    color: var(--gray-3);
  }
  .member-features {
    list-style: none;
    text-align: left;
    margin-bottom: 2rem;
  }
  .member-features li {
    font-size: 13px;
    color: var(--text-lt);
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-1);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .member-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
  }
  .member-btn {
    display: block;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
  }
  .member-btn-outline {
    border: 1.5px solid var(--navy);
    color: var(--navy);
  }
  .member-btn-outline:hover {
    background: var(--navy);
    color: var(--white);
  }
  .member-btn-fill {
    background: var(--navy);
    color: var(--white);
    border: 1.5px solid var(--navy);
  }
  .member-btn-fill:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
  }

  /* ==============================
     CTA SECTION
  ============================== */
  .cta-section {
    background: var(--white);
    border-top: 4px solid var(--gold);
    padding: 80px 2rem;
    text-align: center;
  }
  .cta-section .section-label {
    justify-content: center;
    margin-bottom: 1rem;
  }
  .cta-section .section-label::before { display: none; }
  .cta-section .section-title {
    text-align: center;
    margin-bottom: 1rem;
  }
  .cta-section .section-desc {
    margin: 0 auto 2.5rem;
    text-align: center;
    max-width: 500px;
  }
  .cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn-navy {
    background: var(--navy);
    color: var(--white);
    padding: 18px 40px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    border: 2px solid var(--navy);
  }
  .btn-navy:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
  }
  .btn-gold-outline {
    background: transparent;
    color: var(--navy);
    padding: 16px 36px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-decoration: none;
    display: inline-block;
    border: 2px solid var(--gold);
    transition: all .2s;
  }
  .btn-gold-outline:hover {
    background: var(--gold);
    color: var(--navy);
  }

  /* ==============================
     COLUMN
  ============================== */
  .column-section { background: var(--cream); }
  .column-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .column-card {
    background: var(--white);
    text-decoration: none;
    transition: transform .2s;
    display: block;
  }
  .column-card:hover { transform: translateY(-3px); }
  .column-thumb {
    height: 140px;
    background: var(--navy);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .column-thumb-text {
    font-family: var(--serif);
    font-size: 2.5rem;
    color: rgba(255,255,255,0.06);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .column-thumb-cat {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--gold);
    color: var(--navy);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 12px;
  }
  .column-body {
    padding: 1.2rem 1rem;
  }
  .column-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.6;
    margin-bottom: 6px;
  }
  .column-date {
    font-size: 11px;
    color: var(--gray-3);
  }

  /* ==============================
     FOOTER
  ============================== */
  footer {
    background: var(--navy);
    padding: 60px 2rem 0;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .footer-logo {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 1rem;
  }
  .footer-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.9;
    max-width: 300px;
  }
  .footer-nav-title {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(201,168,76,0.2);
  }
  .footer-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .footer-nav-links a {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color .15s;
  }
  .footer-nav-links a:hover { color: var(--gold); }
  .footer-bottom {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-copy {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.05em;
  }
  .footer-badge {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .footer-badge-text {
    font-size: 10px;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.1em;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 4px 10px;
  }

  /* ==============================
     ANIMATIONS
  ============================== */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-in.visible {
    opacity: 1;
    transform: none;
  }

  /* ==============================
     RESPONSIVE
  ============================== */
  @media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; padding: 60px 2rem 60px 3rem; }
    .hero-card { display: none; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .service-cards { grid-template-columns: 1fr 1fr; }
    .flow-steps { grid-template-columns: 1fr; }
    .flow-steps::before { display: none; }
    .case-grid { grid-template-columns: 1fr; }
    .voice-grid { grid-template-columns: 1fr; }
    .member-cards { grid-template-columns: 1fr; }
    .column-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    nav { display: none; }
  }

/* === from solution.html === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:#0D2340;
  --navy-md:#1A3A5C;
  --navy-lt:#2C5282;
  --gold:#C9A84C;
  --gold-lt:#E8C97A;
  --gold-pale:#FDF6E3;
  --cream:#FAFAF7;
  --white:#FFFFFF;
  --g1:#F4F4F2;
  --g2:#E8E8E4;
  --g3:#9A9A94;
  --g4:#5A5A55;
  --text:#1A1A18;
  --text-lt:#4A4A46;
  --red:#C0392B;
  --green:#1a7a4a;
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--cream);overflow-x:hidden;line-height:1.75}

/* ── HEADER ── */
header{background:var(--white);border-bottom:1px solid var(--g2);position:sticky;top:0;z-index:200;padding:0 2rem}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{text-decoration:none;display:flex;flex-direction:column;gap:1px}
.logo-sub{font-size:9px;letter-spacing:.15em;color:var(--g3);font-weight:300}
.logo-main{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.05em}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{font-size:12px;color:var(--text-lt);text-decoration:none;letter-spacing:.04em;transition:color .15s}
.nav-links a:hover{color:var(--navy)}
.nav-cta{background:var(--gold);color:var(--navy)!important;padding:9px 18px;font-weight:700;font-size:12px!important;letter-spacing:.06em;transition:background .2s}
.nav-cta:hover{background:var(--navy)!important;color:var(--white)!important}

/* ── HERO / KV ── */
.kv{background:var(--navy);position:relative;overflow:hidden;padding:0}
.kv-stripe{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(135deg,transparent,transparent 60px,rgba(201,168,76,.03) 60px,rgba(201,168,76,.03) 61px);pointer-events:none}
.kv-accent{position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(to bottom,var(--gold),rgba(201,168,76,.2))}
.kv-inner{max-width:1200px;margin:0 auto;padding:110px 2rem 90px 5rem;position:relative}
.kv-eyebrow{font-size:10px;letter-spacing:.35em;color:var(--gold);font-weight:500;margin-bottom:1.2rem;display:flex;align-items:center;gap:10px}
.kv-eyebrow::before{content:'';display:inline-block;width:28px;height:1px;background:var(--gold)}
.kv-catch{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:700;color:var(--white);line-height:1.3;letter-spacing:.02em;margin-bottom:1.5rem}
.kv-catch em{color:var(--gold-lt);font-style:normal;display:block}
.kv-sub{font-size:15px;color:rgba(255,255,255,.65);line-height:2;max-width:560px;margin-bottom:2.5rem}
.kv-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:3rem}
.btn-gold{background:var(--gold);color:var(--navy);padding:16px 36px;font-weight:700;font-size:14px;letter-spacing:.08em;text-decoration:none;border:2px solid var(--gold);transition:all .2s;display:inline-block}
.btn-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn-outline-w{background:transparent;color:var(--white);padding:14px 32px;font-weight:500;font-size:14px;letter-spacing:.06em;text-decoration:none;border:1.5px solid rgba(255,255,255,.35);transition:all .2s;display:inline-block}
.btn-outline-w:hover{border-color:var(--gold);color:var(--gold)}
.kv-results{display:flex;gap:2px;flex-wrap:wrap}
.kv-result-item{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);padding:1.2rem 1.8rem;min-width:140px}
.kv-result-num{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--white);line-height:1;display:block}
.kv-result-num sup{font-size:.9rem;color:var(--gold)}
.kv-result-label{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.06em;margin-top:4px;display:block}

/* ── PAIN SECTION ── */
.pain-section{background:var(--white);padding:80px 2rem}
.container{max-width:1100px;margin:0 auto}
.sec-label{font-size:10px;letter-spacing:.3em;color:var(--gold);font-weight:500;display:flex;align-items:center;gap:8px;margin-bottom:.6rem}
.sec-label::before{content:'';width:16px;height:1px;background:var(--gold)}
.sec-title{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:var(--navy);line-height:1.45;letter-spacing:.02em;margin-bottom:.8rem}
.sec-desc{font-size:14px;color:var(--text-lt);line-height:1.95;max-width:600px}
.sec-header{margin-bottom:3rem}

.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--g2);border:1.5px solid var(--g2)}
.pain-item{background:var(--white);padding:2rem 1.5rem;position:relative}
.pain-item::before{content:'"';font-family:var(--serif);font-size:5rem;color:var(--g1);position:absolute;top:.5rem;right:1rem;line-height:1}
.pain-check{width:24px;height:24px;border:1.5px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem;flex-shrink:0}
.pain-check::after{content:'✕';font-size:11px;color:var(--red);font-weight:700}
.pain-text{font-size:14px;font-weight:700;color:var(--navy);line-height:1.6;margin-bottom:.5rem}
.pain-sub{font-size:12px;color:var(--g3);line-height:1.7}

.pain-arrow{text-align:center;padding:2.5rem 0;position:relative}
.pain-arrow::before,.pain-arrow::after{content:'';position:absolute;left:50%;transform:translateX(-50%);background:var(--g2)}
.pain-arrow::before{top:0;width:1px;height:40%}
.pain-arrow::after{bottom:0;width:1px;height:40%}
.pain-arrow-icon{display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.pain-arrow-text{font-size:11px;letter-spacing:.15em;color:var(--gold);font-weight:600}
.pain-arrow-chevron{color:var(--gold);font-size:1.5rem;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── SOLUTION OVERVIEW ── */
.solution-overview{background:var(--navy);padding:80px 2rem}
.solution-overview .sec-title{color:var(--white)}
.solution-overview .sec-label{color:var(--gold)}
.solution-overview .sec-label::before{background:var(--gold)}
.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:rgba(201,168,76,.15);border:1.5px solid rgba(201,168,76,.15);margin-top:3rem}
.overview-step{background:var(--navy);padding:2.5rem 1.5rem;text-align:center;position:relative}
.overview-step::after{content:attr(data-num);position:absolute;top:1.2rem;right:1.2rem;font-family:var(--serif);font-size:2.5rem;font-weight:700;color:rgba(201,168,76,.1);line-height:1}
.ov-icon{width:56px;height:56px;border:1.5px solid rgba(201,168,76,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem}
.ov-icon svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ov-num{font-size:10px;letter-spacing:.2em;color:rgba(201,168,76,.6);font-weight:600;margin-bottom:.4rem}
.ov-title{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:.7rem;line-height:1.4}
.ov-desc{font-size:12px;color:rgba(255,255,255,.45);line-height:1.8}

/* ── DETAIL PHASES ── */
.phases-section{background:var(--white);padding:80px 2rem}
.phase-block{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-bottom:5rem;padding-bottom:5rem;border-bottom:1px solid var(--g2)}
.phase-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.phase-block.reverse{direction:rtl}
.phase-block.reverse>*{direction:ltr}

.phase-num-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:1rem}
.phase-num{font-family:var(--serif);font-size:3.5rem;font-weight:700;color:var(--g2);line-height:1}
.phase-label-tag{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:600;background:var(--gold-pale);padding:4px 12px;border-left:2px solid var(--gold)}
.phase-title{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--navy);margin-bottom:.8rem;line-height:1.4}
.phase-desc{font-size:14px;color:var(--text-lt);line-height:2;margin-bottom:1.5rem}
.phase-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}
.phase-list li{font-size:13px;color:var(--text-lt);display:flex;align-items:flex-start;gap:10px;line-height:1.7}
.phase-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:.55rem;flex-shrink:0}
.phase-deliverable{background:var(--g1);padding:1.2rem 1.5rem;border-left:3px solid var(--gold)}
.phase-deliverable-label{font-size:10px;letter-spacing:.15em;color:var(--gold);font-weight:600;margin-bottom:.4rem}
.phase-deliverable-text{font-size:13px;color:var(--navy);font-weight:500;line-height:1.6}

/* phase visual card */
.phase-visual{position:relative}
.phase-card{background:var(--navy);padding:2.5rem;position:relative;overflow:hidden}
.phase-card-deco{position:absolute;bottom:-1rem;right:-1rem;width:120px;height:120px;border:2px solid rgba(201,168,76,.12);border-radius:50%}
.phase-card-deco2{position:absolute;bottom:-2rem;right:-2rem;width:160px;height:160px;border:1px solid rgba(201,168,76,.06);border-radius:50%}
.phase-card-tag{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:600;margin-bottom:1.5rem}
.phase-card-headline{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:1.5rem;line-height:1.5}
.phase-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.phase-metric{text-align:center;background:rgba(255,255,255,.04);padding:1rem;border:1px solid rgba(201,168,76,.15)}
.phase-metric-num{font-family:var(--serif);font-size:1.8rem;font-weight:700;color:var(--gold-lt);display:block;line-height:1}
.phase-metric-label{font-size:10px;color:rgba(255,255,255,.4);margin-top:4px;display:block;letter-spacing:.05em}
.phase-card-note{font-size:11px;color:rgba(255,255,255,.35);line-height:1.7}

/* mini chart bars */
.mini-chart{display:flex;align-items:flex-end;gap:6px;height:60px;margin:1rem 0}
.mini-bar{flex:1;background:rgba(201,168,76,.25);border-radius:2px 2px 0 0;transition:height .3s;position:relative}
.mini-bar.highlight{background:var(--gold)}
.mini-bar-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,.35);white-space:nowrap}

/* ── PRICE SECTION ── */
.price-section{background:var(--g1);padding:80px 2rem}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.price-card{background:var(--white);border:1.5px solid var(--g2);padding:2.5rem 2rem;position:relative;transition:all .25s}
.price-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 16px 40px rgba(13,35,64,.08)}
.price-card.featured{border-color:var(--gold);border-width:2px}
.price-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);font-size:10px;letter-spacing:.12em;font-weight:700;padding:4px 16px;white-space:nowrap}
.price-tier{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:600;margin-bottom:.4rem;margin-top:.5rem}
.price-name{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.price-target{font-size:12px;color:var(--g3);margin-bottom:1.5rem;line-height:1.6}
.price-amount{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--g1)}
.price-num{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--navy)}
.price-unit{font-size:12px;color:var(--g3)}
.price-tax{font-size:11px;color:var(--g3);display:block;margin-top:2px}
.price-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:2rem}
.price-features li{font-size:13px;color:var(--text-lt);display:flex;align-items:flex-start;gap:8px;line-height:1.6}
.price-features li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:.5rem;flex-shrink:0}
.price-features li.greyed{color:var(--g3)}
.price-features li.greyed::before{background:var(--g2)}
.price-btn{display:block;padding:13px;text-align:center;font-size:13px;letter-spacing:.06em;font-weight:700;text-decoration:none;transition:all .2s}
.price-btn-outline{border:1.5px solid var(--navy);color:var(--navy)}
.price-btn-outline:hover{background:var(--navy);color:var(--white)}
.price-btn-fill{background:var(--navy);color:var(--white);border:1.5px solid var(--navy)}
.price-btn-fill:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* ── CASES ── */
.cases-section{background:var(--white);padding:80px 2rem}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}
.case-card{border-left:3px solid var(--gold);padding:1.8rem 1.5rem;background:var(--g1);transition:all .2s}
.case-card:hover{border-left-color:var(--navy);background:var(--white);box-shadow:2px 0 0 0 var(--navy)}
.case-industry{font-size:10px;letter-spacing:.1em;color:var(--gold);font-weight:600;margin-bottom:.5rem}
.case-issue{font-size:12px;color:var(--g3);margin-bottom:.5rem;font-style:italic}
.case-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:1rem;line-height:1.5}
.case-metrics{display:flex;flex-direction:column;gap:.3rem}
.case-metric-row{display:flex;align-items:baseline;gap:6px}
.case-metric-label{font-size:11px;color:var(--g3);width:90px;flex-shrink:0}
.case-metric-val{font-family:var(--serif);font-size:1.2rem;font-weight:700}
.case-metric-val.up{color:var(--green)}
.case-metric-unit{font-size:11px;color:var(--g3)}
.case-quote{font-size:12px;color:var(--g3);margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--g2);font-style:italic;line-height:1.7}

/* ── FAQ ── */
.faq-section{background:var(--g1);padding:80px 2rem}
.faq-list{display:flex;flex-direction:column;gap:2px;background:var(--g2);border:1.5px solid var(--g2);margin-top:3rem}
.faq-item{background:var(--white)}
.faq-q{padding:1.4rem 1.8rem;display:flex;align-items:flex-start;gap:1rem;cursor:pointer;transition:background .15s}
.faq-q:hover{background:var(--gold-pale)}
.faq-q-mark{width:24px;height:24px;background:var(--navy);color:var(--white);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;margin-top:1px}
.faq-q-text{font-size:14px;font-weight:700;color:var(--navy);line-height:1.5;flex:1}
.faq-q-arrow{font-size:16px;color:var(--g3);transition:transform .25s;flex-shrink:0;margin-top:2px}
.faq-item.open .faq-q-arrow{transform:rotate(180deg)}
.faq-a{display:none;padding:0 1.8rem 1.4rem 4rem;font-size:13px;color:var(--text-lt);line-height:1.9}
.faq-item.open .faq-a{display:block}

/* ── CTA FINAL ── */
.cta-final{background:var(--navy);padding:100px 2rem;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 50px,rgba(201,168,76,.03) 50px,rgba(201,168,76,.03) 51px);pointer-events:none}
.cta-final-eyebrow{font-size:10px;letter-spacing:.3em;color:var(--gold);font-weight:500;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:10px}
.cta-final-eyebrow::before,.cta-final-eyebrow::after{content:'';width:24px;height:1px;background:var(--gold)}
.cta-final-title{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;color:var(--white);line-height:1.4;margin-bottom:1rem;position:relative}
.cta-final-title em{color:var(--gold-lt);font-style:normal}
.cta-final-sub{font-size:14px;color:rgba(255,255,255,.6);max-width:480px;margin:0 auto 2.5rem;line-height:1.95}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
.cta-note{font-size:12px;color:rgba(255,255,255,.3);letter-spacing:.04em}
.cta-note span{color:var(--gold);margin:0 4px}

/* ── FOOTER (simplified) ── */
.footer-mini{background:var(--navy);border-top:1px solid rgba(255,255,255,.06);padding:2rem;text-align:center}
.footer-mini-copy{font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.06em}

/* ── STICKY CTA BAR ── */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:2px solid var(--gold);padding:12px 2rem;display:flex;align-items:center;justify-content:space-between;z-index:300;transform:translateY(100%);transition:transform .3s;box-shadow:0 -4px 20px rgba(13,35,64,.12)}
.sticky-bar.visible{transform:translateY(0)}
.sticky-bar-text{font-size:13px;font-weight:700;color:var(--navy)}
.sticky-bar-sub{font-size:11px;color:var(--g3);margin-top:1px}
.sticky-bar-btn{background:var(--gold);color:var(--navy);padding:12px 28px;font-weight:700;font-size:13px;letter-spacing:.06em;text-decoration:none;white-space:nowrap;transition:background .2s;border:none;cursor:pointer;font-family:var(--sans)}
.sticky-bar-btn:hover{background:var(--navy);color:var(--white)}

/* ── FADE IN ── */
.fi{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fi.on{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .pain-grid,.overview-grid,.price-grid,.case-grid{grid-template-columns:1fr}
  .phase-block,.phase-block.reverse{grid-template-columns:1fr;direction:ltr;gap:2rem}
  .kv-inner{padding:70px 2rem 60px 3rem}
  .kv-results{gap:1px}
  nav .nav-links{display:none}
}

/* === from training.html === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:#0D2340;
  --navy-md:#1A3A5C;
  --navy-lt:#2C5282;
  --gold:#C9A84C;
  --gold-lt:#E8C97A;
  --gold-pale:#FDF6E3;
  --cream:#FAFAF7;
  --white:#FFFFFF;
  --g1:#F4F4F2;
  --g2:#E8E8E4;
  --g3:#9A9A94;
  --g4:#5A5A55;
  --text:#1A1A18;
  --text-lt:#4A4A46;
  --green:#1a7a4a;
  --green-pale:#e8f5e9;
  --blue-pale:#e3f2fd;
  --blue:#1565c0;
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--cream);overflow-x:hidden;line-height:1.75}

/* ── HEADER ── */
header{background:var(--white);border-bottom:1px solid var(--g2);position:sticky;top:0;z-index:200;padding:0 2rem}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{text-decoration:none;display:flex;flex-direction:column;gap:1px}
.logo-sub{font-size:9px;letter-spacing:.15em;color:var(--g3);font-weight:300}
.logo-main{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.05em}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{font-size:12px;color:var(--text-lt);text-decoration:none;letter-spacing:.04em;transition:color .15s}
.nav-links a:hover{color:var(--navy)}
.nav-links a.current{color:var(--navy);font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:2px}
.nav-cta{background:var(--gold);color:var(--navy)!important;padding:9px 18px;font-weight:700;font-size:12px!important;letter-spacing:.06em;transition:background .2s;border-bottom:none!important}
.nav-cta:hover{background:var(--navy)!important;color:var(--white)!important}

/* ── BREADCRUMB ── */
.breadcrumb{background:var(--white);border-bottom:1px solid var(--g2);padding:.6rem 2rem}
.breadcrumb-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px}
.breadcrumb a{font-size:11px;color:var(--g3);text-decoration:none}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb-sep{font-size:10px;color:var(--g2)}
.breadcrumb-current{font-size:11px;color:var(--navy);font-weight:500}

/* ── HERO ── */
.kv{background:var(--navy);position:relative;overflow:hidden}
.kv-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.05) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.kv-left-bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(to bottom,var(--gold),rgba(201,168,76,.1))}
.kv-inner{max-width:1200px;margin:0 auto;padding:80px 2rem 80px 5rem;display:grid;grid-template-columns:1fr 380px;gap:4rem;align-items:center;position:relative}
.kv-eyebrow{font-size:10px;letter-spacing:.35em;color:var(--gold);font-weight:500;margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.kv-eyebrow::before{content:'';display:inline-block;width:24px;height:1px;background:var(--gold)}
.kv-title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,3rem);font-weight:700;color:var(--white);line-height:1.35;letter-spacing:.02em;margin-bottom:1.2rem}
.kv-title em{color:var(--gold-lt);font-style:normal}
.kv-desc{font-size:14px;color:rgba(255,255,255,.6);line-height:2;max-width:520px;margin-bottom:2rem}
.kv-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem}
.kv-tag{font-size:11px;padding:4px 12px;letter-spacing:.06em;font-weight:500}
.kv-tag-blue{background:rgba(21,101,192,.25);color:#90caf9;border:1px solid rgba(144,202,249,.2)}
.kv-tag-green{background:rgba(26,122,74,.25);color:#a5d6a7;border:1px solid rgba(165,214,167,.2)}
.kv-tag-gold{background:rgba(201,168,76,.15);color:var(--gold-lt);border:1px solid rgba(201,168,76,.25)}

/* hero right - quick nav */
.kv-quicknav{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);padding:0;overflow:hidden}
.kv-qn-title{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:600;padding:1rem 1.5rem .8rem;border-bottom:1px solid rgba(201,168,76,.15)}
.kv-qn-list{list-style:none}
.kv-qn-item a{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;font-size:13px;color:rgba(255,255,255,.7);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:all .15s;gap:8px}
.kv-qn-item a:hover{background:rgba(201,168,76,.08);color:var(--gold-lt)}
.kv-qn-item a:last-child{border-bottom:none}
.kv-qn-arrow{color:var(--gold);opacity:.5;font-size:12px;flex-shrink:0}
.kv-qn-tag{font-size:9px;padding:2px 7px;font-weight:600;letter-spacing:.06em;flex-shrink:0}
.tag-free{background:rgba(26,122,74,.3);color:#a5d6a7}
.tag-online{background:rgba(21,101,192,.3);color:#90caf9}
.tag-paid{background:rgba(201,168,76,.2);color:var(--gold-lt)}

/* ── COMMON SECTION ── */
section{padding:80px 2rem}
.container{max-width:1100px;margin:0 auto}
.sec-label{font-size:10px;letter-spacing:.3em;color:var(--gold);font-weight:500;display:flex;align-items:center;gap:8px;margin-bottom:.6rem}
.sec-label::before{content:'';width:16px;height:1px;background:var(--gold)}
.sec-title{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;color:var(--navy);line-height:1.45;letter-spacing:.02em;margin-bottom:.8rem}
.sec-desc{font-size:14px;color:var(--text-lt);line-height:1.95;max-width:600px}
.sec-header{margin-bottom:3rem}

/* ── AUDIENCE SECTION ── */
.audience-section{background:var(--white)}
.audience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5px;background:var(--g2);border:1.5px solid var(--g2)}
.audience-card{background:var(--white);padding:2.5rem 2rem;display:flex;gap:1.5rem;align-items:flex-start;transition:background .2s;cursor:default}
.audience-card:hover{background:var(--gold-pale)}
.aud-icon-wrap{width:52px;height:52px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aud-icon-wrap svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.aud-title{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:.5rem;line-height:1.4}
.aud-desc{font-size:12px;color:var(--text-lt);line-height:1.8;margin-bottom:.8rem}
.aud-examples{display:flex;flex-wrap:wrap;gap:5px}
.aud-ex{font-size:10px;padding:3px 9px;background:var(--g1);color:var(--g4);letter-spacing:.04em}

/* ── CATEGORY TABS + COURSES ── */
.courses-section{background:var(--g1)}
.tab-bar{display:flex;gap:2px;background:var(--g2);border:1.5px solid var(--g2);overflow-x:auto;scrollbar-width:none;margin-bottom:2rem;flex-wrap:nowrap}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{padding:13px 22px;font-size:12px;letter-spacing:.06em;font-weight:500;background:var(--white);color:var(--g3);cursor:pointer;white-space:nowrap;border:none;font-family:var(--sans);transition:all .15s;flex-shrink:0}
.tab-btn.active,.tab-btn:hover{background:var(--navy);color:var(--white)}
.tab-btn.active{font-weight:700}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* course grid */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.course-card{background:var(--white);border:1.5px solid var(--g2);transition:all .25s;position:relative;overflow:hidden;text-decoration:none;display:block;color:inherit}
.course-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.course-card:hover::after{transform:scaleX(1)}
.course-card:hover{border-color:var(--gold);box-shadow:0 8px 32px rgba(13,35,64,.08);transform:translateY(-2px)}
.course-thumb{height:10px;background:var(--navy)}
.course-thumb.cat-mgmt{background:linear-gradient(135deg,#0D2340,#1A3A5C)}
.course-thumb.cat-sales{background:linear-gradient(135deg,#1A3A5C,#2C5282)}
.course-thumb.cat-solo{background:linear-gradient(135deg,#3a2000,#7a4500)}
.course-thumb.cat-dx{background:linear-gradient(135deg,#003333,#006666)}
.course-thumb.cat-open{background:linear-gradient(135deg,#2C5282,#1A3A5C)}
.course-body{padding:1.5rem}
.course-badges{display:flex;gap:5px;margin-bottom:.7rem;flex-wrap:wrap}
.badge{font-size:9px;padding:3px 8px;font-weight:700;letter-spacing:.07em;white-space:nowrap}
.badge-free{background:var(--green-pale);color:var(--green)}
.badge-paid{background:var(--gold-pale);color:#8a6200}
.badge-online{background:var(--blue-pale);color:var(--blue)}
.badge-onsite{background:#fce4ec;color:#ad1457}
.badge-new{background:#f3e5f5;color:#6a1b9a}
.course-title{font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--navy);line-height:1.5;margin-bottom:.5rem}
.course-desc{font-size:12px;color:var(--text-lt);line-height:1.75;margin-bottom:1rem}
.course-meta{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--g1);padding-top:.8rem}
.course-info{display:flex;flex-direction:column;gap:2px}
.course-info-row{font-size:11px;color:var(--g3);display:flex;align-items:center;gap:5px}
.course-info-row svg{width:12px;height:12px;stroke:var(--g3);fill:none;stroke-width:2;flex-shrink:0}
.course-price{text-align:right}
.course-price-num{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--navy);display:block;line-height:1}
.course-price-unit{font-size:10px;color:var(--g3)}
.course-price-free{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--green);display:block}

/* ── SCHEDULE (公開セミナー) ── */
.schedule-section{background:var(--white)}
.schedule-filter{display:flex;gap:6px;margin-bottom:1.5rem;flex-wrap:wrap}
.filter-chip{padding:6px 14px;font-size:11px;letter-spacing:.06em;font-weight:500;border:1px solid var(--g2);background:var(--white);color:var(--g3);cursor:pointer;transition:all .15s;font-family:var(--sans)}
.filter-chip.active,.filter-chip:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.schedule-list{display:flex;flex-direction:column;gap:1.5px;background:var(--g2);border:1.5px solid var(--g2);margin-bottom:2rem}
.schedule-row{background:var(--white);display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:1.5rem;padding:1.2rem 1.8rem;transition:background .15s;cursor:pointer;text-decoration:none;color:inherit}
.schedule-row:hover{background:var(--gold-pale)}
.sch-date{text-align:center}
.sch-date-day{font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--navy);line-height:1;display:block}
.sch-date-mon{font-size:10px;color:var(--g3);letter-spacing:.1em;display:block;margin-top:2px}
.sch-date-wday{font-size:10px;color:var(--g3);display:block}
.sch-main{min-width:0}
.sch-badges{display:flex;gap:5px;margin-bottom:4px;flex-wrap:wrap}
.sch-title{font-size:14px;font-weight:700;color:var(--navy);line-height:1.5;margin-bottom:3px}
.sch-meta{font-size:11px;color:var(--g3)}
.sch-action{flex-shrink:0}
.sch-btn{font-size:12px;padding:9px 18px;background:var(--navy);color:var(--white);border:none;font-family:var(--sans);letter-spacing:.06em;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;text-decoration:none;display:inline-block}
.sch-btn:hover{background:var(--gold);color:var(--navy)}
.sch-btn-free{background:var(--green);color:var(--white)}
.sch-btn-free:hover{background:var(--gold);color:var(--navy)}
.load-more{display:flex;justify-content:center;margin-top:1.5rem}
.btn-outline-navy{border:1.5px solid var(--navy);color:var(--navy);padding:12px 32px;font-size:13px;font-weight:700;letter-spacing:.06em;background:transparent;cursor:pointer;font-family:var(--sans);transition:all .2s;text-decoration:none;display:inline-block}
.btn-outline-navy:hover{background:var(--navy);color:var(--white)}

/* ── FEATURES (特徴) ── */
.features-section{background:var(--navy);padding:80px 2rem}
.features-section .sec-title{color:var(--white)}
.features-section .sec-label{color:var(--gold)}
.features-section .sec-label::before{background:var(--gold)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:rgba(201,168,76,.12);border:1.5px solid rgba(201,168,76,.12);margin-top:3rem}
.feature-item{background:var(--navy);padding:2.5rem 2rem;position:relative;overflow:hidden}
.feature-item::before{content:attr(data-num);font-family:var(--serif);font-size:5rem;font-weight:700;color:rgba(201,168,76,.06);position:absolute;top:.5rem;right:1rem;line-height:1}
.feat-icon{width:48px;height:48px;border:1.5px solid rgba(201,168,76,.35);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.feat-icon svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feat-title{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:.6rem;line-height:1.4}
.feat-desc{font-size:12px;color:rgba(255,255,255,.45);line-height:1.85}

/* ── INSTRUCTOR ── */
.instructor-section{background:var(--white);padding:80px 2rem}
.instructor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.instructor-card{background:var(--g1);border:1.5px solid var(--g2);padding:2rem;transition:all .2s;position:relative}
.instructor-card:hover{border-color:var(--gold);background:var(--white)}
.inst-header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--g2)}
.inst-avatar{width:52px;height:52px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--gold);flex-shrink:0}
.inst-name{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--navy);display:block;margin-bottom:2px}
.inst-role{font-size:11px;color:var(--g3);line-height:1.5;display:block}
.inst-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:.8rem}
.inst-tag{font-size:10px;padding:3px 8px;background:var(--gold-pale);color:#8a6200;letter-spacing:.04em}
.inst-bio{font-size:12px;color:var(--text-lt);line-height:1.8}

/* ── FLOW ── */
.flow-section{background:var(--g1);padding:80px 2rem}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:3rem;position:relative}
.flow-connector{position:absolute;top:35px;left:10%;right:10%;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);z-index:0}
.flow-step{text-align:center;padding:.8rem;position:relative;z-index:1}
.flow-circle{width:70px;height:70px;border:2px solid var(--gold);background:var(--white);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1rem;position:relative}
.flow-circle-step{font-size:8px;letter-spacing:.1em;color:var(--gold);font-weight:600}
.flow-circle-num{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--navy);line-height:1}
.flow-step-title{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--navy);margin-bottom:4px}
.flow-step-desc{font-size:11px;color:var(--g3);line-height:1.6}

/* ── CUSTOM REQUEST ── */
.custom-section{background:var(--cream);padding:80px 2rem}
.custom-box{background:var(--white);border:1.5px solid var(--g2);padding:3rem;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.custom-box-left .sec-label{margin-bottom:.5rem}
.custom-title{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--navy);margin-bottom:.8rem;line-height:1.4}
.custom-desc{font-size:14px;color:var(--text-lt);line-height:1.9;margin-bottom:1.5rem}
.custom-points{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.custom-points li{font-size:13px;color:var(--text-lt);display:flex;align-items:flex-start;gap:8px}
.custom-points li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:.55rem;flex-shrink:0}
.custom-box-right{display:flex;flex-direction:column;gap:12px;min-width:220px}
.btn-navy-fill{background:var(--navy);color:var(--white);padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:.06em;text-decoration:none;display:block;text-align:center;border:2px solid var(--navy);transition:all .2s}
.btn-navy-fill:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn-gold-fill{background:var(--gold);color:var(--navy);padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:.06em;text-decoration:none;display:block;text-align:center;border:2px solid var(--gold);transition:all .2s}
.btn-gold-fill:hover{background:var(--gold-lt);border-color:var(--gold-lt)}

/* ── VOICE ── */
.voice-section{background:var(--navy);padding:80px 2rem}
.voice-section .sec-title{color:var(--white)}
.voice-section .sec-label{color:var(--gold)}
.voice-section .sec-label::before{background:var(--gold)}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.voice-card{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.18);padding:2rem;position:relative}
.voice-card::before{content:'"';font-family:var(--serif);font-size:6rem;color:rgba(201,168,76,.08);position:absolute;top:.5rem;right:1.2rem;line-height:1;font-style:italic}
.voice-stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:.8rem}
.voice-course{font-size:10px;letter-spacing:.1em;color:rgba(201,168,76,.7);font-weight:600;margin-bottom:.8rem;padding:3px 10px;border-left:2px solid rgba(201,168,76,.4);display:inline-block}
.voice-text{font-size:13px;color:rgba(255,255,255,.7);line-height:1.9;margin-bottom:1.5rem}
.voice-author{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:1rem}
.voice-avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13px;font-weight:700;color:var(--navy);flex-shrink:0}
.voice-name{font-size:13px;font-weight:700;color:var(--white);display:block;line-height:1.2}
.voice-role{font-size:11px;color:rgba(255,255,255,.35);display:block;margin-top:2px}

/* ── CTA ── */
.cta-section{background:var(--white);border-top:4px solid var(--gold);padding:80px 2rem;text-align:center}
.cta-section .sec-label{justify-content:center}
.cta-section .sec-label::before{display:none}
.cta-section .sec-title{text-align:center;margin-bottom:.8rem}
.cta-section .sec-desc{margin:0 auto 2.5rem;text-align:center}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.btn-gold-lg{background:var(--gold);color:var(--navy);padding:17px 44px;font-weight:700;font-size:15px;letter-spacing:.08em;text-decoration:none;border:2px solid var(--gold);transition:all .2s;display:inline-block}
.btn-gold-lg:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn-outline-lg{background:transparent;color:var(--navy);padding:15px 36px;font-weight:700;font-size:14px;letter-spacing:.06em;text-decoration:none;border:2px solid var(--navy);transition:all .2s;display:inline-block}
.btn-outline-lg:hover{background:var(--navy);color:var(--white)}
.cta-note{font-size:12px;color:var(--g3);letter-spacing:.04em}
.cta-note span{color:var(--gold);margin:0 4px}

/* ── FOOTER mini ── */
.footer-mini{background:var(--navy);border-top:1px solid rgba(255,255,255,.06);padding:2rem;text-align:center}
.footer-mini-copy{font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.06em}
.footer-mini-copy a{color:rgba(255,255,255,.3);text-decoration:none}
.footer-mini-copy a:hover{color:var(--gold)}

/* ── STICKY BAR ── */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:2px solid var(--gold);padding:10px 2rem;display:flex;align-items:center;justify-content:space-between;z-index:300;transform:translateY(100%);transition:transform .3s;box-shadow:0 -4px 20px rgba(13,35,64,.12)}
.sticky-bar.visible{transform:translateY(0)}
.sticky-bar-text{font-size:13px;font-weight:700;color:var(--navy)}
.sticky-bar-sub{font-size:11px;color:var(--g3);margin-top:1px}
.sticky-bar-actions{display:flex;gap:8px;align-items:center}
.sticky-bar-btn{background:var(--gold);color:var(--navy);padding:10px 22px;font-weight:700;font-size:12px;letter-spacing:.06em;text-decoration:none;white-space:nowrap;transition:background .2s}
.sticky-bar-btn:hover{background:var(--navy);color:var(--white)}
.sticky-bar-btn2{background:var(--navy);color:var(--white);padding:10px 18px;font-weight:700;font-size:12px;letter-spacing:.06em;text-decoration:none;white-space:nowrap;transition:background .2s}
.sticky-bar-btn2:hover{background:var(--gold);color:var(--navy)}

/* ── FADE-IN ── */
.fi{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.fi.on{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .kv-inner{grid-template-columns:1fr;padding:60px 2rem 60px 3rem}
  .kv-quicknav{display:none}
  .audience-grid,.features-grid,.instructor-grid,.voice-grid{grid-template-columns:1fr}
  .course-grid{grid-template-columns:1fr 1fr}
  .flow-steps{grid-template-columns:1fr;gap:1rem}
  .flow-connector{display:none}
  .custom-box{grid-template-columns:1fr}
  .schedule-row{grid-template-columns:70px 1fr auto}
  .nav-links{display:none}
}
@media(max-width:600px){
  .course-grid{grid-template-columns:1fr}
  .schedule-row{grid-template-columns:1fr;gap:.5rem}
  .sch-date{text-align:left;display:flex;align-items:center;gap:.5rem}
}

/* === from membership.html === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0D2340; --navy-md:#1A3A5C; --navy-lt:#2C5282;
  --gold:#C9A84C; --gold-lt:#E8C97A; --gold-pale:#FDF6E3;
  --cream:#FAFAF7; --white:#FFFFFF;
  --g1:#F4F4F2; --g2:#E8E8E4; --g3:#9A9A94; --g4:#5A5A55;
  --text:#1A1A18; --text-lt:#4A4A46;
  --green:#1a7a4a; --green-pale:#e8f5e9;
  --tier1:#3a5a8a; --tier2:#C9A84C; --tier3:#8B6914;
  --serif:'Noto Serif JP',serif; --sans:'Noto Sans JP',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--cream);overflow-x:hidden;line-height:1.75}

/* ── HEADER ── */
header{background:var(--white);border-bottom:1px solid var(--g2);position:sticky;top:0;z-index:200;padding:0 2rem}
.hdr{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{text-decoration:none;display:flex;flex-direction:column;gap:1px}
.logo-sub{font-size:9px;letter-spacing:.15em;color:var(--g3);font-weight:300}
.logo-main{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.05em}
.nav{display:flex;align-items:center;gap:1.8rem}
.nav a{font-size:12px;color:var(--text-lt);text-decoration:none;letter-spacing:.04em;transition:color .15s}
.nav a:hover{color:var(--navy)}
.nav a.cur{color:var(--navy);font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:2px}
.nav-cta{background:var(--gold)!important;color:var(--navy)!important;padding:9px 18px;font-weight:700;font-size:12px!important;letter-spacing:.06em;transition:background .2s;border-bottom:none!important}
.nav-cta:hover{background:var(--navy)!important;color:var(--white)!important}

/* ── BREADCRUMB ── */
.bc{background:var(--white);border-bottom:1px solid var(--g2);padding:.6rem 2rem}
.bc-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px}
.bc a{font-size:11px;color:var(--g3);text-decoration:none}.bc a:hover{color:var(--gold)}
.bc-sep{font-size:10px;color:var(--g2)}
.bc-cur{font-size:11px;color:var(--navy);font-weight:500}

/* ── HERO ── */
.kv{background:var(--navy);position:relative;overflow:hidden;padding:0}
.kv-pattern{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 20% 50%, rgba(201,168,76,.07) 0%, transparent 50%),
                   radial-gradient(circle at 80% 20%, rgba(201,168,76,.05) 0%, transparent 40%),
                   repeating-linear-gradient(45deg,transparent,transparent 80px,rgba(201,168,76,.02) 80px,rgba(201,168,76,.02) 81px)}
.kv-bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(to bottom,var(--gold),rgba(201,168,76,.15))}
.kv-inner{max-width:1200px;margin:0 auto;padding:90px 2rem 90px 5rem;display:grid;grid-template-columns:1fr 360px;gap:4rem;align-items:center;position:relative}
.kv-eye{font-size:10px;letter-spacing:.35em;color:var(--gold);font-weight:500;margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.kv-eye::before{content:'';display:inline-block;width:24px;height:1px;background:var(--gold)}
.kv-h1{font-family:var(--serif);font-size:clamp(1.9rem,3.5vw,3rem);font-weight:700;color:var(--white);line-height:1.35;letter-spacing:.02em;margin-bottom:1.2rem}
.kv-h1 em{color:var(--gold-lt);font-style:normal}
.kv-sub{font-size:14px;color:rgba(255,255,255,.6);line-height:2;max-width:500px;margin-bottom:2rem}
.kv-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:10px;padding:4px 12px;letter-spacing:.07em;font-weight:500;border:1px solid rgba(201,168,76,.3);color:rgba(255,255,255,.6)}

/* hero tier overview */
.kv-tiers{display:flex;flex-direction:column;gap:2px}
.kv-tier{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);transition:all .2s;cursor:default}
.kv-tier:hover{background:rgba(201,168,76,.07);border-color:rgba(201,168,76,.2)}
.kv-tier-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-general{background:var(--tier1)}
.dot-corporate{background:var(--gold)}
.dot-certified{background:var(--tier3)}
.kv-tier-label{font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.4);width:60px;flex-shrink:0}
.kv-tier-name{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--white);flex:1}
.kv-tier-price{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--gold-lt)}
.kv-tier-arrow{font-size:12px;color:rgba(201,168,76,.4)}

/* ── COMMON ── */
section{padding:80px 2rem}
.container{max-width:1100px;margin:0 auto}
.sec-label{font-size:10px;letter-spacing:.3em;color:var(--gold);font-weight:500;display:flex;align-items:center;gap:8px;margin-bottom:.6rem}
.sec-label::before{content:'';width:16px;height:1px;background:var(--gold)}
.sec-title{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;color:var(--navy);line-height:1.45;letter-spacing:.02em;margin-bottom:.8rem}
.sec-desc{font-size:14px;color:var(--text-lt);line-height:1.95;max-width:600px}
.sec-hd{margin-bottom:3rem}

/* ── WHY JOIN ── */
.why-section{background:var(--white)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--g2);border:1.5px solid var(--g2)}
.why-card{background:var(--white);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:background .2s}
.why-card:hover{background:var(--gold-pale)}
.why-card::after{content:attr(data-n);font-family:var(--serif);font-size:5rem;font-weight:700;color:var(--g1);position:absolute;top:.5rem;right:1rem;line-height:1;transition:color .2s}
.why-card:hover::after{color:rgba(201,168,76,.12)}
.why-icon{width:48px;height:48px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.why-icon svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.why-title{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:.6rem;line-height:1.4}
.why-desc{font-size:13px;color:var(--text-lt);line-height:1.85}

/* ── PLAN COMPARISON ── */
.plans-section{background:var(--g1)}

/* tier cards */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.tier-card{background:var(--white);border:2px solid var(--g2);padding:0;position:relative;transition:all .3s;display:flex;flex-direction:column}
.tier-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(13,35,64,.1)}
.tier-card.featured{border-color:var(--gold)}
.tier-card.top-tier{border-color:var(--tier3)}

.tier-head{padding:2.5rem 2rem 2rem}
.tier-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;font-weight:700;padding:5px 18px;white-space:nowrap}
.badge-pop{background:var(--gold);color:var(--navy)}
.badge-top{background:var(--tier3);color:var(--white)}
.tier-rank{font-size:10px;letter-spacing:.2em;font-weight:600;margin-bottom:.4rem;margin-top:.5rem}
.rank-g{color:var(--tier1)}
.rank-c{color:var(--gold)}
.rank-a{color:var(--tier3)}
.tier-name{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:.3rem}
.tier-target{font-size:12px;color:var(--g3);line-height:1.5;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--g1)}
.tier-price-wrap{margin-bottom:1.5rem}
.tier-price{font-family:var(--serif);font-size:2.6rem;font-weight:700;color:var(--navy);line-height:1}
.tier-price-unit{font-size:13px;color:var(--g3)}
.tier-price-tax{font-size:11px;color:var(--g3);display:block;margin-top:3px}
.tier-price-note{font-size:11px;color:var(--g3);margin-top:.3rem;font-style:italic}

.tier-body{padding:0 2rem 2.5rem;flex:1;display:flex;flex-direction:column}
.feat-group{margin-bottom:1.5rem}
.feat-group-label{font-size:10px;letter-spacing:.15em;color:var(--gold);font-weight:600;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--g1)}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.feat-list li{font-size:13px;color:var(--text-lt);display:flex;align-items:flex-start;gap:9px;line-height:1.6}
.feat-check{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.check-yes{background:var(--green-pale)}
.check-yes::after{content:'✓';font-size:9px;color:var(--green);font-weight:700}
.check-no{background:var(--g1)}
.check-no::after{content:'—';font-size:10px;color:var(--g3);font-weight:400}
.feat-list li.disabled{color:var(--g3)}

.tier-cta{margin-top:auto;padding-top:1.5rem}
.btn-tier{display:block;padding:14px;text-align:center;font-size:13px;letter-spacing:.07em;font-weight:700;text-decoration:none;transition:all .2s}
.btn-t-outline{border:1.5px solid var(--navy);color:var(--navy)}
.btn-t-outline:hover{background:var(--navy);color:var(--white)}
.btn-t-gold{background:var(--gold);color:var(--navy);border:1.5px solid var(--gold)}
.btn-t-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn-t-dark{background:var(--navy);color:var(--white);border:1.5px solid var(--navy)}
.btn-t-dark:hover{background:var(--tier3);border-color:var(--tier3)}

/* ── COMPARISON TABLE ── */
.compare-section{background:var(--white);padding:80px 2rem}
.compare-wrap{overflow-x:auto;margin-top:3rem}
table{width:100%;border-collapse:collapse;min-width:600px}
thead tr{background:var(--navy)}
th{padding:1rem 1.2rem;text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.7)}
th:first-child{text-align:left;color:rgba(255,255,255,.5);font-size:11px}
th.th-g{color:#90caf9}
th.th-c{color:var(--gold-lt)}
th.th-a{color:#ffcc80}
tbody tr{border-bottom:1px solid var(--g2)}
tbody tr:hover{background:var(--g1)}
td{padding:.85rem 1.2rem;font-size:13px;text-align:center;color:var(--text-lt)}
td:first-child{text-align:left;color:var(--navy);font-weight:500;font-size:13px}
.t-yes{color:var(--green);font-weight:700}
.t-no{color:var(--g3)}
.t-num{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--navy)}
.t-gold{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--gold)}
.row-head td{background:var(--g1);font-size:11px;letter-spacing:.1em;color:var(--gold);font-weight:600;padding:.6rem 1.2rem}
.row-head td:first-child{color:var(--gold)}

/* ── BENEFITS DETAIL ── */
.benefits-section{background:var(--navy);padding:80px 2rem}
.benefits-section .sec-title{color:var(--white)}
.benefits-section .sec-label{color:var(--gold)}
.benefits-section .sec-label::before{background:var(--gold)}
.benefits-section .sec-desc{color:rgba(255,255,255,.55)}
.benefit-tabs{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.15);margin:3rem 0 1.5rem;flex-wrap:nowrap;overflow-x:auto}
.btab{padding:12px 24px;font-size:12px;letter-spacing:.06em;font-weight:500;background:transparent;color:rgba(255,255,255,.4);cursor:pointer;border:none;font-family:var(--sans);white-space:nowrap;transition:all .2s;flex-shrink:0}
.btab.active{background:var(--gold);color:var(--navy);font-weight:700}
.btab:hover:not(.active){color:var(--gold-lt);background:rgba(201,168,76,.08)}
.bpanel{display:none}
.bpanel.active{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:rgba(201,168,76,.1);border:1.5px solid rgba(201,168,76,.1)}
.bitem{background:var(--navy);padding:2rem 1.8rem;position:relative}
.bitem::before{content:attr(data-icon);font-size:2rem;position:absolute;top:1.2rem;right:1.5rem;opacity:.25}
.bitem-title{font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:.6rem;line-height:1.4}
.bitem-desc{font-size:12px;color:rgba(255,255,255,.45);line-height:1.8}
.bitem-tag{display:inline-block;font-size:9px;letter-spacing:.1em;padding:3px 9px;margin-bottom:.7rem;font-weight:600}
.tag-g{background:rgba(58,90,138,.4);color:#90caf9}
.tag-c{background:rgba(201,168,76,.2);color:var(--gold-lt)}
.tag-a{background:rgba(139,105,20,.3);color:#ffcc80}
.tag-all{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}

/* ── FLOW ── */
.flow-section{background:var(--g1);padding:80px 2rem}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem;position:relative}
.flow-grid::before{content:'';position:absolute;top:35px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
.fstep{text-align:center;padding:1rem;position:relative;z-index:1}
.fstep-circle{width:70px;height:70px;border:2px solid var(--gold);background:var(--white);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1rem}
.fstep-s{font-size:8px;letter-spacing:.1em;color:var(--gold);font-weight:600}
.fstep-n{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--navy);line-height:1}
.fstep-title{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--navy);margin-bottom:4px}
.fstep-desc{font-size:11px;color:var(--g3);line-height:1.6}

/* ── FAQ ── */
.faq-section{background:var(--white);padding:80px 2rem}
.faq-list{display:flex;flex-direction:column;gap:2px;background:var(--g2);border:1.5px solid var(--g2);margin-top:3rem}
.faq-item{background:var(--white)}
.faq-q{padding:1.3rem 1.8rem;display:flex;align-items:flex-start;gap:1rem;cursor:pointer;transition:background .15s}
.faq-q:hover{background:var(--gold-pale)}
.faq-qm{width:24px;height:24px;background:var(--navy);color:var(--white);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;margin-top:1px}
.faq-qt{font-size:14px;font-weight:700;color:var(--navy);line-height:1.5;flex:1}
.faq-arr{font-size:16px;color:var(--g3);transition:transform .25s;flex-shrink:0;margin-top:2px}
.faq-item.open .faq-arr{transform:rotate(180deg)}
.faq-a{display:none;padding:0 1.8rem 1.4rem 4rem;font-size:13px;color:var(--text-lt);line-height:1.9}
.faq-item.open .faq-a{display:block}

/* ── VOICE ── */
.voice-section{background:var(--cream);padding:80px 2rem}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.vcard{background:var(--white);border:1.5px solid var(--g2);padding:2rem;position:relative;transition:all .2s}
.vcard:hover{border-color:var(--gold)}
.vcard-q{position:absolute;top:1rem;right:1.5rem;font-family:var(--serif);font-size:4rem;color:var(--g1);line-height:1;font-style:italic}
.vstars{color:var(--gold);font-size:12px;letter-spacing:2px;margin-bottom:.6rem}
.vtier{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.08em;padding:3px 10px;margin-bottom:.8rem}
.vtier-dot{width:7px;height:7px;border-radius:50%}
.vtier-g{background:rgba(58,90,138,.12);color:var(--tier1)}
.vtier-c{background:var(--gold-pale);color:#8a6200}
.vtext{font-size:13px;color:var(--text-lt);line-height:1.9;margin-bottom:1.2rem}
.vauthor{display:flex;align-items:center;gap:10px;border-top:1px solid var(--g2);padding-top:1rem}
.vavatar{width:38px;height:38px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13px;font-weight:700;color:var(--gold);flex-shrink:0}
.vname{font-size:13px;font-weight:700;color:var(--navy);display:block;line-height:1.2}
.vrole{font-size:11px;color:var(--g3);display:block;margin-top:2px}

/* ── CTA ── */
.cta-section{background:var(--navy);padding:100px 2rem;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 60px,rgba(201,168,76,.025) 60px,rgba(201,168,76,.025) 61px);pointer-events:none}
.cta-eye{font-size:10px;letter-spacing:.3em;color:var(--gold);font-weight:500;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:10px}
.cta-eye::before,.cta-eye::after{content:'';width:24px;height:1px;background:var(--gold)}
.cta-h2{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:var(--white);line-height:1.4;margin-bottom:1rem;position:relative}
.cta-h2 em{color:var(--gold-lt);font-style:normal}
.cta-p{font-size:14px;color:rgba(255,255,255,.55);max-width:480px;margin:0 auto 2.5rem;line-height:2}
.cta-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.5rem;position:relative}
.cta-card{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.18);padding:2rem 1.5rem;text-align:center}
.cta-card-tier{font-size:10px;letter-spacing:.2em;font-weight:600;margin-bottom:.4rem;display:block}
.cta-card-name{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:.3rem}
.cta-card-price{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--gold-lt);margin-bottom:.8rem}
.cta-card-price span{font-size:.75rem;color:rgba(255,255,255,.4)}
.btn-cta{display:block;padding:12px 20px;font-size:12px;font-weight:700;letter-spacing:.07em;text-decoration:none;transition:all .2s;margin-top:.5rem}
.btn-outline-w{border:1.5px solid rgba(255,255,255,.3);color:var(--white)}
.btn-outline-w:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold-s{background:var(--gold);color:var(--navy);border:1.5px solid var(--gold)}
.btn-gold-s:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.cta-note{font-size:12px;color:rgba(255,255,255,.25);letter-spacing:.04em}
.cta-note em{color:rgba(201,168,76,.6);font-style:normal;margin:0 4px}

/* ── FOOTER ── */
.footer-mini{background:var(--navy);border-top:1px solid rgba(255,255,255,.06);padding:2rem;text-align:center}
.footer-mini p{font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.05em}
.footer-mini a{color:rgba(255,255,255,.3);text-decoration:none}.footer-mini a:hover{color:var(--gold)}

/* ── STICKY ── */
.sticky{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:2px solid var(--gold);padding:10px 2rem;display:flex;align-items:center;justify-content:space-between;z-index:300;transform:translateY(100%);transition:transform .3s;box-shadow:0 -4px 20px rgba(13,35,64,.12)}
.sticky.on{transform:translateY(0)}
.sticky-txt{font-size:13px;font-weight:700;color:var(--navy)}
.sticky-sub{font-size:11px;color:var(--g3);margin-top:1px}
.sticky-actions{display:flex;gap:8px}
.sbtn{padding:10px 22px;font-size:12px;font-weight:700;letter-spacing:.06em;text-decoration:none;white-space:nowrap;transition:all .2s}
.sbtn-g{background:var(--gold);color:var(--navy)}
.sbtn-g:hover{background:var(--navy);color:var(--white)}
.sbtn-n{background:var(--navy);color:var(--white)}
.sbtn-n:hover{background:var(--gold);color:var(--navy)}

/* ── FADE ── */
.fi{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.fi.on{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .kv-inner{grid-template-columns:1fr;padding:60px 2rem 60px 3rem}
  .kv-tiers{display:none}
  .why-grid,.tier-grid,.voice-grid,.cta-cards{grid-template-columns:1fr}
  .bpanel.active{grid-template-columns:1fr}
  .flow-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
  .flow-grid::before{display:none}
  .nav{display:none}
}
@media(max-width:600px){
  .flow-grid{grid-template-columns:1fr}
}