/*
Name: NEXT
*/

/*
-------------------------------------------------------------- */
body {
  /*  background-color: #000000;  *//* Using a color name */
  background-color: #02020f;
}

        /* ========================================
           🎨 基本設定 & リセット (背景カラー.htmlより)
        ======================================== */
.hs-page-wrapper *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .hs-page-wrapper{
            /* カラーパレット - 背景カラー.htmlから */
            --bg-primary: #02020f;
            --bg-secondary: #02020f;
            --text-primary: #FFFFFF;
            --text-secondary: #E8E8E8;
            --text-muted: #A8A8B8;
            --accent-cyan: #00D9FF;
            --accent-purple: #7B2FFE;
            --accent-pink: #FF006E;
            --accent-green: #50E3C2;
            --accent-orange: #FF6B35;
            --accent-red: #FF3E3E;
            
            /* タイポグラフィ */
            --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            
            /* スペーシング */
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 3rem;
            --spacing-xl: 4.5rem;
            
            /* ボーダー */
            --border-radius: 16px;
            --border-radius-sm: 8px;
        }

        

        .hs-page-wrapper{
            /*font-family: var(--font-sans);*/
            /* Windowsではメイリオ、Mac/iPhoneではヒラギノで表示される定番セット */
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
            background-color: #02020f;
            color: var(--text-secondary);
            line-height: 1.7;
            overflow-x: hidden;
        }

        /* ========================================
           🎯 ナビゲーション (ナビゲーション-ヒーロー.htmlより)
        ======================================== */

        .hs-page-wrapper .nav-cta {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .hs-page-wrapper .btn-diagnose, .btn-contact {
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            font-size: 0.9rem;
        }

        .hs-page-wrapper .btn-diagnose {
            background-color: #02020f;
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(213, 120, 219, 0.3);
        }

        .hs-page-wrapper .btn-diagnose:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(213, 120, 219, 0.5);
        }

        .hs-page-wrapper .btn-contact {
            background: transparent;
            color: #fc77a1;
            border: 2px solid #fc77a1;
        }

        .hs-page-wrapper .btn-contact:hover {
            background-color: #02020f;
            color: white;
        }

        /* ========================================
           🚀 ヒーローセクション (修正版)
        ======================================== */
        .hs-page-wrapper .hero-section {
           /*  background: linear-gradient(90deg, #eeb1e4 0%, #e888e8 100%);*/
            color: white;
            padding: 1rem 2rem;
            text-align: center;
        }

        .hs-page-wrapper .hero-content {
            max-width: 900px;
            margin: 0 auto;
        }

   .hero-icon {
            font-size: 80px;
            margin-bottom: 0rem;
            animation: float 3s ease-in-out infinite;
        }

        .hs-page-wrapper .hero-emoji {
            font-size: 4rem;
            margin-bottom: 0.1rem;
        }

        .hs-page-wrapper .hero-section h1 {
            font-size: 35px;
            margin-bottom: 2px;
            line-height: 1.2;
            color: #00D9FF;
        }

        .hs-page-wrapper .hero-subtitle {
            font-size: 18px;
            margin-bottom: 0.4rem;
            font-weight: 700;
            line-height: 1.5;
        }

        .hs-page-wrapper .hero-section p {
            font-size: 18px;
            margin-bottom: 0.4rem;
            opacity: 0.95;
            line-height: 1.8;
             color: #A9A9A9;
        }

        .hs-page-wrapper .hero-cta {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .hs-page-wrapper .btn-primary, .btn-secondary {
            padding: 1rem 2rem;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }

        .hs-page-wrapper .btn-primary {
            background: white;
            color: #d578db;
        }

        .hs-page-wrapper .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .hs-page-wrapper .btn-secondary {
            background-color: #02020f;
            color: white;
            border: 2px solid white;
        }

        .hs-page-wrapper .btn-secondary:hover {
            background: white;
            color: #d578db;
        }


        /* ========================================
           📊 メインコンテンツ共通スタイル
        ======================================== */
        .hs-page-wrapper .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0.5rem;
        }

        .hs-page-wrapper .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .section-subtitle {
            text-align: center;
            font-size: 1.1rem;
           /* color: var(--text-muted); */
            color: solid #A9A9A9;
            margin-bottom: 3rem;
        }

        /* ========================================
           📈 数字で見る成果セクション (パディング調整)
        ======================================== */
        .hs-page-wrapper .stats-section {
            padding: 3rem 2rem;
            background: var(--bg-secondary);
        }

        .hs-page-wrapper .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        .hs-page-wrapper .stat-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            padding: 3rem 2rem;
            text-align: center;
            transition: all 0.3s;
        }

        .hs-page-wrapper .stat-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .stat-number {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--accent-cyan);
            display: block;
            margin-bottom: 1rem;
        }

        .hs-page-wrapper .stat-label {
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        /* ========================================
           💰 投資回収シミュレーター (パディング調整)
        ======================================== */
        .hs-page-wrapper .simulator-section {
            padding: 2rem 0.5rem;
            background: var(--bg-primary);
        }

        .hs-page-wrapper .simulator-card {
            background-color: #02020f;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }

        .hs-page-wrapper .simulator-inputs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .hs-page-wrapper .input-group {
            display: flex;
            flex-direction: column;
        }

        .hs-page-wrapper .input-group label {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .input-group input {
            padding: 1rem;
            border: 2px solid rgba(0, 217, 255, 0.3);
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            font-size: 1rem;
            transition: border-color 0.3s;
            color: var(--text-primary);
        }

        .hs-page-wrapper .input-group input:focus {
            outline: none;
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .simulator-button {
            width: 100%;
            padding: 1.2rem;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .hs-page-wrapper .simulator-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 217, 255, 0.5);
        }

        .hs-page-wrapper .simulator-results {
            display: none;
            margin-top: 3rem;
            padding: 2rem;
            background: rgba(0, 217, 255, 0.1);
            border-radius: 15px;
            border: 1px solid rgba(0, 217, 255, 0.3);
        }

        .hs-page-wrapper .result-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        .hs-page-wrapper .result-item {
            text-align: center;
        }

        .hs-page-wrapper .result-value {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--accent-cyan);
            display: block;
            margin-bottom: 0.5rem;
        }

        .hs-page-wrapper .result-label {
            font-size: 0.95rem;
            color: var(--text-muted);
        }

        /* ========================================
           💡 導入前 vs 導入後 (パディング調整)
        ======================================== */
        .hs-page-wrapper .comparison-section {
            padding: 3rem 2rem;
            background: var(--bg-secondary);
        }

        .hs-page-wrapper .comparison-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3rem;
            margin-top: 3rem;
        }

        .hs-page-wrapper .comparison-card {
            padding: 3rem;
            border-radius: 20px;
            position: relative;
            background-color: #02020f;
            backdrop-filter: blur(10px);
        }

        .hs-page-wrapper .comparison-card.before {
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .hs-page-wrapper .comparison-card.after {
            border: 2px solid var(--accent-cyan);
        }

        .hs-page-wrapper .comparison-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            text-align: center;
        }

        .hs-page-wrapper .comparison-title.before {
            color: var(--text-muted);
        }

        .hs-page-wrapper .comparison-title.after {
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .comparison-items {
            list-style: none;
        }

        .hs-page-wrapper .comparison-item {
            padding: 1.5rem;
            margin-bottom: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .hs-page-wrapper .comparison-icon {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .hs-page-wrapper .comparison-text {
            flex: 1;
        }

        .hs-page-wrapper .comparison-text strong {
            display: block;
            margin-bottom: 0.3rem;
            font-size: 1.1rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .comparison-text span {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        /* ========================================
           🎁 TOP6セクション共通スタイル (パディング調整)
        ======================================== */
        .hs-page-wrapper .top6-section {
            padding: 2rem 0.5rem;
        }

        .hs-page-wrapper .top6-section.trends {
            background: var(--bg-primary);
        }

        .hs-page-wrapper .top6-section.integlove {
            background: var(--bg-secondary);
        }

        .hs-page-wrapper .top6-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .hs-page-wrapper .top6-card {
            background-color: #02020f;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            padding: 0.5rem;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .hs-page-wrapper .top6-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
            transform: scaleX(0);
            transition: transform 0.3s;
        }

        .hs-page-wrapper .top6-card:hover {
            transform: translateY(-5px);
            background-color: #02020f;
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .top6-card:hover::before {
            transform: scaleX(1);
        }

        .hs-page-wrapper .top6-icon {
            font-size: 1.6rem;
            margin-bottom: 1rem;
        }

        .hs-page-wrapper .top6-number {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 800;
        }

        .hs-page-wrapper .top6-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .top6-stats {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .hs-page-wrapper .top6-stat {
            padding: 0.5rem 1rem;
            background: rgba(0, 217, 255, 0.1);
            border: 1px solid rgba(0, 217, 255, 0.3);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .top6-description {
            color: var(--text-muted);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .hs-page-wrapper .top6-results {
            background: rgba(255, 255, 255, 0.03);
            padding: 0.5rem;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .hs-page-wrapper .top6-results-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .top6-results-list {
            list-style: none;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .hs-page-wrapper .top6-results-list li {
            padding: 0.3rem 0;
            padding-left: 1.2rem;
            position: relative;
        }

        .hs-page-wrapper .top6-results-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-green);
            font-weight: 700;
        }

        .hs-page-wrapper .top6-target {
            font-size: 0.9rem;
            color: var(--text-muted);
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .hs-page-wrapper .top6-button {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 1.5rem;
        }

        .hs-page-wrapper .top6-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 217, 255, 0.5);
        }

        /* ========================================
           🎯 ワンストップサービス概要 (パディング調整)
        ======================================== */
        .hs-page-wrapper .service-section {
            padding: 2rem 0.5rem;
            background: var(--bg-secondary);
        }

        .hs-page-wrapper .service-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        .hs-page-wrapper .service-card {
            background-color: #02020f;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 217, 255, 0.465);
            border-radius: 20px;
            padding: 0.5rem;
            text-align: center;
            transition: all 0.3s;
        }

        .hs-page-wrapper .service-card:hover {
            transform: translateY(-5px);
            background-color: #02020f;
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .service-icon {
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
        }

        .hs-page-wrapper .service-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .service-description {
            color: solid #A9A9A9;
            margin-bottom: 1.5rem;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        .hs-page-wrapper .service-button {
            padding: 0.8rem 1.5rem;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .hs-page-wrapper .service-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 217, 255, 0.5);
        }

        /* ========================================
           🎨 動画/画像/LP戦略的活用 (パディング調整)
        ======================================== */
        .hs-page-wrapper .strategy-section {
            padding: 2rem 0.5rem;
            background: var(--bg-primary);
        }

        .hs-page-wrapper .strategy-comparison {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3rem;
            margin-top: 3rem;
        }

        .hs-page-wrapper .strategy-card {
            background-color: #02020f;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            padding: 0.5rem;
        }

        .hs-page-wrapper .strategy-card.integlove {
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .strategy-card-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            text-align: center;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .strategy-items {
            list-style: none;
        }

        .hs-page-wrapper .strategy-item {
            padding: 1.5rem;
            margin-bottom: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
        }

        .hs-page-wrapper .strategy-item-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .strategy-item-content {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .hs-page-wrapper .strategy-highlight {
            margin-top: 2rem;
            padding: 0.5rem;
            background: rgba(0, 217, 255, 0.1);
            border: 1px solid rgba(0, 217, 255, 0.3);
            border-radius: 15px;
            text-align: center;
        }

        .hs-page-wrapper .strategy-highlight-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent-cyan);
            margin-bottom: 1rem;
        }

        .hs-page-wrapper .strategy-highlight-numbers {
            display: flex;
            justify-content: space-around;
            margin-top: 1.5rem;
        }

        .hs-page-wrapper .strategy-number {
            text-align: center;
        }

        .hs-page-wrapper .strategy-number-value {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--accent-cyan);
            display: block;
        }

        .hs-page-wrapper .strategy-number-label {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        /* ========================================
           🌟 選ばれる理由 (パディング調整)
        ======================================== */
        .hs-page-wrapper .reasons-section {
            padding: 2rem 0.5rem;
            background: var(--bg-secondary);
        }

        .hs-page-wrapper .reasons-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            margin-top: 3rem;
        }

        .hs-page-wrapper .reason-card {
            background-color: #02020f;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            padding: 0.5rem;
            text-align: center;
            transition: all 0.3s;
        }

        .hs-page-wrapper .reason-card:hover {
            transform: translateY(-5px);
            background-color: #02020f;
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .reason-number {
            display: inline-block;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
            border-radius: 50%;
            font-size: 2rem;
            font-weight: 800;
            line-height: 60px;
            margin-bottom: 1.5rem;
        }

        .hs-page-wrapper .reason-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .reason-description {
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .hs-page-wrapper .reason-features {
            list-style: none;
            text-align: left;
            margin-top: 1.5rem;
        }

        .hs-page-wrapper .reason-features li {
            padding: 0.5rem 0;
            padding-left: 1.5rem;
            position: relative;
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .hs-page-wrapper .reason-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-green);
            font-weight: 700;
        }

        /* ========================================
           🏆 実績・導入事例 (パディング調整)
        ======================================== */
        .hs-page-wrapper .cases-section {
            padding: 2rem 0.5rem;
            background: var(--bg-primary);
        }

        .hs-page-wrapper .cases-stats {
            display: flex;
            justify-content: center;
            gap: 4rem;
            margin-bottom: 4rem;
        }

        .hs-page-wrapper .cases-stat {
            text-align: center;
        }

        .hs-page-wrapper .cases-stat-number {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--accent-cyan);
            display: block;
            margin-bottom: 0.5rem;
        }

        .hs-page-wrapper .cases-stat-label {
            font-size: 1.1rem;
            color: var(--text-muted);
        }

        .hs-page-wrapper .cases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .hs-page-wrapper .case-card {
            background-color: #02020f;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            padding: 0.5rem;
            transition: all 0.3s;
        }

        .hs-page-wrapper .case-card:hover {
            transform: translateY(-5px);
            background: rgba(18, 18, 46, 0.8);
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .case-category {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent-cyan);
            margin-bottom: 1rem;
        }

        .hs-page-wrapper .case-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .case-description {
            color: var(--text-muted);
            margin-bottom: 1.5rem;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        .hs-page-wrapper .case-results {
            background: rgba(255, 255, 255, 0.03);
            padding: 0.5rem;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .hs-page-wrapper .case-results-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .case-results-list {
            list-style: none;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .hs-page-wrapper .case-results-list li {
            padding: 0.3rem 0;
            padding-left: 1.2rem;
            position: relative;
        }

        .hs-page-wrapper .case-results-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-green);
            font-weight: 700;
        }

        .hs-page-wrapper .case-button {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 1rem;
        }

        .hs-page-wrapper .case-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 217, 255, 0.5);
        }

        /* ========================================
           🎁 無料プレゼント5つ (パディング調整)
        ======================================== */
        .hs-page-wrapper .gifts-section {
            padding: 2rem 0.5rem;
            background: var(--bg-secondary);
        }

        .hs-page-wrapper .gifts-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
            margin-top: 3rem;
        }

        .hs-page-wrapper .gift-card {
            background-color: #02020f;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 217, 255, 0.2);
            border-radius: 20px;
            padding: 0.5rem;
            text-align: center;
            transition: all 0.3s;
        }

        .hs-page-wrapper .gift-card:hover {
            transform: translateY(-5px);
            background-color: #02020f;
            border-color: var(--accent-cyan);
        }

        .hs-page-wrapper .gift-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hs-page-wrapper .gift-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .gift-description {
            color: var(--text-muted);
            font-size: 0.85rem;
            line-height: 1.5;
        }

        .hs-page-wrapper .gifts-cta {
            text-align: center;
            margin-top: 3rem;
        }

        .hs-page-wrapper .gifts-button {
            padding: 1.2rem 3rem;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .hs-page-wrapper .gifts-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 217, 255, 0.5);
        }

        /* ========================================
           💬 最終CTA (パディング調整)
        ======================================== */
        .hs-page-wrapper .final-cta-section {
            padding: 2rem 0.5rem;
            text-align: center;
            background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, rgba(123, 47, 254, 0.1) 100%);
        }

        .hs-page-wrapper .final-cta-title {
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: var(--accent-cyan);
        }

        .hs-page-wrapper .final-cta-description {
            font-size: 1.3rem;
            margin-bottom: 3rem;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        .hs-page-wrapper .final-cta-buttons {
            display: flex;
            gap: 2rem;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .hs-page-wrapper .final-cta-button {
            padding: 1.5rem 3rem;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            text-decoration: none;
            display: inline-block;
        }

        .hs-page-wrapper .final-cta-button.primary {
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            color: white;
        }

        .hs-page-wrapper .final-cta-button.primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(0, 217, 255, 0.6);
        }

        .hs-page-wrapper .final-cta-button.secondary {
            background: transparent;
            color: var(--accent-cyan);
            border: 2px solid var(--accent-cyan);
        }

        .hs-page-wrapper .final-cta-button.secondary:hover {
            background: var(--accent-cyan);
            color: white;
        }

        .hs-page-wrapper .final-cta-trust {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-top: 3rem;
        }

        .hs-page-wrapper .final-cta-trust-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-muted);
            font-size: 1rem;
        }

        .hs-page-wrapper .final-cta-trust-icon {
            font-size: 1.5rem;
            color: var(--accent-green);
        }

        /* ========================================
           📱 フッター (修正版 - 4カラム)
        ======================================== */
   

        /* ========================================
           📱 レスポンシブデザイン
        ======================================== */
        @media (max-width: 1024px) {
            .hs-page-wrapper .nav-links {
                display: none;
            }

            .hs-page-wrapper .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hs-page-wrapper .simulator-inputs {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .result-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hs-page-wrapper .top6-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hs-page-wrapper .service-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hs-page-wrapper .strategy-comparison {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .reasons-grid {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .cases-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hs-page-wrapper .gifts-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .hs-page-wrapper .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .hs-page-wrapper .hero-emoji {
                font-size: 3rem;
            }

            .hs-page-wrapper .hero-section h1 {
                font-size: 2rem;
            }

            .hs-page-wrapper .hero-subtitle {
                font-size: 1.5rem;
            }

            .hs-page-wrapper .hero-section p {
                font-size: 1.1rem;
            }

            .hs-page-wrapper .stats-grid {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .comparison-cards {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .top6-grid {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .service-grid {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .cases-stats {
                flex-direction: column;
                gap: 2rem;
            }

            .hs-page-wrapper .cases-grid {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .gifts-grid {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .final-cta-buttons {
                flex-direction: column;
            }

            .hs-page-wrapper .final-cta-trust {
                flex-direction: column;
                gap: 1rem;
            }

            .hs-page-wrapper .footer-content {
                grid-template-columns: 1fr;
            }

            .hs-page-wrapper .footer-links a {
                display: block;
                margin: 0.5rem 0;
            }

            .hs-page-wrapper .section-title {
                font-size: 2rem;
            }

            .hs-page-wrapper .final-cta-title {
                font-size: 2rem;
            }
        }
    

/* ========================================
   ✅ Integlove Home JP Custom (scoped)
======================================== */
.hs-page-wrapper .hero-section{
 background:#02020f !important;
 /*background-image: url('https://kanoumiki.com/wp-content/uploads-webpc/uploads/AI agent17.webp');*/
  color:#6f6f70 !important;
  padding:2rem 0.5rem;
}
.hs-page-wrapper .hero-section h1{
  color:#ffffff;
  letter-spacing:0.02em;
  text-shadow:0 0 18px rgba(0,217,255,0.35);
  animation:hsGlow 2.2s ease-in-out infinite;
}
.hs-page-wrapper .hs-rocket{
    font-size: 80px;  
  display:inline-block;
  margin-left:0.2rem;
  animation:hsFloat 1.6s ease-in-out infinite;
}
@keyframes hsFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes hsGlow{
  0%,100%{ text-shadow:0 0 18px rgba(0,217,255,0.25); }
  50%{ text-shadow:0 0 26px rgba(0,217,255,0.55); }
}

/* TOP6 2カラム×3 */
.hs-page-wrapper .hs-top6-grid-2col{
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1024px){
  .hs-page-wrapper .hs-top6-grid-2col{
    grid-template-columns: 1fr;
  }
}
.hs-page-wrapper .hs-catch{
  font-weight:700;
  color: var(--accent-cyan);
  margin: 0.8rem 0 1rem;
}
.hs-page-wrapper .hs-details{
  margin: 0.8rem 0 1rem;
  padding: 0.5rem 0.5rem;
  background: rgba(0,217,255,0.06);
  border: 1px solid rgba(0,217,255,0.18);
  border-radius: 12px;
}
.hs-page-wrapper .hs-details summary{
  cursor:pointer;
  font-weight:700;
  color: var(--accent-cyan);
}
.hs-page-wrapper .hs-details p{
  margin-top:0.7rem;
  color: var(--text-muted);
  font-size:0.95rem;
  line-height:1.7;
}
.hs-page-wrapper .hs-highlights{
  margin: 0.8rem 0 1rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
}
.hs-page-wrapper .hs-highlights-title{
  font-weight:700;
  color: var(--accent-cyan);
  margin-bottom:0.5rem;
}
.hs-page-wrapper .hs-bullet{
  margin:0;
  padding-left:1.2rem;
  color: var(--text-muted);
  font-size:0.95rem;
}
.hs-page-wrapper .hs-bullet li{
  margin:0.35rem 0;
}

/* 人気のパッケージプラン */
.hs-page-wrapper .hs-packages-section{
  padding: 2rem 0.5rem;
  background: var(--bg-primary);
}
.hs-page-wrapper .hs-packages-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 1024px){
  .hs-page-wrapper .hs-packages-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px){
  .hs-page-wrapper .hs-packages-grid{
    grid-template-columns: 1fr;
  }
}
.hs-page-wrapper .hs-package-card{
  position:relative;
  background-color: #02020f;
  border: 1px solid rgba(0,217,255,0.2);
  border-radius: 20px;
  padding: 0.5rem;
  backdrop-filter: blur(10px);
  transition: all .3s;
}
.hs-page-wrapper .hs-package-card:hover{
  transform: translateY(-5px);
  border-color: var(--accent-cyan);
  background-color: #02020f;
}
.hs-page-wrapper .hs-badge{
  position:absolute;
  top:1rem;
  right:1rem;
  padding:0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 0, 110, 0.15);
  border: 1px solid rgba(255, 0, 110, 0.35);
  color: #ff7fb3;
  font-weight:800;
  font-size:0.85rem;
}
.hs-page-wrapper .hs-package-icon{
  font-size: 2.2rem;
  margin-bottom:0.8rem;
}
.hs-page-wrapper .hs-package-title{
  font-size: 1.35rem;
  color: var(--accent-cyan);
  margin-bottom: 0.35rem;
}
.hs-page-wrapper .hs-package-sub{
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.hs-page-wrapper .hs-package-includes{
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(0,217,255,0.06);
  border: 1px solid rgba(0,217,255,0.18);
  margin-bottom: 1rem;
}
.hs-page-wrapper .hs-package-includes-title{
  font-weight:800;
  color: var(--accent-cyan);
  margin-bottom: 0.5rem;
}
.hs-page-wrapper .hs-bullet-compact{
  padding-left: 1.2rem;
  margin: 0.6rem 0 1.2rem;
}
.hs-page-wrapper .hs-package-cta{
  display:block;
  text-align:center;
  padding: 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #fff;
  text-decoration:none;
  font-weight:800;
}
.hs-page-wrapper .hs-package-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(0,217,255,0.45);
}

/* パッケージ特徴 3カラム×2 */
.hs-page-wrapper .hs-package-features-section{
  padding: 2rem 0.5rem;
  background: var(--bg-secondary);
}
.hs-page-wrapper .hs-features-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 1024px){
  .hs-page-wrapper .hs-features-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px){
  .hs-page-wrapper .hs-features-grid{
    grid-template-columns: 1fr;
  }
}
.hs-page-wrapper .hs-feature-card{
  background-color: #02020f;
  border: 1px solid rgba(0,217,255,0.2);
  border-radius: 18px;
  padding: 0.5rem;
  backdrop-filter: blur(10px);
}
.hs-page-wrapper .hs-feature-icon{
  font-size: 2rem;
  margin-bottom: 0.7rem;
}
.hs-page-wrapper .hs-feature-title{
  font-weight: 900;
  color: var(--accent-cyan);
  margin-bottom: 0.5rem;
}
.hs-page-wrapper .hs-feature-desc{
  color: var(--text-muted);
  line-height: 1.7;
}


/* ========================================
   🎁 Packages: expandable targets (scoped)
======================================== */
.hs-page-wrapper .hs-package-details{
  margin: 1rem 0 1.2rem;
  border: 1px solid rgba(0,217,255,0.18);
  border-radius: 14px;
  background-color: #02020f;
  overflow: hidden;
}
.hs-page-wrapper .hs-package-summary{
  cursor: pointer;
  padding: 0.9rem 1rem;
  font-weight: 700;
  color: var(--accent-cyan);
  list-style: none;
}
.hs-page-wrapper .hs-package-summary::-webkit-details-marker{ display:none; }
.hs-page-wrapper .hs-package-summary::after{
  content: "＋";
  float: right;
  color: var(--accent-cyan);
  opacity: 0.9;
}
.hs-page-wrapper details[open] .hs-package-summary::after{ content: "−"; }
.hs-page-wrapper .hs-target-list{
  padding: 0 1.2rem 1rem 2.2rem;
  color: var(--text-muted);
}
.hs-page-wrapper .hs-target-list li{
  margin: 0.55rem 0;
  line-height: 1.6;
}

/* ⑤ プラン：4カラム基準（Ultimateを2カラム幅） */
.plans-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;}
.plans-grid .plan{grid-column:span 1;}
.plans-grid .plan.featured{grid-column:span 2;transform:scale(1.02);border:2px solid rgba(108,140,255,.65);}
@media (max-width:1024px){.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.plans-grid .plan.featured{grid-column:span 2;}}
@media (max-width:768px){.plans-grid{grid-template-columns:1fr;}.plans-grid .plan.featured{grid-column:span 1;}}




<!-- ================================
  ①〜⑥ 追加CSS（本タスク用）
================================ -->

/* ① ファーストビュー：左右2カラム + UIモック */
.hs-page-wrapper .hero-section{ padding: 3rem 1.5rem; }
.hs-page-wrapper .hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.0fr 1.0fr;
  gap: 2.5rem;
  align-items: center;
  text-align: left;
}
.hs-page-wrapper .hero-left h1{ line-height: 1.15; }
.hs-page-wrapper .hero-lead{ color: var(--text-muted); margin-top: 1rem; font-size: 1.05rem; }
.hs-page-wrapper .hero-bullets{ margin-top: 1.2rem; padding-left: 1.2rem; color: var(--text-secondary); }
.hs-page-wrapper .hero-bullets li{ margin: 0.4rem 0; }

.hs-page-wrapper .ui-mock{
  background-color: #02020f;
  border: 1px solid rgba(0,217,255,0.22);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}
.hs-page-wrapper .ui-topbar{
  display:flex; gap: 0.4rem; align-items:center;
  padding: 0.5rem 0.4rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hs-page-wrapper .ui-dot{ width: 10px; height: 10px; border-radius: 50%; display:inline-block; }
.hs-page-wrapper .ui-dot.r{ background:#ff5f57; }
.hs-page-wrapper .ui-dot.y{ background:#febc2e; }
.hs-page-wrapper .ui-dot.g{ background:#28c840; }
.hs-page-wrapper .ui-body{ padding: 0.9rem 0.2rem 0.2rem; display:grid; gap: 0.9rem; }
.hs-page-wrapper .ui-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.hs-page-wrapper .ui-panel{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,217,255,0.14);
  border-radius: 14px;
  padding: 0.9rem;
}
.hs-page-wrapper .ui-title{ font-weight: 800; color: var(--accent-cyan); margin-bottom: 0.55rem; font-size: 0.95rem; }
.hs-page-wrapper .ui-kpi{ display:flex; justify-content: space-between; gap: 0.6rem; }
.hs-page-wrapper .ui-kpi .k{ color: var(--text-muted); font-size: 0.85rem; }
.hs-page-wrapper .ui-kpi .v{ color: #fff; font-weight: 800; }
.hs-page-wrapper .ui-chat{
  display:grid; gap: 0.55rem;
}
.hs-page-wrapper .ui-bubble{
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.9rem;
  line-height: 1.55;
}
.hs-page-wrapper .ui-bubble.me{ background: rgba(0,217,255,0.08); border-color: rgba(0,217,255,0.18); }
.hs-page-wrapper .ui-bubble.ai{ background: rgba(123,47,254,0.10); border-color: rgba(123,47,254,0.22); }
.hs-page-wrapper .ui-flow{ display:grid; gap: 0.55rem; }
.hs-page-wrapper .ui-flow .step{ display:flex; align-items:center; gap: 0.6rem; color: var(--text-secondary); font-size: 0.9rem; }
.hs-page-wrapper .ui-flow .badge{
  width: 28px; height: 28px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color:#fff; font-weight: 900;
}

/* ② 問題提起 */
.hs-page-wrapper .problem-section{ padding: 3rem 1.5rem; background: var(--bg-secondary); }
.hs-page-wrapper .problem-inner{ max-width: 1100px; margin: 0 auto; }
.hs-page-wrapper .problem-copy{ text-align:center; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.9; }
.hs-page-wrapper .problem-copy .q{ font-size: 28px; font-weight: 900; color: var(--accent-cyan); margin-bottom: 0.8rem; }

.hr00{ font-size: 24px; font-weight: 900; color: #00D9FF; margin-bottom: 2px; }

.hs-page-wrapper .pain-grid{
  margin-top: 2rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.hs-page-wrapper .pain-card{
  background-color: #02020f;
  border: 1px solid rgba(243, 250, 251, 0.468);
  border-radius: 18px;
  padding: 1.2rem;
}
.hs-page-wrapper .pain-icon{ text-align: center; font-size: 1.7rem; }
.hs-page-wrapper .pain-title{ margin-top: 0.4rem; font-weight: 900; text-align: center; color: #fff; }
.hs-page-wrapper .pain-desc{ margin-top: 0.4rem; color: solid #A9A9A9; text-align: center; font-size: 0.95rem; }
.hs-page-wrapper .shift{
  margin-top: 2rem;
  text-align:center;
  background: rgba(0,217,255,0.08);
  border: 1px solid rgba(0,217,255,0.20);
  border-radius: 18px;
  padding: 1.1rem;
  color: var(--text-secondary);
}
.hs-page-wrapper .shift strong{ color: var(--accent-cyan); }

/* ③ 解決：Personal AI OS + フロー図 */
.hs-page-wrapper .solution-section{ padding: 3rem 1.5rem; background: var(--bg-primary); }
.hs-page-wrapper .solution-inner{ max-width: 1100px; margin: 0 auto; }
.hs-page-wrapper .flow{
  margin-top: 2rem;
  display:grid;
  grid-template-columns: 1fr 0.6fr 1fr 0.6fr 1fr;
  gap: 0.8rem;
  align-items: center;
}
.hs-page-wrapper .flow .box{
  /*background: rgba(18,18,46,0.6);*/
  border: 1px solid rgba(246, 252, 253, 0.462);
  border-radius: 18px;
  padding: 1.2rem;
  text-align:center;
}
.hs-page-wrapper .flow .box .t{ font-weight: 900; color: solid #A9A9A9; }
.hs-page-wrapper .flow .box .s{ margin-top: 0.4rem; color: var(--text-muted); font-size: 0.95rem; }
.hs-page-wrapper .flow .arrow{ text-align:center; font-size: 1.8rem; color: var(--accent-green); font-weight: 900; }

/* ④ システム構成 */
.hs-page-wrapper .architecture-section{ padding: 3rem 1.5rem; background: var(--bg-secondary); }
.hs-page-wrapper .arch-grid{
  margin-top: 2rem;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.hs-page-wrapper .arch-card{
 background-color: #02020f;
  border: 1px solid rgba(0, 217, 255, 0.448);
  border-radius: 18px;
  padding: 1.2rem;
}
.hs-page-wrapper .arch-card .h{ font-weight: 900; color: var(--accent-cyan); }
.hs-page-wrapper .arch-card .p{ margin-top: 0.5rem; color: solid #A9A9A9; font-size: 0.95rem; line-height: 1.7; }
.hs-page-wrapper .evolve{
  margin-top: 1.8rem;
  padding: 1.1rem;
  border-radius: 18px;
  /*background: rgba(123,47,254,0.10);*/
  border: 1px solid rgba(244, 238, 255, 0.464);
  color: var(--text-secondary);
  text-align:center;
}

.hs-page-wrapper .evolve01{
 margin-top: 1.8rem;
  padding: 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(235, 224, 254, 0.422);
  color:#A9A9A9;
  font-size: 17px;
  /*background: rgba(123,47,254,0.10);
  text-align:center;*/
  }

/* ⑤ お客様の声（4カラム + ボタンフィルター） */
.hs-page-wrapper .voices-section{ padding: 3rem 1.5rem; background: var(--bg-primary); }
.hs-page-wrapper .voices-inner{ max-width: 1200px; margin: 0 auto; }
.hs-page-wrapper .voices-buttons{
  display:flex; gap: 0.8rem; justify-content:center; flex-wrap: wrap;
  margin: 1.6rem 0 2rem;
}
.hs-page-wrapper .voices-btn{
  background: transparent;
  border: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: all .25s;
}
.hs-page-wrapper .voices-btn.active{
  background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  border-color: transparent;
  color: #fff;
}
.hs-page-wrapper .voices-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.hs-page-wrapper .voice-card{
  background-color: #02020f;
  border: 1px solid rgba(0,217,255,0.18);
  border-radius: 18px;
  padding: 1.05rem;
  transition: all .25s;
}
.hs-page-wrapper .voice-card:hover{ transform: translateY(-4px); border-color: var(--accent-pink); }
.hs-page-wrapper .voice-stars{ color: var(--accent-orange); font-size: 1.05rem; letter-spacing: 0.04em; }
.hs-page-wrapper .voice-text{ margin-top: 0.6rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; }
.hs-page-wrapper .voice-meta{ margin-top: 0.8rem; color: var(--text-muted); font-size: 0.85rem; }
.hs-page-wrapper .voice-meta .type{ color: var(--accent-cyan); font-weight: 900; }

/* ⑥ プラン */
.hs-page-wrapper .plans-section{ padding: 3rem 1.5rem; background: var(--bg-secondary); }
.hs-page-wrapper .plans-inner{ max-width: 1100px; margin: 0 auto; }
.hs-page-wrapper .plans-grid{
  margin-top: 2rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}
.hs-page-wrapper .plan{
  background-color: #02020f;
  border: 1px solid rgba(0,217,255,0.18);
  border-radius: 20px;
  padding: 1.4rem;
}
.hs-page-wrapper .plan .name{ font-weight: 900; font-size: 1.25rem; color: #fff; }
.hs-page-wrapper .plan .price{ margin-top: 0.6rem; font-weight: 900; font-size: 1.8rem; color: var(--accent-cyan); }
.hs-page-wrapper .plan .note{ margin-top: 0.25rem; color: var(--text-muted); font-size: 0.9rem; }
.hs-page-wrapper .plan ul{ margin-top: 1rem; padding-left: 1.2rem; color: var(--text-secondary); }
.hs-page-wrapper .plan li{ margin: 0.45rem 0; }
.hs-page-wrapper .plan.strong{
  transform: scale(1.04);
  border-color: var(--accent-cyan);
  box-shadow: 0 14px 60px rgba(0,217,255,0.18);
}
.hs-page-wrapper .plan.strong .name{ color: var(--accent-cyan); }

/* TOP6：3カラム×2段（既存クラス名を流用して上書き） */
.hs-page-wrapper .hs-top6-grid-2col{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px){
  .hs-page-wrapper .hero-inner{ grid-template-columns: 1fr; text-align: center; }
  .hs-page-wrapper .ui-row{ grid-template-columns: 1fr; }
  .hs-page-wrapper .pain-grid{ grid-template-columns: 1fr; }
  .hs-page-wrapper .flow{ grid-template-columns: 1fr; }
  .hs-page-wrapper .flow .arrow{ display:none; }
  .hs-page-wrapper .arch-grid{ grid-template-columns: repeat(2, 1fr); }
  .hs-page-wrapper .voices-grid{ grid-template-columns: repeat(2, 1fr); }
  .hs-page-wrapper .plans-grid{ grid-template-columns: 1fr; }
  .hs-page-wrapper .hs-top6-grid-2col{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .hs-page-wrapper .voices-grid{ grid-template-columns: 1fr; }
  .hs-page-wrapper .hs-top6-grid-2col{ grid-template-columns: 1fr; }
}




<!-- ================================
  ③〜⑥ 追加CSS（本タスク用）
================================ -->

/* ③ service セクションは既存CSSを利用（文言のみ変更） */

/* ④ works_fixed セクション（スコープ） */
.hs-page-wrapper .works-fixed section{ max-width: 1400px; margin: 0 auto; padding: 2rem 0.5rem; }
.hs-page-wrapper .works-fixed .hero{ padding: 1.5rem 0.5rem 0.5rem; text-align:center; background: radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.1), transparent 70%); }
.hs-page-wrapper .works-fixed .hero-content{ max-width: 1000px; margin: 0 auto; }
.hs-page-wrapper .works-fixed .hero h1{ font-size: 2.6rem; font-weight: 900; margin-bottom: 0.8rem; background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text !important; }
.hs-page-wrapper .works-fixed .hero-subtitle{ font-size: 1.1rem; color: var(--text-secondary); line-height: 1.8; }
.hs-page-wrapper .works-fixed .hero-badges{ display:flex; justify-content:center; gap: 0.8rem; flex-wrap:wrap; margin-top: 1.2rem; }
.hs-page-wrapper .works-fixed .badge{ background: var(--bg-secondary); padding: 0.65rem 1.2rem; border-radius: 999px; border: 1px solid rgba(0, 217, 255, 0.3); font-size: 16px; color: var(--accent-cyan); font-weight: 800; }
.hs-page-wrapper .works-fixed .section-header{ text-align:center; margin-bottom: 2.2rem; }
.hs-page-wrapper .works-fixed .section-header h2{ font-size: 2.2rem; font-weight: 800; margin-bottom: 0.6rem; background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%); //  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important;background-clip:text !important;}
.hs-page-wrapper .works-fixed .section-header p{ color: solid #A9A9A9; max-width: 760px; margin: 0 auto; }

.hs-page-wrapper .works-fixed .stats-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.hs-page-wrapper .works-fixed .stat-card{ background: linear-gradient(135deg, rgba(0, 217, 255, 0.05), rgba(123, 47, 254, 0.05)); padding: 1.5rem; border-radius: 16px; border: 1px solid rgba(0, 217, 255, 0.464); text-align:center; }
.hs-page-wrapper .works-fixed .stat-number{ font-size: 2.6rem; font-weight: 900; background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom: 0.5rem; }
.hs-page-wrapper .works-fixed .stat-label{ color: var(--accent-cyan); font-weight: 900; }
.hs-page-wrapper .works-fixed .stat-description{ color: solid #A9A9A9; font-size: 0.95rem; margin-top: 0.35rem; }

.hs-page-wrapper .works-fixed .filter-section{ background: var(--bg-secondary); border-radius: 20px; padding: 1.2rem; border: 1px solid rgba(0, 217, 255, 0.1); }
.hs-page-wrapper .works-fixed .filter-buttons{ display:flex; gap: 0.8rem; justify-content:center; flex-wrap:wrap; margin-bottom: 1.5rem; }
.hs-page-wrapper .works-fixed .filter-btn{ background: transparent; border: 2px solid var(--accent-cyan); color: var(--accent-cyan); padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 900; cursor:pointer; }
.hs-page-wrapper .works-fixed .filter-btn.active{ background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%); color: #fff; border-color: transparent; }

.hs-page-wrapper .works-fixed .cases-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.hs-page-wrapper .works-fixed .case-card{ display:none; }
.hs-page-wrapper .works-fixed .case-card.show{ display:block; }

.hs-page-wrapper .works-fixed .industries-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hs-page-wrapper .works-fixed .industry-card{ background-color: #02020f; border: 1px solid rgba(0, 217, 255, 0.469); border-radius: 14px; padding: 1.3rem; text-align:center; }
.hs-page-wrapper .works-fixed .industry-icon{ font-size: 2rem; margin-bottom: 0.6rem; }
.hs-page-wrapper .works-fixed .industry-name{ font-weight: 900; color: var(--accent-cyan); }
.hs-page-wrapper .works-fixed .industry-count{ margin-top: 0.35rem; font-weight: 900; color: var(--accent-purple); }

/* ⑤ プラン：切替ボタン */
.hs-page-wrapper .plan-toggle{ display:flex; justify-content:center; gap: 0.8rem; margin: 1.3rem 0 0.8rem; flex-wrap:wrap; }
.hs-page-wrapper .plan-toggle-btn{ background: transparent; border: 2px solid var(--accent-cyan); color: var(--accent-cyan); padding: 0.65rem 1.2rem; border-radius: 999px; font-weight: 900; cursor:pointer; }
.hs-page-wrapper .plan-toggle-btn.active{ background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%); color:#fff; border-color: transparent; }

/* ⑥ お客様の声：開閉ボタン + 星色 */
.hs-page-wrapper .voices-toggle-btn{ background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); color:#fff; border:none; border-radius: 999px; padding: 0.9rem 1.6rem; font-weight: 900; cursor:pointer; }
.hs-page-wrapper .voice-stars{ color: #FFD54A; }

@media (max-width: 1024px){
  .hs-page-wrapper .works-fixed .stats-grid{ grid-template-columns: 1fr; }
  .hs-page-wrapper .works-fixed .cases-grid{ grid-template-columns: 1fr; }
  .hs-page-wrapper .works-fixed .industries-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .hs-page-wrapper .works-fixed .industries-grid{ grid-template-columns: 1fr; }
}




/* ⑥ お客様の声：★を黄色に固定 */
.voice-stars{ color:#FFD54A !important; }




/* ④ ビジネスの各課題：CSSここから */
.hs-page-wrapper .biz-issues-section{
  padding: 2.6rem 1.5rem;
  background: var(--bg-primary);
}
.hs-page-wrapper .biz-issues-inner{
  max-width: 1100px;
  margin: 0 auto;
}
.hs-page-wrapper .biz-issues-tabs{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.hs-page-wrapper .biz-issue-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0.55rem;
  min-height: 58px;
  padding: 0.7rem 0.8rem;
  border-radius: 16px;
  border: 1px solid rgba(0,217,255,0.18);
  background-color: #02020f;
  color: var(--text-secondary);
  cursor:pointer;
  transition: .2s ease;
  text-align:center;
}
.hs-page-wrapper .biz-issue-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(0,217,255,0.38);
  background: rgba(255,255,255,0.04);
}
.hs-page-wrapper .biz-issue-tab.is-active{
  border-color: rgba(0,217,255,0.48);
  background: linear-gradient(135deg, rgba(0,217,255,0.14), rgba(124,58,237,0.16));
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.hs-page-wrapper .biz-issue-tab-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color:#fff;
  font-size: 0.76rem;
  font-weight: 900;
  flex: 0 0 30px;
}
.hs-page-wrapper .biz-issue-tab-text{
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.hs-page-wrapper .biz-issues-panels{
  margin-top: 1rem;
}
.hs-page-wrapper .biz-issue-panel{
  background-color: #02020f;
  border: 1px solid rgba(0,217,255,0.18);
  border-radius: 22px;
  padding: 1.3rem 1.35rem;
}
.hs-page-wrapper .biz-issue-panel-head{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap: 0.95rem;
  align-items: start;
  margin-bottom: 0.95rem;
}
.hs-page-wrapper .biz-issue-panel-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color:#fff;
  font-weight:900;
}
.hs-page-wrapper .biz-issue-panel-head h3{
  margin: 0;
  color: var(--accent-cyan);
  font-size: 1.14rem;
  font-weight: 900;
}
.hs-page-wrapper .biz-issue-panel-head p{
  margin: 0.28rem 0 0;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.94rem;
}
.hs-page-wrapper .biz-issue-body{
  color: var(--text-secondary);
}
.hs-page-wrapper .biz-issue-body p{
  margin: 0.4rem 0 0.9rem;
  line-height: 1.8;
}
.hs-page-wrapper .biz-issue-body ul{
  padding-left: 1.2rem;
  margin: 0.5rem 0 0;
}
.hs-page-wrapper .biz-issue-body li{
  margin: 0.6rem 0;
  line-height: 1.75;
  color: var(--text-muted);
}
.hs-page-wrapper .biz-issue-body strong{
  color: var(--text-secondary);
}
.hs-page-wrapper .biz-issue-note{
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(0,217,255,0.08);
  border: 1px solid rgba(0,217,255,0.18);
  color: var(--text-secondary);
}
@media (max-width: 980px){
  .hs-page-wrapper .biz-issues-tabs{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px){
  .hs-page-wrapper .biz-issues-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hs-page-wrapper .biz-issue-tab{
    min-height: 54px;
    padding: 0.68rem 0.72rem;
    gap: 0.45rem;
  }
  .hs-page-wrapper .biz-issue-tab-num{
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
    flex-basis: 28px;
  }
  .hs-page-wrapper .biz-issue-tab-text{
    font-size: 0.84rem;
    white-space: normal;
  }
  .hs-page-wrapper .biz-issue-panel{
    padding: 1.15rem 1rem;
  }
  .hs-page-wrapper .biz-issue-panel-head{
    grid-template-columns: 48px 1fr;
    gap: 0.8rem;
  }
  .hs-page-wrapper .biz-issue-panel-num{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 0.9rem;
  }
  .hs-page-wrapper .biz-issue-panel-head h3{
    font-size: 1rem;
  }
}
/* ④ ビジネスの各課題：CSSここまで */



  <!-- ① FAQページ用：現在カラーに合わせた共通CSSここから -->
  
    :root{
      --bg-primary:#02020f;
      --bg-secondary:#02020f;
      --text-primary:#FFFFFF;
      --text-secondary:#E8E8E8;
      --text-muted:#A8A8B8;
      --accent-cyan:#00D9FF;
      --accent-purple:#7B2FFE;
      --accent-green:#50E3C2;
      --accent-orange:#FF6B35;
      --border:rgba(0,217,255,0.18);
      --border-strong:rgba(0,217,255,0.42);
      --shadow:0 18px 45px rgba(0,0,0,0.28);
      --radius:20px;
    }

    *{margin:0;padding:0;box-sizing:border-box;}
    html{scroll-behavior:smooth;}

    body{
      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Yu Gothic UI',sans-serif;
      line-height:1.7;
      color:var(--text-secondary);
      background-color: #02020f;
      min-height:100vh;
    }

    a{color:inherit;text-decoration:none;}

    .faq-page{width:100%;overflow-x:hidden;}
    .container{width:min(1180px, calc(100% - 32px));margin:0 auto;}

    .glow-card{
      background-color: #02020f;
       border: 1px solid rgba(0, 217, 255, 0.436);
      /*border:1px solid var(--border);*/
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
    }

    .btn-primary,
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:0.55rem;
      padding:0.95rem 1.45rem;
      border-radius:999px;
      font-weight:800;
      transition:.25s ease;
      border:none;
      cursor:pointer;
    }

    .btn-primary{
      background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
      color:#07121e;
    }

    .btn-secondary{
      background:transparent;
      color:var(--text-primary);
      border:1px solid rgba(255,255,255,0.18);
    }

    .btn-primary:hover,
    .btn-secondary:hover{transform:translateY(-2px);}
    /* ① FAQページ用：現在カラーに合わせた共通CSSここまで */

    /* ② FAQページ用：ヒーローのCSSここから */
    .hero-section{padding:72px 0 28px;position:relative;}

    .hero-shell{padding:42px 30px;position:relative;overflow:hidden;}

    .hero-shell::before{
      content:"";
      position:absolute;
      inset:-30% auto auto -10%;
      width:320px;
      height:320px;
      background:transparent;
      pointer-events:none;
    }

    .hero-shell::after{
      content:"";
      position:absolute;
      right:-60px;
      top:-40px;
      width:280px;
      height:280px;
      background:transparent;
      pointer-events:none;
    }

    .hero-content{position:relative;z-index:1;text-align:center;max-width:860px;margin:0 auto;}

    .hero-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:0.5rem;
      padding:0.5rem 0.95rem;
      border-radius:999px;
      border:1px solid rgba(0,217,255,0.22);
      background:rgba(0,217,255,0.08);
      color:var(--accent-cyan);
      font-size:0.92rem;
      font-weight:800;
      margin:0 auto 1.15rem;
    }

    .hero-title{
      font-size:clamp(2.2rem, 5vw, 3.6rem);
      line-height:1.18;
      font-weight:900;
      margin-bottom:1rem;
      color:var(--text-primary);
    }

    .hero-title .accent{color:var(--accent-cyan);}

    .hero-description{
      color:var(--text-muted);
      font-size:1.08rem;
      max-width:760px;
      margin:0 auto;
    }

    .mini-points{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:0.85rem;
      margin:1.7rem auto 0;
      max-width:920px;
    }

    .mini-point{
      padding:0.95rem 1rem;
      border-radius:16px;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255, 255, 255, 0.424);
      color:var(--text-secondary);
      font-weight:700;
    }
    /* ② FAQページ用：ヒーローのCSSここまで */

    /* ③ FAQページ用：横並び項目ボタンとFAQ開閉のCSSここから */
    .faq-section{padding:14px 0 72px;}

    .faq-category-buttons{
      display:grid;
      grid-template-columns:repeat(5, minmax(0,1fr));
      gap:0.8rem;
      margin-bottom:1rem;
    }

    .faq-category-btn{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:60px;
      padding:0.9rem 0.8rem;
      border-radius:18px;
      border:1px solid var(--border);
      background-color: #02020f;
      color:var(--text-secondary);
      font-size:0.96rem;
      font-weight:900;
      text-align:center;
      cursor:pointer;
      transition:.22s ease;
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
    }

    .faq-category-btn:hover,
    .faq-category-btn.active{
      color:var(--accent-cyan);
      border-color:var(--border-strong);
      background:linear-gradient(135deg, rgba(0,217,255,0.12), rgba(123,47,254,0.14));
      transform:translateY(-1px);
    }

    .faq-category-panel{
      display:none;
      padding:1.2rem 1.2rem 0;
      margin-bottom:1rem;
    }

    .faq-category-panel.active{
      display:block;
    }

    .faq-category-sub{
      color: solid #A9A9A9;
      margin:0 0 1rem;
    }

    .faq-list{display:grid;gap:0.8rem;padding-bottom:1.2rem;}

    .faq-item{
      overflow:hidden;
      border-radius:16px;
      background:rgba(255,255,255,0.03);
      border:1px solid rgba(255,255,255,0.06);
    }

    .faq-question{
      width:100%;
      display:grid;
      grid-template-columns:1fr 28px;
      gap:1rem;
      align-items:center;
      padding:1.05rem 1.05rem;
      background:transparent;
      border:none;
      color:var(--text-primary);
      cursor:pointer;
      text-align:left;
      font-size:0.98rem;
      font-weight:400;
    }

    .faq-question:hover{background:rgba(255,255,255,0.02);}
    .faq-question-text{display:block;line-height:1.6;}

    .faq-icon{
      text-align:center;
      font-weight:900;
      color:var(--accent-green);
      font-size:1.15rem;
    }

    .faq-answer{display:none;padding:0 1.05rem 1.05rem;}
    .faq-item.active .faq-answer{display:block;}
    .faq-item.active .faq-icon{color:var(--accent-orange);}

    .faq-answer-content{
      color:var(--text-muted);
      line-height:1.85;
      padding-top:0.15rem;
      border-top:1px solid rgba(255,255,255,0.08);
    }

    .faq-answer-content strong{color:var(--text-secondary);}

    .faq-note{
      margin-top:0.9rem;
      padding:0.8rem 0.95rem;
      border-radius:14px;
      background:rgba(0,217,255,0.08);
      border:1px solid rgba(0,217,255,0.16);
      color:var(--text-secondary);
    }

    .final-cta-section{padding:0 0 86px;}

    .final-cta-box{
      padding:34px 26px;
      text-align:center;
      background:linear-gradient(135deg, rgba(0,217,255,0.10), rgba(123,47,254,0.12));
    }

    .final-cta-title{
      color:var(--text-primary);
      font-size:clamp(1.8rem, 4vw, 2.5rem);
      font-weight:900;
      margin-bottom:0.8rem;
    }

    .final-cta-description{
      color:var(--text-muted);
      max-width:760px;
      margin:0 auto 1.4rem;
    }

    .final-cta-buttons{
      display:flex;
      justify-content:center;
      gap:0.9rem;
      flex-wrap:wrap;
    }

    @media (max-width: 1100px){
      .faq-category-buttons{grid-template-columns:repeat(3, minmax(0,1fr));}
    }

    @media (max-width: 900px){
      .mini-points{grid-template-columns:1fr;}
    }

    @media (max-width: 768px){
      .hero-section{padding:48px 0 24px;}
      .hero-shell{padding:28px 18px;}
      .faq-category-buttons{grid-template-columns:repeat(2, minmax(0,1fr));}
      .faq-category-btn{min-height:54px;font-size:0.9rem;padding:0.8rem 0.65rem;}
      .faq-category-panel{padding:1rem 1rem 0;}
      .faq-question{padding:1rem 1rem;grid-template-columns:1fr 22px;}
      .faq-answer{padding:0 1rem 1rem;}
      .final-cta-box{padding:28px 18px;}
    }
    /* ③ FAQページ用：横並び項目ボタンとFAQ開閉のCSSここまで */
  


 <!-- 光るボタンここから -->

.cta-primary{
  background:rgba(255,255,255,0.20);
  backdrop-filter:blur(10px);
  color:var(--text-primary);
  padding:18px 54px;
  font-size:18px;
  font-weight:900;
  border:2px solid rgba(255,255,255,0.52);
  border-radius:50px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:all 0.3s ease;
  margin:0 10px 16px;
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0.55); }
  50%{ box-shadow:0 0 0 18px rgba(255,255,255,0); }
}

.cta-primary:hover{
  transform:scale(1.04);
  background:rgba(255,255,255,0.28);
  box-shadow:0 10px 40px rgba(255,255,255,0.28);
}



/* 高級感のあるGoogle Fontsを読み込み（英語：Montserrat / 日本語：Noto Serif JP 明朝体） */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Noto+Serif+JP:wght@400;600;900&display=swap');

/* ヒーローセクション全体の設定（全画面） */
.top-hero-section {
  position: relative;
  min-height: 100vh; /* 画面いっぱいの高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  /* ↓↓↓ ここにNano Banana 2で生成した画像のURL（パス）を入れてください ↓↓↓ */
  background-image: url('https://kanoumiki.com/wp-content/uploads-webpc/uploads/AI agent20.webp'); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* スクロール時に背景が少し遅れて動く高級パララックス効果 */
  color: #ffffff;
  /*font-family: 'Noto Serif JP', serif;*/ /* 基本は美しい明朝体 */
  /*font-family: inherit;*/
  padding: 20px;
  overflow: hidden;
}

/* 背景画像をうっすら見せるためのダークオーバーレイ */
.top-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 黒ベースのグラデーションで75%〜85%の暗さを被せる（文字の視認性アップ） */
  background: linear-gradient(135deg, rgba(10, 10, 15, 0.65) 0%, rgba(20, 20, 25, 0.55) 100%);
  z-index: 1;
}

/* コンテンツ全体の設定 */
.top-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px; /* 横幅が広がりすぎないように制限 */
  text-align: center; /* すべて中央揃え */
  animation: fadeIn 2s ease-out; /* 開いた時にふわっと浮かび上がるアニメーション */
}

/* 英語のサブタイトル */
.top-hero-subtitle {
 /* font-family: 'Montserrat', sans-serif;*/
/* font-family: inherit;*/
  font-size: 16px;
  letter-spacing: 2px; /* 文字の間隔を空けて洗練さを出す */
  color: #00D9FF; /* 上品なシャンパンゴールド */
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* メインのキャッチコピー */
.top-hero-main-title {
  font-size: 24px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
  text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* 文字を背景から浮き立たせる影 */
}

/* 富と余裕（一番目立たせる部分）の文字色グラデーション */
.top-highlight-gold {
  background: -webkit-linear-gradient(45deg, #00D9FF, #00D9FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* リード文 */
.top-hero-lead {
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
  color:#A9A9A9 ; /* 真っ白ではなく少しグレーにして眩しさを抑える */
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}

/* 箇条書き（AI艦隊の特徴） */
.top-hero-features {
  list-style: none;
  padding: 0;
  margin: 0 auto 15px auto;
  display: inline-block;
  text-align: left; /* 中央配置の中で、リスト自体は左揃えにして読みやすく */
}

.top-hero-features li {
  font-size: 17px;
  line-height: 2;
  color: #ffffff;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(197, 160, 89, 0.3); /* 薄いゴールドの下線 */
  padding: 0.5rem 0;
}

.top-hero-features li:last-child {
  border-bottom: none; /* 最後の線は消す */
}

/* クロージング文 */
.top-hero-closing {
  font-size: 17px;
  line-height: 1.8;
  color: #00D9FF; /* 少しトーンを落として大人っぽく */
  letter-spacing: 0.05em;
}

/* スマートフォン向けのレスポンシブ（画面が小さい時の設定） */
@media (max-width: 768px) {
  .top-hero-main-title {
    font-size: 20px; /* スマホ用に文字サイズを調整 */
  }
  .top-hero-subtitle {
    font-size: 17px;
  }
  .top-hero-lead {
    font-size: 17px;
  }
  .top-hero-features li {
    font-size: 17px;
  }
  .top-hero-closing {
    font-size: 17px;
  }
}

/* ふわっと浮かび上がるアニメーションの定義 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.moji-01{
  margin-top: 1.8rem;
  padding: 1.1rem;
  border-radius: 18px;
  /*background: rgba(123,47,254,0.10);*/
  border: 1px solid rgba(244, 238, 255, 0.464);
  /*color: #A9A9A9;*/
  text-align: center;
}

.moji-02{
  margin-top: 1.8rem;
  padding: 1.1rem;
  border-radius: 18px;
  /*background: rgba(123,47,254,0.10);*/
  border: 1px solid rgba(244, 238, 255, 0.464);
  color: #cccccc;
  text-align: left;
  font-size: 18px;
}

.contact7{
  /*margin-top: 1.8rem;*/
  /*border-radius: 18px;*/
  /*background: rgba(123,47,254,0.10);*/
  /*border: 1px solid rgba(244, 238, 255, 0.464);*/
  padding-left: 8px;
  color: #555555 !important;
  text-align: left;
  font-size: 18px;
}


/* ============================================================
   1. ヒーローセクション：iOS/タブレットでの背景画像修正
   ============================================================ */
@media (max-width: 1024px) {
  .hero-section {
    /* iOS Safariでのbackground-attachment: fixedのバグを回避 */
    background-attachment: scroll !important;
    background-size: cover;
    background-position: center center;
  }
}

/* ============================================================
   2 & 3. WEBサービス導入 & ブランドストーリー：レスポンシブ対応
   （PCは2列、タブレット以下は読みやすさ優先で1列2段へ）
   ============================================================ */
.portal-panel, .brand-story-content {
  display: flex;
  flex-direction: column; /* デフォルトを1列に */
  gap: 2rem;
}

/* PC（1025px以上）の時だけ2列にする */
@media (min-width: 1025px) {
  .portal-panel, .brand-story-content {
    flex-direction: row;
    align-items: flex-start;
  }
  .portal-panel-media, .brand-story-image {
    flex: 1; /* 画像エリア */
    max-width: 50%;
  }
  .portal-panel-copy, .brand-story-text {
    flex: 1; /* テキストエリア */
  }
}

/* ============================================================
   4. 無料相談お問い合わせセクション：専用スタイリング
   （他のモーダルに影響を与えず、このカードのみ色を変更）
   ============================================================ */

/* モーダルカード全体の背景とフォントカラー */
.section-modal-card--consult {
  width: 100% !important;
  background-color: #e9e9e9 !important; /* 薄いピンクベージュ */
  color: #333333 !important;/* 濃い目のグレー */
  text-align: left !important;
  padding: 40px !important; /* パディング調整 */
}

/* タイトルのフォントサイズ */
.section-modal-card--consult .section-modal-title,
.section-modal-card--consult .form-copy-block h3 {
  font-size: 20px !important;
  color: #333333 !important;
  text-align: left !important;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* 項目タイトルのフォントサイズ（ラベルなど） */
.section-modal-card--consult label,
.section-modal-card--consult .wpcf7-form-control-heading .form-section-label
{
  font-size: 18px !important;
  text-align: left !important;
  color: #666666 !important;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}

/* 入力フィールドのスタイリング */
.section-modal-card--consult input[type="text"],
.section-modal-card--consult input[type="email"],
.section-modal-card--consult input[type="tel"],
.section-modal-card--consult textarea,
.section-modal-card--consult select {
  background-color: #f0edef !important; /* 背景に合わせたさらに薄いベージュ */
  border: 1px solid #999999 !important; /* 枠線も馴染ませる */
  color: #666666 !important;
  font-size: 18px !important; /* 入力フォントサイズ */
  padding: 12px !important;
  border-radius: 6px !important;
  width: 100%;
}

/* プレースホルダーの色（入力前のヒント文字） */
.section-modal-card--consult ::placeholder {
  color: #999999 !important;
}

/* タブボタンの調整（背景色に合わせて） */
.section-modal-card--consult .consult-tab-btn {
   background: #02020f !important;
    border: 2px solid var(--accent-cyan) !important ;
    color: var(--accent-cyan) !important ;
       border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    transition: all .25s;

 /* background: transparent !important ;
  background: #02020f !important;
  color: #ffffff!important;
  border: 2px solid #fceafa!important;*/
}
.section-modal-card--consult .consult-tab-btn.active {
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)) !important ;
color: #fff !important ;
border-color: transparent !important ;

/*background: #cccccc !important;
color: #02020f!important;
border: 2px solid #fceafa!important;*/
}

/* ============================================================
   ヒーロー内ヘッダー・ナビゲーション
   ============================================================ */
.hero-header {
  position: absolute; /* ヒーローの上に重ねる */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px 10px 10px 10px; /* 上下の余白 */
}

.header-inner {
  max-width: 1200px; /* コンテナ幅に合わせる */
  margin: 0 auto;
  padding: 0 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ロゴのスタイリング */
.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-spark {
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.8)); /* ゴールドの光 */
}

.logo-group {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-main {
  font-family: 'Playfair Display', serif; /* もしGoogleFontがあれば */
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  font-size: 18px;
}

.logo-sub {
  font-size: 9px;
  color: #c5a059; /* ゴールド */
  letter-spacing: 3px;
  margin-top: 4px;
  font-weight: 600;
}

/* 右側ボタンのスタイリング */
.nav-consult-btn {
  background: rgba(197, 160, 89, 0.1); /* 背景は薄い透過ゴールド */
  border: 1px solid #c5a059;
  color: #c5a059;
  padding: 10px 10px 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50px; /* 角丸で洗練された印象に */
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.nav-consult-btn:hover {
  background: #c5a059;
  color: #000;
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.4);
  transform: translateY(-2px);
}

/* モバイル（スマホ）での調整 */
@media (max-width: 768px) {
  .hero-header {
    padding: 20px 0;
  }
  .logo-main {
    font-size: 16px;
  }
  .logo-sub {
    font-size: 8px;
  }
  .nav-consult-btn {
    padding: 8px 16px;
    font-size: 11px;
  }
}






/* ① モーダル共通スタイル */
body.modal-open{ overflow:hidden; }
.hs-page-wrapper .section-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  padding:26px 18px;
  background-color: #02020f;
  backdrop-filter:blur(10px);
  align-items:center;
  justify-content:center;
  overflow-y:auto;
}
.hs-page-wrapper .section-modal-overlay.is-open{ display:flex !important; }
.hs-page-wrapper .section-modal-card{
  width:min(1120px, 100%);
  max-height:min(88vh, 1200px);
  overflow:auto;
  position:relative;
  padding:28px 24px 24px;
  border:1px solid transparent;
  border-radius:28px;
  /*background: #777777;*/
  /*background:
    linear-gradient(180deg, rgba(18,18,46,0.98), rgba(10,10,30,0.98)) padding-box,
    linear-gradient(135deg, rgba(0,217,255,0.42), rgba(123,47,254,0.34), rgba(255,255,255,0.14)) border-box;*/
  box-shadow:0 28px 80px rgba(0,0,0,0.48);
  transform:translateY(0);
}
.hs-page-wrapper .section-modal-card--wide{ width:min(1180px, 100%); }
.hs-page-wrapper .section-modal-card--faq{ width:min(1080px, 100%); }
.hs-page-wrapper .section-modal-card--consult{ width:min(1120px, 100%); }
.hs-page-wrapper .section-modal-card--guide{ width:min(1120px, 100%); }
.hs-page-wrapper .section-modal-header{
  padding-right:58px;
  margin-bottom:1.2rem;
}
.hs-page-wrapper .section-modal-title{
  margin:0;
  color:var(--accent-cyan);
  font-size:28px !important;
  line-height:1.35;
}
.hs-page-wrapper .section-modal-subtitle{
  margin:0.5rem 0 0;
  color:var(--text-muted);
  font-size:17px;
  line-height:1.8;
}
.hs-page-wrapper .section-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  background-color: #666666 !important; 
  /*  background:linear-gradient(135deg, rgba(0,217,255,0.18), rgba(123,47,254,0.24))!important;*/
  color:#fff!important;
  font-size:28px!important;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.26)!important;
}
.hs-page-wrapper .section-modal-close:hover{
  transform:translateY(-1px);
}
.hs-page-wrapper .section-modal-footer{
  margin-top:1.35rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:center;
}
.hs-page-wrapper .section-modal-close--bottom{
  position:static;
  top:auto;
  right:auto;
  width:48px;
  height:48px;
  font-size:30px;
}


/* ② ボタンサイズと発光 */
.hs-page-wrapper .voices-toggle-btn,
.hs-page-wrapper .plan-toggle-btn,
.hs-page-wrapper .voices-btn,
.hs-page-wrapper .biz-issue-tab,
.hs-page-wrapper .faq-category-btn,
.hs-page-wrapper .portal-toggle-btn,
.hs-page-wrapper .story-tab-btn,
.hs-page-wrapper .consult-tab-btn,
.hs-page-wrapper .guide-tab-btn{
  min-height:60px;
  padding:1rem 1.65rem;
  font-size:17px;
}
.hs-page-wrapper .voices-toggle-btn{
  background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color:#fff;
  border:none;
  border-radius:999px;
  padding:1.08rem 2.45rem;
  font-weight:900;
  cursor:pointer;
  font-size:17px;
  box-shadow:0 16px 32px rgba(0, 217, 255, 0.18);
}
.hs-page-wrapper .soft-glow-trigger{
  animation:softGlowPulse 8.8s ease-in-out infinite;
}
.hs-page-wrapper .soft-blink-trigger{
  animation:softBlinkPulse 11s ease-in-out infinite;
}
@keyframes softGlowPulse{
  0%, 76%, 100%{ box-shadow:0 16px 32px rgba(0,217,255,0.18); filter:brightness(1); }
  82%{ box-shadow:0 20px 38px rgba(0,217,255,0.24), 0 0 0 2px rgba(255,255,255,0.04) inset; filter:brightness(1.02); }
  87%{ box-shadow:0 24px 46px rgba(123,47,254,0.22), 0 0 26px rgba(0,217,255,0.18); filter:brightness(1.05); }
  92%{ box-shadow:0 18px 34px rgba(0,217,255,0.20); filter:brightness(1.02); }
}
@keyframes softBlinkPulse{
  0%, 80%, 100%{ box-shadow:0 16px 32px rgba(0,217,255,0.18); opacity:1; }
  84%{ box-shadow:0 20px 38px rgba(0,217,255,0.24); opacity:0.94; }
  87%{ box-shadow:0 24px 44px rgba(123,47,254,0.22), 0 0 22px rgba(0,217,255,0.18); opacity:1; }
  89%{ box-shadow:0 18px 34px rgba(0,217,255,0.22); opacity:0.92; }
  92%{ box-shadow:0 16px 32px rgba(0,217,255,0.18); opacity:1; }
}

/* ③ タブ共通と新規セクション */
.hs-page-wrapper .story-tab-buttons,
.hs-page-wrapper .consult-tab-buttons,
.hs-page-wrapper .guide-tab-buttons,
.hs-page-wrapper .faq-category-buttons,
.hs-page-wrapper .plan-toggle,
.hs-page-wrapper .portal-toggle,
.hs-page-wrapper .voices-buttons,
.hs-page-wrapper .biz-issues-tabs{
  display:flex;
  gap:0.8rem;
  flex-wrap:wrap;
  justify-content:center;
  margin:0 0 1.2rem;
}
.hs-page-wrapper .story-tab-btn,
.hs-page-wrapper .consult-tab-btn,
.hs-page-wrapper .guide-tab-btn,
.hs-page-wrapper .portal-toggle-btn{
  background:transparent;
  border:2px solid var(--accent-cyan);
  color:var(--accent-cyan);
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition:all .25s;
}
.hs-page-wrapper .story-tab-btn:hover,
.hs-page-wrapper .consult-tab-btn:hover,
.hs-page-wrapper .guide-tab-btn:hover,
.hs-page-wrapper .portal-toggle-btn:hover{
  transform:translateY(-1px);
}
.hs-page-wrapper .portal-toggle-btn.active{
  background:linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  border-color:transparent;
  color:#fff;
}
.hs-page-wrapper .story-tab-btn.active,
.hs-page-wrapper .consult-tab-btn.active,
.hs-page-wrapper .guide-tab-btn.active{
  background:linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  border-color:transparent;
  color:#fff;
}
.hs-page-wrapper .story-panel,
.hs-page-wrapper .consult-panel,
.hs-page-wrapper .guide-panel{
  display:none;
}
.hs-page-wrapper .story-panel.active,
.hs-page-wrapper .consult-panel.active,
.hs-page-wrapper .guide-panel.active{
  display:block;
}
.hs-page-wrapper .story-panel{
  display:none;
  grid-template-columns:minmax(0, 500px) minmax(0, 1fr);
  gap:1.4rem;
  align-items:stretch;
}
.hs-page-wrapper .story-panel.active{ display:grid; }
.hs-page-wrapper .story-visual,
.hs-page-wrapper .portal-panel-media{
  display:flex;
  justify-content:center;
}
.hs-page-wrapper .story-visual img,
.hs-page-wrapper .portal-panel-media img{
 /* width:min(100%, 500px);*/
 /* aspect-ratio:1 / 2;*/
  height:auto;
  object-fit:cover;
  border-radius:24px;
  border:1px solid rgba(0,217,255,0.18);
  box-shadow:0 18px 42px rgba(0,0,0,0.26);
  background:rgba(255,255,255,0.03);
}
.hs-page-wrapper .story-copy,
.hs-page-wrapper .portal-panel-copy,
.hs-page-wrapper .guide-copy-card,
.hs-page-wrapper .form-copy-block{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:22px;
  padding:1.2rem 1.2rem 1.25rem;
}
.hs-page-wrapper .story-copy h3,
.hs-page-wrapper .guide-copy-card h3,
.hs-page-wrapper .form-copy-block h3,
.hs-page-wrapper .portal-panel-copy h3{
  margin:0 0 0.7rem;
  color:var(--text-primary);
  font-size:22px;
  line-height:1.45;
}
.hs-page-wrapper .story-copy p,
.hs-page-wrapper .story-copy li,
.hs-page-wrapper .guide-copy-card p,
.hs-page-wrapper .portal-panel-copy p,
.hs-page-wrapper .portal-panel-copy li,
.hs-page-wrapper .form-copy-block p{
  color:var(--text-muted);
  line-height:1.9;
  font-size:17px;
}
.hs-page-wrapper .story-badge,
.hs-page-wrapper .portal-badge{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.5rem 0.85rem;
  border-radius:999px;
  margin-bottom:0.9rem;
  background:rgba(0,217,255,0.08);
  border:1px solid rgba(0,217,255,0.16);
  color:var(--accent-cyan);
  font-weight:800;
}
.hs-page-wrapper .three-column-shell{
  display:grid;
  grid-template-columns:1fr minmax(0, 700px) 1fr;
  gap:1rem;
  align-items:start;
}
.hs-page-wrapper .three-column-shell--guide{
  grid-template-columns:1fr minmax(0, 900px) 1fr;
}
.hs-page-wrapper .shortcode-slot{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.2rem;
  border-radius:22px;
  border:1px dashed rgba(0,217,255,0.32);
  background:rgba(255,255,255,0.03);
  color:var(--text-secondary);
  font-weight:800;
  line-height:1.8;
}
.hs-page-wrapper .brand-story-section,
.hs-page-wrapper .consultation-section,
.hs-page-wrapper .guide-legal-section{
  padding:3rem 1.5rem;
}
.hs-page-wrapper .brand-story-inner,
.hs-page-wrapper .consultation-inner,
.hs-page-wrapper .guide-legal-inner{
  max-width:1100px;
  margin:0 auto;
}

/* ④ 既存セクションのモーダル向け再調整 */
.hs-page-wrapper .service-cases-content .cases-grid,
.hs-page-wrapper .voices-content .voices-grid,
.hs-page-wrapper .plans-content .plans-grid{
  margin-top:1rem;
}
.hs-page-wrapper .service-grid .service-card-full{
  grid-column:1 / -1;
}
.hs-page-wrapper .service-grid .service-card-full img{
  max-width:100%;
  height:auto;
}
.hs-page-wrapper .plans-content .plans-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:1.2rem;
}
.hs-page-wrapper .plans-content .plan,
.hs-page-wrapper .plans-content .plan.featured{
  grid-column:span 1 !important;
}
.hs-page-wrapper .plans-content .plan.featured{
  transform:none;
  border:2px solid rgba(0,217,255,0.65) !important;
  box-shadow:0 18px 42px rgba(0,217,255,0.12);
}
@media (max-width:1024px){
  .hs-page-wrapper .plans-content .plans-grid{
    grid-template-columns:1fr !important;
  }
}
.hs-page-wrapper .service-cases-content .case-card,
.hs-page-wrapper .voices-content .voice-card,
.hs-page-wrapper .plans-content .plan,
.hs-page-wrapper .faq-category-panel,
.hs-page-wrapper .biz-issue-panel,
.hs-page-wrapper .portal-panel{
  /*background:rgba(255,255,255,0.04);*/
  border:1px solid rgba(254, 236, 236, 0.08);
  border-radius:22px;
}
.hs-page-wrapper .portal-panel{
  display:none;
  grid-template-columns:minmax(0, 500px) minmax(0, 1fr);
  gap:1.4rem;
  padding:1rem;
  align-items:center;
}
.hs-page-wrapper .portal-panel.show{ display:grid; }
.hs-page-wrapper .biz-issue-panel[hidden]{ display:none !important; }
.hs-page-wrapper .faq-item{
  background:rgba(1, 1, 17, 0.96);
  border:1px solid rgba(178, 201, 251, 0.55);
}
.hs-page-wrapper .faq-question{
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  background:rgba(1, 1, 21, 0.96) !important;
  color:var(--text-primary) !important;
  border-radius:16px;
  text-align: left;
}
.hs-page-wrapper .faq-question:hover,
.hs-page-wrapper .faq-question:focus,
.hs-page-wrapper .faq-question:active{
  background:rgba(3, 6, 27, 0.98) !important;
}
.hs-page-wrapper .faq-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:rgba(3, 3, 25, 0.98);
  border:1px solid rgba(3, 11, 30, 0.75);
  color:var(--accent-cyan);
  line-height:1;
}
.hs-page-wrapper .faq-answer{
  background:rgba(2, 2, 26, 0.92);
}
.hs-page-wrapper .faq-answer-content{
  border-top:1px solid rgba(2, 9, 24, 0.38);
}
.hs-page-wrapper .faq-item.active .faq-icon{
  background:rgba(1, 1, 20, 0.98);
  color:var(--accent-orange);
}

/* ⑤ 4カラム → スマホ1カラム / フォントサイズ調整 */
.hs-page-wrapper,
.hs-page-wrapper p,
.hs-page-wrapper li,
.hs-page-wrapper button,
.hs-page-wrapper input,
.hs-page-wrapper textarea,
.hs-page-wrapper label{
  font-size:20px !important;
/*  text-align: center; */
color: #cccccc ;
}
.hs-page-wrapper label01{
  font-size:18px !important;
  text-align: left;
}

.hs-page-wrapper h1,
.hs-page-wrapper h2,
.hs-page-wrapper .section-title,
.hs-page-wrapper .hero-title,
.hs-page-wrapper .hero-section h1,
.hs-page-wrapper .final-cta-title{
  font-size:32px !important;
  line-height:1.35 !important;
  color: #ffffff !important;
}
.hs-page-wrapper .hero-subtitle,
.hs-page-wrapper .hero-description,
.hs-page-wrapper .section-subtitle,
.hs-page-wrapper .hero-lead,
.hs-page-wrapper .voice-text,
.hs-page-wrapper .pain-desc,
.hs-page-wrapper .arch-card .p,
.hs-page-wrapper .faq-answer-content,
.hs-page-wrapper .faq-category-sub{
  font-size:18px !important;
}
.hs-page-wrapper .voice-meta,
.hs-page-wrapper .plan-fee .k,
.hs-page-wrapper .case-tag,
.hs-page-wrapper .mini-point,
.hs-page-wrapper .faq-note,
.hs-page-wrapper .case-meta,
.hs-page-wrapper .case-results strong,
.hs-page-wrapper .biz-issue-note{
  font-size:15px !important;
}
@media (max-width: 768px){
  .hs-page-wrapper .arch-grid{ grid-template-columns:1fr !important; }
  .hs-page-wrapper .pain-grid{ grid-template-columns:1fr; }
  .hs-page-wrapper,
  .hs-page-wrapper p,
  .hs-page-wrapper li,
  .hs-page-wrapper button,
  .hs-page-wrapper input,
  .hs-page-wrapper textarea,
  .hs-page-wrapper label{ font-size:16px !important; }
  .hs-page-wrapper h1,
  .hs-page-wrapper h2,
  .hs-page-wrapper .section-title,
  .hs-page-wrapper .hero-title,
  .hs-page-wrapper .hero-section h1,
  .hs-page-wrapper .final-cta-title,
  .hs-page-wrapper .section-modal-title{ font-size:21px !important; }
  .hs-page-wrapper .section-modal-overlay{ padding:14px; }
  .hs-page-wrapper .section-modal-card{ padding:22px 14px 16px; border-radius:22px; }
  .hs-page-wrapper .section-modal-header{ padding-right:46px; }
  .hs-page-wrapper .voices-toggle-btn,
  .hs-page-wrapper .plan-toggle-btn,
  .hs-page-wrapper .voices-btn,
  .hs-page-wrapper .biz-issue-tab,
  .hs-page-wrapper .faq-category-btn,
  .hs-page-wrapper .portal-toggle-btn,
  .hs-page-wrapper .story-tab-btn,
  .hs-page-wrapper .consult-tab-btn,
  .hs-page-wrapper .guide-tab-btn{
    min-height:54px;
    padding:0.9rem 1.15rem;
    font-size:15px;
  }
  .hs-page-wrapper .story-panel,
  .hs-page-wrapper .portal-panel{ grid-template-columns:1fr; }
  .hs-page-wrapper .three-column-shell,
  .hs-page-wrapper .three-column-shell--guide{ grid-template-columns:1fr; }
  .hs-page-wrapper .faq-icon{ width:24px; height:24px; }
  .hs-page-wrapper .voice-meta,
  .hs-page-wrapper .plan-fee .k,
  .hs-page-wrapper .case-tag,
  .hs-page-wrapper .mini-point,
  .hs-page-wrapper .faq-note,
  .hs-page-wrapper .case-meta,
  .hs-page-wrapper .case-results strong,
  .hs-page-wrapper .biz-issue-note{ font-size:13px !important; }
}