/* ===========================================
   Real Game Shop Simulator
   style.css
=========================================== */

:root{

    --main:#2563eb;
    --sub:#60a5fa;
    --accent:#22c55e;

    --dark:#0f172a;
    --dark2:#1e293b;

    --text:#1f2937;
    --gray:#6b7280;

    --bg:#f8fafc;

    --shadow:0 10px 35px rgba(0,0,0,.08);

    --radius:22px;

}

html{

    scroll-behavior:smooth;

}

#contents{
    scroll-margin-top:100px;
}

body{

    font-family:
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.9;

}

footer {
    position: relative; /* z-indexを有効にするために必要 */
    z-index: 9999;      /* 他の要素より手前に表示する */
}

footer a {
    position: relative;
    z-index: 10000;
}

/* ---------------------------
section
----------------------------*/

section{

    padding:100px 0;

}

.container{

    width:min(1100px,92%);
    margin:auto;

}

.check-list{
    max-width:500px;
    margin:50px auto;
}

.check-item{
    display:flex;
    align-items:center;
    gap:18px;
    margin:22px 0;
}

.check-item span{
    font-size:32px;
}

.check-item p{
    font-size:34px;
    font-weight:700;
    color:#fff;
}

.check-item{
    background:#101827;
    border:1px solid rgba(34,197,94,.25);
    border-radius:16px;
    padding:18px 24px;
}

/* ---------------------------
Hero
----------------------------*/

.hero{

    position:relative;
    z-index:1;


    min-height:100vh;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            90deg,
            rgba(8, 10, 25, 0.95) 0%,   /* 左端：ほぼ真っ黒にして文字を完全に浮かせる */
            rgba(8, 10, 25, 0.85) 30%,  /* 文字の背景エリア：しっかり暗めをキープ */
            rgba(8, 10, 25, 0.70) 60%,  /* 中間：徐々に背景が見え始める */
            rgba(8, 10, 25, 0.10) 100%  /* 右端：背景画像を見せつつ、白飛びを抑える */
        ),
        url("../img/hero.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color:#fff;

}

.hero .container{
    position:relative;
    z-index:2;
}



.hero-brand{

    display:inline-block;

    padding:.8rem 1.5rem;

    border:2px solid #22c55e;

    border-radius:999px;

    font-size:2.2rem;

    font-weight:800;

    letter-spacing:.25em;

    background:rgba(34,197,94,.15);

    backdrop-filter:blur(10px);

}

.hero h1{

    font-size:60px;

    line-height:1.2;

    font-weight:900;

}

.hero p{

    margin-top:30px;

    font-size:22px;

    color:#dbeafe;

}

.hero-button{

    margin-top:45px;

}

.hero-cards{
    display:flex;
    gap:24px;
    margin-top:70px;
    flex-wrap:wrap;
}

.hero-card{

    width: 280px;

    padding:15px;

    border-radius:20px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    transition:.3s;
}

.hero-card:hover{

    transform:translateY(-8px);

    border-color:#22c55e;

    box-shadow:0 15px 40px rgba(34,197,94,.18);

}

.card-icon{

    font-size:42px;

    margin-bottom:18px;
}

.hero-card h3{

    font-size:24px;

    margin-bottom:14px;

    font-weight:700;
}

.hero-card p{

    color:#cbd5e1;

    line-height:1.8;
}


/* ---------------------------
Button
----------------------------*/

.btn{

display:inline-block;

padding:

18px
45px;

background:

linear-gradient(
135deg,
#2563eb,
#3b82f6
);

color:white;

font-weight:bold;

border-radius:999px;

transition:.3s;

box-shadow:

0 12px 30px
rgba(34,197,94,.45);

}

.btn:hover{

transform:

translateY(-4px);

box-shadow:

0 20px 40px
rgba(37,99,235,.4);

}


/* ---------------------------
Card
----------------------------*/

.card{

background:white;

border-radius:

var(--radius);

padding:40px;

box-shadow:

var(--shadow);

margin-bottom:35px;

transition:.3s;

}

.card:hover{

transform:

translateY(-6px);

}


/* ---------------------------
Heading
----------------------------*/

.heading{

font-size:42px;

font-weight:900;

margin-bottom:20px;

position:relative;

}

.heading::after{

content:"";

display:block;

width:90px;

height:5px;

background:

linear-gradient(
90deg,
#2563eb,
#22c55e
);

margin-top:18px;

border-radius:999px;

}


/* ---------------------------
Subtitle
----------------------------*/

