@charset "UTF-8";

/* ========================================
   RESET & BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #111;
    line-height: 1.8;
    background: #ffffff;
}

/* ========================================
   HEADER & NAVIGATION - CORRECTED
   ======================================== */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    transition: top 0.4s;
    z-index: 100;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-inner {
    max-width: 1200px;
    margin: auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 16px;
}

.logo a {
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.logo a:hover {
    color: #00a6c7;
}

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav a {
    text-decoration: none;
    color: #111;
    font-size: 14px;
    transition: color 0.3s ease;
    position: relative;
}

.nav a:hover {
    color: #00a6c7;
}

.nav-link.active {
    color: #00a6c7;
    font-weight: 700;
}

.nav-cta {
    color: #1E5EFF;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-cta:hover {
    color: #0044cc;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: #111;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    flex-direction: column;
    gap: 0;
    padding: 20px 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.mobile-nav.active {
    display: flex;
}

.mobile-nav-link {
    padding: 12px 40px;
    text-decoration: none;
    color: #111;
    font-size: 14px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.mobile-nav-link:hover {
    color: #00a6c7;
    background: #f0fafb;
}

.mobile-nav-link.active {
    color: #00a6c7;
    border-left-color: #00a6c7;
    font-weight: 700;
}

.mobile-nav-cta {
    padding: 12px 40px;
    color: #1E5EFF;
    font-weight: 700;
    text-decoration: none;
}


/* ========================================
   HERO SECTION
   ======================================== */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    background-image: url('../images/top.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-inner {
    max-width: 1000px;
    margin: auto;
    padding: 0 40px;
    width: 100%;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
}

.hero p {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
}

/* ========================================
   WHY SECTION
   ======================================== */
.why {
    padding: 120px 0;
    background: #ffffff;
}

.why__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.why__image img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12);
}

.why__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
}

.why__title {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.why__text {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 16px;
}

.why__quote {
    margin-top: 32px;
    padding: 24px 28px;
    border-left: 4px solid #00a6c7;
    background: #f7fbfd;
    border-radius: 12px;
}

.why__quote-main {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 12px;
}

.why__quote-sub {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}

/* ========================================
   PHILOSOPHY SECTION
   ======================================== */
.philosophy {
    padding: 140px 0;
    background: #ffffff;
}

.philosophy__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.philosophy__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
}

.philosophy__title {
    font-size: 32px;
    margin-bottom: 64px;
}

.philosophy__cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.philosophy__card {
    width: 300px;
    padding: 40px 32px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.philosophy__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

.philosophy__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #eaf7fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.philosophy__card-title {
    font-size: 18px;
    margin-bottom: 12px;
}

.philosophy__card-text {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}

.philosophy__arrow {
    font-size: 24px;
    color: #bbb;
}

.philosophy__cycle {
    margin-top: 80px;
    padding: 32px;
    background: #f7fbfd;
    border-radius: 20px;
}

.philosophy__cycle-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.philosophy__cycle-text {
    font-size: 14px;
    color: #555;
}

/* ========================================
   EDUCATION SECTION
   ======================================== */
.education-os {
    padding: 160px 0;
    background: linear-gradient(180deg, #0b1325, #060b1a);
    color: #ffffff;
}

.education-os__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 80px;
}

.education-os__content {
    flex: 1;
}

.education-os__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00e5ff;
    margin-bottom: 16px;
    font-weight: 600;
}

.education-os__title {
    font-size: 40px;
    line-height: 1.4;
    margin-bottom: 32px;
}

.education-os__text {
    font-size: 15px;
    line-height: 1.9;
    color: #cfd6e1;
    margin-bottom: 24px;
}

.education-os__text .underline {
    border-bottom: 2px solid #00e5ff;
    padding-bottom: 2px;
}

.education-os__points {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.education-os__point {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.education-os__point::before {
    content: "✓";
    color: #00e5ff;
    font-weight: bold;
}

.education-os__image {
    flex: 1;
}

.education-os__image img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}

/* ========================================
   PROCESS SECTION - UPDATED DESIGN
   ======================================== */
.process-section {
    padding: 100px 20px;
    background-color: #f8fafc;
}

.process-container {
    max-width: 1200px;
    margin: 0 auto;
}

.process-header {
    text-align: center;
    margin-bottom: 60px;
}

.process-label {
    color: #3b82f6;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    margin-bottom: 12px;
    display: block;
    text-transform: uppercase;
}

.process-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1e293b;
    line-height: 1.2;
}

.process-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 8px;
}

/* Step 0 - Large Card with Badge */
.step-zero-wrapper {
    max-width: 900px;
    margin: 0 auto 40px;
    position: relative;
    padding-top: 20px;
}

.step-zero {
    background: #ffffff;
    border-radius: 24px;
    padding: 60px 40px 40px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    text-align: center;
    position: relative;
    border: 1px solid #e2e8f0;
}

.step-zero-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #e2e8f0;
    color: #475569;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: inline-block;
}

.step-zero-title {
    color: #0891b2;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.step-zero-subtitle {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1e293b;
}

.step-zero-description {
    color: #64748b;
    margin-bottom: 32px;
    font-size: 1rem;
}

/* Tag Grid */
.step-zero-grid {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.step-zero-card {
    background: #f1f5f9;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.step-zero-card:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.step-zero-card-text {
    color: #475569;
    font-size: 0.95rem;
    margin: 0;
    font-weight: 500;
}

.step-zero-footer {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Arrow & Transition */
.process-arrow {
    text-align: center;
    margin: 60px 0;
    position: relative;
    padding: 20px 0;
}

.arrow-text {
    color: #0891b2;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    padding: 0 0 20px 0;
    position: relative;
    display: inline-block;
}

.arrow-text::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 15px;
    background: #cbd5e1;
}

.arrow-text::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background: #cbd5e1;
}

.arrow-icon {
    font-size: 1.5rem;
    color: #cbd5e1;
    display: block;
    margin-top: 20px;
}

