/** Theme Name: Astra Theme URI: https://wpastra.com/ Author: Brainstorm Force Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/ Version: 4.11.5 Requires at least: 5.3 WC requires at least: 3.0 WC tested up to: 9.6 Tested up to: 6.8 Requires PHP: 5.3 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra Domain Path: /languages Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog AMP: true Astra WordPress Theme, Copyright 2020 WPAstra. Astra is distributed under the terms of the GNU GPL. Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of. Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/ Astra icon font is based on IcoMoon-Free vector icon by Keyamoon. IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html) Source: http://keyamoon.com/ Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility) Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md ) Screenshot image is a collage of actual sites created using the Astra WordPress Theme. Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free ) https://fontawesome.com/v5.15/icons/store?style=solid https://fontawesome.com/v5.15/icons/shopping-cart?style=solid https://fontawesome.com/v5.15/icons/pen-square?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans ) https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License. https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/. For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/. Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail) Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later. Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader) Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE ) /* Note: The CSS files are loaded from assets/css/ folder. */
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}
.ast-container { max-width: none; }
.font-archivo { font-family: 'Archivo', sans-serif; }
/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: color-mix(in oklab, var(--background) 95%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}
.logo-icon {
    /*width: 48px;*/
    /*height: 48px;*/
    margin-right: 0.5rem;
    filter: drop-shadow(1px 1px 6px #fff) drop-shadow(1px 1px 6px #fff);
    /*background: linear-gradient(135deg, #025DFF, #7B61FF);*/
    /*border-radius: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}
.logo-text {
    font-family: 'Archivo', sans-serif;
    font-size: 2rem;
    font-weight: 700;
}
.logo-x { color: #025DFF; }
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav a {
    text-decoration: none;
    color: #666;
    font-weight: 600;
    transition: color 0.3s ease;
}
.nav a:hover { color: #025DFF; }
.nav .separator { color: #ccc; }
.contact-btn {
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}
.contact-btn:hover { opacity: 0.9; }
/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23025DFF;stop-opacity:0.8"/><stop offset="100%" style="stop-color:%237B61FF;stop-opacity:0.9"/></linearGradient></defs><rect width="1920" height="1080" fill="url(%23bg)"/><circle cx="200" cy="200" r="100" fill="white" opacity="0.1"/><circle cx="1600" cy="300" r="150" fill="white" opacity="0.05"/><circle cx="400" cy="800" r="80" fill="white" opacity="0.1"/></svg>') center/cover;
    padding-top: 80px;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background: linear-gradient(to bottom, transparent, rgba(245, 245, 245, 0.5), #f5f5f5);
    z-index: 2;
}
.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 2rem;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2rem;
    font-style: italic;
    text-align: left;
}
.highlight-ai { color: #248dff; }
.ruby-text {
    position: relative;
    display: inline-block;
}
.ruby-text::after {
    content: attr(data-ruby);
    position: absolute;
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6em;
    color: #248dff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.ruby-text:hover::after { opacity: 1; }
/* Sections */
.section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title h2 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.section-subtitle {
    color: #666;
    font-size: 1.5rem;
}
/* Why Us Section */
.why-us {
    text-align: center;
    background: #f8f9fa;
}
.why-us p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}
.highlight-blue {
    color: #0094ff;
    font-weight: 600;
}
/* Services Section */
.services { padding: 4rem 2rem; }
.service-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 24px 15px rgba(0, 0, 0, 0.1), 0 -3px 6px rgba(0, 0, 0, 0.05), 6px 0 15px rgba(0, 0, 0, 0.15);
    margin-bottom: 3rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    display: flex;
    min-height: 200px;
}
.service-content {
    width: 70%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.service-content h3 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.service-x { color: #025DFF; }
.service-content p {
    color: #666;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.service-btn {
    background: #025DFF;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(2, 93, 255, 0.4);
    align-self: flex-start;
}
.service-btn:hover {
    background: #024ACC;
    box-shadow: 0 12px 24px rgba(2, 93, 255, 0.5);
}
.service-image {
    width: 30%;
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 700;
}
.cta-section {
    text-align: center;
    margin-top: 3rem;
}
.cta-btn {
    display: inline-block;
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
    transition: opacity 0.3s ease;
}
.cta-btn:hover { opacity: 0.9; }
/* News and Cases Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}
.card-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #ccc;
    position: relative;
}
.card-content { padding: 1.5rem; }
.card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: #666;
}
.card-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}
.card h3 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}
.card:hover h3 { color: #025DFF; }
.card p {
    color: #666;
    font-size: 0.875rem;
}
.view-all { text-align: center; }
.view-all-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid #025DFF;
    color: #025DFF;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.view-all-btn:hover {
    background: #025DFF;
    color: white;
}
/* Cases Section */
.cases {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}
/* Contact Section */
.contact {
    background: rgba(123, 97, 255, 0.1);
    padding: 5rem 2rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    max-width: 800px;
    margin: 0 auto;
}
.contact-item { text-align: center; }
.contact-item p {
    color: #666;
    margin-bottom: 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.contact-item .cta-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}
/* Footer */
.footer {
    background: #2d3748;
    color: white;
    text-align: center;
    padding: 2rem;
}
/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}
/* Responsive Design */
@media (max-width: 768px) {
    .header { padding: 1rem; }
    .nav { display: none; }
    .mobile-menu-btn { display: flex; }
    .service-card {
        flex-direction: column;
        max-width: 95%;
    }
    .service-content { width: 100%; }
    .service-image {
        width: 100%;
        height: 120px;
    }
    .grid { grid-template-columns: 1fr; }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal {
    background: white;
    border-radius: 1rem;
    max-width: 900px;
    max-height: 90vh;
    width: 90%;
    overflow-y: auto;
    transform: translateY(30px);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header {
    padding: 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-family: 'Archivo', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.modal-close:hover {
    background: #f1f5f9;
    color: #333;
}
.modal-content { padding: 2rem; }
.modal-section { margin-bottom: 2rem; }
.modal-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #025DFF;
}
.modal-section p {
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1rem;
}
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.feature-item {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #025DFF;
}
.feature-item h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3748;
}
.feature-item p {
    font-size: 0.9rem;
    color: #718096;
    margin: 0;
}
.price-section {
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    text-align: center;
    margin: 2rem 0;
}
.price-section h3 {
    color: white;
    margin-bottom: 1rem;
}
.price-text {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}
.modal-cta {
    background: white;
    color: #025DFF;
    border: 2px solid white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.modal-cta:hover {
    background: transparent;
    color: white;
}
/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}
.fade-in.delay-200 { animation-delay: 0.2s; }
.fade-in.delay-400 { animation-delay: 0.4s; }
.fade-in.delay-600 { animation-delay: 0.6s; }
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn i[data-lucide] {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}
.btn[disabled] { opacity: .55; cursor:not-allowed; transform:none; }
.btn-lg { padding: 1rem 1.25rem; }
/* ========================= カラーテーマ（元の :root / .dark をそのまま CSS で） ========================= */
:root {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    /* Primary Color を唐紅に変更 */
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    /* Secondary Color を深紫に変更 */
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    /* Secondary の明暗バリエーション */
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    /* Accent も唐紅に合わせて調整 */
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
    --destructive: oklch(.577 .245 27.325);
}
.dark {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
}
/* ========================= ベーススタイル（@layer base/@apply の代わり） ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--border);
}
/* outline-ring/50 っぽい雰囲気だけ軽く再現 */
*:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
    outline-offset: 2px;
}
body {
    margin: 0;
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--background) !important;
}
/* a のデフォルト装飾を軽めに */
a {
    color: inherit;
    text-decoration: none;
}
/*a:hover {*/
/* text-decoration: underline;*/
/*}*/
/* Astra のコンテナの白背景を殺す */
.ast-plain-container,
.ast-page-builder-template,
.site,
.site-inner,
.site-content,
.content-area {
    background: transparent !important;
    background-color: transparent !important;
}
/* ========================= Tailwind 風の色ユーティリティを最低限だけ再現 （bg-background, text-foreground など） ========================= */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-popover { background-color: var(--popover); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-muted { background-color: var(--muted); }
.bg-accent { background-color: var(--accent); }
/* Tailwind の bg-secondary/50 をそのまま使っている場合の対応 */
.bg-secondary\/50 { background-color: color-mix(in oklab, var(--secondary) 50%, transparent); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-secondary-light { color: var(--secondary-light); }
.text-accent { color: var(--accent); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.border-primary { border-color: var(--primary); }
/* sidebar 系（必要なら） */
.bg-sidebar { background-color: var(--sidebar); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
/* button */
button { cursor: pointer; }
/* ========================= アニメーション定義（元の keyframes 群） ========================= */
/* Floating animation */
@keyframes float {
    0%,
    100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
/* Pulsing glow - 唐紅に合わせて色調整 */
@keyframes pulse-glow {
    0%,
    100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
/* Gradient shift */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Fade in up animation */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Fade in animation */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* Scale in animation */
@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* Slide in from left */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Slide in from right */
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Rotating border animation */
@keyframes rotate-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
/* Particle float */
@keyframes particle-float {
    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-100vh) translateX(20px) rotate(360deg);
        opacity: 0;
    }
}
/* Shimmer effect */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* Counter animation */
@keyframes count-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Glow pulse - 唐紅に合わせて色調整 */
@keyframes glow-pulse {
    0%,
    100% { box-shadow: 0 0 20px rgba(223, 84, 100, 0.3); }
    50% { box-shadow: 0 0 40px rgba(223, 84, 100, 0.6); }
}
/* Orbit animation */
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* Line draw animation */
@keyframes line-draw {
    0% { width: 0; }
    100% { width: 100%; }
}
/* Text reveal */
@keyframes text-reveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
/* Morphing blob */
@keyframes morph {
    0%,
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
/* Data stream */
@keyframes data-stream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* ========================= アニメーション用ユーティリティクラス ========================= */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
.animate-rotate-border {
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
}
.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(223, 84, 100, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}
.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.animate-orbit { animation: orbit 20s linear infinite; }
.animate-morph { animation: morph 8s ease-in-out infinite; }
.animate-data-stream { animation: data-stream 3s linear infinite; }
/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1500 { animation-delay: 1500ms; }
.delay-2000 { animation-delay: 2000ms; }
/* Hover effects - 唐紅に合わせて色調整 */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.hover-glow { transition: box-shadow 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(223, 84, 100, 0.4); }
/* Gradient text - 唐紅と深紫のグラデーション */
.gradient-text {
    background: linear-gradient(135deg, oklch(0.58 0.18 15), oklch(0.45 0.15 310));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Glassmorphism */
.glass {
    background: rgba(22, 22, 30, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(223, 84, 100, 0.1);
}
/* Animated border */
.animated-border { position: relative; }
.animated-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
    border-radius: inherit;
    z-index: -1;
}
/* ========================= ScrollReveal 用クラス （JS で .scroll-reveal に is-visible を付けている） ========================= */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 以前の .reveal も一応残しておく */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Particle container */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    animation: particle-float 10s linear infinite;
}
/* Neural network lines */
.neural-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: line-draw 2s ease-out forwards;
}
/* Typing cursor */
.typing-text::after,
.typing-cursor::after {
    content: "|";
    animation: fade-in 0.5s ease-in-out infinite alternate;
}
/* bg-card/50 — カードの半透明背景 */
.bg-card\/50 { background-color: color-mix(in oklab, var(--card) 50%, transparent); }
/* bg-primary/5, /10, /20 — ぼかし円やホバー用 */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
/* bg-secondary-dark/20 — NEW バッジの背景などで使われる想定 */
.bg-secondary-dark\/20 { background-color: color-mix(in oklab, var(--secondary-dark) 20%, transparent); }
/* ========================= グローバル背景レイヤー ========================= */
/* Astra のコンテナを背景より前に出す */
.site,
.site-inner,
.site-content,
.ast-plain-container,
.ast-page-builder-template {
    position: relative;
    z-index: 0;
}
/* 全体を覆う背景レイヤー（固定） */
.global-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    background-color: var(--background);
    /* 全体のダーク背景 */
}
/* 大きいボケ円（ぼかしグロー） */
.bg-circle {
    position: absolute;
    border-radius: 9999px;
    filter: blur(40px);
    opacity: 0.55;
}
.bg-circle-primary {
    /* background: rgba(223, 84, 100, 0.65); /* 唐紅 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
}
.bg-circle-secondary {
    /* background: rgba(74, 34, 93, 0.55); /* 深紫 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--secondary) 65%, transparent), transparent 75%);
}
/* ========================================= グローバル背景用の縦ライン 既存の .neural-line を上書きしないよう、 .global-background 内だけ別の指定にする ========================================= */
/* 縦に走る細い光のライン */
.neural-line {
    position: fixed;
    /* 画面全体に対するラインにしたいので固定 */
    top: -120vh;
    /* 画面上の外からスタート */
    width: 1px;
    /* 細い縦線 */
    height: 250vh;
    /* 画面を突き抜けるくらい長くしておく */
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
    /* コンテンツの裏側に */
    animation: data-stream 1s linear infinite;
}
/* もし一本ごとに微妙に速さを変えたければこんな感じで */
.neural-line:nth-of-type(1) { animation-duration: 4s; }
.neural-line:nth-of-type(2) { animation-duration: 4s; }
.neural-line:nth-of-type(3) { animation-duration: 4s; }
/* 既に style.css に入っている data-stream キーフレームがこれなら OK */
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* 楕円軌道っぽい光 */
/*.orbit-blob {*/
/* position: absolute;*/
/* border-radius: 9999px;*/
/* border: 1px solid rgba(223, 84, 100, 0.35);*/
/* box-shadow: 0 0 40px rgba(223, 84, 100, 0.4);*/
/* background: radial-gradient(circle at 30% 30%, rgba(223, 84, 100, 0.35), transparent 60%);*/
/* transform-origin: center;*/
/* animation: orbit 18s linear infinite;*/
/*}*/
.orbit-blob {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
    opacity: 0.4;
    filter: blur(30px);
    animation: orbit 18s linear infinite;
    transform-origin: center;
}
/* ====== morphing blobs（大きいボケ円） ====== */
.ab-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    animation: morph 18s ease-in-out infinite;
}
/* TSX: top-1/4 left-1/4 w-[500px] h-[500px] bg-primary/10 animate-morph blur-3xl */
.ab-blob-1 {
    top: 25%;
    left: 25%;
    width: 500px;
    height: 500px;
    animation-duration: 15s;
}
/* TSX: bottom-1/4 right-1/4 w-[400px] h-[400px] bg-primary/5 animate-morph blur-3xl style={{ animationDuration: "20s", animationDelay: "-5s" }} */
.ab-blob-2 {
    bottom: 25%;
    right: 25%;
    width: 400px;
    height: 400px;
    background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    animation-duration: 20s;
    animation-delay: -5s;
}
/* ====== 格子状のグリッド ====== */
.ab-grid {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: linear-gradient(rgba(100, 200, 220, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 200, 220, 0.15) 1px, transparent 1px);
    background-size: 80px 80px;
}
/* ====== 粒子（小さい丸） ====== */
.ab-particle {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.6;
    animation: float var(--float-duration, 15s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
/* ====== 縦に流れる細いライン（data streams） ====== */
.ab-stream {
    position: absolute;
    top: -8rem;
    /* 画面上の外からスタート */
    width: 1px;
    /* TSX: w-px */
    height: 8rem;
    /* TSX: h-32 (8 * 4px = 32px ≒ 8rem) */
    background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--primary) 50%, transparent) 50%, transparent 100%);
    animation: data-stream var(--stream-duration, 4s) linear infinite;
    animation-delay: var(--stream-delay, 0s);
}
/* ====== 軌道を回る小さい点 ====== */
.ab-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ab-orbit-dot {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.4;
    animation: orbit 30s linear infinite;
}
/* TSX: w-3 h-3 animate-orbit opacity-40, 25s */
.ab-orbit-dot-1 {
    width: 12px;
    height: 12px;
    animation-duration: 25s;
}
/* TSX: w-2 h-2 animate-orbit opacity-30, 35s reverse */
.ab-orbit-dot-2 {
    width: 8px;
    height: 8px;
    opacity: 0.3;
    animation-duration: 35s;
    animation-direction: reverse;
}
/* ====== コーナーの線（枠） ====== */
.ab-corner {
    position: absolute;
    border-color: color-mix(in oklab, var(--primary) 10%, transparent);
    border-style: solid;
}
.ab-corner-tl {
    top: 0;
    left: 0;
    width: 16rem;
    height: 16rem;
    border-left-width: 1px;
    border-top-width: 1px;
}
.ab-corner-br {
    bottom: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    border-right-width: 1px;
    border-bottom-width: 1px;
}
/* ====== keyframes（TSX と同等の動き） ====== */
@keyframes float {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes morph {
    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate3d(0, 0, 0);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate3d(20px, -10px, 0);
    }
}
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* ========== Font size (base) ========== */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}
.text-8xl {
    font-size: 6rem;
    line-height: 1;
}
.text-9xl {
    font-size: 8rem;
    line-height: 1;
}
/* ========== Font size (responsive) ========== */
@media (min-width: 640px) {
    /* sm */
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .sm\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .sm\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .sm\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 768px) {
    /* md */
    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .md\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .md\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .md\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 1024px) {
    /* lg */
    .lg\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .lg\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .lg\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
/* ========== Line-height / font-weight ========== */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
/* ========== Margin bottom ========== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-32 { margin-bottom: 8rem; }
.mb-40 { margin-bottom: 10rem; }
.mb-48 { margin-bottom: 12rem; }
.mb-56 { margin-bottom: 14rem; }
.mb-64 { margin-bottom: 16rem; }
.mb-72 { margin-bottom: 18rem; }
.mb-80 { margin-bottom: 20rem; }
.mb-96 { margin-bottom: 24rem; }
/* ========== Simple text / layout ========== */
.text-foreground { color: var(--foreground); }
.block { display: block; }
.text-center { text-align: center; }
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
/* ========================= Tailwind 互換のサイズ・ぼかしユーティリティ ========================= */
.w-96 { width: 24rem; }
.h-96 { height: 24rem; }
.w-80 { width: 20rem; }
.h-80 { height: 20rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
/* ぼかし（blur-3xl） */
.blur-3xl { filter: blur(64px); }
/* ========================= bg-primary/◯ 系の半透明カラー ========================= */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.via-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
/* ========================= ボタン・アイコン周り ========================= */
.btn {
    color: white;
    background: #0f172a;
}
.btn svg { stroke-width: 2; }
/* ======================= Hero Section ======================= */
/* カード全体 */
.stat {
    /*position: relative;*/
    /*padding: 1.75rem 1.5rem;*/
    /*border-radius: 1rem;*/
    /*background: rgba(15, 23, 42, 0.9);*/
    /*border: 1px solid rgba(148, 163, 184, 0.3);*/
    /*backdrop-filter: blur(20px);*/
    /*transition:*/
    /* transform 0.35s ease,*/
    /* box-shadow 0.35s ease,*/
    /* border-color 0.35s ease,*/
    /* background 0.35s ease;*/
}
.stat:hover {
    /*transform: translateY(-4px);*/
    /*box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);*/
    /*border-color: rgba(94, 234, 212, 0.7);*/
    /*background: radial-gradient(*/
    /* circle at top left,*/
    /* rgba(94, 234, 212, 0.12),*/
    /* transparent 55%*/
    /* ),*/
    /* rgba(15, 23, 42, 0.98);*/
}
/* アイコン */
.stat-icon {
    /*width: 3rem;*/
    /*height: 3rem;*/
    /*border-radius: 999px;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*margin-bottom: 0.75rem;*/
    /*background: radial-gradient(circle at 30% 0, #22d3ee, #0f172a);*/
    /*box-shadow: 0 0 25px rgba(34, 211, 238, 0.6);*/
}
/* 数値 */
.stat-value .counter {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* スクロールリビール用 */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* ========== Layout / Position ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.bottom-8 { bottom: 2rem; }
.-bottom-1 { bottom: -0.25rem; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.z-10 { z-index: 10; }
/* ========== Display ========== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }
/* Tailwind の group ユーティリティ */
.group { position: relative; }
/* ========== Flex / Grid関連 ========== */
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex { display: flex }
    .md\:flex-row { flex-direction: row }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:flex { display: flex; }
    .lg\:flex-row { flex-direction: row } 
    .lg\:hidden { display: none; }
}
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:flex { display: flex; }
    .sm\:hidden { display: none; }
}
/* ========== Sizing ========== */
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-1 { width: 0.25rem; }
.w-4 { width: 1rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-px { height: 1px; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }
.aspect-square { aspect-ratio: 1 / 1; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
/* ========== Spacing (margin / padding / gap) ========== */
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.pt-20 { padding-top: 5rem; }
.pt-2 { padding-top: 0.5rem; }
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-16 { gap: 4rem; }
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
/* ========== Overflow / Opacity ========== */
.overflow-hidden { overflow: hidden; }
.opacity-30 { opacity: 0.3; }
/* ========== Colors / text misc ========== */
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.leading-relaxed { line-height: 1.625; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.text-pretty { text-wrap: pretty; }
.text-balance { text-wrap: balance; }
/* ========== Background / Border ========== */
.bg-transparent { background-color: transparent; }
.bg-primary { background-color: var(--primary); }
.bg-card { background-color: var(--card); }
/*.hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); }*/
/*.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }*/
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-border { border-color: var(--border); }
.border-muted-foreground\/30 { border-color: hsl(var(--muted-foreground) / 0.3); }
.hover\:border-primary\/50:hover { border-color: hsl(var(--primary) / 0.5); }
/* ========== Transform / Transition ========== */
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group-hover-translate {}
.group:hover .group-hover-transrate{ transform: translateX(4px) }
.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.delay-1000 {
    transition-delay: 1000ms;
    animation-delay: 1000ms;
}
/* ========== Animation ========== */
@keyframes bounce {
    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.animate-bounce { animation: bounce 1s infinite; }
/* カスタム想定 */
.hover-lift {}
.animate-glow-pulse {}
.animate-fade-in {}
.animate-line-draw {}
/* ========== Cursor ========== */
.cursor-pointer { cursor: pointer; }

/* ---- Spinner ---- */
.spinner{
  display:inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,1);
  border-radius: 999px;
  animation: spin 1s linear infinite;
  margin-right: .5rem;
}
@keyframes spin{ to { transform: rotate(360deg);} }


/*.text-center { text-align: center; }*/
/*.text-sm { font-size: .875rem; }*/
/*.text-lg { font-size: 1.125rem; }*/
/*.text-xl { font-size: 1.25rem; }*/
/*.text-2xl { font-size: 1.5rem; }*/
/*.text-3xl { font-size: 1.875rem; }*/
/*.text-4xl { font-size: 2.25rem; }*/
/*.text-5xl { font-size: 3rem; }*/
/*.font-bold { font-weight: 700; }*/
/*.font-semibold { font-weight: 600; }*/
/*.leading-tight { line-height: 1.1; }*/
/*.leading-relaxed { line-height: 1.7; }*/
/*.flex { display: flex; }*/
/*.inline-flex { display: inline-flex; }*/
/*.items-center { align-items: center; }*/
/*.items-start { align-items: flex-start; }*/
/*.justify-between { justify-content: space-between; }*/
/*.justify-center { justify-content: center; }*/
/*.gap-1 { gap: .25rem; }*/
/*.gap-2 { gap: .5rem; }*/
/*.gap-3 { gap: .75rem; }*/
/*.gap-4 { gap: 1rem; }*/
/*.gap-6 { gap: 1.5rem; }*/
/*.gap-8 { gap: 2rem; }*/
/*.gap-12 { gap: 3rem; }*/
/*.space-y-1 > * + * { margin-top: .25rem; }*/
/*.space-y-2 > * + * { margin-top: .5rem; }*/
/*.space-y-3 > * + * { margin-top: .75rem; }*/
/*.space-y-4 > * + * { margin-top: 1rem; }*/
/*.space-y-6 > * + * { margin-top: 1.5rem; }*/
/*.space-y-8 > * + * { margin-top: 2rem; }*/
/*.grid { display: grid; }*/
/*.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }*/
/*.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }*/
/*.md\:grid-cols-2 { }*/
/*.md\:grid-cols-3 { }*/
/*.md\:grid-cols-4 { }*/
/*.lg\:grid-cols-2 { }*/
/*.lg\:grid-cols-5 { }*/
/*.w-full { width: 100%; }*/
/*.w-12 { width: 3rem; }*/
/*.w-14 { width: 3.5rem; }*/
/*.w-16 { width: 4rem; }*/
/*.w-20 { width: 5rem; }*/
/*.w-32 { width: 8rem; }*/
/*.w-48 { width: 12rem; }*/
/*.w-64 { width: 16rem; }*/
/*.h-2 { height: .5rem; }*/
/*.h-6 { height: 1.5rem; }*/
/*.h-8 { height: 2rem; }*/
/*.h-12 { height: 3rem; }*/
/*.h-16 { height: 4rem; }*/
/*.h-20 { height: 5rem; }*/
/*.h-48 { height: 12rem; }*/
/*.h-64 { height: 16rem; }*/
/*.rounded { border-radius: .5rem; }*/
/*.object-cover { object-fit: cover; }*/
/*.overflow-hidden { overflow: hidden; }*/
/*.relative { position: relative; }*/
/*.absolute { position: absolute; }*/
/*.top-0 { top: 0; }*/
/*.bottom-0 { bottom: 0; }*/
/*.left-0 { left: 0; }*/
/*.right-0 { right: 0; }*/
/*.z-10 { z-index: 10; }*/
/*.z-50 { z-index: 50; }*/
/*.fixed { position: fixed; }*/
/*.border-t { border-top-width: 1px; border-style: solid; }*/
/*.border-b { border-bottom-width: 1px; border-style: solid; }*/
/*.text-xs { font-size: .75rem; }*/
/*.opacity-50 { opacity: .5; }*/
/* ===== Header / Nav ===== */
/*.site-header { transition: all .3s ease; }*/
/*.site-header-inner {*/
/*    max-width: 80rem;*/
/*    margin: 0 auto;*/
/*    padding: 0 1rem;*/
/*}*/
/*.site-header.is-scrolled {*/
/*    background-color: rgba(2,6,23,0.95);*/
/*    backdrop-filter: blur(16px);*/
/*    border-bottom: 1px solid rgba(148,163,184,0.4);*/
/*    box-shadow: 0 18px 40px rgba(15,23,42,0.75);*/
/*}*/
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-yellow-400 { color: #facc15; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 80%, transparent); }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--primary-foregrond);
}

.btn-outline.btn-primary {
  color: hsl(var(--p));
  border-color: hsl(var(--p));
}

.btn-outline.btn-primary:hover {
  background-color: hsl(var(--p));
  border-color: hsl(var(--p));
  color: hsl(var(--pc));
}

.btn-outline.btn-secondary {
  color: hsl(var(--s));
  border-color: hsl(var(--s));
}

.btn-outline.btn-secondary:hover {
  background-color: hsl(var(--s));
  border-color: hsl(var(--s));
  color: hsl(var(--sc));
}

.btn-ghost {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
}
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15,23,42,0.6);
}
.js-nav-menu {
    transition: max-height .3s ease, opacity .3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/********************************
********* AI Training ***********
********************************/
/* ===== Hero Background ===== */
.animated-bg {
    position: absolute;
    inset: 0;
    background:
    radial-gradient(circle at top left, rgba(56,189,248,0.25), transparent 55%),
    radial-gradient(circle at bottom right, rgba(129,140,248,0.25), transparent 55%);
    opacity: .5;
    pointer-events: none;
}
.progress-pulse { animation: progressPulse 1.5s infinite alternate; }
@keyframes progressPulse {
    from { opacity: .7; }
    to { opacity: 1; }
}
/* ===== Glowing Card ===== */
.glowing-card {
    background: rgba(15,23,42,0.2);
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,0.1);
    box-shadow: 0 18px 40px rgba(15,23,42,0.75);
}

/* ===== アコーディオン: カリキュラム ===== */
.module-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); }
.module-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; width:100%; background:transparent; border:none; cursor:pointer; }
.module-content {
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s ease,
    opacity .35s ease;
    border-top:1px solid rgba(148,163,184,0.4);
}
/*.chevron-icon { display:inline-block; transition:transform .3s ease; }*/
/* 開いた状態 */
.module-content.is-open {
  max-height: 1000px; /* 中身より少し大きめならOK（必要に応じて調整） */
  opacity: 1;
}
/*.module-header.:has(+ .module-content.is-open) .chevron-icon {*/
/*    transform: rotate(180deg);*/
/*}*/
.js-module-toggle .chevron-icon svg {
  display: inline-block;
  transition: transform 0.25s ease;
  transform-origin: center;
  transform-box: fill-box; /* Safari 対策としてあると安心 */
}

/* 開いているときだけ 180° 回転 */
.js-module-toggle.is-open .chevron-icon svg {
  transform: rotate(180deg);
}
/* ===== アコーディオン: FAQ ===== */
.faq-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); overflow:hidden; }
.faq-header { padding:1.25rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; border:none; width:100%; background:transparent; }
.faq-content { max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
/*.faq-item.is-open .chevron-icon { transform: rotate(180deg); }*/
.faq-content.is-open {
    max-height: 1000px;
    opacity: 1;
}
[hidden]{ display: none !important}
.contact-form-wrapper.is-hidden { display: none !important }
/***********************************
 *
 * Inquiry お問い合わせ固定ページ
 *
 **********************************/
.inquiry label.text-foreground { color: #bbb }
.inquiry .text-destructive {color: var(--destructive)}
/* 相談内容：選択状態（テーマに負けないよう強めに） */
.inquiry .type-grid .type-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.inquiry .type-grid .type-item:hover{
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  transform: translateY(-1px);
}

/* ★ここが重要：is-selected 時に「見た目が確実に変わる」 */
.inquiry .type-grid .type-item.is-selected{
  border-color: color-mix(in oklab, var(--primary) 80%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 14%, transparent) !important;
  color: var(--fg) !important;
}

/* 未選択時の“文字色固定”を解除したい場合（任意） */
.inquiry .type-grid .type-item:not(.is-selected){
  color: var(--muted-foreground) !important;
}

/* checkbox自体の見た目 */
.inquiry .type-grid .type-checkbox{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
/** Theme Name: Astra Theme URI: https://wpastra.com/ Author: Brainstorm Force Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/ Version: 4.11.5 Requires at least: 5.3 WC requires at least: 3.0 WC tested up to: 9.6 Tested up to: 6.8 Requires PHP: 5.3 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra Domain Path: /languages Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog AMP: true Astra WordPress Theme, Copyright 2020 WPAstra. Astra is distributed under the terms of the GNU GPL. Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of. Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/ Astra icon font is based on IcoMoon-Free vector icon by Keyamoon. IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html) Source: http://keyamoon.com/ Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility) Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md ) Screenshot image is a collage of actual sites created using the Astra WordPress Theme. Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free ) https://fontawesome.com/v5.15/icons/store?style=solid https://fontawesome.com/v5.15/icons/shopping-cart?style=solid https://fontawesome.com/v5.15/icons/pen-square?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans ) https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License. https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/. For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/. Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail) Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later. Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader) Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE ) /* Note: The CSS files are loaded from assets/css/ folder. */
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}
.ast-container { max-width: none; }
.font-archivo { font-family: 'Archivo', sans-serif; }
/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: color-mix(in oklab, var(--background) 95%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}
.logo-icon {
    /*width: 48px;*/
    /*height: 48px;*/
    margin-right: 0.5rem;
    /*background: linear-gradient(135deg, #025DFF, #7B61FF);*/
    /*border-radius: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}
.logo-text {
    font-family: 'Archivo', sans-serif;
    font-size: 2rem;
    font-weight: 700;
}
.logo-x { color: #025DFF; }
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav a {
    text-decoration: none;
    color: #666;
    font-weight: 600;
    transition: color 0.3s ease;
}
.nav a:hover { color: #025DFF; }
.nav .separator { color: #ccc; }
.contact-btn {
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}
.contact-btn:hover { opacity: 0.9; }
/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23025DFF;stop-opacity:0.8"/><stop offset="100%" style="stop-color:%237B61FF;stop-opacity:0.9"/></linearGradient></defs><rect width="1920" height="1080" fill="url(%23bg)"/><circle cx="200" cy="200" r="100" fill="white" opacity="0.1"/><circle cx="1600" cy="300" r="150" fill="white" opacity="0.05"/><circle cx="400" cy="800" r="80" fill="white" opacity="0.1"/></svg>') center/cover;
    padding-top: 80px;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background: linear-gradient(to bottom, transparent, rgba(245, 245, 245, 0.5), #f5f5f5);
    z-index: 2;
}
.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 2rem;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2rem;
    font-style: italic;
    text-align: left;
}
.highlight-ai { color: #248dff; }
.ruby-text {
    position: relative;
    display: inline-block;
}
.ruby-text::after {
    content: attr(data-ruby);
    position: absolute;
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6em;
    color: #248dff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.ruby-text:hover::after { opacity: 1; }
/* Sections */
.section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title h2 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.section-subtitle {
    color: #666;
    font-size: 1.5rem;
}
/* Why Us Section */
.why-us {
    text-align: center;
    background: #f8f9fa;
}
.why-us p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}
.highlight-blue {
    color: #0094ff;
    font-weight: 600;
}
/* Services Section */
.services { padding: 4rem 2rem; }
.service-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 24px 15px rgba(0, 0, 0, 0.1), 0 -3px 6px rgba(0, 0, 0, 0.05), 6px 0 15px rgba(0, 0, 0, 0.15);
    margin-bottom: 3rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    display: flex;
    min-height: 200px;
}
.service-content {
    width: 70%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.service-content h3 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.service-x { color: #025DFF; }
.service-content p {
    color: #666;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.service-btn {
    background: #025DFF;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(2, 93, 255, 0.4);
    align-self: flex-start;
}
.service-btn:hover {
    background: #024ACC;
    box-shadow: 0 12px 24px rgba(2, 93, 255, 0.5);
}
.service-image {
    width: 30%;
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 700;
}
.cta-section {
    text-align: center;
    margin-top: 3rem;
}
.cta-btn {
    display: inline-block;
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
    transition: opacity 0.3s ease;
}
.cta-btn:hover { opacity: 0.9; }
/* News and Cases Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}
.card-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #ccc;
    position: relative;
}
.card-content { padding: 1.5rem; }
.card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: #666;
}
.card-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}
.card h3 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}
.card:hover h3 { color: #025DFF; }
.card p {
    color: #666;
    font-size: 0.875rem;
}
.view-all { text-align: center; }
.view-all-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid #025DFF;
    color: #025DFF;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.view-all-btn:hover {
    background: #025DFF;
    color: white;
}
/* Cases Section */
.cases {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}
/* Contact Section */
.contact {
    background: rgba(123, 97, 255, 0.1);
    padding: 5rem 2rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    max-width: 800px;
    margin: 0 auto;
}
.contact-item { text-align: center; }
.contact-item p {
    color: #666;
    margin-bottom: 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.contact-item .cta-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}
/* Footer */
.footer {
    background: #2d3748;
    color: white;
    text-align: center;
    padding: 2rem;
}
/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}
/* Responsive Design */
@media (max-width: 768px) {
    .header { padding: 1rem; }
    .nav { display: none; }
    .mobile-menu-btn { display: flex; }
    .service-card {
        flex-direction: column;
        max-width: 95%;
    }
    .service-content { width: 100%; }
    .service-image {
        width: 100%;
        height: 120px;
    }
    .grid { grid-template-columns: 1fr; }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal {
    background: white;
    border-radius: 1rem;
    max-width: 900px;
    max-height: 90vh;
    width: 90%;
    overflow-y: auto;
    transform: translateY(30px);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header {
    padding: 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-family: 'Archivo', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.modal-close:hover {
    background: #f1f5f9;
    color: #333;
}
.modal-content { padding: 2rem; }
.modal-section { margin-bottom: 2rem; }
.modal-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #025DFF;
}
.modal-section p {
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1rem;
}
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.feature-item {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #025DFF;
}
.feature-item h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3748;
}
.feature-item p {
    font-size: 0.9rem;
    color: #718096;
    margin: 0;
}
.price-section {
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    text-align: center;
    margin: 2rem 0;
}
.price-section h3 {
    color: white;
    margin-bottom: 1rem;
}
.price-text {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}
.modal-cta {
    background: white;
    color: #025DFF;
    border: 2px solid white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.modal-cta:hover {
    background: transparent;
    color: white;
}
/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}
.fade-in.delay-200 { animation-delay: 0.2s; }
.fade-in.delay-400 { animation-delay: 0.4s; }
.fade-in.delay-600 { animation-delay: 0.6s; }
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn i[data-lucide] {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}
.btn[disabled] { opacity: .55; cursor:not-allowed; transform:none; }
.btn-lg { padding: 1rem 1.25rem; }
/* ========================= カラーテーマ（元の :root / .dark をそのまま CSS で） ========================= */
:root {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    /* Primary Color を唐紅に変更 */
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    /* Secondary Color を深紫に変更 */
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    /* Secondary の明暗バリエーション */
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    /* Accent も唐紅に合わせて調整 */
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
    --destructive: oklch(.577 .245 27.325);
}
.dark {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
}
/* ========================= ベーススタイル（@layer base/@apply の代わり） ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--border);
}
/* outline-ring/50 っぽい雰囲気だけ軽く再現 */
*:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
    outline-offset: 2px;
}
body {
    margin: 0;
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--background) !important;
}
/* a のデフォルト装飾を軽めに */
a {
    color: inherit;
    text-decoration: none;
}
/*a:hover {*/
/* text-decoration: underline;*/
/*}*/
/* Astra のコンテナの白背景を殺す */
.ast-plain-container,
.ast-page-builder-template,
.site,
.site-inner,
.site-content,
.content-area {
    background: transparent !important;
    background-color: transparent !important;
}
/* ========================= Tailwind 風の色ユーティリティを最低限だけ再現 （bg-background, text-foreground など） ========================= */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-popover { background-color: var(--popover); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-muted { background-color: var(--muted); }
.bg-accent { background-color: var(--accent); }
/* Tailwind の bg-secondary/50 をそのまま使っている場合の対応 */
.bg-secondary\/50 { background-color: color-mix(in oklab, var(--secondary) 50%, transparent); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-secondary-light { color: var(--secondary-light); }
.text-accent { color: var(--accent); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.border-primary { border-color: var(--primary); }
/* sidebar 系（必要なら） */
.bg-sidebar { background-color: var(--sidebar); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
/* button */
button { cursor: pointer; }
/* ========================= アニメーション定義（元の keyframes 群） ========================= */
/* Floating animation */
@keyframes float {
    0%,
    100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
/* Pulsing glow - 唐紅に合わせて色調整 */
@keyframes pulse-glow {
    0%,
    100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
/* Gradient shift */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Fade in up animation */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Fade in animation */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* Scale in animation */
@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* Slide in from left */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Slide in from right */
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Rotating border animation */
@keyframes rotate-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
/* Particle float */
@keyframes particle-float {
    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-100vh) translateX(20px) rotate(360deg);
        opacity: 0;
    }
}
/* Shimmer effect */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* Counter animation */
@keyframes count-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Glow pulse - 唐紅に合わせて色調整 */
@keyframes glow-pulse {
    0%,
    100% { box-shadow: 0 0 20px rgba(223, 84, 100, 0.3); }
    50% { box-shadow: 0 0 40px rgba(223, 84, 100, 0.6); }
}
/* Orbit animation */
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* Line draw animation */
@keyframes line-draw {
    0% { width: 0; }
    100% { width: 100%; }
}
/* Text reveal */
@keyframes text-reveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
/* Morphing blob */
@keyframes morph {
    0%,
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
/* Data stream */
@keyframes data-stream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* ========================= アニメーション用ユーティリティクラス ========================= */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
.animate-rotate-border {
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
}
.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(223, 84, 100, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}
.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.animate-orbit { animation: orbit 20s linear infinite; }
.animate-morph { animation: morph 8s ease-in-out infinite; }
.animate-data-stream { animation: data-stream 3s linear infinite; }
/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1500 { animation-delay: 1500ms; }
.delay-2000 { animation-delay: 2000ms; }
/* Hover effects - 唐紅に合わせて色調整 */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.hover-glow { transition: box-shadow 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(223, 84, 100, 0.4); }
/* Gradient text - 唐紅と深紫のグラデーション */
.gradient-text {
    background: linear-gradient(135deg, oklch(0.58 0.18 15), oklch(0.45 0.15 310));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Glassmorphism */
.glass {
    background: rgba(22, 22, 30, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(223, 84, 100, 0.1);
}
/* Animated border */
.animated-border { position: relative; }
.animated-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
    border-radius: inherit;
    z-index: -1;
}
/* ========================= ScrollReveal 用クラス （JS で .scroll-reveal に is-visible を付けている） ========================= */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 以前の .reveal も一応残しておく */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Particle container */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    animation: particle-float 10s linear infinite;
}
/* Neural network lines */
.neural-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: line-draw 2s ease-out forwards;
}
/* Typing cursor */
.typing-text::after,
.typing-cursor::after {
    content: "|";
    animation: fade-in 0.5s ease-in-out infinite alternate;
}
/* bg-card/50 — カードの半透明背景 */
.bg-card\/50 { background-color: color-mix(in oklab, var(--card) 50%, transparent); }
/* bg-primary/5, /10, /20 — ぼかし円やホバー用 */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
/* bg-secondary-dark/20 — NEW バッジの背景などで使われる想定 */
.bg-secondary-dark\/20 { background-color: color-mix(in oklab, var(--secondary-dark) 20%, transparent); }
/* ========================= グローバル背景レイヤー ========================= */
/* Astra のコンテナを背景より前に出す */
.site,
.site-inner,
.site-content,
.ast-plain-container,
.ast-page-builder-template {
    position: relative;
    z-index: 0;
}
/* 全体を覆う背景レイヤー（固定） */
.global-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    background-color: var(--background);
    /* 全体のダーク背景 */
}
/* 大きいボケ円（ぼかしグロー） */
.bg-circle {
    position: absolute;
    border-radius: 9999px;
    filter: blur(40px);
    opacity: 0.55;
}
.bg-circle-primary {
    /* background: rgba(223, 84, 100, 0.65); /* 唐紅 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
}
.bg-circle-secondary {
    /* background: rgba(74, 34, 93, 0.55); /* 深紫 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--secondary) 65%, transparent), transparent 75%);
}
/* ========================================= グローバル背景用の縦ライン 既存の .neural-line を上書きしないよう、 .global-background 内だけ別の指定にする ========================================= */
/* 縦に走る細い光のライン */
.neural-line {
    position: fixed;
    /* 画面全体に対するラインにしたいので固定 */
    top: -120vh;
    /* 画面上の外からスタート */
    width: 1px;
    /* 細い縦線 */
    height: 250vh;
    /* 画面を突き抜けるくらい長くしておく */
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
    /* コンテンツの裏側に */
    animation: data-stream 1s linear infinite;
}
/* もし一本ごとに微妙に速さを変えたければこんな感じで */
.neural-line:nth-of-type(1) { animation-duration: 4s; }
.neural-line:nth-of-type(2) { animation-duration: 4s; }
.neural-line:nth-of-type(3) { animation-duration: 4s; }
/* 既に style.css に入っている data-stream キーフレームがこれなら OK */
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* 楕円軌道っぽい光 */
/*.orbit-blob {*/
/* position: absolute;*/
/* border-radius: 9999px;*/
/* border: 1px solid rgba(223, 84, 100, 0.35);*/
/* box-shadow: 0 0 40px rgba(223, 84, 100, 0.4);*/
/* background: radial-gradient(circle at 30% 30%, rgba(223, 84, 100, 0.35), transparent 60%);*/
/* transform-origin: center;*/
/* animation: orbit 18s linear infinite;*/
/*}*/
.orbit-blob {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
    opacity: 0.4;
    filter: blur(30px);
    animation: orbit 18s linear infinite;
    transform-origin: center;
}
/* ====== morphing blobs（大きいボケ円） ====== */
.ab-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    animation: morph 18s ease-in-out infinite;
}
/* TSX: top-1/4 left-1/4 w-[500px] h-[500px] bg-primary/10 animate-morph blur-3xl */
.ab-blob-1 {
    top: 25%;
    left: 25%;
    width: 500px;
    height: 500px;
    animation-duration: 15s;
}
/* TSX: bottom-1/4 right-1/4 w-[400px] h-[400px] bg-primary/5 animate-morph blur-3xl style={{ animationDuration: "20s", animationDelay: "-5s" }} */
.ab-blob-2 {
    bottom: 25%;
    right: 25%;
    width: 400px;
    height: 400px;
    background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    animation-duration: 20s;
    animation-delay: -5s;
}
/* ====== 格子状のグリッド ====== */
.ab-grid {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: linear-gradient(rgba(100, 200, 220, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 200, 220, 0.15) 1px, transparent 1px);
    background-size: 80px 80px;
}
/* ====== 粒子（小さい丸） ====== */
.ab-particle {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.6;
    animation: float var(--float-duration, 15s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
/* ====== 縦に流れる細いライン（data streams） ====== */
.ab-stream {
    position: absolute;
    top: -8rem;
    /* 画面上の外からスタート */
    width: 1px;
    /* TSX: w-px */
    height: 8rem;
    /* TSX: h-32 (8 * 4px = 32px ≒ 8rem) */
    background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--primary) 50%, transparent) 50%, transparent 100%);
    animation: data-stream var(--stream-duration, 4s) linear infinite;
    animation-delay: var(--stream-delay, 0s);
}
/* ====== 軌道を回る小さい点 ====== */
.ab-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ab-orbit-dot {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.4;
    animation: orbit 30s linear infinite;
}
/* TSX: w-3 h-3 animate-orbit opacity-40, 25s */
.ab-orbit-dot-1 {
    width: 12px;
    height: 12px;
    animation-duration: 25s;
}
/* TSX: w-2 h-2 animate-orbit opacity-30, 35s reverse */
.ab-orbit-dot-2 {
    width: 8px;
    height: 8px;
    opacity: 0.3;
    animation-duration: 35s;
    animation-direction: reverse;
}
/* ====== コーナーの線（枠） ====== */
.ab-corner {
    position: absolute;
    border-color: color-mix(in oklab, var(--primary) 10%, transparent);
    border-style: solid;
}
.ab-corner-tl {
    top: 0;
    left: 0;
    width: 16rem;
    height: 16rem;
    border-left-width: 1px;
    border-top-width: 1px;
}
.ab-corner-br {
    bottom: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    border-right-width: 1px;
    border-bottom-width: 1px;
}
/* ====== keyframes（TSX と同等の動き） ====== */
@keyframes float {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes morph {
    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate3d(0, 0, 0);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate3d(20px, -10px, 0);
    }
}
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* ========== Font size (base) ========== */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}
.text-8xl {
    font-size: 6rem;
    line-height: 1;
}
.text-9xl {
    font-size: 8rem;
    line-height: 1;
}
/* ========== Font size (responsive) ========== */
@media (min-width: 640px) {
    /* sm */
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .sm\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .sm\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .sm\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 768px) {
    /* md */
    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .md\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .md\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .md\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 1024px) {
    /* lg */
    .lg\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .lg\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .lg\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
/* ========== Line-height / font-weight ========== */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
/* ========== Margin bottom ========== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-32 { margin-bottom: 8rem; }
.mb-40 { margin-bottom: 10rem; }
.mb-48 { margin-bottom: 12rem; }
.mb-56 { margin-bottom: 14rem; }
.mb-64 { margin-bottom: 16rem; }
.mb-72 { margin-bottom: 18rem; }
.mb-80 { margin-bottom: 20rem; }
.mb-96 { margin-bottom: 24rem; }
/* ========== Simple text / layout ========== */
.text-foreground { color: var(--foreground); }
.block { display: block; }
.text-center { text-align: center; }
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
/* ========================= Tailwind 互換のサイズ・ぼかしユーティリティ ========================= */
.w-96 { width: 24rem; }
.h-96 { height: 24rem; }
.w-80 { width: 20rem; }
.h-80 { height: 20rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
/* ぼかし（blur-3xl） */
.blur-3xl { filter: blur(64px); }
/* ========================= bg-primary/◯ 系の半透明カラー ========================= */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.via-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
/* ========================= ボタン・アイコン周り ========================= */
.btn {
    color: white;
    background: #0f172a;
}
.btn svg { stroke-width: 2; }
/* ======================= Hero Section ======================= */
/* カード全体 */
.stat {
    /*position: relative;*/
    /*padding: 1.75rem 1.5rem;*/
    /*border-radius: 1rem;*/
    /*background: rgba(15, 23, 42, 0.9);*/
    /*border: 1px solid rgba(148, 163, 184, 0.3);*/
    /*backdrop-filter: blur(20px);*/
    /*transition:*/
    /* transform 0.35s ease,*/
    /* box-shadow 0.35s ease,*/
    /* border-color 0.35s ease,*/
    /* background 0.35s ease;*/
}
.stat:hover {
    /*transform: translateY(-4px);*/
    /*box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);*/
    /*border-color: rgba(94, 234, 212, 0.7);*/
    /*background: radial-gradient(*/
    /* circle at top left,*/
    /* rgba(94, 234, 212, 0.12),*/
    /* transparent 55%*/
    /* ),*/
    /* rgba(15, 23, 42, 0.98);*/
}
/* アイコン */
.stat-icon {
    /*width: 3rem;*/
    /*height: 3rem;*/
    /*border-radius: 999px;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*margin-bottom: 0.75rem;*/
    /*background: radial-gradient(circle at 30% 0, #22d3ee, #0f172a);*/
    /*box-shadow: 0 0 25px rgba(34, 211, 238, 0.6);*/
}
/* 数値 */
.stat-value .counter {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* スクロールリビール用 */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* ========== Layout / Position ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.bottom-8 { bottom: 2rem; }
.-bottom-1 { bottom: -0.25rem; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.z-10 { z-index: 10; }
/* ========== Display ========== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }
/* Tailwind の group ユーティリティ */
.group { position: relative; }
/* ========== Flex / Grid関連 ========== */
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex { display: flex }
    .md\:flex-row { flex-direction: row }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:flex { display: flex; }
    .lg\:flex-row { flex-direction: row } 
    .lg\:hidden { display: none; }
}
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:flex { display: flex; }
    .sm\:hidden { display: none; }
}
/* ========== Sizing ========== */
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-1 { width: 0.25rem; }
.w-4 { width: 1rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-px { height: 1px; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }
.aspect-square { aspect-ratio: 1 / 1; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
/* ========== Spacing (margin / padding / gap) ========== */
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.pt-20 { padding-top: 5rem; }
.pt-2 { padding-top: 0.5rem; }
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-16 { gap: 4rem; }
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
/* ========== Overflow / Opacity ========== */
.overflow-hidden { overflow: hidden; }
.opacity-30 { opacity: 0.3; }
/* ========== Colors / text misc ========== */
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.leading-relaxed { line-height: 1.625; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.text-pretty { text-wrap: pretty; }
.text-balance { text-wrap: balance; }
/* ========== Background / Border ========== */
.bg-transparent { background-color: transparent; }
.bg-primary { background-color: var(--primary); }
.bg-card { background-color: var(--card); }
/*.hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); }*/
/*.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }*/
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-border { border-color: var(--border); }
.border-muted-foreground\/30 { border-color: hsl(var(--muted-foreground) / 0.3); }
.hover\:border-primary\/50:hover { border-color: hsl(var(--primary) / 0.5); }
/* ========== Transform / Transition ========== */
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group-hover-translate {}
.group:hover .group-hover-transrate{ transform: translateX(4px) }
.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.delay-1000 {
    transition-delay: 1000ms;
    animation-delay: 1000ms;
}
/* ========== Animation ========== */
@keyframes bounce {
    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.animate-bounce { animation: bounce 1s infinite; }
/* カスタム想定 */
.hover-lift {}
.animate-glow-pulse {}
.animate-fade-in {}
.animate-line-draw {}
/* ========== Cursor ========== */
.cursor-pointer { cursor: pointer; }

/* ---- Spinner ---- */
.spinner{
  display:inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,1);
  border-radius: 999px;
  animation: spin 1s linear infinite;
  margin-right: .5rem;
}
@keyframes spin{ to { transform: rotate(360deg);} }


/*.text-center { text-align: center; }*/
/*.text-sm { font-size: .875rem; }*/
/*.text-lg { font-size: 1.125rem; }*/
/*.text-xl { font-size: 1.25rem; }*/
/*.text-2xl { font-size: 1.5rem; }*/
/*.text-3xl { font-size: 1.875rem; }*/
/*.text-4xl { font-size: 2.25rem; }*/
/*.text-5xl { font-size: 3rem; }*/
/*.font-bold { font-weight: 700; }*/
/*.font-semibold { font-weight: 600; }*/
/*.leading-tight { line-height: 1.1; }*/
/*.leading-relaxed { line-height: 1.7; }*/
/*.flex { display: flex; }*/
/*.inline-flex { display: inline-flex; }*/
/*.items-center { align-items: center; }*/
/*.items-start { align-items: flex-start; }*/
/*.justify-between { justify-content: space-between; }*/
/*.justify-center { justify-content: center; }*/
/*.gap-1 { gap: .25rem; }*/
/*.gap-2 { gap: .5rem; }*/
/*.gap-3 { gap: .75rem; }*/
/*.gap-4 { gap: 1rem; }*/
/*.gap-6 { gap: 1.5rem; }*/
/*.gap-8 { gap: 2rem; }*/
/*.gap-12 { gap: 3rem; }*/
/*.space-y-1 > * + * { margin-top: .25rem; }*/
/*.space-y-2 > * + * { margin-top: .5rem; }*/
/*.space-y-3 > * + * { margin-top: .75rem; }*/
/*.space-y-4 > * + * { margin-top: 1rem; }*/
/*.space-y-6 > * + * { margin-top: 1.5rem; }*/
/*.space-y-8 > * + * { margin-top: 2rem; }*/
/*.grid { display: grid; }*/
/*.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }*/
/*.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }*/
/*.md\:grid-cols-2 { }*/
/*.md\:grid-cols-3 { }*/
/*.md\:grid-cols-4 { }*/
/*.lg\:grid-cols-2 { }*/
/*.lg\:grid-cols-5 { }*/
/*.w-full { width: 100%; }*/
/*.w-12 { width: 3rem; }*/
/*.w-14 { width: 3.5rem; }*/
/*.w-16 { width: 4rem; }*/
/*.w-20 { width: 5rem; }*/
/*.w-32 { width: 8rem; }*/
/*.w-48 { width: 12rem; }*/
/*.w-64 { width: 16rem; }*/
/*.h-2 { height: .5rem; }*/
/*.h-6 { height: 1.5rem; }*/
/*.h-8 { height: 2rem; }*/
/*.h-12 { height: 3rem; }*/
/*.h-16 { height: 4rem; }*/
/*.h-20 { height: 5rem; }*/
/*.h-48 { height: 12rem; }*/
/*.h-64 { height: 16rem; }*/
/*.rounded { border-radius: .5rem; }*/
/*.object-cover { object-fit: cover; }*/
/*.overflow-hidden { overflow: hidden; }*/
/*.relative { position: relative; }*/
/*.absolute { position: absolute; }*/
/*.top-0 { top: 0; }*/
/*.bottom-0 { bottom: 0; }*/
/*.left-0 { left: 0; }*/
/*.right-0 { right: 0; }*/
/*.z-10 { z-index: 10; }*/
/*.z-50 { z-index: 50; }*/
/*.fixed { position: fixed; }*/
/*.border-t { border-top-width: 1px; border-style: solid; }*/
/*.border-b { border-bottom-width: 1px; border-style: solid; }*/
/*.text-xs { font-size: .75rem; }*/
/*.opacity-50 { opacity: .5; }*/
/* ===== Header / Nav ===== */
/*.site-header { transition: all .3s ease; }*/
/*.site-header-inner {*/
/*    max-width: 80rem;*/
/*    margin: 0 auto;*/
/*    padding: 0 1rem;*/
/*}*/
/*.site-header.is-scrolled {*/
/*    background-color: rgba(2,6,23,0.95);*/
/*    backdrop-filter: blur(16px);*/
/*    border-bottom: 1px solid rgba(148,163,184,0.4);*/
/*    box-shadow: 0 18px 40px rgba(15,23,42,0.75);*/
/*}*/
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-yellow-400 { color: #facc15; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 80%, transparent); }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--primary-foregrond);
}

.btn-outline.btn-primary {
  color: hsl(var(--p));
  border-color: hsl(var(--p));
}

.btn-outline.btn-primary:hover {
  background-color: hsl(var(--p));
  border-color: hsl(var(--p));
  color: hsl(var(--pc));
}

.btn-outline.btn-secondary {
  color: hsl(var(--s));
  border-color: hsl(var(--s));
}

.btn-outline.btn-secondary:hover {
  background-color: hsl(var(--s));
  border-color: hsl(var(--s));
  color: hsl(var(--sc));
}

.btn-ghost {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
}
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15,23,42,0.6);
}
.js-nav-menu {
    transition: max-height .3s ease, opacity .3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/********************************
********* AI Training ***********
********************************/
/* ===== Hero Background ===== */
.animated-bg {
    position: absolute;
    inset: 0;
    background:
    radial-gradient(circle at top left, rgba(56,189,248,0.25), transparent 55%),
    radial-gradient(circle at bottom right, rgba(129,140,248,0.25), transparent 55%);
    opacity: .5;
    pointer-events: none;
}
.progress-pulse { animation: progressPulse 1.5s infinite alternate; }
@keyframes progressPulse {
    from { opacity: .7; }
    to { opacity: 1; }
}
/* ===== Glowing Card ===== */
.glowing-card {
    background: rgba(15,23,42,0.2);
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,0.1);
    box-shadow: 0 18px 40px rgba(15,23,42,0.75);
}

/* ===== アコーディオン: カリキュラム ===== */
.module-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); }
.module-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; width:100%; background:transparent; border:none; cursor:pointer; }
.module-content {
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s ease,
    opacity .35s ease;
    border-top:1px solid rgba(148,163,184,0.4);
}
/*.chevron-icon { display:inline-block; transition:transform .3s ease; }*/
/* 開いた状態 */
.module-content.is-open {
  max-height: 1000px; /* 中身より少し大きめならOK（必要に応じて調整） */
  opacity: 1;
}
/*.module-header.:has(+ .module-content.is-open) .chevron-icon {*/
/*    transform: rotate(180deg);*/
/*}*/
.js-module-toggle .chevron-icon svg {
  display: inline-block;
  transition: transform 0.25s ease;
  transform-origin: center;
  transform-box: fill-box; /* Safari 対策としてあると安心 */
}

/* 開いているときだけ 180° 回転 */
.js-module-toggle.is-open .chevron-icon svg {
  transform: rotate(180deg);
}
/* ===== アコーディオン: FAQ ===== */
.faq-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); overflow:hidden; }
.faq-header { padding:1.25rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; border:none; width:100%; background:transparent; }
.faq-content { max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
/*.faq-item.is-open .chevron-icon { transform: rotate(180deg); }*/
.faq-content.is-open {
    max-height: 1000px;
    opacity: 1;
}
[hidden]{ display: none !important}
.contact-form-wrapper.is-hidden { display: none !important }
/***********************************
 *
 * Inquiry お問い合わせ固定ページ
 *
 **********************************/
.inquiry label.text-foreground { color: #bbb }
.inquiry .text-destructive {color: var(--destructive)}
/* 相談内容：選択状態（テーマに負けないよう強めに） */
.inquiry .type-grid .type-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.inquiry .type-grid .type-item:hover{
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  transform: translateY(-1px);
}

/* ★ここが重要：is-selected 時に「見た目が確実に変わる」 */
.inquiry .type-grid .type-item.is-selected{
  border-color: color-mix(in oklab, var(--primary) 80%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 14%, transparent) !important;
  color: var(--fg) !important;
}

/* 未選択時の“文字色固定”を解除したい場合（任意） */
.inquiry .type-grid .type-item:not(.is-selected){
  color: var(--muted-foreground) !important;
}

/* checkbox自体の見た目 */
.inquiry .type-grid .type-checkbox{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
/** Theme Name: Astra Theme URI: https://wpastra.com/ Author: Brainstorm Force Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/ Version: 4.11.5 Requires at least: 5.3 WC requires at least: 3.0 WC tested up to: 9.6 Tested up to: 6.8 Requires PHP: 5.3 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra Domain Path: /languages Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog AMP: true Astra WordPress Theme, Copyright 2020 WPAstra. Astra is distributed under the terms of the GNU GPL. Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of. Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/ Astra icon font is based on IcoMoon-Free vector icon by Keyamoon. IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html) Source: http://keyamoon.com/ Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility) Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md ) Screenshot image is a collage of actual sites created using the Astra WordPress Theme. Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free ) https://fontawesome.com/v5.15/icons/store?style=solid https://fontawesome.com/v5.15/icons/shopping-cart?style=solid https://fontawesome.com/v5.15/icons/pen-square?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans ) https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License. https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/. For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/. Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail) Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later. Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader) Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE ) /* Note: The CSS files are loaded from assets/css/ folder. */
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}
.ast-container { max-width: none; }
.font-archivo { font-family: 'Archivo', sans-serif; }
/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: color-mix(in oklab, var(--background) 95%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}
.logo-icon {
    /*width: 48px;*/
    /*height: 48px;*/
    margin-right: 0.5rem;
    /*background: linear-gradient(135deg, #025DFF, #7B61FF);*/
    /*border-radius: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}
.logo-text {
    font-family: 'Archivo', sans-serif;
    font-size: 2rem;
    font-weight: 700;
}
.logo-x { color: #025DFF; }
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav a {
    text-decoration: none;
    color: #666;
    font-weight: 600;
    transition: color 0.3s ease;
}
.nav a:hover { color: #025DFF; }
.nav .separator { color: #ccc; }
.contact-btn {
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}
.contact-btn:hover { opacity: 0.9; }
/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23025DFF;stop-opacity:0.8"/><stop offset="100%" style="stop-color:%237B61FF;stop-opacity:0.9"/></linearGradient></defs><rect width="1920" height="1080" fill="url(%23bg)"/><circle cx="200" cy="200" r="100" fill="white" opacity="0.1"/><circle cx="1600" cy="300" r="150" fill="white" opacity="0.05"/><circle cx="400" cy="800" r="80" fill="white" opacity="0.1"/></svg>') center/cover;
    padding-top: 80px;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background: linear-gradient(to bottom, transparent, rgba(245, 245, 245, 0.5), #f5f5f5);
    z-index: 2;
}
.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 2rem;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2rem;
    font-style: italic;
    text-align: left;
}
.highlight-ai { color: #248dff; }
.ruby-text {
    position: relative;
    display: inline-block;
}
.ruby-text::after {
    content: attr(data-ruby);
    position: absolute;
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6em;
    color: #248dff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.ruby-text:hover::after { opacity: 1; }
/* Sections */
.section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title h2 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.section-subtitle {
    color: #666;
    font-size: 1.5rem;
}
/* Why Us Section */
.why-us {
    text-align: center;
    background: #f8f9fa;
}
.why-us p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}
.highlight-blue {
    color: #0094ff;
    font-weight: 600;
}
/* Services Section */
.services { padding: 4rem 2rem; }
.service-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 24px 15px rgba(0, 0, 0, 0.1), 0 -3px 6px rgba(0, 0, 0, 0.05), 6px 0 15px rgba(0, 0, 0, 0.15);
    margin-bottom: 3rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    display: flex;
    min-height: 200px;
}
.service-content {
    width: 70%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.service-content h3 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.service-x { color: #025DFF; }
.service-content p {
    color: #666;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.service-btn {
    background: #025DFF;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(2, 93, 255, 0.4);
    align-self: flex-start;
}
.service-btn:hover {
    background: #024ACC;
    box-shadow: 0 12px 24px rgba(2, 93, 255, 0.5);
}
.service-image {
    width: 30%;
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 700;
}
.cta-section {
    text-align: center;
    margin-top: 3rem;
}
.cta-btn {
    display: inline-block;
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
    transition: opacity 0.3s ease;
}
.cta-btn:hover { opacity: 0.9; }
/* News and Cases Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}
.card-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #ccc;
    position: relative;
}
.card-content { padding: 1.5rem; }
.card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: #666;
}
.card-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}
.card h3 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}
.card:hover h3 { color: #025DFF; }
.card p {
    color: #666;
    font-size: 0.875rem;
}
.view-all { text-align: center; }
.view-all-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid #025DFF;
    color: #025DFF;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.view-all-btn:hover {
    background: #025DFF;
    color: white;
}
/* Cases Section */
.cases {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}
/* Contact Section */
.contact {
    background: rgba(123, 97, 255, 0.1);
    padding: 5rem 2rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    max-width: 800px;
    margin: 0 auto;
}
.contact-item { text-align: center; }
.contact-item p {
    color: #666;
    margin-bottom: 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.contact-item .cta-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}
/* Footer */
.footer {
    background: #2d3748;
    color: white;
    text-align: center;
    padding: 2rem;
}
/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}
/* Responsive Design */
@media (max-width: 768px) {
    .header { padding: 1rem; }
    .nav { display: none; }
    .mobile-menu-btn { display: flex; }
    .service-card {
        flex-direction: column;
        max-width: 95%;
    }
    .service-content { width: 100%; }
    .service-image {
        width: 100%;
        height: 120px;
    }
    .grid { grid-template-columns: 1fr; }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal {
    background: white;
    border-radius: 1rem;
    max-width: 900px;
    max-height: 90vh;
    width: 90%;
    overflow-y: auto;
    transform: translateY(30px);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header {
    padding: 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-family: 'Archivo', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.modal-close:hover {
    background: #f1f5f9;
    color: #333;
}
.modal-content { padding: 2rem; }
.modal-section { margin-bottom: 2rem; }
.modal-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #025DFF;
}
.modal-section p {
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1rem;
}
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.feature-item {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #025DFF;
}
.feature-item h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3748;
}
.feature-item p {
    font-size: 0.9rem;
    color: #718096;
    margin: 0;
}
.price-section {
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    text-align: center;
    margin: 2rem 0;
}
.price-section h3 {
    color: white;
    margin-bottom: 1rem;
}
.price-text {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}
.modal-cta {
    background: white;
    color: #025DFF;
    border: 2px solid white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.modal-cta:hover {
    background: transparent;
    color: white;
}
/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}
.fade-in.delay-200 { animation-delay: 0.2s; }
.fade-in.delay-400 { animation-delay: 0.4s; }
.fade-in.delay-600 { animation-delay: 0.6s; }
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn i[data-lucide] {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}
.btn[disabled] { opacity: .55; cursor:not-allowed; transform:none; }
.btn-lg { padding: 1rem 1.25rem; }
/* ========================= カラーテーマ（元の :root / .dark をそのまま CSS で） ========================= */
:root {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    /* Primary Color を唐紅に変更 */
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    /* Secondary Color を深紫に変更 */
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    /* Secondary の明暗バリエーション */
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    /* Accent も唐紅に合わせて調整 */
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
    --destructive: oklch(.577 .245 27.325);
}
.dark {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
}
/* ========================= ベーススタイル（@layer base/@apply の代わり） ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--border);
}
/* outline-ring/50 っぽい雰囲気だけ軽く再現 */
*:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
    outline-offset: 2px;
}
body {
    margin: 0;
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--background) !important;
}
/* a のデフォルト装飾を軽めに */
a {
    color: inherit;
    text-decoration: none;
}
/*a:hover {*/
/* text-decoration: underline;*/
/*}*/
/* Astra のコンテナの白背景を殺す */
.ast-plain-container,
.ast-page-builder-template,
.site,
.site-inner,
.site-content,
.content-area {
    background: transparent !important;
    background-color: transparent !important;
}
/* ========================= Tailwind 風の色ユーティリティを最低限だけ再現 （bg-background, text-foreground など） ========================= */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-popover { background-color: var(--popover); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-muted { background-color: var(--muted); }
.bg-accent { background-color: var(--accent); }
/* Tailwind の bg-secondary/50 をそのまま使っている場合の対応 */
.bg-secondary\/50 { background-color: color-mix(in oklab, var(--secondary) 50%, transparent); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-secondary-light { color: var(--secondary-light); }
.text-accent { color: var(--accent); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.border-primary { border-color: var(--primary); }
/* sidebar 系（必要なら） */
.bg-sidebar { background-color: var(--sidebar); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
/* button */
button { cursor: pointer; }
/* ========================= アニメーション定義（元の keyframes 群） ========================= */
/* Floating animation */
@keyframes float {
    0%,
    100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
/* Pulsing glow - 唐紅に合わせて色調整 */
@keyframes pulse-glow {
    0%,
    100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
/* Gradient shift */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Fade in up animation */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Fade in animation */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* Scale in animation */
@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* Slide in from left */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Slide in from right */
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Rotating border animation */
@keyframes rotate-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
/* Particle float */
@keyframes particle-float {
    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-100vh) translateX(20px) rotate(360deg);
        opacity: 0;
    }
}
/* Shimmer effect */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* Counter animation */
@keyframes count-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Glow pulse - 唐紅に合わせて色調整 */
@keyframes glow-pulse {
    0%,
    100% { box-shadow: 0 0 20px rgba(223, 84, 100, 0.3); }
    50% { box-shadow: 0 0 40px rgba(223, 84, 100, 0.6); }
}
/* Orbit animation */
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* Line draw animation */
@keyframes line-draw {
    0% { width: 0; }
    100% { width: 100%; }
}
/* Text reveal */
@keyframes text-reveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
/* Morphing blob */
@keyframes morph {
    0%,
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
/* Data stream */
@keyframes data-stream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* ========================= アニメーション用ユーティリティクラス ========================= */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
.animate-rotate-border {
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
}
.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(223, 84, 100, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}
.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.animate-orbit { animation: orbit 20s linear infinite; }
.animate-morph { animation: morph 8s ease-in-out infinite; }
.animate-data-stream { animation: data-stream 3s linear infinite; }
/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1500 { animation-delay: 1500ms; }
.delay-2000 { animation-delay: 2000ms; }
/* Hover effects - 唐紅に合わせて色調整 */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.hover-glow { transition: box-shadow 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(223, 84, 100, 0.4); }
/* Gradient text - 唐紅と深紫のグラデーション */
.gradient-text {
    background: linear-gradient(135deg, oklch(0.58 0.18 15), oklch(0.45 0.15 310));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Glassmorphism */
.glass {
    background: rgba(22, 22, 30, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(223, 84, 100, 0.1);
}
/* Animated border */
.animated-border { position: relative; }
.animated-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
    border-radius: inherit;
    z-index: -1;
}
/* ========================= ScrollReveal 用クラス （JS で .scroll-reveal に is-visible を付けている） ========================= */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 以前の .reveal も一応残しておく */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Particle container */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    animation: particle-float 10s linear infinite;
}
/* Neural network lines */
.neural-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: line-draw 2s ease-out forwards;
}
/* Typing cursor */
.typing-text::after,
.typing-cursor::after {
    content: "|";
    animation: fade-in 0.5s ease-in-out infinite alternate;
}
/* bg-card/50 — カードの半透明背景 */
.bg-card\/50 { background-color: color-mix(in oklab, var(--card) 50%, transparent); }
/* bg-primary/5, /10, /20 — ぼかし円やホバー用 */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
/* bg-secondary-dark/20 — NEW バッジの背景などで使われる想定 */
.bg-secondary-dark\/20 { background-color: color-mix(in oklab, var(--secondary-dark) 20%, transparent); }
/* ========================= グローバル背景レイヤー ========================= */
/* Astra のコンテナを背景より前に出す */
.site,
.site-inner,
.site-content,
.ast-plain-container,
.ast-page-builder-template {
    position: relative;
    z-index: 0;
}
/* 全体を覆う背景レイヤー（固定） */
.global-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    background-color: var(--background);
    /* 全体のダーク背景 */
}
/* 大きいボケ円（ぼかしグロー） */
.bg-circle {
    position: absolute;
    border-radius: 9999px;
    filter: blur(40px);
    opacity: 0.55;
}
.bg-circle-primary {
    /* background: rgba(223, 84, 100, 0.65); /* 唐紅 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
}
.bg-circle-secondary {
    /* background: rgba(74, 34, 93, 0.55); /* 深紫 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--secondary) 65%, transparent), transparent 75%);
}
/* ========================================= グローバル背景用の縦ライン 既存の .neural-line を上書きしないよう、 .global-background 内だけ別の指定にする ========================================= */
/* 縦に走る細い光のライン */
.neural-line {
    position: fixed;
    /* 画面全体に対するラインにしたいので固定 */
    top: -120vh;
    /* 画面上の外からスタート */
    width: 1px;
    /* 細い縦線 */
    height: 250vh;
    /* 画面を突き抜けるくらい長くしておく */
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
    /* コンテンツの裏側に */
    animation: data-stream 1s linear infinite;
}
/* もし一本ごとに微妙に速さを変えたければこんな感じで */
.neural-line:nth-of-type(1) { animation-duration: 4s; }
.neural-line:nth-of-type(2) { animation-duration: 4s; }
.neural-line:nth-of-type(3) { animation-duration: 4s; }
/* 既に style.css に入っている data-stream キーフレームがこれなら OK */
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* 楕円軌道っぽい光 */
/*.orbit-blob {*/
/* position: absolute;*/
/* border-radius: 9999px;*/
/* border: 1px solid rgba(223, 84, 100, 0.35);*/
/* box-shadow: 0 0 40px rgba(223, 84, 100, 0.4);*/
/* background: radial-gradient(circle at 30% 30%, rgba(223, 84, 100, 0.35), transparent 60%);*/
/* transform-origin: center;*/
/* animation: orbit 18s linear infinite;*/
/*}*/
.orbit-blob {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
    opacity: 0.4;
    filter: blur(30px);
    animation: orbit 18s linear infinite;
    transform-origin: center;
}
/* ====== morphing blobs（大きいボケ円） ====== */
.ab-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    animation: morph 18s ease-in-out infinite;
}
/* TSX: top-1/4 left-1/4 w-[500px] h-[500px] bg-primary/10 animate-morph blur-3xl */
.ab-blob-1 {
    top: 25%;
    left: 25%;
    width: 500px;
    height: 500px;
    animation-duration: 15s;
}
/* TSX: bottom-1/4 right-1/4 w-[400px] h-[400px] bg-primary/5 animate-morph blur-3xl style={{ animationDuration: "20s", animationDelay: "-5s" }} */
.ab-blob-2 {
    bottom: 25%;
    right: 25%;
    width: 400px;
    height: 400px;
    background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    animation-duration: 20s;
    animation-delay: -5s;
}
/* ====== 格子状のグリッド ====== */
.ab-grid {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: linear-gradient(rgba(100, 200, 220, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 200, 220, 0.15) 1px, transparent 1px);
    background-size: 80px 80px;
}
/* ====== 粒子（小さい丸） ====== */
.ab-particle {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.6;
    animation: float var(--float-duration, 15s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
/* ====== 縦に流れる細いライン（data streams） ====== */
.ab-stream {
    position: absolute;
    top: -8rem;
    /* 画面上の外からスタート */
    width: 1px;
    /* TSX: w-px */
    height: 8rem;
    /* TSX: h-32 (8 * 4px = 32px ≒ 8rem) */
    background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--primary) 50%, transparent) 50%, transparent 100%);
    animation: data-stream var(--stream-duration, 4s) linear infinite;
    animation-delay: var(--stream-delay, 0s);
}
/* ====== 軌道を回る小さい点 ====== */
.ab-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ab-orbit-dot {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.4;
    animation: orbit 30s linear infinite;
}
/* TSX: w-3 h-3 animate-orbit opacity-40, 25s */
.ab-orbit-dot-1 {
    width: 12px;
    height: 12px;
    animation-duration: 25s;
}
/* TSX: w-2 h-2 animate-orbit opacity-30, 35s reverse */
.ab-orbit-dot-2 {
    width: 8px;
    height: 8px;
    opacity: 0.3;
    animation-duration: 35s;
    animation-direction: reverse;
}
/* ====== コーナーの線（枠） ====== */
.ab-corner {
    position: absolute;
    border-color: color-mix(in oklab, var(--primary) 10%, transparent);
    border-style: solid;
}
.ab-corner-tl {
    top: 0;
    left: 0;
    width: 16rem;
    height: 16rem;
    border-left-width: 1px;
    border-top-width: 1px;
}
.ab-corner-br {
    bottom: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    border-right-width: 1px;
    border-bottom-width: 1px;
}
/* ====== keyframes（TSX と同等の動き） ====== */
@keyframes float {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes morph {
    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate3d(0, 0, 0);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate3d(20px, -10px, 0);
    }
}
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* ========== Font size (base) ========== */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}
.text-8xl {
    font-size: 6rem;
    line-height: 1;
}
.text-9xl {
    font-size: 8rem;
    line-height: 1;
}
/* ========== Font size (responsive) ========== */
@media (min-width: 640px) {
    /* sm */
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .sm\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .sm\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .sm\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 768px) {
    /* md */
    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .md\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .md\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .md\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 1024px) {
    /* lg */
    .lg\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .lg\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .lg\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
/* ========== Line-height / font-weight ========== */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
/* ========== Margin bottom ========== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-32 { margin-bottom: 8rem; }
.mb-40 { margin-bottom: 10rem; }
.mb-48 { margin-bottom: 12rem; }
.mb-56 { margin-bottom: 14rem; }
.mb-64 { margin-bottom: 16rem; }
.mb-72 { margin-bottom: 18rem; }
.mb-80 { margin-bottom: 20rem; }
.mb-96 { margin-bottom: 24rem; }
/* ========== Simple text / layout ========== */
.text-foreground { color: var(--foreground); }
.block { display: block; }
.text-center { text-align: center; }
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
/* ========================= Tailwind 互換のサイズ・ぼかしユーティリティ ========================= */
.w-96 { width: 24rem; }
.h-96 { height: 24rem; }
.w-80 { width: 20rem; }
.h-80 { height: 20rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
/* ぼかし（blur-3xl） */
.blur-3xl { filter: blur(64px); }
/* ========================= bg-primary/◯ 系の半透明カラー ========================= */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.via-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
/* ========================= ボタン・アイコン周り ========================= */
.btn {
    color: white;
    background: #0f172a;
}
.btn svg { stroke-width: 2; }
/* ======================= Hero Section ======================= */
/* カード全体 */
.stat {
    /*position: relative;*/
    /*padding: 1.75rem 1.5rem;*/
    /*border-radius: 1rem;*/
    /*background: rgba(15, 23, 42, 0.9);*/
    /*border: 1px solid rgba(148, 163, 184, 0.3);*/
    /*backdrop-filter: blur(20px);*/
    /*transition:*/
    /* transform 0.35s ease,*/
    /* box-shadow 0.35s ease,*/
    /* border-color 0.35s ease,*/
    /* background 0.35s ease;*/
}
.stat:hover {
    /*transform: translateY(-4px);*/
    /*box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);*/
    /*border-color: rgba(94, 234, 212, 0.7);*/
    /*background: radial-gradient(*/
    /* circle at top left,*/
    /* rgba(94, 234, 212, 0.12),*/
    /* transparent 55%*/
    /* ),*/
    /* rgba(15, 23, 42, 0.98);*/
}
/* アイコン */
.stat-icon {
    /*width: 3rem;*/
    /*height: 3rem;*/
    /*border-radius: 999px;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*margin-bottom: 0.75rem;*/
    /*background: radial-gradient(circle at 30% 0, #22d3ee, #0f172a);*/
    /*box-shadow: 0 0 25px rgba(34, 211, 238, 0.6);*/
}
/* 数値 */
.stat-value .counter {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* スクロールリビール用 */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* ========== Layout / Position ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.bottom-8 { bottom: 2rem; }
.-bottom-1 { bottom: -0.25rem; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.z-10 { z-index: 10; }
/* ========== Display ========== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }
/* Tailwind の group ユーティリティ */
.group { position: relative; }
/* ========== Flex / Grid関連 ========== */
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex { display: flex }
    .md\:flex-row { flex-direction: row }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:flex { display: flex; }
    .lg\:flex-row { flex-direction: row } 
    .lg\:hidden { display: none; }
}
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:flex { display: flex; }
    .sm\:hidden { display: none; }
}
/* ========== Sizing ========== */
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-1 { width: 0.25rem; }
.w-4 { width: 1rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-px { height: 1px; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }
.aspect-square { aspect-ratio: 1 / 1; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
/* ========== Spacing (margin / padding / gap) ========== */
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.pt-20 { padding-top: 5rem; }
.pt-2 { padding-top: 0.5rem; }
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-16 { gap: 4rem; }
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
/* ========== Overflow / Opacity ========== */
.overflow-hidden { overflow: hidden; }
.opacity-30 { opacity: 0.3; }
/* ========== Colors / text misc ========== */
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.leading-relaxed { line-height: 1.625; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.text-pretty { text-wrap: pretty; }
.text-balance { text-wrap: balance; }
/* ========== Background / Border ========== */
.bg-transparent { background-color: transparent; }
.bg-primary { background-color: var(--primary); }
.bg-card { background-color: var(--card); }
/*.hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); }*/
/*.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }*/
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-border { border-color: var(--border); }
.border-muted-foreground\/30 { border-color: hsl(var(--muted-foreground) / 0.3); }
.hover\:border-primary\/50:hover { border-color: hsl(var(--primary) / 0.5); }
/* ========== Transform / Transition ========== */
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group-hover-translate {}
.group:hover .group-hover-transrate{ transform: translateX(4px) }
.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.delay-1000 {
    transition-delay: 1000ms;
    animation-delay: 1000ms;
}
/* ========== Animation ========== */
@keyframes bounce {
    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.animate-bounce { animation: bounce 1s infinite; }
/* カスタム想定 */
.hover-lift {}
.animate-glow-pulse {}
.animate-fade-in {}
.animate-line-draw {}
/* ========== Cursor ========== */
.cursor-pointer { cursor: pointer; }

/* ---- Spinner ---- */
.spinner{
  display:inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,1);
  border-radius: 999px;
  animation: spin 1s linear infinite;
  margin-right: .5rem;
}
@keyframes spin{ to { transform: rotate(360deg);} }


/*.text-center { text-align: center; }*/
/*.text-sm { font-size: .875rem; }*/
/*.text-lg { font-size: 1.125rem; }*/
/*.text-xl { font-size: 1.25rem; }*/
/*.text-2xl { font-size: 1.5rem; }*/
/*.text-3xl { font-size: 1.875rem; }*/
/*.text-4xl { font-size: 2.25rem; }*/
/*.text-5xl { font-size: 3rem; }*/
/*.font-bold { font-weight: 700; }*/
/*.font-semibold { font-weight: 600; }*/
/*.leading-tight { line-height: 1.1; }*/
/*.leading-relaxed { line-height: 1.7; }*/
/*.flex { display: flex; }*/
/*.inline-flex { display: inline-flex; }*/
/*.items-center { align-items: center; }*/
/*.items-start { align-items: flex-start; }*/
/*.justify-between { justify-content: space-between; }*/
/*.justify-center { justify-content: center; }*/
/*.gap-1 { gap: .25rem; }*/
/*.gap-2 { gap: .5rem; }*/
/*.gap-3 { gap: .75rem; }*/
/*.gap-4 { gap: 1rem; }*/
/*.gap-6 { gap: 1.5rem; }*/
/*.gap-8 { gap: 2rem; }*/
/*.gap-12 { gap: 3rem; }*/
/*.space-y-1 > * + * { margin-top: .25rem; }*/
/*.space-y-2 > * + * { margin-top: .5rem; }*/
/*.space-y-3 > * + * { margin-top: .75rem; }*/
/*.space-y-4 > * + * { margin-top: 1rem; }*/
/*.space-y-6 > * + * { margin-top: 1.5rem; }*/
/*.space-y-8 > * + * { margin-top: 2rem; }*/
/*.grid { display: grid; }*/
/*.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }*/
/*.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }*/
/*.md\:grid-cols-2 { }*/
/*.md\:grid-cols-3 { }*/
/*.md\:grid-cols-4 { }*/
/*.lg\:grid-cols-2 { }*/
/*.lg\:grid-cols-5 { }*/
/*.w-full { width: 100%; }*/
/*.w-12 { width: 3rem; }*/
/*.w-14 { width: 3.5rem; }*/
/*.w-16 { width: 4rem; }*/
/*.w-20 { width: 5rem; }*/
/*.w-32 { width: 8rem; }*/
/*.w-48 { width: 12rem; }*/
/*.w-64 { width: 16rem; }*/
/*.h-2 { height: .5rem; }*/
/*.h-6 { height: 1.5rem; }*/
/*.h-8 { height: 2rem; }*/
/*.h-12 { height: 3rem; }*/
/*.h-16 { height: 4rem; }*/
/*.h-20 { height: 5rem; }*/
/*.h-48 { height: 12rem; }*/
/*.h-64 { height: 16rem; }*/
/*.rounded { border-radius: .5rem; }*/
/*.object-cover { object-fit: cover; }*/
/*.overflow-hidden { overflow: hidden; }*/
/*.relative { position: relative; }*/
/*.absolute { position: absolute; }*/
/*.top-0 { top: 0; }*/
/*.bottom-0 { bottom: 0; }*/
/*.left-0 { left: 0; }*/
/*.right-0 { right: 0; }*/
/*.z-10 { z-index: 10; }*/
/*.z-50 { z-index: 50; }*/
/*.fixed { position: fixed; }*/
/*.border-t { border-top-width: 1px; border-style: solid; }*/
/*.border-b { border-bottom-width: 1px; border-style: solid; }*/
/*.text-xs { font-size: .75rem; }*/
/*.opacity-50 { opacity: .5; }*/
/* ===== Header / Nav ===== */
/*.site-header { transition: all .3s ease; }*/
/*.site-header-inner {*/
/*    max-width: 80rem;*/
/*    margin: 0 auto;*/
/*    padding: 0 1rem;*/
/*}*/
/*.site-header.is-scrolled {*/
/*    background-color: rgba(2,6,23,0.95);*/
/*    backdrop-filter: blur(16px);*/
/*    border-bottom: 1px solid rgba(148,163,184,0.4);*/
/*    box-shadow: 0 18px 40px rgba(15,23,42,0.75);*/
/*}*/
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-yellow-400 { color: #facc15; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 80%, transparent); }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--primary-foregrond);
}

.btn-outline.btn-primary {
  color: hsl(var(--p));
  border-color: hsl(var(--p));
}

.btn-outline.btn-primary:hover {
  background-color: hsl(var(--p));
  border-color: hsl(var(--p));
  color: hsl(var(--pc));
}

.btn-outline.btn-secondary {
  color: hsl(var(--s));
  border-color: hsl(var(--s));
}

.btn-outline.btn-secondary:hover {
  background-color: hsl(var(--s));
  border-color: hsl(var(--s));
  color: hsl(var(--sc));
}

.btn-ghost {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
}
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15,23,42,0.6);
}
.js-nav-menu {
    transition: max-height .3s ease, opacity .3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/********************************
********* AI Training ***********
********************************/
/* ===== Hero Background ===== */
.animated-bg {
    position: absolute;
    inset: 0;
    background:
    radial-gradient(circle at top left, rgba(56,189,248,0.25), transparent 55%),
    radial-gradient(circle at bottom right, rgba(129,140,248,0.25), transparent 55%);
    opacity: .5;
    pointer-events: none;
}
.progress-pulse { animation: progressPulse 1.5s infinite alternate; }
@keyframes progressPulse {
    from { opacity: .7; }
    to { opacity: 1; }
}
/* ===== Glowing Card ===== */
.glowing-card {
    background: rgba(15,23,42,0.2);
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,0.1);
    box-shadow: 0 18px 40px rgba(15,23,42,0.75);
}

/* ===== アコーディオン: カリキュラム ===== */
.module-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); }
.module-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; width:100%; background:transparent; border:none; cursor:pointer; }
.module-content {
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s ease,
    opacity .35s ease;
    border-top:1px solid rgba(148,163,184,0.4);
}
/*.chevron-icon { display:inline-block; transition:transform .3s ease; }*/
/* 開いた状態 */
.module-content.is-open {
  max-height: 1000px; /* 中身より少し大きめならOK（必要に応じて調整） */
  opacity: 1;
}
/*.module-header.:has(+ .module-content.is-open) .chevron-icon {*/
/*    transform: rotate(180deg);*/
/*}*/
.js-module-toggle .chevron-icon svg {
  display: inline-block;
  transition: transform 0.25s ease;
  transform-origin: center;
  transform-box: fill-box; /* Safari 対策としてあると安心 */
}

/* 開いているときだけ 180° 回転 */
.js-module-toggle.is-open .chevron-icon svg {
  transform: rotate(180deg);
}
/* ===== アコーディオン: FAQ ===== */
.faq-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); overflow:hidden; }
.faq-header { padding:1.25rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; border:none; width:100%; background:transparent; }
.faq-content { max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
/*.faq-item.is-open .chevron-icon { transform: rotate(180deg); }*/
.faq-content.is-open {
    max-height: 1000px;
    opacity: 1;
}
[hidden]{ display: none !important}
.contact-form-wrapper.is-hidden { display: none !important }
/***********************************
 *
 * Inquiry お問い合わせ固定ページ
 *
 **********************************/
.inquiry label.text-foreground { color: #bbb }
.inquiry .text-destructive {color: var(--destructive)}
/* 相談内容：選択状態（テーマに負けないよう強めに） */
.inquiry .type-grid .type-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.inquiry .type-grid .type-item:hover{
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  transform: translateY(-1px);
}

/* ★ここが重要：is-selected 時に「見た目が確実に変わる」 */
.inquiry .type-grid .type-item.is-selected{
  border-color: color-mix(in oklab, var(--primary) 80%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 14%, transparent) !important;
  color: var(--fg) !important;
}

/* 未選択時の“文字色固定”を解除したい場合（任意） */
.inquiry .type-grid .type-item:not(.is-selected){
  color: var(--muted-foreground) !important;
}

/* checkbox自体の見た目 */
.inquiry .type-grid .type-checkbox{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
/** Theme Name: Astra Theme URI: https://wpastra.com/ Author: Brainstorm Force Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/ Version: 4.11.5 Requires at least: 5.3 WC requires at least: 3.0 WC tested up to: 9.6 Tested up to: 6.8 Requires PHP: 5.3 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra Domain Path: /languages Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog AMP: true Astra WordPress Theme, Copyright 2020 WPAstra. Astra is distributed under the terms of the GNU GPL. Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of. Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/ Astra icon font is based on IcoMoon-Free vector icon by Keyamoon. IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html) Source: http://keyamoon.com/ Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility) Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md ) Screenshot image is a collage of actual sites created using the Astra WordPress Theme. Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free ) https://fontawesome.com/v5.15/icons/store?style=solid https://fontawesome.com/v5.15/icons/shopping-cart?style=solid https://fontawesome.com/v5.15/icons/pen-square?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid https://fontawesome.com/v5.15/icons/user-tie?style=solid Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans ) https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License. https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/. For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/. Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail) Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later. Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader) Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE ) /* Note: The CSS files are loaded from assets/css/ folder. */
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}
.ast-container { max-width: none; }
.font-archivo { font-family: 'Archivo', sans-serif; }
/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: color-mix(in oklab, var(--background) 95%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}
.logo-icon {
    /*width: 48px;*/
    /*height: 48px;*/
    margin-right: 0.5rem;
    /*background: linear-gradient(135deg, #025DFF, #7B61FF);*/
    /*border-radius: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}
.logo-text {
    font-family: 'Archivo', sans-serif;
    font-size: 2rem;
    font-weight: 700;
}
.logo-x { color: #025DFF; }
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav a {
    text-decoration: none;
    color: #666;
    font-weight: 600;
    transition: color 0.3s ease;
}
.nav a:hover { color: #025DFF; }
.nav .separator { color: #ccc; }
.contact-btn {
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}
.contact-btn:hover { opacity: 0.9; }
/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23025DFF;stop-opacity:0.8"/><stop offset="100%" style="stop-color:%237B61FF;stop-opacity:0.9"/></linearGradient></defs><rect width="1920" height="1080" fill="url(%23bg)"/><circle cx="200" cy="200" r="100" fill="white" opacity="0.1"/><circle cx="1600" cy="300" r="150" fill="white" opacity="0.05"/><circle cx="400" cy="800" r="80" fill="white" opacity="0.1"/></svg>') center/cover;
    padding-top: 80px;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background: linear-gradient(to bottom, transparent, rgba(245, 245, 245, 0.5), #f5f5f5);
    z-index: 2;
}
.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 2rem;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2rem;
    font-style: italic;
    text-align: left;
}
.highlight-ai { color: #248dff; }
.ruby-text {
    position: relative;
    display: inline-block;
}
.ruby-text::after {
    content: attr(data-ruby);
    position: absolute;
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6em;
    color: #248dff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.ruby-text:hover::after { opacity: 1; }
/* Sections */
.section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title h2 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.section-subtitle {
    color: #666;
    font-size: 1.5rem;
}
/* Why Us Section */
.why-us {
    text-align: center;
    background: #f8f9fa;
}
.why-us p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}
.highlight-blue {
    color: #0094ff;
    font-weight: 600;
}
/* Services Section */
.services { padding: 4rem 2rem; }
.service-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 24px 15px rgba(0, 0, 0, 0.1), 0 -3px 6px rgba(0, 0, 0, 0.05), 6px 0 15px rgba(0, 0, 0, 0.15);
    margin-bottom: 3rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    display: flex;
    min-height: 200px;
}
.service-content {
    width: 70%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.service-content h3 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.service-x { color: #025DFF; }
.service-content p {
    color: #666;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.service-btn {
    background: #025DFF;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(2, 93, 255, 0.4);
    align-self: flex-start;
}
.service-btn:hover {
    background: #024ACC;
    box-shadow: 0 12px 24px rgba(2, 93, 255, 0.5);
}
.service-image {
    width: 30%;
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 700;
}
.cta-section {
    text-align: center;
    margin-top: 3rem;
}
.cta-btn {
    display: inline-block;
    background: linear-gradient(to right, #025DFF, #7B61FF);
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
    transition: opacity 0.3s ease;
}
.cta-btn:hover { opacity: 0.9; }
/* News and Cases Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}
.card-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #ccc;
    position: relative;
}
.card-content { padding: 1.5rem; }
.card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: #666;
}
.card-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}
.card h3 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}
.card:hover h3 { color: #025DFF; }
.card p {
    color: #666;
    font-size: 0.875rem;
}
.view-all { text-align: center; }
.view-all-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid #025DFF;
    color: #025DFF;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.view-all-btn:hover {
    background: #025DFF;
    color: white;
}
/* Cases Section */
.cases {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}
/* Contact Section */
.contact {
    background: rgba(123, 97, 255, 0.1);
    padding: 5rem 2rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    max-width: 800px;
    margin: 0 auto;
}
.contact-item { text-align: center; }
.contact-item p {
    color: #666;
    margin-bottom: 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.contact-item .cta-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}
/* Footer */
.footer {
    background: #2d3748;
    color: white;
    text-align: center;
    padding: 2rem;
}
/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}
/* Responsive Design */
@media (max-width: 768px) {
    .header { padding: 1rem; }
    .nav { display: none; }
    .mobile-menu-btn { display: flex; }
    .service-card {
        flex-direction: column;
        max-width: 95%;
    }
    .service-content { width: 100%; }
    .service-image {
        width: 100%;
        height: 120px;
    }
    .grid { grid-template-columns: 1fr; }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal {
    background: white;
    border-radius: 1rem;
    max-width: 900px;
    max-height: 90vh;
    width: 90%;
    overflow-y: auto;
    transform: translateY(30px);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header {
    padding: 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-family: 'Archivo', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.modal-close:hover {
    background: #f1f5f9;
    color: #333;
}
.modal-content { padding: 2rem; }
.modal-section { margin-bottom: 2rem; }
.modal-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #025DFF;
}
.modal-section p {
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1rem;
}
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.feature-item {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #025DFF;
}
.feature-item h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3748;
}
.feature-item p {
    font-size: 0.9rem;
    color: #718096;
    margin: 0;
}
.price-section {
    background: linear-gradient(135deg, #025DFF, #7B61FF);
    color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    text-align: center;
    margin: 2rem 0;
}
.price-section h3 {
    color: white;
    margin-bottom: 1rem;
}
.price-text {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}
.modal-cta {
    background: white;
    color: #025DFF;
    border: 2px solid white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.modal-cta:hover {
    background: transparent;
    color: white;
}
/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}
.fade-in.delay-200 { animation-delay: 0.2s; }
.fade-in.delay-400 { animation-delay: 0.4s; }
.fade-in.delay-600 { animation-delay: 0.6s; }
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn i[data-lucide] {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}
.btn[disabled] { opacity: .55; cursor:not-allowed; transform:none; }
.btn-lg { padding: 1rem 1.25rem; }
/* ========================= カラーテーマ（元の :root / .dark をそのまま CSS で） ========================= */
:root {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    /* Primary Color を唐紅に変更 */
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    /* Secondary Color を深紫に変更 */
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    /* Secondary の明暗バリエーション */
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    /* Accent も唐紅に合わせて調整 */
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
    --destructive: oklch(.577 .245 27.325);
}
.dark {
    --background: oklch(0.13 0.01 260);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.16 0.01 260);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.16 0.01 260);
    --popover-foreground: oklch(0.98 0 0);
    --primary: oklch(0.58 0.18 15);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.28 0.12 310);
    --secondary-foreground: oklch(0.98 0 0);
    --secondary-dark: oklch(0.28 0.12 310);
    --secondary-light: oklch(0.55 0.18 310);
    --muted: oklch(0.22 0.01 260);
    --muted-foreground: oklch(0.65 0 0);
    --accent: oklch(0.58 0.18 15);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.28 0.01 260);
    --input: oklch(0.22 0.01 260);
    --ring: oklch(0.58 0.18 15);
    --chart-1: oklch(0.58 0.18 15);
    --chart-2: oklch(0.28 0.12 310);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.16 0.01 260);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.58 0.18 15);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.28 0.12 310);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.28 0.01 260);
    --sidebar-ring: oklch(0.58 0.18 15);
}
/* ========================= ベーススタイル（@layer base/@apply の代わり） ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--border);
}
/* outline-ring/50 っぽい雰囲気だけ軽く再現 */
*:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
    outline-offset: 2px;
}
body {
    margin: 0;
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--background) !important;
}
/* a のデフォルト装飾を軽めに */
a {
    color: inherit;
    text-decoration: none;
}
/*a:hover {*/
/* text-decoration: underline;*/
/*}*/
/* Astra のコンテナの白背景を殺す */
.ast-plain-container,
.ast-page-builder-template,
.site,
.site-inner,
.site-content,
.content-area {
    background: transparent !important;
    background-color: transparent !important;
}
/* ========================= Tailwind 風の色ユーティリティを最低限だけ再現 （bg-background, text-foreground など） ========================= */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-popover { background-color: var(--popover); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-muted { background-color: var(--muted); }
.bg-accent { background-color: var(--accent); }
/* Tailwind の bg-secondary/50 をそのまま使っている場合の対応 */
.bg-secondary\/50 { background-color: color-mix(in oklab, var(--secondary) 50%, transparent); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-secondary-light { color: var(--secondary-light); }
.text-accent { color: var(--accent); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.border-primary { border-color: var(--primary); }
/* sidebar 系（必要なら） */
.bg-sidebar { background-color: var(--sidebar); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
/* button */
button { cursor: pointer; }
/* ========================= アニメーション定義（元の keyframes 群） ========================= */
/* Floating animation */
@keyframes float {
    0%,
    100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
/* Pulsing glow - 唐紅に合わせて色調整 */
@keyframes pulse-glow {
    0%,
    100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
/* Gradient shift */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Fade in up animation */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Fade in animation */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* Scale in animation */
@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* Slide in from left */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Slide in from right */
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Rotating border animation */
@keyframes rotate-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
/* Particle float */
@keyframes particle-float {
    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-100vh) translateX(20px) rotate(360deg);
        opacity: 0;
    }
}
/* Shimmer effect */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* Counter animation */
@keyframes count-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Glow pulse - 唐紅に合わせて色調整 */
@keyframes glow-pulse {
    0%,
    100% { box-shadow: 0 0 20px rgba(223, 84, 100, 0.3); }
    50% { box-shadow: 0 0 40px rgba(223, 84, 100, 0.6); }
}
/* Orbit animation */
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* Line draw animation */
@keyframes line-draw {
    0% { width: 0; }
    100% { width: 100%; }
}
/* Text reveal */
@keyframes text-reveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
/* Morphing blob */
@keyframes morph {
    0%,
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
/* Data stream */
@keyframes data-stream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* ========================= アニメーション用ユーティリティクラス ========================= */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
.animate-rotate-border {
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
}
.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(223, 84, 100, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}
.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.animate-orbit { animation: orbit 20s linear infinite; }
.animate-morph { animation: morph 8s ease-in-out infinite; }
.animate-data-stream { animation: data-stream 3s linear infinite; }
/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1500 { animation-delay: 1500ms; }
.delay-2000 { animation-delay: 2000ms; }
/* Hover effects - 唐紅に合わせて色調整 */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.hover-glow { transition: box-shadow 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(223, 84, 100, 0.4); }
/* Gradient text - 唐紅と深紫のグラデーション */
.gradient-text {
    background: linear-gradient(135deg, oklch(0.58 0.18 15), oklch(0.45 0.15 310));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Glassmorphism */
.glass {
    background: rgba(22, 22, 30, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(223, 84, 100, 0.1);
}
/* Animated border */
.animated-border { position: relative; }
.animated-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, var(--primary), transparent, var(--primary));
    background-size: 200% 100%;
    animation: rotate-border 3s linear infinite;
    border-radius: inherit;
    z-index: -1;
}
/* ========================= ScrollReveal 用クラス （JS で .scroll-reveal に is-visible を付けている） ========================= */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 以前の .reveal も一応残しておく */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Particle container */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    animation: particle-float 10s linear infinite;
}
/* Neural network lines */
.neural-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: line-draw 2s ease-out forwards;
}
/* Typing cursor */
.typing-text::after,
.typing-cursor::after {
    content: "|";
    animation: fade-in 0.5s ease-in-out infinite alternate;
}
/* bg-card/50 — カードの半透明背景 */
.bg-card\/50 { background-color: color-mix(in oklab, var(--card) 50%, transparent); }
/* bg-primary/5, /10, /20 — ぼかし円やホバー用 */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
/* bg-secondary-dark/20 — NEW バッジの背景などで使われる想定 */
.bg-secondary-dark\/20 { background-color: color-mix(in oklab, var(--secondary-dark) 20%, transparent); }
/* ========================= グローバル背景レイヤー ========================= */
/* Astra のコンテナを背景より前に出す */
.site,
.site-inner,
.site-content,
.ast-plain-container,
.ast-page-builder-template {
    position: relative;
    z-index: 0;
}
/* 全体を覆う背景レイヤー（固定） */
.global-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    background-color: var(--background);
    /* 全体のダーク背景 */
}
/* 大きいボケ円（ぼかしグロー） */
.bg-circle {
    position: absolute;
    border-radius: 9999px;
    filter: blur(40px);
    opacity: 0.55;
}
.bg-circle-primary {
    /* background: rgba(223, 84, 100, 0.65); /* 唐紅 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
}
.bg-circle-secondary {
    /* background: rgba(74, 34, 93, 0.55); /* 深紫 */
    background: radial-gradient(circle at center, color-mix(in oklab, var(--secondary) 65%, transparent), transparent 75%);
}
/* ========================================= グローバル背景用の縦ライン 既存の .neural-line を上書きしないよう、 .global-background 内だけ別の指定にする ========================================= */
/* 縦に走る細い光のライン */
.neural-line {
    position: fixed;
    /* 画面全体に対するラインにしたいので固定 */
    top: -120vh;
    /* 画面上の外からスタート */
    width: 1px;
    /* 細い縦線 */
    height: 250vh;
    /* 画面を突き抜けるくらい長くしておく */
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
    /* コンテンツの裏側に */
    animation: data-stream 1s linear infinite;
}
/* もし一本ごとに微妙に速さを変えたければこんな感じで */
.neural-line:nth-of-type(1) { animation-duration: 4s; }
.neural-line:nth-of-type(2) { animation-duration: 4s; }
.neural-line:nth-of-type(3) { animation-duration: 4s; }
/* 既に style.css に入っている data-stream キーフレームがこれなら OK */
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
/* 楕円軌道っぽい光 */
/*.orbit-blob {*/
/* position: absolute;*/
/* border-radius: 9999px;*/
/* border: 1px solid rgba(223, 84, 100, 0.35);*/
/* box-shadow: 0 0 40px rgba(223, 84, 100, 0.4);*/
/* background: radial-gradient(circle at 30% 30%, rgba(223, 84, 100, 0.35), transparent 60%);*/
/* transform-origin: center;*/
/* animation: orbit 18s linear infinite;*/
/*}*/
.orbit-blob {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 70%, transparent), transparent 70%);
    opacity: 0.4;
    filter: blur(30px);
    animation: orbit 18s linear infinite;
    transform-origin: center;
}
/* ====== morphing blobs（大きいボケ円） ====== */
.ab-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    animation: morph 18s ease-in-out infinite;
}
/* TSX: top-1/4 left-1/4 w-[500px] h-[500px] bg-primary/10 animate-morph blur-3xl */
.ab-blob-1 {
    top: 25%;
    left: 25%;
    width: 500px;
    height: 500px;
    animation-duration: 15s;
}
/* TSX: bottom-1/4 right-1/4 w-[400px] h-[400px] bg-primary/5 animate-morph blur-3xl style={{ animationDuration: "20s", animationDelay: "-5s" }} */
.ab-blob-2 {
    bottom: 25%;
    right: 25%;
    width: 400px;
    height: 400px;
    background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    animation-duration: 20s;
    animation-delay: -5s;
}
/* ====== 格子状のグリッド ====== */
.ab-grid {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: linear-gradient(rgba(100, 200, 220, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 200, 220, 0.15) 1px, transparent 1px);
    background-size: 80px 80px;
}
/* ====== 粒子（小さい丸） ====== */
.ab-particle {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.6;
    animation: float var(--float-duration, 15s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
/* ====== 縦に流れる細いライン（data streams） ====== */
.ab-stream {
    position: absolute;
    top: -8rem;
    /* 画面上の外からスタート */
    width: 1px;
    /* TSX: w-px */
    height: 8rem;
    /* TSX: h-32 (8 * 4px = 32px ≒ 8rem) */
    background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--primary) 50%, transparent) 50%, transparent 100%);
    animation: data-stream var(--stream-duration, 4s) linear infinite;
    animation-delay: var(--stream-delay, 0s);
}
/* ====== 軌道を回る小さい点 ====== */
.ab-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ab-orbit-dot {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.4;
    animation: orbit 30s linear infinite;
}
/* TSX: w-3 h-3 animate-orbit opacity-40, 25s */
.ab-orbit-dot-1 {
    width: 12px;
    height: 12px;
    animation-duration: 25s;
}
/* TSX: w-2 h-2 animate-orbit opacity-30, 35s reverse */
.ab-orbit-dot-2 {
    width: 8px;
    height: 8px;
    opacity: 0.3;
    animation-duration: 35s;
    animation-direction: reverse;
}
/* ====== コーナーの線（枠） ====== */
.ab-corner {
    position: absolute;
    border-color: color-mix(in oklab, var(--primary) 10%, transparent);
    border-style: solid;
}
.ab-corner-tl {
    top: 0;
    left: 0;
    width: 16rem;
    height: 16rem;
    border-left-width: 1px;
    border-top-width: 1px;
}
.ab-corner-br {
    bottom: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    border-right-width: 1px;
    border-bottom-width: 1px;
}
/* ====== keyframes（TSX と同等の動き） ====== */
@keyframes float {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes morph {
    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate3d(0, 0, 0);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate3d(20px, -10px, 0);
    }
}
@keyframes data-stream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* ========== Font size (base) ========== */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}
.text-8xl {
    font-size: 6rem;
    line-height: 1;
}
.text-9xl {
    font-size: 8rem;
    line-height: 1;
}
/* ========== Font size (responsive) ========== */
@media (min-width: 640px) {
    /* sm */
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .sm\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .sm\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .sm\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 768px) {
    /* md */
    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .md\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .md\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .md\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
@media (min-width: 1024px) {
    /* lg */
    .lg\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .lg\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    .lg\:text-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}
/* ========== Line-height / font-weight ========== */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
/* ========== Margin bottom ========== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-32 { margin-bottom: 8rem; }
.mb-40 { margin-bottom: 10rem; }
.mb-48 { margin-bottom: 12rem; }
.mb-56 { margin-bottom: 14rem; }
.mb-64 { margin-bottom: 16rem; }
.mb-72 { margin-bottom: 18rem; }
.mb-80 { margin-bottom: 20rem; }
.mb-96 { margin-bottom: 24rem; }
/* ========== Simple text / layout ========== */
.text-foreground { color: var(--foreground); }
.block { display: block; }
.text-center { text-align: center; }
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
/* ========================= Tailwind 互換のサイズ・ぼかしユーティリティ ========================= */
.w-96 { width: 24rem; }
.h-96 { height: 24rem; }
.w-80 { width: 20rem; }
.h-80 { height: 20rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
/* ぼかし（blur-3xl） */
.blur-3xl { filter: blur(64px); }
/* ========================= bg-primary/◯ 系の半透明カラー ========================= */
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.via-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
/* ========================= ボタン・アイコン周り ========================= */
.btn {
    color: white;
    background: #0f172a;
}
.btn svg { stroke-width: 2; }
/* ======================= Hero Section ======================= */
/* カード全体 */
.stat {
    /*position: relative;*/
    /*padding: 1.75rem 1.5rem;*/
    /*border-radius: 1rem;*/
    /*background: rgba(15, 23, 42, 0.9);*/
    /*border: 1px solid rgba(148, 163, 184, 0.3);*/
    /*backdrop-filter: blur(20px);*/
    /*transition:*/
    /* transform 0.35s ease,*/
    /* box-shadow 0.35s ease,*/
    /* border-color 0.35s ease,*/
    /* background 0.35s ease;*/
}
.stat:hover {
    /*transform: translateY(-4px);*/
    /*box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);*/
    /*border-color: rgba(94, 234, 212, 0.7);*/
    /*background: radial-gradient(*/
    /* circle at top left,*/
    /* rgba(94, 234, 212, 0.12),*/
    /* transparent 55%*/
    /* ),*/
    /* rgba(15, 23, 42, 0.98);*/
}
/* アイコン */
.stat-icon {
    /*width: 3rem;*/
    /*height: 3rem;*/
    /*border-radius: 999px;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*margin-bottom: 0.75rem;*/
    /*background: radial-gradient(circle at 30% 0, #22d3ee, #0f172a);*/
    /*box-shadow: 0 0 25px rgba(34, 211, 238, 0.6);*/
}
/* 数値 */
.stat-value .counter {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* スクロールリビール用 */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* ========== Layout / Position ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.bottom-8 { bottom: 2rem; }
.-bottom-1 { bottom: -0.25rem; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.z-10 { z-index: 10; }
/* ========== Display ========== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }
/* Tailwind の group ユーティリティ */
.group { position: relative; }
/* ========== Flex / Grid関連 ========== */
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex { display: flex }
    .md\:flex-row { flex-direction: row }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:flex { display: flex; }
    .lg\:flex-row { flex-direction: row } 
    .lg\:hidden { display: none; }
}
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:flex { display: flex; }
    .sm\:hidden { display: none; }
}
/* ========== Sizing ========== */
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-1 { width: 0.25rem; }
.w-4 { width: 1rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-px { height: 1px; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }
.aspect-square { aspect-ratio: 1 / 1; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
/* ========== Spacing (margin / padding / gap) ========== */
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.pt-20 { padding-top: 5rem; }
.pt-2 { padding-top: 0.5rem; }
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-16 { gap: 4rem; }
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
/* ========== Overflow / Opacity ========== */
.overflow-hidden { overflow: hidden; }
.opacity-30 { opacity: 0.3; }
/* ========== Colors / text misc ========== */
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.leading-relaxed { line-height: 1.625; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.text-pretty { text-wrap: pretty; }
.text-balance { text-wrap: balance; }
/* ========== Background / Border ========== */
.bg-transparent { background-color: transparent; }
.bg-primary { background-color: var(--primary); }
.bg-card { background-color: var(--card); }
/*.hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); }*/
/*.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }*/
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-border { border-color: var(--border); }
.border-muted-foreground\/30 { border-color: hsl(var(--muted-foreground) / 0.3); }
.hover\:border-primary\/50:hover { border-color: hsl(var(--primary) / 0.5); }
/* ========== Transform / Transition ========== */
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group-hover-translate {}
.group:hover .group-hover-transrate{ transform: translateX(4px) }
.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.delay-1000 {
    transition-delay: 1000ms;
    animation-delay: 1000ms;
}
/* ========== Animation ========== */
@keyframes bounce {
    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.animate-bounce { animation: bounce 1s infinite; }
/* カスタム想定 */
.hover-lift {}
.animate-glow-pulse {}
.animate-fade-in {}
.animate-line-draw {}
/* ========== Cursor ========== */
.cursor-pointer { cursor: pointer; }

/* ---- Spinner ---- */
.spinner{
  display:inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,1);
  border-radius: 999px;
  animation: spin 1s linear infinite;
  margin-right: .5rem;
}
@keyframes spin{ to { transform: rotate(360deg);} }


/*.text-center { text-align: center; }*/
/*.text-sm { font-size: .875rem; }*/
/*.text-lg { font-size: 1.125rem; }*/
/*.text-xl { font-size: 1.25rem; }*/
/*.text-2xl { font-size: 1.5rem; }*/
/*.text-3xl { font-size: 1.875rem; }*/
/*.text-4xl { font-size: 2.25rem; }*/
/*.text-5xl { font-size: 3rem; }*/
/*.font-bold { font-weight: 700; }*/
/*.font-semibold { font-weight: 600; }*/
/*.leading-tight { line-height: 1.1; }*/
/*.leading-relaxed { line-height: 1.7; }*/
/*.flex { display: flex; }*/
/*.inline-flex { display: inline-flex; }*/
/*.items-center { align-items: center; }*/
/*.items-start { align-items: flex-start; }*/
/*.justify-between { justify-content: space-between; }*/
/*.justify-center { justify-content: center; }*/
/*.gap-1 { gap: .25rem; }*/
/*.gap-2 { gap: .5rem; }*/
/*.gap-3 { gap: .75rem; }*/
/*.gap-4 { gap: 1rem; }*/
/*.gap-6 { gap: 1.5rem; }*/
/*.gap-8 { gap: 2rem; }*/
/*.gap-12 { gap: 3rem; }*/
/*.space-y-1 > * + * { margin-top: .25rem; }*/
/*.space-y-2 > * + * { margin-top: .5rem; }*/
/*.space-y-3 > * + * { margin-top: .75rem; }*/
/*.space-y-4 > * + * { margin-top: 1rem; }*/
/*.space-y-6 > * + * { margin-top: 1.5rem; }*/
/*.space-y-8 > * + * { margin-top: 2rem; }*/
/*.grid { display: grid; }*/
/*.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }*/
/*.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }*/
/*.md\:grid-cols-2 { }*/
/*.md\:grid-cols-3 { }*/
/*.md\:grid-cols-4 { }*/
/*.lg\:grid-cols-2 { }*/
/*.lg\:grid-cols-5 { }*/
/*.w-full { width: 100%; }*/
/*.w-12 { width: 3rem; }*/
/*.w-14 { width: 3.5rem; }*/
/*.w-16 { width: 4rem; }*/
/*.w-20 { width: 5rem; }*/
/*.w-32 { width: 8rem; }*/
/*.w-48 { width: 12rem; }*/
/*.w-64 { width: 16rem; }*/
/*.h-2 { height: .5rem; }*/
/*.h-6 { height: 1.5rem; }*/
/*.h-8 { height: 2rem; }*/
/*.h-12 { height: 3rem; }*/
/*.h-16 { height: 4rem; }*/
/*.h-20 { height: 5rem; }*/
/*.h-48 { height: 12rem; }*/
/*.h-64 { height: 16rem; }*/
/*.rounded { border-radius: .5rem; }*/
/*.object-cover { object-fit: cover; }*/
/*.overflow-hidden { overflow: hidden; }*/
/*.relative { position: relative; }*/
/*.absolute { position: absolute; }*/
/*.top-0 { top: 0; }*/
/*.bottom-0 { bottom: 0; }*/
/*.left-0 { left: 0; }*/
/*.right-0 { right: 0; }*/
/*.z-10 { z-index: 10; }*/
/*.z-50 { z-index: 50; }*/
/*.fixed { position: fixed; }*/
/*.border-t { border-top-width: 1px; border-style: solid; }*/
/*.border-b { border-bottom-width: 1px; border-style: solid; }*/
/*.text-xs { font-size: .75rem; }*/
/*.opacity-50 { opacity: .5; }*/
/* ===== Header / Nav ===== */
/*.site-header { transition: all .3s ease; }*/
/*.site-header-inner {*/
/*    max-width: 80rem;*/
/*    margin: 0 auto;*/
/*    padding: 0 1rem;*/
/*}*/
/*.site-header.is-scrolled {*/
/*    background-color: rgba(2,6,23,0.95);*/
/*    backdrop-filter: blur(16px);*/
/*    border-bottom: 1px solid rgba(148,163,184,0.4);*/
/*    box-shadow: 0 18px 40px rgba(15,23,42,0.75);*/
/*}*/
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-yellow-400 { color: #facc15; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 80%, transparent); }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--primary-foregrond);
}

.btn-outline.btn-primary {
  color: hsl(var(--p));
  border-color: hsl(var(--p));
}

.btn-outline.btn-primary:hover {
  background-color: hsl(var(--p));
  border-color: hsl(var(--p));
  color: hsl(var(--pc));
}

.btn-outline.btn-secondary {
  color: hsl(var(--s));
  border-color: hsl(var(--s));
}

.btn-outline.btn-secondary:hover {
  background-color: hsl(var(--s));
  border-color: hsl(var(--s));
  color: hsl(var(--sc));
}

.btn-ghost {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
}
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15,23,42,0.6);
}
.js-nav-menu {
    transition: max-height .3s ease, opacity .3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/********************************
********* AI Training ***********
********************************/
/* ===== Hero Background ===== */
.animated-bg {
    position: absolute;
    inset: 0;
    background:
    radial-gradient(circle at top left, rgba(56,189,248,0.25), transparent 55%),
    radial-gradient(circle at bottom right, rgba(129,140,248,0.25), transparent 55%);
    opacity: .5;
    pointer-events: none;
}
.progress-pulse { animation: progressPulse 1.5s infinite alternate; }
@keyframes progressPulse {
    from { opacity: .7; }
    to { opacity: 1; }
}
/* ===== Glowing Card ===== */
.glowing-card {
    background: rgba(15,23,42,0.2);
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,0.1);
    box-shadow: 0 18px 40px rgba(15,23,42,0.75);
}

/* ===== アコーディオン: カリキュラム ===== */
.module-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); }
.module-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; width:100%; background:transparent; border:none; cursor:pointer; }
.module-content {
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s ease,
    opacity .35s ease;
    border-top:1px solid rgba(148,163,184,0.4);
}
/*.chevron-icon { display:inline-block; transition:transform .3s ease; }*/
/* 開いた状態 */
.module-content.is-open {
  max-height: 1000px; /* 中身より少し大きめならOK（必要に応じて調整） */
  opacity: 1;
}
/*.module-header.:has(+ .module-content.is-open) .chevron-icon {*/
/*    transform: rotate(180deg);*/
/*}*/
.js-module-toggle .chevron-icon svg {
  display: inline-block;
  transition: transform 0.25s ease;
  transform-origin: center;
  transform-box: fill-box; /* Safari 対策としてあると安心 */
}

