:root {
    color-scheme: light;
    --theme-base-white: #ffffff;
    --theme-accent: #75BCF2;
    --theme-accent-strong: #48ACF0;
    --theme-accent-soft: rgba(117, 188, 242, 0.16);
    --theme-accent-purple: #C48CE3;
    --theme-accent-purple-strong: #8CA2E3;
    --theme-accent-purple-soft: rgba(196, 140, 227, 0.16);
    --theme-surface-strong: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f5f9fc;
    --theme-surface-overlay: rgba(255, 255, 255, 0.95);
    --theme-text: #333333;
    --theme-text-strong: #1a1a1a;
    --theme-text-muted: #555555;
    --theme-text-subtle: #777777;
    --theme-border: #e0eff9;
    --theme-border-soft: rgba(224, 239, 249, 0.55);
    --theme-nav-backdrop: linear-gradient(180deg, rgba(117, 188, 242, 0.95) 0%, rgba(72, 172, 240, 0.92) 100%);
    --theme-footer-backdrop: linear-gradient(180deg, rgba(72, 172, 240, 0.85) 0%, rgba(117, 188, 242, 0.92) 50%, rgba(140, 162, 227, 0.88) 100%);
    --theme-card-shadow: 0 24px 54px -28px rgba(117, 188, 242, 0.25);
}

[data-theme="dark"] {
    color-scheme: dark;
    --theme-surface: #10121d;
    --theme-surface-strong: #161827;
    --theme-surface-muted: #1c1e2c;
    --theme-surface-overlay: rgba(20, 21, 29, 0.82);
    --theme-text: #e5e7eb;
    --theme-text-strong: #f9fafb;
    --theme-text-muted: #d1d5db;
    --theme-text-subtle: #9ca3af;
    --theme-border: rgba(148, 163, 184, 0.32);
    --theme-border-soft: rgba(107, 114, 128, 0.5);
    --theme-accent: #75BCF2;
    --theme-accent-strong: #93C9F5;
    --theme-accent-soft: rgba(117, 188, 242, 0.22);
    --theme-nav-backdrop: rgba(17, 18, 27, 0.82);
    --theme-card-shadow: 0 30px 60px -28px rgba(5, 6, 9, 0.7);
}

body.theme-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background: linear-gradient(180deg, #fafbfc 0%, #f0f4f8 55%, #e8eef5 100%);
    color: var(--theme-text);
    transition: background 0.4s ease, color 0.4s ease;
}

body.theme-body > main {
    flex: 1 0 auto;
}

[data-theme="dark"] body.theme-body {
    background: linear-gradient(180deg, #11121b 0%, #0f111a 60%, #0b0d14 100%);
}

.theme-nav {
    background: var(--theme-nav-backdrop);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(72, 172, 240, 0.25);
    color: #ffffff;
}

[data-theme="dark"] .theme-nav {
    border-bottom-color: var(--theme-border-soft);
    box-shadow: none;
    background: rgba(17, 18, 27, 0.82);
    color: var(--theme-text);
}

.theme-link {
    color: var(--theme-text-muted);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.theme-nav .theme-link {
    color: rgba(255, 255, 255, 0.9);
}

.theme-nav .theme-link:hover,
.theme-nav .theme-link:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
}

.theme-link:hover,
.theme-link:focus-visible {
    color: var(--theme-text-strong);
    background-color: var(--theme-accent-soft);
}

[data-theme="dark"] .theme-link {
    color: rgba(229, 231, 235, 0.75);
}

[data-theme="dark"] .theme-link:hover,
[data-theme="dark"] .theme-link:focus-visible {
    color: #f9fafb;
    background-color: var(--theme-accent-soft);
}

[data-theme="dark"] .theme-nav .theme-link {
    color: rgba(229, 231, 235, 0.75);
}

[data-theme="dark"] .theme-nav .theme-link:hover,
[data-theme="dark"] .theme-nav .theme-link:focus-visible {
    color: #f9fafb;
    background-color: var(--theme-accent-soft);
}

.theme-button-primary {
    background: var(--theme-accent);
    color: #ffffff;
    transition: background 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 12px 30px -15px rgba(117, 188, 242, 0.6);
}

.theme-button-primary:hover,
.theme-button-primary:focus-visible {
    background: var(--theme-accent-strong);
    box-shadow: 0 18px 40px -18px rgba(117, 188, 242, 0.7);
}

.theme-button-ghost {
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-button-ghost:hover,
.theme-button-ghost:focus-visible {
    border-color: var(--theme-accent);
    background-color: var(--theme-accent-soft);
    color: var(--theme-text-strong);
}

.theme-card {
    background-color: var(--theme-surface-strong);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-card-shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .theme-card {
    border-color: var(--theme-border-soft);
}

.theme-card-glow {
    transition: transform 0.25s ease, box-shadow 0.35s ease, border-color 0.3s ease;
}

.theme-card-glow:hover,
.theme-card-glow:focus-visible {
    border-color: rgba(117, 188, 242, 0.45);
    box-shadow: 0 26px 60px -30px rgba(117, 188, 242, 0.55);
    transform: translateY(-2px);
}

[data-theme="dark"] .theme-card-glow:hover,
[data-theme="dark"] .theme-card-glow:focus-visible {
    border-color: rgba(147, 201, 245, 0.55);
    box-shadow: 0 30px 68px -32px rgba(117, 188, 242, 0.55);
}

.theme-pill {
    background-color: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

[data-theme="dark"] .theme-pill {
    color: #d8e4ff;
}

.theme-pill.theme-pill--solid {
    background-color: var(--theme-accent-strong);
    color: #ffffff;
}

.theme-pill.theme-pill--purple {
    background-color: var(--theme-accent-purple-soft);
    color: var(--theme-accent-purple-strong);
}

[data-theme="dark"] .theme-pill.theme-pill--solid {
    background-color: #357dff;
    color: #f0f6ff;
}

.theme-muted {
    color: var(--theme-text-subtle);
}

.theme-footer {
    position: relative;
    width: 100%;
    z-index: 1;
    background: var(--theme-footer-backdrop);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 -4px 16px rgba(72, 172, 240, 0.3);
    overflow: hidden;
}

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

.theme-footer .theme-link {
    color: rgba(255, 255, 255, 0.92);
}

.theme-footer .theme-link:hover,
.theme-footer .theme-link:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.16);
}

.theme-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 25%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 75%, 
        transparent 100%
    );
    animation: water-wave 8s ease-in-out infinite;
    pointer-events: none;
}