/* Steps 1, 2, 3 - Grid Layout */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.step-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.step-card:hover {
    box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.step-number {
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.step-category {
    color: #0891b2;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.step-tagline {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

/* Step Points */
.step-points {
    margin-bottom: 24px;
}

.step-point {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.step-point-bullet {
    color: #0891b2;
    font-size: 0.75rem;
    font-weight: bold;
}

.step-point-text {
    color: #475569;
    font-size: 0.95rem;
}

/* Step Button */
.step-button {
    display: inline-block;
    background: transparent;
    color: #0891b2;
    font-weight: 700;
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 12px;
    font-size: 0.9rem;
    text-decoration: none;
}

.step-button:hover {
    color: #0671a0;
    text-decoration: underline;
}

.step-button:active {
    transform: none;
}

.step-footer {
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
}

/* Circulation Message */
.circulation-message {
    text-align: center;
    margin-bottom: 32px;
}

.circulation-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: #475569;
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 16px;
    font-weight: 700;
}

.circulation-icon {
    font-size: 1.25rem;
}

.circulation-text {
    font-size: 0.95rem;
}

.circulation-cycle {
    color: #64748b;
    font-size: 0.9rem;
}

/* Final Message */
.final-message {
    text-align: center;
}

.final-message-text {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

/* ========================================
   BUSINESS SECTION
   ======================================== */
.business-section {
    padding: 120px 0;
    background: #ffffff;
}

.business-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.business-header {
    text-align: center;
    margin-bottom: 80px;
}

.business-label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
}

.business-title {
    font-size: 48px;
    font-weight: 700;
    color: #111;
    margin-bottom: 24px;
    line-height: 1.4;
}

.business-description {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.business-card {
    padding: 40px 24px;
    background: #f9fafb;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.business-card:hover {
    background: #f0fafb;
    border-color: #00a6c7;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 166, 199, 0.1);
}

.business-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0f7fa;
    border-radius: 50%;
    color: #00a6c7;
    font-size: 32px;
    line-height: 1;
}

.business-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    line-height: 1.6;
    margin: 0;
}

.business-footer {
    text-align: center;
    padding: 40px;
    background: #f9fafb;
    border-radius: 16px;
}

.business-footer-text {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

/* ========================================
   MESSAGE SECTION
   ======================================== */
.message-section {
    padding: 120px 0;
    background: #ffffff;
}

.message-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.message-header {
    margin-bottom: 80px;
}

.message-section-title {
    font-size: 48px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.4;
}

.message-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.message-photo-wrapper {
    display: flex;
    justify-content: center;
}

.message-photo {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.message-photo:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16);
}

.message-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.message-text {
    line-height: 2;
}

.message-line {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px 0;
    line-height: 1.6;
}

.message-paragraph {
    font-size: 16px;
    color: #555;
    margin: 0 0 12px 0;
    line-height: 1.8;
}

.message-conclusion {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin: 16px 0 0 0;
    line-height: 1.8;
}

.message-link-wrapper {
    display: flex;
    align-items: center;
}

.message-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #00a6c7;
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.message-link:hover {
    border-bottom-color: #00a6c7;
    gap: 16px;
}

.message-link-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.message-link:hover .message-link-arrow {
    transform: translateX(4px);
}

/* ========================================
   ABOUT PAGE EXTENSION
======================================== */

/* About Hero Section */
.about-hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    background-image: url('../images/top.png');
    background-size: cover;
    background-position: center;
    text-align: center;
    margin-top: 80px;
    position: relative;
}

.about-hero__inner {
    max-width: 800px;
    padding: 0 40px;
}

.about-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.3;
}

.about-hero__subtitle {
    font-size: 18px;
    color: #666;
    font-weight: 400;
}

/* CEO Message Section */
.ceo-message {
    padding: 120px 0;
    background: #ffffff;
}

.ceo-message__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.ceo-message__heading {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 80px;
    color: #111;
    position: relative;
    padding-bottom: 20px;
}

.ceo-message__heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #00a6c7;
}

.ceo-message__content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: flex-start;
}

.ceo-message__image-wrapper {
    position: sticky;
    top: 120px;
}

.ceo-message__image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    display: block;
    margin-bottom: 24px;
}

.ceo-message__info {
    text-align: center;
}

.ceo-message__company {
    font-size: 12px;
    color: #999;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.ceo-message__name {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.ceo-message__text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ceo-message__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ceo-message__text p {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
}

.ceo-message__philosophy {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid #e8e8e8;
    text-align: center;
}

.ceo-message__philosophy-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin-bottom: 12px;
    line-height: 1.6;
}

.ceo-message__philosophy-subtitle {
    font-size: 13px;
    color: #999;
    margin-top: 16px;
    font-style: italic;
}

/* Philosophy Section */
.about-philosophy {
    padding: 120px 0;
    background: #ffffff;
    text-align: center;
}

.about-philosophy__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-philosophy__title {
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin-bottom: 60px;
}

.about-philosophy__diagram {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

.philosophy-venn {
    width: 300px;
    height: 300px;
    max-width: 100%;
}

.about-philosophy__subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

/* Company Info Section */
.company-info {
    padding: 120px 0;
    background: #f9f9f9;
}

.company-info__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.company-info__title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: #111;
}

.company-info__table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.company-info__table tr {
    border-bottom: 1px solid #e8e8e8;
}

.company-info__table tr:last-child {
    border-bottom: none;
}

.company-info__table th {
    background: #f5f5f5;
    padding: 20px 30px;
    text-align: left;
    font-weight: 700;
    color: #111;
    font-size: 14px;
    width: 150px;
}

.company-info__table td {
    padding: 20px 30px;
    color: #555;
    font-size: 14px;
}

/* ========================================
   EVENT PAGE
======================================== */

.event-section {
    padding: 160px 0;
    background: #ffffff;
}

.event-overview {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
}

.event-text {
    font-size: 16px;
    line-height: 1.9;
    color: #475569;
}

.event-sponsor {
    background: #7BA8D1;
    padding: 60px;
    border-radius: 20px;
    text-align: center;
}

.event-sponsor-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1e293b;
}

.event-sponsor-list {
    list-style: none;
    margin-bottom: 32px;
}

.event-sponsor-list li {
    margin-bottom: 12px;
    color: #475569;
    font-size: 15px;
}

/* education */

.education-page-hero {
    padding: 160px 0 80px;
    text-align: center;
}

/* ========================================
   CONTACT & FOOTER
   ======================================== */