.sub{

font-size:22px;

color:var(--gray);

margin-bottom:60px;

}


/* ---------------------------
Compare Box
----------------------------*/

.compare{

display:grid;

grid-template-columns:

1fr 1fr;

gap:35px;

}

.compare .box{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

}


/* ---------------------------
Flow
----------------------------*/

.flow{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

}

.flow-item{

background:white;

padding:

25px 35px;

border-radius:20px;

box-shadow:var(--shadow);

font-weight:bold;

min-width:180px;

text-align:center;

}

.arrow{

font-size:34px;

color:#2563eb;

}


/* ---------------------------
Table
----------------------------*/

table{

width:100%;

border-collapse:collapse;

margin-top:40px;

background:white;

box-shadow:var(--shadow);

}

th{

background:#2563eb;

color:white;

padding:18px;

}

td{

padding:18px;

border-bottom:

1px solid #eee;

}


/* ---------------------------
Image
----------------------------*/

img{

max-width:100%;

display:block;

}

.round{

border-radius:18px;

box-shadow:var(--shadow);

}


/* ---------------------------
CTA
----------------------------*/

.cta{

padding:

120px 0;

text-align:center;

background:

linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

color:white;

}

.cta h2{

font-size:50px;

font-weight:900;

}

.cta p{

margin:

25px auto 50px;

max-width:700px;

font-size:22px;

}


/* ---------------------------
Footer
----------------------------*/

footer{

padding:50px;

text-align:center;

background:#0f172a;

color:white;

}


/* ---------------------------
Animation
----------------------------*/

.fade{

opacity:0;

transform:

translateY(40px);

transition:

1s;

}

.fade.show{

opacity:1;

transform:

translateY(0);

}


/* ---------------------------
Responsive
----------------------------*/

@media(max-width:768px){

.hero{

text-align:center;

}

.hero h1{

font: size 40px;

}

.heading{

font-size:30px;

}

.compare{

grid-template-columns:1fr;

}

.flow{

flex-direction:column;

}

.cta h2{

font-size:34px;

}

}

:root{

    --bg:#08131f;

    --card:#132233;

    --main:#3B82F6;

    --sub:#60A5FA;

    --green:#22C55E;

    --gold:#FBBF24;

    --red:#EF4444;

    --text:#F8FAFC;

}