.theme-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.03) 30%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.03) 70%, 
        transparent 100%
    );
    animation: water-wave 12s ease-in-out infinite reverse;
    pointer-events: none;
}

@keyframes water-wave {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(10%) translateY(-2px);
    }
    50% {
        transform: translateX(0) translateY(2px);
    }
    75% {
        transform: translateX(-10%) translateY(-1px);
    }
}

[data-theme="dark"] .theme-footer {
    background: rgba(20, 20, 20, 0.7);
    border-top-color: var(--theme-border-soft);
    color: var(--theme-text-subtle);
}

[data-theme="dark"] .theme-footer .theme-link {
    color: rgba(229, 231, 235, 0.75);
}

[data-theme="dark"] .theme-footer .theme-link:hover,
[data-theme="dark"] .theme-footer .theme-link:focus-visible {
    color: #f9fafb;
    background-color: var(--theme-accent-soft);
}

/* Background accent blob for sections */
.theme-accent-blob {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(117,188,242,0.18), transparent 60%),
        radial-gradient(900px 500px at 95% 10%, rgba(196,140,227,0.12), transparent 55%),
        radial-gradient(800px 400px at 30% 120%, rgba(72,172,240,0.10), transparent 55%);
    mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,0.9), transparent 70%);
}

[data-theme="dark"] .theme-accent-blob {
    background:
        radial-gradient(1000px 520px at 8% -12%, rgba(117,188,242,0.14), transparent 60%),
        radial-gradient(820px 480px at 92% 8%, rgba(147,201,245,0.10), transparent 55%),
        radial-gradient(700px 380px at 28% 120%, rgba(140,162,227,0.10), transparent 55%);
    mask-image: radial-gradient(circle at 50% 28%, rgba(0,0,0,0.85), transparent 70%);
}

[data-theme="dark"] .theme-footer::before,
[data-theme="dark"] .theme-footer::after {
    display: none;
}

[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200 {
    color: #1a1a1a !important;
}

[data-theme="light"] .text-gray-300 {
    color: #333333 !important;
}

[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 {
    color: #555555 !important;
}

[data-theme="light"] .text-gray-600 {
    color: #666666 !important;
}

[data-theme="light"] .bg-gray-900,
[data-theme="light"] .bg-gray-900\/95,
[data-theme="light"] .bg-gray-900\/90,
[data-theme="light"] .bg-gray-900\/75,
[data-theme="light"] .bg-gray-900\/50 {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--theme-border);
}

[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-800\/75,
[data-theme="light"] .bg-gray-800\/60,
[data-theme="light"] .bg-gray-800\/50,
[data-theme="light"] .bg-gray-800\/40 {
    background-color: rgba(248, 250, 252, 0.95) !important;
    border: 1px solid var(--theme-border);
}

[data-theme="light"] .bg-gray-700,
[data-theme="light"] .bg-gray-700\/50 {
    background-color: rgba(245, 249, 252, 0.9) !important;
    border: 1px solid var(--theme-border);
}

[data-theme="light"] .bg-black\/30 {
    background-color: rgba(31, 36, 53, 0.08) !important;
}

[data-theme="light"] .bg-white\/10,
[data-theme="light"] .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(117, 188, 242, 0.3);
    color: var(--theme-text) !important;
}

[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-700\/50,
[data-theme="light"] .border-gray-600,
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-gray-500 {
    border-color: var(--theme-border) !important;
}

[data-theme="light"] .text-violet-200 {
    color: var(--theme-accent-strong) !important;
}

[data-theme="light"] .bg-violet-600\/40,
[data-theme="light"] .bg-violet-800\/40 {
    background-color: rgba(196, 140, 227, 0.18) !important;
    color: #8C5FB8 !important;
}

[data-theme="light"] .text-purple-300,
[data-theme="light"] .text-purple-400 {
    color: var(--theme-accent-purple-strong) !important;
}

[data-theme="light"] .shadow-lg,
[data-theme="light"] .shadow {
    box-shadow: 0 18px 45px -28px rgba(117, 188, 242, 0.22) !important;
}

[data-theme="light"] .hover\:bg-white\/20:hover,
[data-theme="light"] .hover\:bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(117, 188, 242, 0.4) !important;
}

.theme-toggle {
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--theme-border);
    background-color: var(--theme-accent-soft);
    color: var(--theme-text-strong);
}