.contact {
    padding: 120px 20px;
    text-align: center;
    background: linear-gradient(135deg, #0b1325 0%, #060b1a 100%);
    background-image: linear-gradient(135deg, rgba(11, 19, 37, 0.95) 0%, rgba(6, 11, 26, 0.95) 100%), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="1200" height="600" fill="%230b1325"/><rect width="1200" height="600" fill="url(%23grid)"/></svg>');
    background-size: cover;
    background-position: center;
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(0, 229, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.contact>* {
    position: relative;
    z-index: 1;
}

.contact h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #ffffff;
    line-height: 1.3;
}

.contact>p {
    color: #cfd6e1;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 12px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    background: #00e5ff;
    color: #060b1a;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid #00e5ff;
    gap: 8px;
    margin: 0 12px 24px 12px;
    display: inline-flex;
}

.contact-btn:first-of-type {
    background: #00e5ff;
    color: #060b1a;
}

.contact-btn:last-of-type {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.3);
}

.contact-btn:last-of-type:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.contact-btn:active {
    transform: translateY(0);
}

.contact-link {
    display: inline-block;
    color: #00e5ff;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 24px;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.contact-link:hover {
    border-bottom-color: #00e5ff;
}

.footer {
    padding: 40px;
    text-align: center;
    background: #000000;
    color: #fff;
}

/* ========================================
   COMPANY SECTION
   ======================================== */
.company-section {
    padding: 120px 0;
    background: #ffffff;
}

.company-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.company-header {
    text-align: center;
    margin-bottom: 60px;
}

.company-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.company-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1e293b;
}

.company-content {
    max-width: 800px;
    margin: 0 auto;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
}

.company-table tr {
    border-bottom: 1px solid #e2e8f0;
}

.company-table th {
    text-align: left;
    padding: 20px 0;
    font-weight: 700;
    color: #1e293b;
    width: 150px;
}

.company-table td {
    padding: 20px 0;
    color: #475569;
    padding-left: 40px;
}

/* ========================================
   ACHIEVEMENTS SECTION
   ======================================== */
.achievements-section {
    padding: 120px 0;
    background: #f8fafc;
}

.achievements-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.achievements-header {
    text-align: center;
    margin-bottom: 60px;
}

.achievements-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.achievements-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1e293b;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}

.achievement-card {
    text-align: center;
    padding: 40px 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.achievement-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0891b2;
    margin-bottom: 12px;
}

.achievement-label {
    font-size: 1rem;
    color: #475569;
    font-weight: 600;
}

/* ========================================
   FAQ SECTION
   ======================================== */
.faq-section {
    padding: 120px 0;
    background: #ffffff;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.faq-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.faq-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1e293b;
}

.faq-content {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e2e8f0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.faq-answer {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.8;
}


/* Education Page */
.edu-hero {
    padding: 160px 0 100px;
    background: #f8faff;
    text-align: center;
}

.edu-hero__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.edu-hero__title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #333;
}

.edu-hero__title .highlight {
    color: #00a6c7;
    display: block;
    margin-top: 10px;
}

.edu-hero__text {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
}

.edu-why {
    padding: 100px 0;
    background: #fff;
}

.edu-why__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.edu-why__title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    padding-bottom: 15px;
}

.edu-why__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: #00a6c7;
}

.edu-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.edu-why__card {
    padding: 40px;
    background: #fcfcfc;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #eee;
}

.edu-why__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    color: #00a6c7;
}

.edu-why__card-title {
    font-size: 20px;
    margin-bottom: 15px;
}

.edu-why__card-text {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
}

.edu-clarity {
    padding: 100px 0;
    background: #fdfdfd;
}

.edu-clarity__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.edu-clarity__content {
    flex: 1;
}

.edu-clarity__title {
    font-size: 48px;
    font-family: 'Playfair Display', serif;
    margin-bottom: 10px;
    color: #111;
}

.edu-clarity__subtitle {
    font-size: 20px;
    font-weight: 700;
    color: #00a6c7;
    margin-bottom: 20px;
}

.edu-clarity__text {
    margin-bottom: 30px;
    color: #555;
}

.edu-clarity__list {
    list-style: none;
    margin-bottom: 40px;
}

.edu-clarity__list li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
}

.edu-clarity__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #00a6c7;
    font-weight: bold;
}

.edu-clarity__btns {
    display: flex;
    gap: 20px;
}

.edu-clarity__image {
    flex: 1;
}

.edu-clarity__image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Company Page */
.comp-hero {
    padding: 180px 0 120px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
}

.comp-hero__title {
    font-size: 56px;
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
}

.comp-hero__subtitle {
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.comp-services {
    padding: 100px 0;
    background: #fff;
}

.comp-services__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.comp-services__title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 15px;
}

.comp-services__subtitle {
    text-align: center;
    color: #777;
    margin-bottom: 60px;
}

.comp-services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.comp-services__card {
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.comp-services__icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.icon--blue {
    background: #eef4ff;
    color: #3b82f6;
}

.icon--green {
    background: #ecfdf5;
    color: #10b981;
}

.icon--purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.icon--orange {
    background: #fff7ed;
    color: #f59e0b;
}

.comp-services__card-title {
    font-size: 22px;
    margin-bottom: 15px;
}

.comp-services__card-text {
    font-size: 15px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.7;
}

.comp-services__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.comp-services__tags li {
    font-size: 12px;
    padding: 5px 12px;
    background: #f5f5f5;
    border-radius: 20px;
    color: #888;
}

.comp-contact {
    padding: 100px 0;
    background: #f9fafb;
}

.comp-contact__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
}

.comp-contact__title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 15px;
}

.comp-contact__form {
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
}

.form-group textarea {
    height: 150px;
    resize: vertical;
}

/* Common Components */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    text-align: center;
}

.btn--primary {
    background: #00a6c7;
    color: #fff;
}

.btn--secondary {
    background: #fff;
    color: #00a6c7;
    border: 1px solid #00a6c7;
}

/* ========================================
   PROJECT PAGE STYLES
   ======================================== */

/* Section 1: Hero */
.project-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2B5A8E 0%, #5B8EC7 50%, #7BA8D1 100%);
    background-image: url('../images/project-fv.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.project-hero__inner {
    max-width: 1000px;
    margin: auto;
    padding: 0 40px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.project-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: 0.05em;
}

.project-hero__subtitle {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 60px;
}

.project-hero__birds {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
    margin-bottom: 60px;
    height: 100px;
}

.project-hero__bird {
    width: 60px;
    height: 60px;
    animation: float 3s ease-in-out infinite;
}

.project-hero__bird--right {
    animation-delay: 1.5s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

.project-hero__scroll-indicator {
    width: 2px;
    height: 40px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0 auto;
    animation: scroll-down 2s ease-in-out infinite;
}

@keyframes scroll-down {

    0%,
    100% {
        opacity: 0.6;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(10px);
    }
}

/* Section 2: Project Essence */
.project-essence {
    padding: 120px 0;
    background: #ffffff;
}

.project-essence__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-essence__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
}

.project-essence__title {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 48px;
    color: #111;
}

