.sm_social_login {
    display: flex;
    flex-direction: column;
    width: 50%; /* 幅を50%に設定 */
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    margin: 0px auto; /* 左右中央に配置 */
    align-items: center;
    gap: 5px;

}

.g_id_signin {
    min-width: 250px;
    padding-left: 33px;
}

/* Styles for the line login button */
.line-login-button {
    display: inline-flex;
    background-color: #06C755; /* Green background color */
    border-radius: 5px; /* Optional: rounded corners */
    overflow: hidden; /* Prevent image overflow */
    height: 42px;
}

.line-login-button:hover {
    background: linear-gradient(
        rgba(0, 0, 0, 0.1), /* Black with 10% opacity */
        rgba(0, 0, 0, 0.1)
    ),
    #06C755; /* Original green color */
    color: rgba(0, 0, 0, 0.1); /* Hover text color */
}

.line-login-button:active {
    background: linear-gradient(
        rgba(0, 0, 0, 0.3), /* Black with 30% opacity */
        rgba(0, 0, 0, 0.3)
    ),
    #06C755; /* Original green color */
    color: rgba(0, 0, 0, 0.3); /* Active text color */
}

.line-button-content {
    display: flex !important;
    align-items: center !important;
}

.line-logo {
    width: 32px !important; /* Logo width */
    height: 32px !important; /* Logo height */
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.line-divider {
    width: 1px !important;
    height: 100% !important; /* Divider height */
    background-color: rgba(0, 0, 0, 0.08) !important; /* Divider color with 8% opacity */
}

.line-login-text {
    font-size: 14px !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Responsive Design Styles */
@media (max-width: 768px) {
    .line-login-button {
        height: 32px !important; /* Even smaller height for very small screens */
        width: 182px;
        height: 30px;
    }

    .line-logo {
        width: 26px !important; /* Further reduced logo size */
        height: 26px !important;
        margin-left:2px;
        margin-right:2px;
    }

    .line-login-text {
        font-size: 12px !important; /* Further reduced font size */
        padding-left: 26px !important;
        padding-right: 26px !important;
        text-align: center; /* テキストを中央揃え */
        margin: 0; /* デフォルトのマージンをリセット */
    }

}

@media (max-width: 480px) {
    .line-login-button {
        height: 32px !important; /* Even smaller height for very small screens */
        width: 182px;
        height: 30px;
    }

    .line-logo {
        width: 26px !important; /* Further reduced logo size */
        height: 26px !important;
        margin-left:2px;
        margin-right:2px;
    }

    .line-login-text {
        font-size: 12px !important; /* Further reduced font size */
        padding-left: 20px !important;
        padding-right: 26px !important;
        text-align: center; /* テキストを中央揃え */
        margin: 0; /* デフォルトのマージンをリセット */
    }
}