a {
    color: inherit;
}

.theme-hero-overlay {
    background: linear-gradient(180deg, rgba(117, 188, 242, 0.12) 0%, rgba(117, 188, 242, 0.3) 70%, rgba(117, 188, 242, 0.38) 100%);
}

[data-theme="dark"] .theme-hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.6) 65%, rgba(0, 0, 0, 0.7) 100%);
}

.theme-hero {
    background: linear-gradient(140deg, #f7fbff 0%, #edf6ff 55%, #e0f0ff 100%);
    color: var(--theme-text-strong);
}

.theme-hero__media {
    pointer-events: none;
}

.theme-hero__image {
    opacity: 0.82;
    transition: transform 0.5s ease;
}

.theme-hero:hover .theme-hero__image {
    transform: scale(1.02);
}


.theme-hero__overlay {
    background: linear-gradient(135deg, rgba(117, 188, 242, 0.22) 0%, rgba(135, 185, 240, 0.18) 45%, rgba(255, 255, 255, 0.6) 100%);
}

.theme-hero__highlight {
    background: radial-gradient(circle at 20% 20%, rgba(117, 188, 242, 0.26), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(140, 178, 255, 0.16), transparent 45%);
}

[data-theme="dark"] .theme-hero {
    background: linear-gradient(140deg, #0d111f 0%, #0a0e1a 65%, #080a14 100%);
}

[data-theme="dark"] .theme-hero__overlay {
    /* 以前より暗い印象だったため、オーバーレイの不透明度を下げて視認性を改善 */
    background: linear-gradient(135deg, rgba(8, 11, 24, 0.62) 0%, rgba(9, 10, 17, 0.52) 50%, rgba(9, 11, 19, 0.46) 100%);
}

[data-theme="dark"] .theme-hero__highlight {
    background: radial-gradient(circle at 15% 15%, rgba(117, 188, 242, 0.22), transparent 50%),
        radial-gradient(circle at 85% 5%, rgba(133, 149, 227, 0.18), transparent 45%);
}

.theme-hero-text,
.theme-hero-title,
.theme-hero-subtitle {
    color: var(--theme-text-strong);
    text-shadow: none;
}

.theme-hero-subtitle {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .theme-hero-text,
[data-theme="dark"] .theme-hero-title,
[data-theme="dark"] .theme-hero-subtitle {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.theme-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.theme-pagination a,
.theme-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--theme-text-muted);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-pagination a:hover,
.theme-pagination a:focus-visible {
    background-color: var(--theme-accent-soft);
    border-color: var(--theme-border);
    color: var(--theme-text-strong);
}

.theme-pagination .is-current {
    background-color: var(--theme-accent);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 14px 32px -18px rgba(117, 188, 242, 0.55);
}

[data-theme="dark"] .theme-pagination a,
[data-theme="dark"] .theme-pagination span {
    color: var(--theme-text-subtle);
}

[data-theme="dark"] .theme-pagination a:hover,
[data-theme="dark"] .theme-pagination a:focus-visible {
    border-color: var(--theme-border);
    color: var(--theme-text-strong);
}

[data-theme="dark"] .theme-pagination .is-current {
    box-shadow: 0 18px 36px -20px rgba(117, 188, 242, 0.55);
}

.theme-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #75BCF2 0%, #48ACF0 100%);
    color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 18px 40px -18px rgba(117, 188, 242, 0.68);
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.theme-cta:hover,
.theme-cta:focus-visible {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #48ACF0 0%, #3899d8 100%);
    box-shadow: 0 22px 48px -20px rgba(72, 172, 240, 0.78);
}

[data-theme="dark"] .theme-cta {
    box-shadow: 0 20px 44px -20px rgba(69, 153, 236, 0.62);
}

.theme-icon-accent {
    color: #75BCF2;
}

[data-theme="dark"] .theme-icon-accent {
    color: #93C9F5;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select {
    /* 半透明だと下地のグラデに影響され灰色っぽく見えるため、solid whiteにする */
    background-color: #ffffff !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-strong) !important;
}

/* select のネイティブ外観を打ち消し、背景色を確実に適用 */
[data-theme="light"] select {
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 3px var(--theme-accent-soft) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #999999 !important;
}

/* Utilities */
.line-clamp-2 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}