.project-essence__content {
    max-width: 800px;
    margin: 0 auto;
}

.project-essence__text {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 32px;
}

.project-essence__main-text {
    font-size: 16px;
    line-height: 1.9;
    color: #111;
    font-weight: 600;
}

/* Section 3: Problem */
.project-problem {
    padding: 120px 0;
    background: #ffffff;
}

.project-problem__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.project-problem__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
    text-align: center;
}

.project-problem__title {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 16px;
    color: #111;
    text-align: center;
}

.project-problem__description {
    font-size: 15px;
    color: #555;
    text-align: center;
    margin-bottom: 48px;
}

.project-problem__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.project-problem__card {
    padding: 32px 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-problem__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.project-problem__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00a6c7;
}

.project-problem__icon svg {
    width: 100%;
    height: 100%;
}

.project-problem__card-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}

.project-problem__dark-box {
    background: rgba(11, 19, 37, 0.9);
    color: #ffffff;
    padding: 48px 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.project-problem__dark-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.project-problem__dark-text {
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.85);
}

/* Section 4: Philosophy */
.project-philosophy {
    padding: 120px 0;
    background: #ffffff;
}

.project-philosophy__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-philosophy__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
}

.project-philosophy__title {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 24px;
    color: #111;
}

.project-philosophy__description {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 32px;
}

.project-philosophy__sub {
    font-size: 13px;
    color: #00a6c7;
    margin-bottom: 24px;
    display: block;
}

.project-philosophy__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
}

.project-philosophy__badge {
    display: inline-block;
    padding: 8px 16px;
    background: #f0fafb;
    border: 1px solid #00a6c7;
    border-radius: 20px;
    font-size: 13px;
    color: #00a6c7;
}

.project-philosophy__quote {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px 28px;
    border-left: 4px solid #00a6c7;
    background: #f7fbfd;
    border-radius: 12px;
}

.project-philosophy__quote-text {
    font-size: 15px;
    line-height: 1.9;
    color: #111;
    margin-bottom: 16px;
}

.project-philosophy__quote-sub {
    font-size: 13px;
    color: #555;
}

/* Section 5: Vision */
.project-vision {
    padding: 120px 0;
    background: #e8f4f8;
}

.project-vision__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.project-vision__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
    text-align: center;
}

.project-vision__title {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 16px;
    color: #111;
    text-align: center;
}

.project-vision__description {
    font-size: 15px;
    color: #555;
    text-align: center;
    margin-bottom: 48px;
}

.project-vision__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 48px;
}

.project-vision__checklist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-vision__check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.project-vision__check-mark {
    color: #00a6c7;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.project-vision__check-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}

.project-vision__image {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.project-vision__image img {
    width: 100%;
    height: auto;
    display: block;
}

.project-vision__dark-box {
    background: rgba(11, 19, 37, 0.9);
    color: #ffffff;
    padding: 48px 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.project-vision__dark-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.project-vision__dark-text {
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.85);
}

/* Section 6: Structure */
.project-structure {
    padding: 120px 0;
    background: #ffffff;
}

.project-structure__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-structure__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
}

.project-structure__title {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 24px;
    color: #111;
}

.project-structure__description {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 48px;
}

.project-structure__methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 48px;
}

.project-structure__method {
    text-align: center;
}

.project-structure__method-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00a6c7;
}

.project-structure__method-icon svg {
    width: 100%;
    height: 100%;
}

.project-structure__method-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111;
}

.project-structure__method-text {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}

.project-structure__message {
    background: #0b1325;
    color: #ffffff;
    padding: 32px 40px;
    border-radius: 12px;
    text-align: center;
}

.project-structure__message-text {
    font-size: 16px;
    line-height: 1.8;
    color: #ffffff;
}

/* Section 7: Why Project? */
.project-why {
    padding: 120px 0;
    background: #e8f4f8;
}

.project-why__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-why__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #00a6c7;
    margin-bottom: 12px;
    font-weight: 600;
}

.project-why__title {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 24px;
    color: #111;
}

.project-why__description {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
}

/* Section 8: Definition & Footer */
.project-definition {
    background: linear-gradient(135deg, rgba(11, 19, 37, 0.95) 0%, rgba(45, 62, 80, 0.95) 100%);
    background-image: url('../images/project-fv.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    color: #ffffff;
    padding: 120px 0 0;
    position: relative;
}

.project-definition__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 120px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.project-definition__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
    font-weight: 600;
}

.project-definition__title {
    font-size: 40px;
    line-height: 1.5;
    margin-bottom: 48px;
    color: #ffffff;
    font-weight: 700;
}

.project-definition__content {
    max-width: 800px;
    margin: 0 auto 60px;
}

.project-definition__text {
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

.project-definition__birds {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
    margin-bottom: 60px;
    height: 80px;
}

.project-definition__bird {
    width: 50px;
    height: 50px;
    animation: float 3s ease-in-out infinite;
}

.project-definition__bird--right {
    animation-delay: 1.5s;
}

/* Footer */
.project-footer {
    background: #0b1325;
    color: #ffffff;
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.project-footer__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.project-footer__nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
}

.project-footer__link {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-footer__link:hover {
    color: #ffffff;
}

.project-footer__copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   PROJECT PAGE - REDESIGN STYLES
   ======================================== */

/* Page Setup */
.project-page {
    background: #ffffff;
    color: #111;
}

/* HEADER */
.project-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px 0;
}

.project-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-logo {
    flex-shrink: 0;
}

.project-logo__link {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-logo__link:hover {
    color: #00a6c7;
}

.project-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.project-nav__link {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.project-nav__link:hover {
    color: #111;
}

.project-nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #00a6c7;
    transition: width 0.3s ease;
}

.project-nav__link:hover::after {
    width: 100%;
}

.project-nav__sns {
    display: flex;
    gap: 12px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.project-nav__sns-link {
    color: #555;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-nav__sns-link:hover {
    color: #00a6c7;
}

/* HERO */
.project-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2B5A8E 0%, #5B8EC7 50%, #7BA8D1 100%);
    background-image: url('../images/project-fv.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    color: #ffffff;
    text-align: center;
    position: relative;
    margin-top: 60px;
}

.project-hero__inner {
    max-width: 900px;
    padding: 0 40px;
}

.project-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.project-hero__subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 60px;
}

.project-hero__scroll {
    display: flex;
    justify-content: center;
    animation: scroll-bounce 2s ease-in-out infinite;
    color: rgba(255, 255, 255, 0.7);
}

@keyframes scroll-bounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.7;
    }

    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

/* 共感ゾーン */
.project-empathy {
    padding: 120px 0;
    background: #ffffff;
}

.project-empathy__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-empathy__text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 24px;
}

