@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@700;900&family=Montserrat:wght@700;800;900&family=Charm:wght@400;700&display=swap');

/* =========================================================
   1. ベース設定・変数（完全ルール化）
========================================================= */
:root {
    /* カラーパレット */
    --bg-dark: #050505;      /* 漆黒（少しだけグレーを混ぜて高級感を出す） */
    --card-bg: #121212;      /* カード背景（奥行きを持たせる） */
    --text-main: #ffffff;    /* 基本テキスト */
    --text-sub: #9999a8;     /* 控えめな説明文 */
    
    /* ネオンカラー（明確な役割分担） */
    --neon-cyan: #00f0ff;    /* 理屈・構造・装飾用のクールな水色 */
    --neon-pink: #ff007a;    /* 感情・アクション・強調用のホットピンク */

    /* フォント定義 */
    --f-jp: 'Noto Serif JP', serif;             /* 高級感（見出し用） */
    --f-jp-gothic: 'Noto Sans JP', sans-serif;  /* 可読性（本文用） */
    --f-en: 'Montserrat', sans-serif;           /* スタイリッシュ（数字・英語用） */
    --f-script: 'Charm', cursive;               /* エモさ（装飾用） */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--f-jp-gothic); /* ベースは読みやすいゴシックに */
    line-height: 1.8;
    letter-spacing: 0.08em;
    -webkit-font-smoothing: antialiased;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    /* シアンの微かな光が上部から落ちるような高級な背景 */
    background-image: radial-gradient(circle at 50% -10%, rgba(0, 240, 255, 0.1) 0%, var(--bg-dark) 50%);
}

a { text-decoration: none; color: inherit; }
img { width: 100%; height: auto; }

/* =========================================================
   2. ユーティリティ（テキスト制御・装飾）
========================================================= */
/* スマホでの変な改行を防ぐブロック化 */
.txt-block { display: inline-block; white-space: nowrap; }

/* キラーワード（感情・アクション）を強調するピンク */
.text-pink {
    color: var(--neon-pink);
    text-shadow: 0 0 15px rgba(255, 0, 122, 0.4);
    font-weight: 900;
}

/* 理屈・メリットを強調するシアン */
.text-cyan {
    color: var(--neon-cyan);
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
    font-weight: 900;
}

/* 文字サイズ強調 */
.text-large { font-size: 1.2em; line-height: 1.4; display: inline-block; margin-top: 5px; }

/* =========================================================
   3. 共通セクション設定（余白と見出し）
========================================================= */
.kp-section { padding: 120px 20px; } /* 余白を広げて窮屈さを解消 */

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

/* セクションの英語小見出し（シアンで統一） */
.kp-sec-en {
    display: block;
    font-family: var(--f-en);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--neon-cyan);
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.kp-sec-title {
    font-family: var(--f-jp);
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* =========================================================
   4. ヘッダー
========================================================= */
.kp-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%; padding: 25px 20px;
    background: linear-gradient(to bottom, rgba(5,5,5,1) 0%, rgba(5,5,5,0) 100%);
    z-index: 100; text-align: center;
    pointer-events: none; /* 下の要素を触れるように */
}

.kp-logo {
    font-family: var(--f-en);
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.6); /* ロゴはシアンの光彩 */
}

/* =========================================================
   5. ヒーローセクション（ファーストビュー）
========================================================= */
.kp-hero { padding-top: 160px; text-align: center; position: relative; }
.kp-hero-content { padding: 0 20px 60px; }

/* ラベルはシアンでクールに */
.kp-badge {
    font-family: var(--f-jp-gothic);
    display: inline-block;
    background: rgba(0, 240, 255, 0.05); 
    border: 1px solid rgba(0, 240, 255, 0.5);
    color: var(--neon-cyan);
    padding: 8px 25px; border-radius: 50px;
    font-size: 0.8rem; font-weight: 700; margin-bottom: 30px;
    letter-spacing: 0.1em;
}

/* メインタイトル（白メインで高貴な光彩） */
.glow-title {
    font-family: var(--f-jp);
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 
                 0 0 40px rgba(0, 240, 255, 0.3); /* シアンの微かな後光 */
}

/* スクリプト体（シアンで知的さを演出） */
.script-desc {
    font-family: var(--f-script);
    font-size: 1.3rem;
    color: var(--neon-cyan);
    display: block;
    margin-bottom: 40px;
}

.kp-hero-desc {
    font-size: 0.95rem;
    color: var(--text-sub);
    margin-bottom: 50px;
    line-height: 2;
}

