/* ===========================================
   Variables
=========================================== */

:root {

    --color-main: #2d63ff;

    --color-bg: #ffffff;

    --color-text: #222;

    --color-sub: #666;

    --color-border: rgba(255,255,255,.4);

    --shadow:
        0 25px 60px rgba(0,0,0,.08);

    --radius:24px;

}

/* ===========================================
   Reset
=========================================== */

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

body{

    font-family:

    "Hiragino Sans",
    "Yu Gothic",
    "Noto Sans JP",
    sans-serif;

    color:var(--color-text);

    background:#fff;

    overflow:hidden;

}

/* ===========================================
   Layout
=========================================== */

.container{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:32px;

    position:relative;

    z-index:10;

}

.card{

    width:min(740px,100%);

    text-align:center;

    padding:64px;

    border-radius:var(--radius);

    backdrop-filter:blur(18px);

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

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

    box-shadow:var(--shadow);

    animation:fadeUp .9s ease;

}

/* ===========================================
   Logo
=========================================== */

.logo{

    margin-bottom:42px;

}

.logo-placeholder{

    width:100%;

    height:120px;

    margin:auto;

    border-radius:18px;

    background:#ededed;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#999;

    letter-spacing:.2em;

    font-weight:bold;

    animation:float 5s ease-in-out infinite;

}

.logo-placeholder img{
	width: 180px;
}

/* ===========================================
   Typography
=========================================== */

h1{

    font-size:clamp(1.4rem,3vw,2.8rem);

    line-height:1.4;

    margin-bottom:28px;

}

.description{

    color:var(--color-sub);

    line-height:2;

    margin-bottom:36px;

    font-size:1rem;
	
		text-align:left;

}

.coming{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:#f3f5f8;

    color:var(--color-main);

    font-weight:600;

    margin-bottom:42px;

    letter-spacing:.08em;

}

/* ===========================================
   Button
=========================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:220px;

    height:58px;

    background:var(--color-main);

    color:#fff;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 30px rgba(45,99,255,.25);

}

/* ===========================================
   Background
=========================================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    background:

    linear-gradient(
    135deg,
    #ffffff,
    #f7f8fc
    );

}

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    opacity:.45;

    animation:move 18s ease-in-out infinite alternate;

}

.blob1{

    width:360px;

    height:360px;

    background:#dbe8ff;

    left:-100px;

    top:-80px;

}

.blob2{

    width:300px;

    height:300px;

    background:#eef4ff;

    right:-60px;

    bottom:-80px;

    animation-delay:3s;

}

.blob3{

    width:220px;

    height:220px;

    background:#f3f3f3;

    top:55%;

    left:60%;

    animation-delay:6s;

}

/* ===========================================
   Animation
=========================================== */

@keyframes move{

    from{

        transform:
        translate(0,0)
        scale(1);

    }

    to{

        transform:
        translate(40px,-40px)
        scale(1.12);

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(25px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/* ===========================================
   Responsive
=========================================== */

@media (max-width:768px){

    .card{

        padding:42px 28px;

    }

    .logo-placeholder{

        width:100%;
        height:90px;

    }

    .button{

        width:100%;

    }

}