body{

    background:

    radial-gradient(circle at top,
    #15355d,
    #08131f 65%);

    color:white;

}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
      radial-gradient(circle,#3b82f633 1px,transparent 1px);
    background-size:40px 40px;
    opacity:.2;
}

.strategy-copy{

    max-width:900px;

    margin:0 auto 0px;

    text-align:center;

    font-size:35px;

    line-height:2;

    font-weight:700;

    color:#ddd;

}



.card{

    background:rgba(255,255,255,.05);
    
    backdrop-filter:blur(15px);
    
    border:
    
    1px solid rgba(255,255,255,.1);
    
    border-radius:25px;
    
    box-shadow:
    
    0 20px 50px
    
    rgba(0,0,0,.45);
    
    }

    .flow-card{

        background:#111827;
        border:1px solid rgba(255,255,255,.08);
        border-radius:24px;
        padding:40px 30px;
        text-align:center;
        position:relative;
        transition:.3s;
        
        }
        
        .flow-card:hover{
        
        transform:translateY(-8px);
        border-color:#22c55e;
        
        }
        
        .flow-icon{
        
        font-size:64px;
        margin-bottom:24px;
        
        }
        
        .flow-card h3{
        
        font-size:30px;
        font-weight:800;
        margin-bottom:20px;
        
        }
        
        .flow-card p{
        
        color:#cbd5e1;
        line-height:1.9;
        
        }
        
        .flow-arrow{
        
        position:absolute;
        right:-26px;
        top:50%;
        transform:translateY(-50%);
        font-size:40px;
        color:#22c55e;
        
        }
        
        .flow-card:last-child .flow-arrow{
        
        display:none;
        
        }
        
        @media(max-width:1024px){
        
        .flow-arrow{
        
        display:none;
        
        }
        
        }

    .heading{

        font-size:48px;
        
        font-weight:900;
        
        color:white;
        
        text-shadow:
        
        0 0 15px
        
        rgba(96,165,250,.4);
        
        }

        .btn{

            background:
            
            linear-gradient(
            
            135deg,
            
            #22C55E,
            
            #16A34A
            
            );
            
            padding:
            
            22px 55px;
            
            border-radius:999px;
            
            font-size:20px;
            
            font-weight:bold;
            
            box-shadow:
            
            0 0 25px
            
            rgba(34,197,94,.5);
            
            transition:.3s;
            
            }
            
            .btn:hover{
            
            transform:
            
            translateY(-6px)
            scale(1.05);
            
            box-shadow:
            
            0 0 50px
            
            rgba(34,197,94,.8);
            
            }

            .quest{

                background:#132233;
                
                padding:40px;
                
                border-radius:25px;
                
                transition:.35s;
                
                overflow:hidden;
                
                position:relative;
                
                }
                
                .quest::before{
                
                content:"";
                
                position:absolute;
                
                top:0;
                left:0;
                
                height:5px;
                
                width:100%;
                
                background:
                
                linear-gradient(
                
                90deg,
                
                #3B82F6,
                
                #22C55E
                
                );
                
                }

                .compare-card{

                    display:flex;
                    
                    gap:40px;
                    
                    }
                    
                    .compare-item{
                    
                    flex:1;
                    
                    background:#132233;
                    
                    padding:40px;
                    
                    border-radius:25px;
                    
                    position:relative;
                    
                    overflow:hidden;
                    
                    }
                    
                    .compare-item::before{
                    
                    content:"";
                    
                    position:absolute;
                    
                    top:0;
                    
                    left:0;
                    
                    width:100%;
                    
                    height:6px;
                    
                    background:
                    
                    linear-gradient(90deg,#3b82f6,#22c55e);
                    
                    }

                    .lesson-card{

                        position:relative;
                        
                        background:#122033;
                        
                        border-radius:24px;
                        
                        padding:40px;
                        
                        transition:.35s;
                        
                        }
                        
                        .lesson-card:hover{
                        
                        transform:
                        
                        translateY(-10px);
                        
                        }
                        
                        .lesson-number{
                        
                        font-size:70px;
                        
                        opacity:.08;
                        
                        position:absolute;
                        
                        right:20px;
                        
                        bottom:-10px;
                        
                        font-weight:900;
                        
                        }

                        .flow{

                            display:grid;
                            
                            grid-template-columns:
                            
                            repeat(5,1fr);
                            
                            gap:30px;
                            
                            }
                            
                            .flow-box{
                            
                            background:#132233;
                            
                            border-radius:20px;
                            
                            padding:25px;
                            
                            text-align:center;
                            
                            }

                            .check-list li{

                                padding-left:35px;
                                
                                position:relative;
                                
                                margin-bottom:15px;
                                
                                }
                                
                                .check-list li::before{
                                
                                content:"✓";
                                
                                position:absolute;
                                
                                left:0;
                                
                                color:#22c55e;
                                
                                font-weight:bold;
                                
                                }

                                .exp{

                                    height:14px;
                                    
                                    background:#23374d;
                                    
                                    border-radius:999px;
                                    
                                    overflow:hidden;
                                    
                                    }
                                    
                                    .exp span{
                                    
                                    display:block;
                                    
                                    width:80%;
                                    
                                    height:100%;
                                    
                                    background:
                                    
                                    linear-gradient(
                                    
                                    90deg,
                                    
                                    #22c55e,
                                    
                                    #facc15
                                    
                                    );
                                    
                                    }

                                    .badge{

                                        display:inline-block;
                                        
                                        padding:
                                        
                                        6px 15px;
                                        
                                        background:#22c55e;
                                        
                                        border-radius:999px;
                                        
                                        font-size:13px;
                                        
                                        font-weight:bold;
                                        
                                        }

                                        .icon{

                                            width:65px;
                                            
                                            height:65px;
                                            
                                            display:flex;
                                            
                                            justify-content:center;
                                            
                                            align-items:center;
                                            
                                            background:#1d4ed8;
                                            
                                            border-radius:18px;
                                            
                                            font-size:28px;
                                            
                                            }

                                            .balloon{

                                                position:relative;
                                                
                                                padding:30px;
                                                
                                                background:white;
                                                
                                                border-radius:20px;
                                                
                                                }
                                                
                                                .balloon::after{
                                                
                                                content:"";
                                                
                                                position:absolute;
                                                
                                                left:40px;
                                                
                                                bottom:-15px;
                                                
                                                border:
                                                
                                                15px solid transparent;
                                                
                                                border-top:white;
                                                
                                                }

                                                .fade-up

.fade-left

.fade-right

.zoom

.rotate

.blur

.scale