/* 開いているときだけ 180° 回転 */
.js-module-toggle.is-open .chevron-icon svg {
  transform: rotate(180deg);
}
/* ===== アコーディオン: FAQ ===== */
.faq-item { border-radius: 1rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.7); overflow:hidden; }
.faq-header { padding:1.25rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; border:none; width:100%; background:transparent; }
.faq-content { max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
/*.faq-item.is-open .chevron-icon { transform: rotate(180deg); }*/
.faq-content.is-open {
    max-height: 1000px;
    opacity: 1;
}
[hidden]{ display: none !important}
.contact-form-wrapper.is-hidden { display: none !important }
/***********************************
 *
 * Inquiry お問い合わせ固定ページ
 *
 **********************************/
.inquiry label.text-foreground { color: #bbb }
.inquiry .text-destructive {color: var(--destructive)}
/* 相談内容：選択状態（テーマに負けないよう強めに） */
.inquiry .type-grid .type-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.inquiry .type-grid .type-item:hover{
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  transform: translateY(-1px);
}

/* ★ここが重要：is-selected 時に「見た目が確実に変わる」 */
.inquiry .type-grid .type-item.is-selected{
  border-color: color-mix(in oklab, var(--primary) 80%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 14%, transparent) !important;
  color: var(--fg) !important;
}

/* 未選択時の“文字色固定”を解除したい場合（任意） */
.inquiry .type-grid .type-item:not(.is-selected){
  color: var(--muted-foreground) !important;
}

/* checkbox自体の見た目 */
.inquiry .type-grid .type-checkbox{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}