.cookie-banner {

    display: none;
    position: fixed;

    left: 20px;
    right: 20px;
    bottom: 20px;

    justify-content: space-between;
    align-items: center;
    gap: 24px;

    padding: 18px 22px;

    background: rgb(239,232,222);
    color: #333;

    border: 1px solid #c8c2b9;
    border-radius: 10px;

    box-shadow: 0 8px 30px rgba(0,0,0,.18);

    z-index: 99999;

    max-width: 900px;
    margin: auto;

    font-family: 'Noto Sans JP', sans-serif;

}

.cookie-text{

    flex:1;

}

.cookie-text strong{

    display:block;

    margin-bottom:8px;

    font-size:17px;

    color:#222;

}

.cookie-text p{

    margin:0;

    font-size:13px;

    line-height:1.6;

    color:#444;

}

.cookie-buttons{

    display:flex;
    gap:12px;

    flex-shrink:0;

}

.cookie-buttons button{

    padding:11px 18px;

    border:none;
    border-radius:6px;

    font-size:13px;
    letter-spacing:.5px;

    cursor:pointer;

    transition:.2s ease;

    white-space:nowrap;

}

#cookie-essential{

    background:#666;
    color:white;

}

#cookie-essential:hover{

    background:#555;

}

#cookie-accept{

    background:#d62828;
    color:white;

}

#cookie-accept:hover{

    background:#b71f1f;

}

.cookie-link{

    background:none;
    border:none;

    color:#666;

    cursor:pointer;

    font-size:12px;

    text-decoration:none;

    font-family:'Noto Sans JP', sans-serif;


  font-size: 10px;
  text-align: center;
  color: rgba(0, 0, 0, 0.1);
  padding: 0.5rem;

margin: 0

}

.cookie-link:hover{

    color:#d62828;

}

/* ---------- Mobile ---------- */

@media (max-width:700px){

    .cookie-banner{

        left:10px;
        right:10px;
        bottom:10px;

        flex-direction:column;
        align-items:stretch;

        padding:18px;

    }

    .cookie-buttons{

        width:100%;

        flex-direction:column;

    }

    .cookie-buttons button{

        width:100%;

    }

    .cookie-text{

        text-align:left;

    }

}