.project-empathy__text:last-child {
    margin-bottom: 0;
}

/* 思想の核 */
.project-core {
    padding: 120px 0;
    background: #f7fbfd;
}

.project-core__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-core__title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    color: #111;
    letter-spacing: 0.02em;
}

/* 誤解回避ゾーン */
.project-clarification {
    padding: 120px 0;
    background: #ffffff;
}

.project-clarification__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-clarification__text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 24px;
}

.project-clarification__text:last-child {
    margin-bottom: 0;
}

/* プロジェクトの立場 */
.project-stance {
    padding: 120px 0;
    background: #f7fbfd;
}

.project-stance__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.project-stance__title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.6;
    color: #111;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}

.project-stance__subtitle {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}

/* 分岐セクション */
.project-branches {
    padding: 120px 0;
    background: #ffffff;
}

.project-branches__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.project-branch {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-branch__content {
    text-align: center;
}

.project-branch__title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

.project-branch__description {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 12px;
}

.project-branch__note {
    font-size: 13px;
    line-height: 1.6;
    color: #999;
    margin-bottom: 32px;
}

.project-branch__cta {
    display: inline-block;
    padding: 12px 32px;
    background: #00a6c7;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #00a6c7;
}

.project-branch__cta:hover {
    background: transparent;
    color: #00a6c7;
}

/* SNSセクション */
.project-sns {
    padding: 80px 0;
    background: #f7fbfd;
    text-align: center;
}

.project-sns__inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 40px;
}

.project-sns__text {
    font-size: 16px;
    color: #555;
    margin-bottom: 32px;
}

.project-sns__links {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.project-sns__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #00a6c7;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.project-sns__link:hover {
    background: #00a6c7;
    color: #ffffff;
    border-color: #00a6c7;
}

/* 企業サイトへのリンク */
.project-company-link {
    padding: 80px 0;
    background: #ffffff;
    text-align: center;
    border-top: 1px solid #eee;
}

.project-company-link__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
}

.project-company-link__text {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

.project-company-link__anchor {
    color: #00a6c7;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    position: relative;
}

.project-company-link__anchor::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #00a6c7;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-company-link__anchor:hover::after {
    opacity: 1;
}

/* FOOTER */
.project-footer {
    background: #0b1325;
    color: #ffffff;
    padding: 40px 0;
    text-align: center;
}

.project-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.project-footer__nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.project-footer__link {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-footer__link:hover {
    color: #ffffff;
}

.project-footer__copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   INDIVIDUAL PAGE STYLES
   ======================================== */

/* Page Setup */
.individual-page {
    background: #ffffff;
    color: #111;
}

/* HEADER */
.individual-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px 0;
}

.individual-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.individual-logo {
    flex-shrink: 0;
}

.individual-logo__link {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.individual-logo__link:hover {
    color: #00a6c7;
}

.individual-nav__link {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}

.individual-nav__link:hover {
    color: #111;
}

/* HERO */
.individual-hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2B5A8E 0%, #5B8EC7 50%, #7BA8D1 100%);
    background-image: url('../images/project-fv.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    color: #ffffff;
    text-align: center;
    position: relative;
    margin-top: 60px;
}

.individual-hero__inner {
    max-width: 900px;
    padding: 0 40px;
}

.individual-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.individual-hero__subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* フォームセクション */
.individual-form-section {
    padding: 80px 0;
    background: #ffffff;
}

.individual-form-section__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 40px;
}

.individual-form-section__title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
}

.individual-form-section__description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    text-align: center;
    margin-bottom: 48px;
}

/* フォーム */
.individual-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.individual-form__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.individual-form__label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.individual-form__label-text {
    display: block;
}

.individual-form__required {
    color: #e74c3c;
}

.individual-form__textarea {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.individual-form__textarea:focus {
    outline: none;
    border-color: #00a6c7;
    box-shadow: 0 0 0 3px rgba(0, 166, 199, 0.1);
}

.individual-form__hint {
    font-size: 12px;
    color: #999;
}

.individual-form__label-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.individual-form__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #00a6c7;
}

.individual-form__checkbox-text {
    color: #111;
    font-weight: 500;
}

.individual-form__submit {
    padding: 12px 32px;
    background: #00a6c7;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
    margin-top: 16px;
}

.individual-form__submit:hover {
    background: #0088a0;
    transform: translateY(-2px);
}

.individual-form__submit:active {
    transform: translateY(0);
}

.individual-form__message {
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    margin-top: 16px;
}

.individual-form__message--error {
    background: #ffe8e8;
    color: #c33;
    border: 1px solid #ffcccc;
}

.individual-form__message--success {
    background: #e8f8f5;
    color: #00a6c7;
    border: 1px solid #ccf0ed;
}

/* 宣言一覧セクション */
.individual-declarations {
    padding: 80px 0;
    background: #f7fbfd;
}

.individual-declarations__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.individual-declarations__title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
}

.individual-declarations__description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    text-align: center;
    margin-bottom: 48px;
}

.individual-declarations__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.individual-declarations__item {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.individual-declarations__item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.individual-declarations__item-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 12px;
    word-break: break-word;
}

.individual-declarations__item-date {
    font-size: 12px;
    color: #999;
}

.individual-declarations__empty {
    text-align: center;
    padding: 60px 40px;
    color: #999;
}

/* 参加完了ページ */
.individual-complete {
    padding: 80px 0;
    background: #ffffff;
}

.individual-complete__inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 40px;
}

.individual-complete__card {
    background: #f7fbfd;
    padding: 48px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e0f2f7;
}

.individual-complete__title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111;
}

.individual-complete__text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 32px;
}

.individual-complete__id-box {
    background: #ffffff;
    padding: 32px;
    border-radius: 8px;
    margin-bottom: 32px;
    border: 2px solid #00a6c7;
}

.individual-complete__id-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #00a6c7;
    margin-bottom: 8px;
    font-weight: 600;
}

