.alert{
    margin-bottom: 50px;
    margin-top: 20px;
}

.has-error {
    color: #C60C00 !important;
    line-height: 1.2;
}
.has-warning {
    color: #8a6d3b !important;
    line-height: 1.2;
}
.has-success {
    line-height: 1.2;
}

label.has-error {
    white-space: normal;
}

label.has-warning {
    white-space: normal;
}

label.has-success {
    white-space: normal;
}

.required {
    color: #C60C00 !important;
}

@media(max-width:768px){
    label.has-error {
        display: block;
        margin-top: 10px;
    }
    label.has-warning {
        display: block;
        margin-top: 10px;
    }
    label.has-success {
        display: block;
        margin-top: 10px;
    }
}

.has-error input,
.has-error select,
.has-error .select2-container--default .select2-selection--single,
.has-error textarea
{
    background-color: #DFD2D1 !important;
}
.has-warning input,
.has-warning select,
.has-warning .select2-container--default .select2-selection--single,
.has-warning textarea
{
    background-color: #8a6d3b !important;
}
.has-success input,
.has-success select,
.has-success .select2-container--default .select2-selection--single,
.has-success textarea{
}

.alert {
    line-height: 1.6;
}
.alert.has-success{
    padding-left: 40px;
    position: relative;
}
.alert.has-success:before{
    content: "";
    position: absolute;
    top: 0px;
    left:0px;
    display: block;
    width:22px;
    height: 22px;
    background: url(https://mietell.com/wp-content/themes/blankslate-mietell/images/ic_checked.svg) no-repeat 0 0;
}

th.wd-290{
    width: 290px;
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    display: inline-block;
    height: 52px;
    border: none;
    background-color: #C8C8C8;
    color: #000;
    outline: none;
    padding: 16px 20px;
    width: 600px;
    max-width: 100%;
    font-family: "Noto Serif JP", serif;
    box-sizing: border-box;
    font-size: 15px;
    border-radius: 0px;
}

.StripeElement--invalid {
    border-color: #C60C00;
}

.StripeElement--invalid-font {
    color: #C60C00;
}

.StripeElement--webkit-autofill {
    background-color: #C60C00 !important;
}

.ElementsApp .InputElement.is-invalid {
    color: #C60C00;
}

.cc {
    font-size: 30px;
}

button:disabled{
    opacity: 0.5;
}
input:read-only{
    opacity: 0.5;
}

.g-recaptcha {
    display: inline-block;
}

.text-nowrap {
    white-space: nowrap;
}

.panel{
    border: 2px #004832 solid;
    padding: 20px;
    margin: 5px;
}
.panel:first-of-type {
    margin-left: 0px;
}
.panel:last-of-type {
    margin-right: 0px;
}

.absolute{
    white-space: nowrap;
}

@media(max-width:768px){
    .panel{
        margin: 20px 0px;
    }
    .absolute{
        white-space: normal;
    }
    .rains-btn {
        margin-top: 20px;
    }
}

.option-banner {
    padding: 2px 10px;
}

.on-tips{
    top: 25px !important;
}

.rains-img{
    width: 250px;
    height: auto;
}

.modal {
    overflow-y: auto;
}

.modal.dialog dialog {
    max-height: 95%;
}

.property-menu {
    list-style: none; /* リストマーカーを削除 */
    padding: 0;
    margin: 0;
    width: 100%;
}

.property-menu .item {
    cursor: pointer;
}
.property-menu li {
    margin: 0;
    padding: 8px 0;
    list-style-type: none;
}

.property-menu .divider {
    margin: 8px 0;
}

.close-button{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: transparent;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #7E7E7E;
    width: 40px !important;
}

.modal.dialog.ticket {
    padding: 1rem;
}

.modal.dialog.ticket .scrollable {
    max-height: 505px;
    overflow-y: auto;
    width: 100%;
}

.modal.dialog.ticket table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.modal.dialog.ticket table td,
.modal.dialog.ticket table th {
    padding: 0.75rem 1rem;
    border-top: 1px solid #ccc;
    text-align: left;
}

.modal.dialog.ticket table th {
    font-weight: bold;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ccc;
}

.modal.dialog.ticket .close-button {
    float: right;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    margin: 0.5rem;
}

.modal.dialog.ticket dialog {
    padding: 1.5rem;
    border: none;
    max-width: 500px;
    width: 100%;
}

@media (max-width: 768px) {
    .modal.dialog.ticket dialog {
        width: 80%;
    }
    .modal.dialog.ticket .scrollable {
        max-height: 480px;
    }
}

.keyword-input {
    flex: 0 0 290px;  /* PC時は300px固定 */
}

@media (max-width: 768px) {
    .keyword-input {
        flex: 1 1 100%; /* スマホ時は幅100% */
    }
}