body { 
            font-family: 'Noto Sans JP', sans-serif; 
            background-color: #ffffff;
        }
        
        /* アニメーション */
        .fade-in { animation: fadeIn 0.6s ease-out forwards; }
        .slide-up { animation: slideUp 0.6s ease-out forwards; }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* グラデーションテキスト */
        .gradient-text {
            background: linear-gradient(135deg, #1f2937, #6b7280);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* カードホバー効果 */
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        /* ユーティリティクラス */
        .container { max-width: 1200px; }
        .section-padding { padding: 5rem 0; }
        .section-header { text-align: center; margin-bottom: 4rem; }
        .section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; }
        .section-description { max-width: 100%; margin: 0 auto; color: #6b7280; line-height: 1.75; }
        
        /* バッジ */
        .badge {
            display: inline-block;
            padding: 0.375rem 1.5rem;
            margin: 1rem 0;
            /* font-size: 1.25rem; */
            font-weight: 500;
            background-color: #fff3e5;
            color: #ff8c00;
            border-radius: 9999px;
        }
        
        /* ボタン */
        .btn-primary {
            background-image: linear-gradient(90deg, #fac522 0%, #ff8c00 100%);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 9999px;
            font-weight: 400;
            font-size: 0.875rem;
            transition: all 0.2s;
            /* display: flex; */
            /* align-items: center; */
            /* gap: 0.5rem; */
        }
        .btn-primary:hover { background-color: #ff8c00; }
        
        .btn-primary-large {
            background-image: linear-gradient(90deg, #fac522 0%, #ff8c00 100%);
            color: white;
            padding: 1rem 2rem;
            border-radius: 9999px;
            font-size: 1.5rem;
            font-weight: 500;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            border: 4px solid #fff;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .btn-primary-large:hover { background-color: #ff8c00; }
        
        .btn-secondary-large {
            border: 2px solid #d1d5db;
            color: #374151;
            padding: 1rem 2rem;
            border-radius: 9999px;
            font-size: 1.125rem;
            font-weight: 500;
            transition: all 0.2s;
        }
        .btn-secondary-large:hover { border-color: #9ca3af; background-color: #f9fafb; }
        
        /* ナビゲーション */
        .nav-link {
            font-size: 0.875rem;
            font-weight: 500;
            color: #333;
            transition: color 0.2s;
        }
        .nav-link:hover { color: #111827; }
        
        .mobile-nav-link {
            display: block;
            padding: 0.5rem 0;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        /* 機能チェック */
        .feature-check {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* ダッシュボードプレビュー */
        .dashboard-preview {
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid #e5e7eb;
            background: linear-gradient(to bottom, white, #f9fafb);
        }
        
        /* ヒーローブラー効果 */
        .hero-blur {
            position: absolute;
            height: 18rem;
            width: 18rem;
            border-radius: 50%;
            filter: blur(3rem);
            opacity: 0.6;
            z-index: -10;
        }
        .hero-blur-1 {
            bottom: -1.5rem;
            right: -1.5rem;
            background: linear-gradient(to bottom right, #dbeafe, #c7d2fe);
        }
        .hero-blur-2 {
            top: -1.5rem;
            left: -1.5rem;
            background: linear-gradient(to bottom right, #c7d2fe, #fce7f3);
        }
        
        /* 統計 */
        .stat-item { }
        .stat-number {
            font-size: 2.25rem;
            font-weight: 700;
            color: #ff8c00;
            margin-bottom: 0.5rem;
        }
        .stat-label { color: #6b7280; }
        
        /* 機能カード */
        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 1.5rem;
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }
        
        .feature-icon {
            width: 3rem;
            height: 3rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        
        .feature-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .feature-description {
            color: #6b7280;
            line-height: 1.75;
        }
        
        /* ステップ */
        .step-item {
            position: relative;
            z-index: 10;
            text-align: center;
        }
        
        .step-number {
            display: flex;
            height: 4rem;
            width: 4rem;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            /* background: linear-gradient(to bottom right, #fac522, #ff8c00); */
            background: #FFF;
            color: #333;
            font-size: 1.25rem;
            font-weight: 700;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            margin: 0 auto 1.5rem;
        }
        
        .step-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .step-description {
            color: #6b7280;
            line-height: 1.75;
        }
        
        /* お客様の声 */
        .testimonial-card {
            background: white;
            /* padding: 2rem; */
            border-radius: 0.75rem;
            overflow:hidden;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.2s;
        }
        .testimonial-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        
        .testimonial-text {
            color: #374151;
            margin-bottom: 1.5rem;
            line-height: 1.75;
        }

        .testimonial-badge {
            display: inline-block;
            padding: 0.375rem 1rem;
            font-size: 0.8rem;
            font-weight: 400;
            background-color: #fff3e5;
            color: #ff8c00;
            border-radius: 9999px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .author-avatar {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        
        .author-name { font-weight: 600; padding-bottom: 4px;}
        .author-title { font-size: 0.8rem; color: #6b7280; }

        .testimonial-button {
            display: flex;
            height: 4rem;
            width: 4rem;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            /* background: linear-gradient(to bottom right, #fac522, #ff8c00); */
            background: #FFF;
            color: #333;
            font-size: 1.25rem;
            font-weight: 700;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            margin: 0 auto 1.5rem;
        }

        #slider::-webkit-scrollbar { display:none; }
        #slider{
            /* flex 横並びはそのまま */
            display:flex; gap:2rem;               /* gap はお好みで */
            overflow-x:auto; overflow-y:hidden;
            scroll-snap-type:x mandatory;         /* スナップ */
            scroll-padding:0 10vw;                /* ←→に余白を入れて『真ん中』を作る */
            -webkit-overflow-scrolling:touch;     /* iOSなめらかスクロール */
            scrollbar-width:none;
        }

        /* １枚のカード  */
        .slide {
            flex:0 0 60%;                         /* 80% にすると左右が 10% ずつ覗く */
            scroll-snap-align:center;             /* 中央でパチッ */
            min-width: 20rem;                      /* 極端に小さい端末対策 */
        }
        
        /* 料金プラン */
        .pricing-toggle {
            display: flex;
            justify-content: center;
            width: fit-content; /* 横幅を内容に合わせる */
            margin: 0 auto 3rem;    /* 横方向を auto にして中央寄せ */
            gap: 0.25rem;           /* ボタン同士のすき間が欲しければ */
            background: white;
            padding: 0.25rem;
            border-radius: 9999px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
        }
        
        .pricing-tab {
            padding: 0.75rem 2rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s;
            color: #6b7280;
        }
        .pricing-tab:hover { color: #111827; }
        .pricing-tab.active {
            background-image: linear-gradient(90deg, #fac522 0%, #ff8c00 100%);
            color: white;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }
        
        /* FAQ */
        .faq-item {
            background: transparent;
            border-top: 1px solid #e5e7eb;
            border-radius: 0;
            margin-top: 0 !important;
        }

        .faq-item.last{
            border-bottom: 1px solid #e5e7eb;
        }
        
        .faq-trigger {
            width: 100%;
            padding: 2rem;
            text-align: left;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: between;
            transition: background-color 0.2s;
            border-radius: 0.75rem;
        }
        .faq-trigger:hover { background-color: #f9fafb; }
        .faq-trigger span { font-size: 1.125rem; flex: 1; }
        
        .faq-icon {
            width: 1.5rem;
            height: 1.5rem;
            transition: transform 0.2s;
            color: #9ca3af;
        }
        
        .faq-content {
            padding: 0 2rem 2rem;
        }
        .faq-content p {
            color: #6b7280;
            line-height: 1.75;
        }
        
        /* CTA */
        .select:invalid { color:#9ca3af; }

        .cta-btn-primary {
            background: white;
            color: #ff8c00;
            padding: 1rem 2.5rem;
            border-radius: 9999px;
            font-size: 1.125rem;
            font-weight: 600;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .cta-btn-primary:hover { background-color: #f3f4f6; }
        
        .cta-btn-secondary {
            border: 2px solid white;
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 9999px;
            font-size: 1.125rem;
            font-weight: 600;
            transition: all 0.2s;
        }
        .cta-btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); }

        .label-required::after{
            content: '*';          /* 全角 / 半角どちらでも OK */
            color: #ff8c00;         /* primary と同じオレンジ */
            margin-left: 0.25rem;   /* ラベルとの間に少しスペース */
            font-weight: 700;       /* 太めにすると視認性↑ */
        }
        
        /* フッター */
        .footer-brand {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        .footer-description {
            color: #6b7280;
            margin-bottom: 1rem;
            line-height: 1.75;
        }
        
        .footer-social {
            display: flex;
            gap: 0.5rem;
        }
        
        .social-link {
            width: 3rem;
            height: 3rem;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: all 0.2s;
        }
        
        .footer-title {
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .footer-links li { margin-bottom: 0.75rem; }
        .footer-links a {
            color: #6b7280;
            transition: color 0.2s;
        }
        .footer-links a:hover { color: #ff8c00; }
        
        .footer-bottom {
            border-top: 1px solid #e5e7eb;
            padding-top: 2rem;
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        
        .footer-copyright {
            color: #6b7280;
            font-size: 0.875rem;
        }
        
        .footer-legal {
            display: flex;
            gap: 1.5rem;
        }
        .footer-legal a {
            font-size: 0.875rem;
            color: #6b7280;
            transition: color 0.2s;
        }
        .footer-legal a:hover { color: #374151; }
        
        /* レスポンシブ */
        @media (min-width: 768px) {
            .section-title { font-size: 2.5rem; }
            .stat-number { font-size: 2.5rem; }
            .footer-bottom { flex-direction: row; justify-content: space-between; }
        }
        
        @media (min-width: 1024px) {
            .section-title { font-size: 2.75rem; }
            .stat-number { font-size: 3rem; }
        }