/* -*- coding:utf-8; mode:css -*- */

/* Internet Explorer 10 in Windows 8 and Windows Phone 8
 *
 * See: http://getbootstrap.com/getting-started/#browsers
 *
 * Internet Explorer 10 doesn't differentiate device width from viewport width,
 * and thus doesn't properly apply the media queries in Bootstrap's CSS.
 * Normally you'd just add a quick snippet of CSS to fix this:
 */
@-ms-viewport {
    width: device-width;
}

html,body {
    color: #ec6f71;
}


.top-notification {
    color: #515151;
    border-bottom: 1px solid #f0f0f0;
}


.keyvisual-bwj2019 {
    width:60%;
    margin: 0 20% 3rem;
}

.keyvisual-bwj2019 img {
    display:block;
    margin: 3rem auto 0 auto;
}

.keyvisual {
    width:60%;
    margin: 0 20% 3rem;
}

.keyvisual img {
    width:60%;
    display:block;
    margin: 2rem auto 4rem auto;
}


form {
    width:40%;
    margin-left: auto;
    margin-right: auto;
}

form input.form-control {
    border: 1px solid #ec6f71;
    margin-bottom: 5px;
    border-radius: 3px;
}

form button.form-control {
    color: white;
    background-color:#ec6f71;
}

.qr-wrapper {
    width:40%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

.qr-btn {
    color: #ec6f71;
    background-color:white;
    border-color: #ec6f71;
}

.close-btn {
    color: white;
    background-color:#ec6f71;
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.modal {
    text-align: center;
}

#qrcode {
    width: 250px;
}

.line-qr {
    width: 400px;
}

.banner {
    margin-top: 1rem;
}