/* =========================================================
   6. ボタン（ピンクでアクションを誘発）
========================================================= */
.kp-btn-neon {
    font-family: var(--f-jp-gothic);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff; 
    font-weight: 900; 
    font-size: 1.1rem;
    padding: 24px 40px; 
    border-radius: 50px;
    width: 100%; max-width: 340px; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

/* ピンクの強力なボタン */
.pink-glow {
    background: rgba(255, 0, 122, 0.1);
    border: 2px solid var(--neon-pink);
    box-shadow: 0 0 20px rgba(255, 0, 122, 0.4), inset 0 0 15px rgba(255, 0, 122, 0.2);
}
.pink-glow:hover, .pink-glow:active {
    background: rgba(255, 0, 122, 0.2);
    box-shadow: 0 0 30px rgba(255, 0, 122, 0.6), inset 0 0 20px rgba(255, 0, 122, 0.4);
    transform: scale(0.98);
}
.kp-btn-neon.large { font-size: 1.2rem; padding: 28px 20px; max-width: 100%; }

/* 鼓動アニメーション（CTA用） */
.pulsating { animation: pulse-pink 2.5s infinite; }
@keyframes pulse-pink {
    0% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.4), inset 0 0 15px rgba(255, 0, 122, 0.2); }
    50% { box-shadow: 0 0 40px rgba(255, 0, 122, 0.7), inset 0 0 25px rgba(255, 0, 122, 0.4); transform: scale(1.02); }
    100% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.4), inset 0 0 15px rgba(255, 0, 122, 0.2); }
}

/* =========================================================
   7. マーキー（洗練されたシアン基調）
========================================================= */
.kp-marquee {
    background: #000;
    padding: 15px 0; overflow: hidden; white-space: nowrap; position: relative;
    border-top: 1px solid rgba(0, 240, 255, 0.2);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    /* bodyのmax-width制約を突き破って画面幅いっぱいに広げる */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.kp-marquee-inner { display: inline-block; animation: marquee 38s linear infinite; }
.kp-marquee-inner span {
    font-family: var(--f-en); color: var(--text-sub); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em;
}
.kp-marquee-inner span.dot { color: var(--neon-cyan); margin: 0 15px; } /* ドットだけ水色に発光 */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================================
   8. カード系（問題・強み）
========================================================= */
.kp-problem-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px; }
.kp-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px; padding: 30px 25px;
    display: flex; align-items: center; gap: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.kp-card:hover { transform: translateY(-6px); border-color: rgba(0, 240, 255, 0.25); }
.kp-card-icon { font-size: 2.5rem; line-height: 1; }
.kp-card p { font-size: 0.95rem; font-weight: 700; line-height: 1.8; }
.kp-problem-solve { text-align: center; margin-top: 20px; font-size: 1.1rem; font-weight: 700; line-height: 1.8; }

