@charset "utf-8";

/* commons */

.linethrough {
    text-decoration: line-through;
}

.coution {
    color: #ba0003;
}

.rank {
    color: #e98400;
}

.map-mark {
    color: #ba0003;
}

.gray-out {
    color: #858585;
}

.blue-fix {
    color: #3984b3;
}

.weight-bold {
    font-weight: bold;
}

.error-mess {
    display: block;
    padding: 10px;
/*    background: #6f0318; */
    background: #B00318;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    left: 0;
    bottom: 115%;
}

.error-mess2 {
    display: block;
    padding: 10px;
    background: #6f0318;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 50px;
/*    bottom: 115%; */
}


/* ------------------------------------------------------------- start PC */
/* max 1160px */

@media (min-width: 769px) {

/* tablewrap */

    .tablewrap {
        display: table;
        width: 100%;
    }

    .inside.tablewrap {
        width: 1160px;
        margin: 0 auto;
    }

    .tablewrap.fixed {
        table-layout: fixed;
    }

    .tablewrap > * {
        display: table-cell;
        vertical-align: middle;
    }

/* button */

    .btn {
        display: inline-block;
        color: #fff;
        text-align: center;
        padding: 0.6em 1.25em 0.4em;
        border: none;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn-red {
        background: #840222;
        -webkit-box-shadow: 0 3px 0 #500002;
        -moz-box-shadow: 0 3px 0 #500002;
        box-shadow: 0 3px 0 #500002;
    }

    
    .btn-blue,
    .btn-blue2
    {
        background: #3984b3;
        box-shadow: 0 3px 0 #1766a2;
    }
    .yoyaku .btn-blue {
        margin-left: 25px;
        background: #b0132d;
        border-bottom: 3px solid #6F0318;
        box-shadow: none;
    }
    .btn-wh {
        color: #2e2e2e;
        background: #fff;
        border: 1px #aaaaaa solid;
        padding: 0.5em 1.25em;
        -webkit-box-shadow: 0 3px 0 #eee;
        -moz-box-shadow: 0 3px 0 #eee;
        box-shadow: 0 3px 0 #eee;
    }

    .btn-gray {
        color: #fff;
        background: #878787;
        padding: 0.5em 1.25em;
        -webkit-box-shadow: 0 3px 0 #565656;
        -moz-box-shadow: 0 3px 0 #565656;
        box-shadow: 0 3px 0 #565656;
    }

/* flex-between */

    .flex-between-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
    }

    .flex-between-nowrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        /*align-items: center;*/
        width: 100%;
    }

    .flex-between-wrap-reverse {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
    }

/* float-wrap */

    .float-wrap {
        overflow: hidden;
    }

    .float-wrap > .float-right-wrap {
        float: right;
    }

    .float-wrap > .float-left-wrap {
        float: left;
    }
    #circleup {
        text-align: right;
        display:none;
    }
    .circleup {
        position: fixed;
        right: 0;
        bottom: 0;
        opacity: 0.6;
        font-size: 1.5rem;
        margin: 0 20px 4px 0;
        border-radius: 4px;
        background:#94484a;
        
    }
} /* end PC */


/* ------------------------------------------------------------------------- start MOBILES */

@media (max-width: 768px) {


/* button */

    .btn {
        display: inline-block;
        color: #fff;
        text-align: center;
        padding: 0.6em 1.25em 0.4em;
        border: none;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #circleup .btn-blue {
        background: #00bfff;
    }
    
    .btn-red,
.btn-blue,
.btn-wh {
        background: #b0132d;
    border-bottom: 3px solid #6F0318;
    }
    .btn-blue2 {
    background: #3984b3;
    border-bottom: 3px solid #1766a2;
    }
    
    .btn-gray {
        color: #fff;
        background: #878787;
        padding: 0.5em 1.25em;
    }
    #circleup {
        text-align: right;
        display:none;
        
    }
    .circleup {
        position: fixed;
        right: 50px;
        bottom: 10px;
        opacity: 0.6;

        font-size: 1.5rem;
        margin: 0 20px 4px 0;
        border-radius: 4px;
        background: #00bfff;
    }
    #recommend-city_sd h3 {
        margin-bottom: 10px;
        font-size: 2rem;
    }
    ul.flex-between-wrap li {
        position: relative;
    }
    ul.flex-between-wrap li .caption {
        position: absolute;
        font-weight: bold;
        top: 5px;
        left: 5px;
        color: #fff;
        background: #6f0318;
        padding: 8px;
    }
    ul.flex-between-wrap li p {
        position: absolute;
        background: rgba(255,255,255,0.8);
        padding: 8px;
        bottom: 5px;
        right: 5px;
    }
    ul.flex-between-wrap li a {
        display: block;
        height: 140px;
        margin-bottom: 15px;
        clear: both;
    }
    ul.flex-between-wrap li img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        float: left;
    }
    .tab_link {
        display: flex;
        margin-bottom: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .tab_link a {
        display: inline-block;
        background: #b0132d;
        border-bottom: 3px solid #6f0318;
        border-radius: 6px;
        width: 130px;
        text-align: center;
        font-size: 15px;
        color: #fff;
        margin: 5px;
        padding: 10px;
    }
    .error-mess, .error-mess2 {
        font-size: 1.1rem;
    }
} /* end MOBILES */