.individual-complete__id {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.individual-complete__id-hint {
    font-size: 12px;
    color: #999;
}

.individual-complete__message {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 32px;
}

.individual-complete__cta {
    display: inline-block;
    padding: 12px 32px;
    background: #00a6c7;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.individual-complete__cta:hover {
    background: #0088a0;
    transform: translateY(-2px);
}

/* FOOTER */
.individual-footer {
    background: #0b1325;
    color: #ffffff;
    padding: 40px 0;
    text-align: center;
}

.individual-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.individual-footer__copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet: 1024px以下 */
@media (max-width: 1024px) {
    .header-inner {
        padding: 20px 24px;
    }

    .hero-inner,
    .why__inner,
    .philosophy__inner,
    .education-os__inner,
    .process-container,
    .business-container,
    .message-container {
        padding: 0 24px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        font-size: 16px;
    }

    .why__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .philosophy__title,
    .process-title {
        font-size: 40px;
    }

    .business-title,
    .message-section-title {
        font-size: 36px;
    }

    .process-subtitle {
        font-size: 15px;
    }

    .education-os__inner {
        flex-direction: column;
        gap: 40px;
    }

    .education-os__title {
        font-size: 32px;
    }

    .step-zero {
        padding: 40px 24px 32px;
    }

    .step-zero-grid {
        gap: 12px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .business-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
    }

    .company-table th {
        width: 120px;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .message-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .message-line {
        font-size: 20px;
    }

    .message-photo {
        max-width: 350px;
    }
}

@media (max-width: 992px) {
    .edu-clarity__inner {
        flex-direction: column;
    }

    .edu-clarity__image {
        order: -1;
    }

    .project-vision__content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .project-structure__methods {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .project-hero__title {
        font-size: 40px;
    }

    .project-hero__subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .project-hero__birds {
        gap: 60px;
        margin-bottom: 40px;
        height: 60px;
    }

    .project-hero__bird {
        width: 40px;
        height: 40px;
    }

    .project-essence__title,
    .project-problem__title,
    .project-philosophy__title,
    .project-vision__title,
    .project-structure__title,
    .project-why__title {
        font-size: 24px;
    }

    .project-definition__title {
        font-size: 28px;
    }

    .project-problem__cards {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }

    .project-philosophy__badges {
        gap: 8px;
    }

    .project-philosophy__badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .project-footer__nav {
        flex-direction: column;
        gap: 12px;
    }

    .project-definition__birds {
        gap: 60px;
        height: 60px;
    }

    .project-definition__bird {
        width: 40px;
        height: 40px;
    }

    .header-inner {
        padding: 12px 20px;
    }

    .nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    body {
        padding-top: 56px;
    }

    .header-inner {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
    }

    .logo {
        font-size: 14px;
    }

    .nav {
        gap: 16px;
        font-size: 12px;
    }

    .hero {
        height: 60vh;
    }

    .hero-inner {
        padding: 0 20px;
    }

    .hero h1 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 14px;
    }

    .why {
        padding: 80px 0;
    }

    .why__inner {
        padding: 0 20px;
    }

    .why__title {
        font-size: 24px;
    }

    .why__text {
        font-size: 14px;
    }

    .philosophy {
        padding: 80px 0;
    }

    .philosophy__inner {
        padding: 0 20px;
    }

    .philosophy__title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .philosophy__card {
        width: 100%;
        max-width: 280px;
    }

    .philosophy__arrow {
        display: none;
    }

    .education-os {
        padding: 80px 0;
    }

    .education-os__inner {
        padding: 0 20px;
    }

    .education-os__title {
        font-size: 28px;
    }

    .education-os__text {
        font-size: 14px;
    }

    .process-section {
        padding: 80px 0;
    }

    .process-container {
        padding: 0 20px;
    }

    .process-header {
        margin-bottom: 60px;
    }

    .process-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .process-subtitle {
        font-size: 14px;
    }

    .step-zero-wrapper {
        padding: 0;
    }

    .step-zero {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .step-zero-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .step-zero-title {
        font-size: 20px;
    }

    .step-zero-subtitle {
        font-size: 18px;
    }

    .step-card {
        padding: 24px;
    }

    .step-title {
        font-size: 18px;
    }

    .final-message-text {
        font-size: 24px;
    }

    .business-section {
        padding: 80px 0;
    }

    .business-container {
        padding: 0 20px;
    }

    .business-header {
        margin-bottom: 40px;
    }

    .business-title {
        font-size: 28px;
    }

    .business-description {
        font-size: 14px;
    }

    .business-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }

    .company-table th {
        width: 100px;
        font-size: 0.9rem;
    }

    .company-table td {
        padding-left: 20px;
        font-size: 0.9rem;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .achievement-card {
        padding: 24px 16px;
    }

    .achievement-number {
        font-size: 2rem;
    }

    .business-card {
        padding: 24px 16px;
    }

    .business-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .business-card-title {
        font-size: 13px;
    }

    .message-section {
        padding: 80px 0;
    }

    .message-container {
        padding: 0 20px;
    }

    .message-header {
        margin-bottom: 40px;
    }

    .message-section-title {
        font-size: 28px;
    }

    .message-content {
        gap: 30px;
    }

    .message-photo {
        max-width: 300px;
    }

    .message-line {
        font-size: 18px;
    }

    .message-paragraph {
        font-size: 14px;
    }

    .message-link {
        font-size: 14px;
    }

    .contact h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .contact-btn {
        padding: 11px 28px;
        font-size: 12px;
        margin: 0 6px 16px 6px;
    }

    .contact-link {
        font-size: 0.8rem;
        margin-top: 16px;
    }

    .about-hero__title {
        font-size: 36px;
    }

    .about-hero__subtitle {
        font-size: 16px;
    }

    .ceo-message__content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ceo-message__image-wrapper {
        position: static;
    }

    .ceo-message__heading {
        font-size: 24px;
    }

    .about-philosophy__title {
        font-size: 24px;
    }

    .philosophy-venn {
        width: 250px;
        height: 250px;
    }

    .company-info__title {
        font-size: 24px;
    }

    .company-info__table th,
    .company-info__table td {
        padding: 15px 20px;
        font-size: 13px;
    }

    .company-info__table th {
        width: 120px;
    }

    .edu-hero__title {
        font-size: 32px;
    }

    .edu-why__grid {
        grid-template-columns: 1fr;
    }

    .comp-hero__title {
        font-size: 40px;
    }

    .comp-services__grid {
        grid-template-columns: 1fr;
    }

    .comp-contact__form {
        padding: 30px;
    }
}

/* Small Mobile: 480px以下 */
@media (max-width: 480px) {
    .header-inner {
        padding: 12px 16px;
    }

    .logo {
        font-size: 14px;
    }

    body {
        padding-top: 50px;
    }

    .nav {
        gap: 12px;
        font-size: 11px;
    }

    .hero {
        height: 50vh;
    }

    .hero-inner {
        padding: 0 16px;
    }

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

    .hero p {
        font-size: 12px;
    }

    .why {
        padding: 60px 0;
    }

    .why__inner {
        padding: 0 16px;
    }

    .why__title {
        font-size: 20px;
    }

    .why__text {
        font-size: 13px;
    }

    .philosophy {
        padding: 60px 0;
    }

    .philosophy__inner {
        padding: 0 16px;
    }

    .philosophy__title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .philosophy__card {
        width: 100%;
        padding: 24px 20px;
    }

    .philosophy__icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .education-os {
        padding: 60px 0;
    }

    .education-os__inner {
        padding: 0 16px;
    }

    .education-os__title {
        font-size: 22px;
    }

    .education-os__text {
        font-size: 13px;
    }

    .education-os__points {
        grid-template-columns: 1fr;
    }

    .process-section {
        padding: 60px 0;
    }

    .process-container {
        padding: 0 16px;
    }

    .process-header {
        margin-bottom: 40px;
    }

    .process-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .process-subtitle {
        font-size: 13px;
    }

    .step-zero-wrapper {
        padding: 0;
    }

    .step-zero {
        padding: 24px 16px;
        border-radius: 12px;
    }

    .step-zero-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .step-zero-title {
        font-size: 18px;
    }

    .step-zero-subtitle {
        font-size: 16px;
    }

    .step-card {
        padding: 20px;
    }

    .step-title {
        font-size: 16px;
    }

    .final-message-text {
        font-size: 18px;
    }

    .business-section {
        padding: 60px 0;
    }

    .business-container {
        padding: 0 16px;
    }

    .business-title {
        font-size: 22px;
    }

    .business-description {
        font-size: 13px;
    }

    .business-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }

    .company-table {
        font-size: 0.85rem;
    }

    .company-table th {
        width: 80px;
        padding: 12px 0;
    }

    .company-table td {
        padding: 12px 0;
        padding-left: 16px;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .achievement-card {
        padding: 16px 12px;
    }

    .achievement-number {
        font-size: 1.5rem;
    }

    .achievement-label {
        font-size: 0.85rem;
    }

    .faq-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .faq-question {
        font-size: 1rem;
    }

    .faq-answer {
        font-size: 0.9rem;
    }

    .business-card {
        padding: 20px 16px;
    }

    .business-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
        margin-bottom: 12px;
    }

    .business-card-title {
        font-size: 12px;
    }

    .message-section {
        padding: 60px 0;
    }

    .message-container {
        padding: 0 16px;
    }

    .message-section-title {
        font-size: 22px;
    }

    .message-content {
        gap: 20px;
    }

    .message-photo {
        max-width: 100%;
    }

    .message-line {
        font-size: 16px;
    }

    .message-paragraph {
        font-size: 13px;
    }

    .message-conclusion {
        font-size: 13px;
    }

    .message-link {
        font-size: 13px;
    }

    .about-hero {
        height: 50vh;
        margin-top: 60px;
    }

    .about-hero__title {
        font-size: 28px;
    }

    .about-hero__subtitle {
        font-size: 14px;
    }

    .ceo-message {
        padding: 60px 0;
    }

    .ceo-message__heading {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .ceo-message__text-wrapper {
        gap: 30px;
    }

    .ceo-message__block {
        gap: 16px;
    }

    .ceo-message__number {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .ceo-message__block-title {
        font-size: 16px;
    }

    .ceo-message__block-text {
        font-size: 13px;
    }

    .about-philosophy {
        padding: 60px 0;
    }

    .philosophy-venn {
        width: 200px;
        height: 200px;
    }

    .company-info {
        padding: 60px 0;
    }

    .company-info__table th,
    .company-info__table td {
        padding: 12px 15px;
        font-size: 12px;
    }

    .contact {
        padding: 60px 16px;
    }

    .contact h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .contact-btn {
        padding: 10px 20px;
        font-size: 11px;
        margin: 0 4px 12px 4px;
    }

    .contact-link {
        font-size: 0.75rem;
        margin-top: 12px;
    }

    .footer {
        padding: 30px 16px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .project-hero__title {
        font-size: 32px;
    }

    .project-hero__birds {
        gap: 40px;
        height: 50px;
    }

    .project-hero__bird {
        width: 30px;
        height: 30px;
    }

    .project-essence__inner,
    .project-problem__inner,
    .project-philosophy__inner,
    .project-vision__inner,
    .project-structure__inner,
    .project-why__inner,
    .project-definition__inner {
        padding: 0 20px;
    }

    .project-problem__dark-box,
    .project-vision__dark-box,
    .project-structure__message {
        padding: 32px 20px;
    }

    .project-definition__title {
        font-size: 24px;
    }

    .project-definition__text {
        font-size: 14px;
    }
}


/* Responsive */
@media (max-width: 992px) {
    .project-branches__inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .project-hero__title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .project-header__inner {
        padding: 0 20px;
    }

    .project-nav {
        gap: 16px;
    }

    .project-nav__sns {
        margin-left: 12px;
        padding-left: 12px;
    }

    .project-hero {
        margin-top: 50px;
    }

    .project-hero__title {
        font-size: 32px;
    }

    .project-hero__subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .project-empathy,
    .project-core,
    .project-clarification,
    .project-stance,
    .project-branches,
    .project-sns,
    .project-company-link {
        padding: 80px 0;
    }

    .project-core__title,
    .project-stance__title,
    .project-branch__title {
        font-size: 24px;
    }

    .project-empathy__inner,
    .project-core__inner,
    .project-clarification__inner,
    .project-stance__inner,
    .project-branches__inner,
    .project-sns__inner,
    .project-company-link__inner {
        padding: 0 20px;
    }

    .project-footer__nav {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .project-header__inner {
        flex-direction: column;
        gap: 12px;
    }

    .project-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .project-hero__title {
        font-size: 24px;
    }

    .project-hero__subtitle {
        font-size: 14px;
    }

    .project-empathy__text,
    .project-clarification__text {
        font-size: 14px;
    }

    .project-branch__title {
        font-size: 20px;
    }

    .project-sns__links {
        gap: 16px;
    }

    .project-sns__link {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .individual-header__inner {
        padding: 0 20px;
    }

    .individual-hero {
        height: 50vh;
        margin-top: 50px;
    }

    .individual-hero__title {
        font-size: 32px;
    }

    .individual-hero__subtitle {
        font-size: 14px;
    }

    .individual-form-section__inner,
    .individual-declarations__inner,
    .individual-complete__inner {
        padding: 0 20px;
    }

    .individual-form-section,
    .individual-declarations,
    .individual-complete {
        padding: 60px 0;
    }

    .individual-form-section__title,
    .individual-declarations__title,
    .individual-complete__title {
        font-size: 24px;
    }

    .individual-declarations__list {
        grid-template-columns: 1fr;
    }

    .individual-complete__card {
        padding: 32px;
    }
}

@media (max-width: 480px) {
    .individual-hero__title {
        font-size: 24px;
    }

    .individual-form__textarea {
        min-height: 150px;
    }

    .individual-complete__id {
        font-size: 16px;
    }
}

/* ========================================
   ABOUT PAGE - REDESIGN STYLES
   ======================================== */

/* Page Setup */
.about-page {
    background: #ffffff;
    color: #111;
}

/* HEADER */
.about-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px 0;
}

.about-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-logo {
    flex-shrink: 0;
}

.about-logo__link {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.about-logo__link:hover {
    color: #00a6c7;
}

.about-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.about-nav__link {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    font-weight: 500;
}

.about-nav__link:hover {
    color: #111;
}

.about-nav__link--active {
    color: #111;
    font-weight: 600;
}

.about-nav__link--active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00a6c7;
}

.about-nav__link--cta {
    padding: 8px 16px;
    background: #00a6c7;
    color: #ffffff;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.about-nav__link--cta:hover {
    background: #0088a0;
    color: #ffffff;
}

/* HERO */
.about-hero {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    background-blend-mode: overlay;
    color: #000;
    text-align: center;
    position: relative;
    margin-top: 60px;
}

.about-hero__inner {
    max-width: 900px;
    padding: 0 40px;
}


.about-hero__subtitle {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.95);
}

.definition p {
    font-size: 24px;
}

.definitionp {
    font-size: 13px;
    color: #999;
    line-height: 1.8;
    margin-bottom: 8px;
    margin-left: 24px;
}

/* 代表メッセージ */
.about-message {
    padding: 100px 0;
    background: #ffffff;
}

.about-message__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-message__title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #111;
}

.about-message__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.about-message__text {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
}

.about-message__signature {
    font-size: 13px;
    color: #999;
    line-height: 1.8;
    margin-bottom: 8px;
}

.about-message__name {
    font-weight: 600;
    color: #111;
}

.about-message__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-message__photo {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

/* HERO */
.about-hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
}

.about-hero {
    font-size: 56px;
    font-weight: 600;
    margin-bottom: 24px;
}

.about-hero__subtitle {
    font-size: 16px;
    color: #555;
}

/* Scroll Arrow */
.scroll-down {
    position: absolute;
    bottom: 40px;
}

.scroll-down span {
    display: block;
    width: 24px;
    height: 24px;
    border-bottom: 1px solid #111;
    border-right: 1px solid #111;
    transform: rotate(45deg);
    animation: arrow 2s infinite;
}

@keyframes arrow {
    0% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(45deg) translate(10px, 10px);
        opacity: 0;
    }
}

/* Sections */
section {
    padding: 140px 0;
}

/* Founder */
.founder-flex {
    display: flex;
    gap: 80px;
    align-items: center;
}

.founder-image img {
    max-width: 360px;
    width: 100%;
}

/* Framework */
.cards {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.card {
    border: 1px solid #e5e5e5;
    padding: 40px;
    flex: 1;
}

/* Organization */
.organization {
    text-align: center;
    background: #fafafa;
}


/* Responsive */
@media (max-width: 768px) {
    .founder-flex {
        flex-direction: column;
    }

    .cards {
        flex-direction: column;
    }

    .hero h1 {
        font-size: 36px;
    }
}

.founder {
    padding: 160px 0;
}

.founder-flex {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.founder-image img {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.founder-text h2 {
    font-size: 18px;
    margin-bottom: 40px;
    font-weight: 600;
}

.founder-text p {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 2;
}
/* CTA */
.about-cta {
    padding: 100px 0;
    background: #0b1325;
    color: #ffffff;
    text-align: center;
}

.about-cta__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-cta__title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.about-cta__subtitle {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 48px;
}

.about-cta__buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.about-cta__button {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.about-cta__button--primary {
    background: #00a6c7;
    color: #ffffff;
    border: 2px solid #00a6c7;
}

.about-cta__button--primary:hover {
    background: transparent;
    color: #00a6c7;
}

.about-cta__button--secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.about-cta__button--secondary:hover {
    border-color: #ffffff;
    color: #ffffff;
}

/* FOOTER */
.about-footer {
    background: #0a0f1a;
    color: #ffffff;
    padding: 32px 0;
    text-align: center;
}

.about-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-footer__copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 992px) {
    .about-header__inner {
        flex-direction: column;
        gap: 16px;
    }

    .about-nav {
        justify-content: center;
        gap: 16px;
    }

    .about-message__inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-philosophy__diagram {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-company__row {
        grid-template-columns: 100px 1fr;
        gap: 30px;
    }

    .about-cta__buttons {
        flex-direction: column;
        align-items: center;
    }

    .about-cta__button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .about-header__inner {
        padding: 0 20px;
    }

    .about-hero {
        height: 40vh;
        margin-top: 50px;
    }


    .about-hero__subtitle {
        font-size: 24px;
    }

    .about-message__inner,
    .about-philosophy__inner,
    .about-company__inner,
    .about-cta__inner {
        padding: 0 20px;
    }

    .about-message,
    .about-philosophy,
    .about-company,
    .about-cta {
        padding: 60px 0;
    }

    .about-message__title,
    .about-philosophy__title,
    .about-company__title,
    .about-cta__title {
        font-size: 24px;
    }

    .about-philosophy__circle {
        width: 180px;
        height: 180px;
    }

    .about-philosophy__circle-title {
        font-size: 16px;
    }

    .about-company__row {
        grid-template-columns: 80px 1fr;
    }
}

@media (max-width: 480px) {
    .about-nav {
        gap: 8px;
    }

    .about-nav__link {
        font-size: 12px;
    }

    .about-hero__title {
        font-size: 24px;
    }

    .about-hero__subtitle {
        font-size: 18px;
    }

    .about-message__quote {
        font-size: 16px;
    }

    .about-message__text {
        font-size: 14px;
    }

    .about-philosophy__circle {
        width: 140px;
        height: 140px;
    }

    .about-philosophy__circle-title {
        font-size: 14px;
    }

    .about-company__row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .about-cta__title {
        font-size: 20px;
    }

    .about-cta__button {
        font-size: 13px;
        padding: 10px 24px;
    }
}