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

:root{
    --letter-blue:#69b9f7;
    --letter-blue-dark:#368fd5;
    --letter-blue-light:#eaf6ff;
    --letter-blue-border:#cbe8fb;

    --text-main:#263444;
    --text-sub:#788696;

    --border:#dce5ed;
    --background:#f4f8fc;
    --white:#ffffff;
}

html,
body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}

body{
    min-height:100vh;

    background:var(--background);

    display:flex;
    justify-content:center;
    align-items:flex-start;

    padding:
        max(18px, env(safe-area-inset-top))
        16px
        max(24px, env(safe-area-inset-bottom));

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

    color:var(--text-main);
}

.card{
    width:100%;
    max-width:420px;

    background:var(--white);

    border-radius:30px;

    padding:34px 22px 28px;

    text-align:center;

    box-shadow:
        0 8px 30px
        rgba(72, 112, 145, 0.08);
}

.logo{
    width:120px;
    height:auto;

    display:block;

    margin:
        0 auto
        28px;
}

h1{
    font-size:27px;
    line-height:1.45;

    color:#172131;

    margin-bottom:18px;
}

p{
    font-size:18px;
    line-height:1.8;

    color:var(--text-sub);

    margin-bottom:32px;
}

button{
    width:77%;
    min-height:54px;

    display:block;

    margin:
        0 auto
        14px;

    padding:10px 18px;

    border:none;
    border-radius:999px;

    font-family:inherit;
    font-size:18px;
    font-weight:700;

    cursor:pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

button:active{
    transform:scale(0.98);
}

.main-btn{
    background:var(--letter-blue);
    color:#ffffff;
}

.main-btn:hover{
    background:#56acf1;
}

.sub-btn{
    background:#ffffff;
    color:var(--text-main);

    border:1px solid var(--border);
}

.sub-btn:hover{
    background:#f9fcff;
    border-color:var(--letter-blue-border);
}

a{
    color:#9aa6b2;
    text-decoration:none;
}

a:hover{
    text-decoration:none;
}

.check-area{
    width:77%;

    margin:
        0 auto
        18px;

    text-align:left;

    font-size:14px;

    color:var(--text-sub);
}

.check-area a{
    color:var(--letter-blue-dark);
}

.bottom-links{
    margin-top:28px;
    margin-bottom:0;

    font-size:13px;
    line-height:1.9;

    color:#a0aab5;

    text-align:center;
}

.bottom-links a{
    font-size:13px;

    color:#a0aab5;

    text-decoration:none;
}

.input-box{
    width:77%;
    height:54px;

    margin-bottom:16px;

    padding:0 16px;

    background:#ffffff;

    border:1px solid #d2dce5;
    border-radius:14px;

    font-family:inherit;
    font-size:16px;

    color:var(--text-main);

    outline:none;
}

.input-box:focus{
    border-color:var(--letter-blue);

    box-shadow:
        0 0 0 3px
        rgba(105, 185, 247, 0.15);
}


/* -------------------------
   ホーム画面
------------------------- */

.home-intro{
    margin-bottom:28px;
}

.home-menu{
    width:100%;
    max-width:350px;

    margin:0 auto;
}

.home-section-title{
    width:100%;

    display:flex;
    align-items:center;
    gap:10px;

    margin:
        28px 0
        13px;

    font-size:14px;
    font-weight:700;

    color:#8793a0;

    text-align:left;
}

.home-section-title::after{
    content:"";

    flex:1;
    height:1px;

    background:#e8edf2;
}

.menu-btn{
    width:100%;
    min-height:68px;

    display:flex;
    align-items:center;

    margin:
        0 auto
        12px;

    padding:
        10px
        14px
        10px
        11px;

    border-radius:20px;

    box-shadow:
        0 5px 14px
        rgba(68, 107, 138, 0.07);

    text-align:left;
}

.menu-btn-primary{
    background:var(--letter-blue-light);

    border:1px solid var(--letter-blue-border);

    color:#245879;
}

.menu-btn-primary:hover{
    background:#dff2ff;
}

.menu-btn-secondary{
    background:#ffffff;

    border:1px solid #dce6ee;

    color:#344353;
}

.menu-btn-secondary:hover{
    background:#f9fcff;
    border-color:var(--letter-blue-border);
}

.menu-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-right:13px;

    background:#ffffff;

    border-radius:15px;

    box-shadow:
        0 3px 10px
        rgba(76, 124, 161, 0.09);
}

.menu-icon svg{
    width:27px;
    height:27px;

    fill:none;

    stroke:var(--letter-blue-dark);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.menu-text{
    flex:1;

    font-size:17px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:0.01em;
}

.menu-arrow{
    flex:0 0 auto;

    margin-left:10px;

    font-size:27px;
    font-weight:400;
    line-height:1;

    color:#95b9d2;
}


/* -------------------------
   小さい画面
------------------------- */

@media(max-width:380px){

    body{
        padding-left:10px;
        padding-right:10px;
    }

    .card{
        padding:
            30px
            17px
            25px;
    }

    .menu-btn{
        min-height:64px;
    }

    .menu-icon{
        width:41px;
        height:41px;

        flex-basis:41px;

        margin-right:11px;
    }

    .menu-text{
        font-size:15px;
    }
}