.kp-strength-grid { display: grid; grid-template-columns: 1fr; gap: 25px; }
.kp-strength-item {
    background: var(--card-bg); border-radius: 20px; padding: 40px 30px; position: relative; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.kp-strength-item:hover { transform: translateY(-6px); border-color: rgba(0, 240, 255, 0.2); }
.kp-num {
    font-family: var(--f-en); font-size: 6rem; font-weight: 900; line-height: 1;
    position: absolute; top: -15px; right: -10px;
    color: rgba(0, 240, 255, 0.03); /* 背景番号はシアンの透かし */
}
.kp-strength-item h3 { font-size: 1.2rem; margin-bottom: 15px; color: #fff; position: relative; z-index: 1; }
.kp-strength-item p { font-size: 0.9rem; color: var(--text-sub); position: relative; z-index: 1; line-height: 1.8; }

/* =========================================================
   9. ワンストップ（シアン基調の構造的デザイン）
========================================================= */
.kp-lead-text { text-align: center; font-size: 0.95rem; color: var(--text-sub); margin-bottom: 50px; line-height: 1.8; }

.kp-steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 40px; }

.kp-step-card {
    background: rgba(18, 18, 18, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.15); /* シアンの枠 */
    border-radius: 15px; padding: 25px 15px; text-align: center;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.kp-step-card:hover { transform: translateY(-4px); border-color: rgba(0, 240, 255, 0.4); }
.kp-step-num { font-family: var(--f-en); font-size: 2rem; font-weight: 900; color: rgba(0, 240, 255, 0.3); margin-bottom: 10px; line-height: 1; }
.kp-step-name { font-family: var(--f-jp); font-size: 1.1rem; font-weight: 900; color: #fff; margin-bottom: 12px; }
.kp-step-card p { font-size: 0.75rem; color: var(--text-sub); line-height: 1.6; }

/* 最後のコミコミバナーはピンクでアクション誘導の準備 */
.kp-all-inclusive-banner {
    background: rgba(255, 0, 122, 0.05);
    border: 1px solid rgba(255, 0, 122, 0.3);
    border-radius: 15px; padding: 30px 20px; text-align: center;
}
.kp-all-inclusive-banner p { font-size: 1.1rem; font-weight: 700; line-height: 1.6; color: #fff; }

/* =========================================================
   10. フォーム＆CTAエリア（最高級の仕上げ）
========================================================= */
.kp-cta-box {
    background: var(--card-bg);
    border: 1px solid rgba(255, 0, 122, 0.3); /* ピンクの枠線で重要度をアピール */
    border-radius: 30px; padding: 60px 25px; text-align: center;
    position: relative;
    box-shadow: inset 0 0 50px rgba(255, 0, 122, 0.05);
}

.glow-title-small {
    font-family: var(--f-jp); font-size: 1.8rem; font-weight: 900; color: #fff; margin-bottom: 25px;
    text-shadow: 0 0 15px rgba(255, 0, 122, 0.6);
}

.kp-cta-desc { font-size: 0.95rem; color: var(--text-sub); margin-bottom: 40px; line-height: 2; }

/* フォーム部品（シアンベースのクールな入力欄） */
.kp-form-group { margin-bottom: 30px; text-align: left; }
.kp-form-label { display: block; font-size: 0.85rem; color: var(--neon-cyan); margin-bottom: 10px; font-weight: 700; letter-spacing: 0.1em; }

.kp-form-input, .kp-form-select {
    width: 100%; background: #000;
    border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 10px;
    padding: 18px 15px; color: #fff; font-family: var(--f-jp-gothic); font-size: 1rem;
    transition: all 0.3s ease; -webkit-appearance: none; appearance: none;
}
.kp-form-input:focus, .kp-form-select:focus {
    outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}
.kp-form-input::placeholder { color: rgba(255, 255, 255, 0.2); }

.kp-form-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 18px center; background-size: 15px;
}

.kp-form-submit { margin-top: 50px; }

.kp-note-box { margin-top: 30px; text-align: center; }
.kp-note-box p { font-size: 0.75rem; color: var(--text-sub); line-height: 1.8; }

/* =========================================================
   11. JSアニメーション用
========================================================= */
.pop-anim { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.pop-anim.is-active { opacity: 1; transform: translateY(0); }

/* =========================================================
   12. PC対応（900px以上）
   モバイルの縦積みLPを、幅を活かした構成に組み替える。
   機能（フォーム/LINE導線）とスマホ表示には手を入れない。
========================================================= */
@media (min-width: 900px) {
    body { max-width: 1100px; }
    .kp-header { padding: 30px 50px; }
    .kp-logo { font-size: 1.6rem; }

    .kp-hero { padding-top: 200px; }
    .kp-hero-content { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
    .glow-title { font-size: 4.2rem; }
    .script-desc { font-size: 1.5rem; }
    .kp-hero-desc { font-size: 1.05rem; }
    .kp-hero-cta { display: flex; justify-content: center; }
    .kp-btn-neon { width: auto; min-width: 340px; }

    .kp-section { padding: 160px 50px; }
    .kp-sec-title { font-size: 2.8rem; }
    .kp-lead-text { max-width: 600px; margin-left: auto; margin-right: auto; }

    /* PROBLEM: 縦積み3枚 → 横並び3列 */
    .kp-problem-list { flex-direction: row; align-items: stretch; max-width: 1000px; margin-left: auto; margin-right: auto; }
    .kp-card { flex: 1; flex-direction: column; text-align: center; gap: 20px; padding: 50px 30px; }
    .kp-problem-solve { max-width: 700px; margin: 20px auto 0; }

    /* STRENGTH: 縦積み3枚 → 横並び3列 */
    .kp-strength-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
    .kp-num { font-size: 5rem; }

    /* ONE STOP: 2列 → 3列でテンポよく */
    .kp-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 900px; margin: 0 auto 40px; }
    .kp-all-inclusive-banner { max-width: 700px; margin: 0 auto; }

    /* CTA: フォームを見きれる幅に収めて没入感を保つ */
    .kp-cta-box { max-width: 640px; margin: 0 auto; padding: 70px 60px; }

    /* 余白が広くなる分、控えめな背景グローで奥行きを補う */
    .kp-strength { position: relative; }
    .kp-strength::before {
        content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 700px; height: 700px; border-radius: 50%;
        background: radial-gradient(circle, rgba(0, 240, 255, 0.06), transparent 70%);
        pointer-events: none; z-index: 0;
    }
    .kp-strength .kp-sec-header, .kp-strength .kp-strength-grid { position: relative; z-index: 1; }

    .kp-cta { position: relative; }
    .kp-cta::before {
        content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 800px; height: 600px; border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 0, 122, 0.08), transparent 70%);
        pointer-events: none; z-index: 0;
    }
    .kp-cta .kp-cta-box { position: relative; z-index: 1; }
}