@charset "utf-8";

/* commons */

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

@media (min-width: 769px) {

    #visual {
        background: url( ../images/main-img.jpg ) no-repeat center center;
        background-size: cover;
        padding: 16px 0 20px;
    }

/* -------------------------------- form */

    #visual .searches {
        color: #fff;
        font-size: 1.6rem;
        background: rgba( 0, 0, 0, .6 );
        padding: 20px 20px 32px 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #visual .searches h2 {
        font-size: 2.0rem;
        font-weight: normal;
        margin: 0 0 10px;
    }

    #visual .searches .upper {
        margin: 0 0 20px;
    }

/* -------------------------------- carousel-wrap */

    #carousel-wrap {
        display: none;
        background: rgba( 255, 255, 255, .6 );
        padding: 10px 0;
        margin: 16px 0 0;
    }

    #carousel-wrap > h3 {
        font-size: 1.4rem;
        padding: 0 0 6px 10px;
    }

    #historys .slick-slider {
        display: none;
    }

    #historys .slick-initialized.slick-slider {
        display: block;
    }

    #historys div a {
        width: 380px;
        color: #333;
        background: #fff;
        margin: 0 5px;
    }

    #historys div a > figure {
        width: 104px;
    }

    #historys div a > div {
        padding: 5px 12px;
    }

    #historys div a > div h4 {
        font-size: 1.4rem;
        line-height: 1.2;
        margin: 0 0 6px;
    }

    #historys div a > div .date {
        color: #878787;
        font-size: 1.2rem;
    }

/* -------------------------------- lead-wrap */

    #lead-wrap {
        margin: 6px 0 32px;
    }

    #lead-wrap li {
        vertical-align: top;
        position: relative;
    }

    #lead-wrap li::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: "\f058";
        color: #6f0318;
        font-size: 24px;
        position: absolute;
        top: -4px;
        left: 0;
    }

    #lead-wrap li >div {
        margin: 0 0 0 28px;
    }

    #lead-wrap h2 {
        color: #6f0318;
        font-size: 1.6rem;
        font-weight: bold;
        margin: 0 0 8px;
    }

    #lead-wrap h2 br {
        display: none;
    }

    #lead-wrap p {
        line-height: 1.8;
    }
/* -------------------------------- news */
    #news {
        margin: 0px 0 12px;
        padding:10px;
        border: solid #D0D0D0;
        line-height: 20px;
    }

    #news > h3 {
        font-size: 2.0rem;
        font-weight: normal;
        margin: 0 0 10px;
    }

    #news li {
        margin: 10px 0 10px 20px;
    }

    #news p {
        margin: 10px 0 20px 10px;
    }

/* -------------------------------- recommend-city */

    #recommend-city {
        margin: 0 0 12px;
    }

    #recommend-city > h3 {
        font-size: 2.0rem;
        font-weight: normal;
        margin: 0 0 10px;
    }

    #recommend-city li {
        margin: 10px 0;
    }

    #recommend-city li .atag {
        display: block;
    }

    
    #recommend-city figure {
        position: relative;
    }

    #recommend-city .fotolia {
        position: absolute;
        left: 8px;
        bottom: 8px;
        color: #fff;
        font-size: 1.0rem;
    }
    
    #recommend-city img {
        width: 272px;
        height:126px;
        object-fit: cover;
        border: #ccc 1px solid;
    }

    #recommend-city .caption {
        position: absolute;
        top: 8px;
        left: 8px;
        display: inline-block;
        color: #fff;
        background: #6f0318;
        font-size: 1.6rem;
        padding: 6px 12px;
    }

    #recommend-city li p {
        color: #333;
        border-left: #ccc 1px solid;
        border-right: #ccc 1px solid;
        border-bottom: #ccc 1px solid;
        padding: 8px;
    }

/* -------------------------------- popular-city */

    #popular-city > h3 {
        font-size: 2.0rem;
        font-weight: normal;
        margin: 0 0 16px;
    }

    #popular-city div > dl:not(last-child) {
        margin: 0 0 16px;
    }

    #popular-city dt {
        color: #6f0318;
        font-weight: bold;
        margin: 0 0 8px;
    }

    #popular-city dl dd > a {
        display: inline-block;
        color: #333;
        margin: 0 1em 0 0;
    }

    #popular-city dl dd a:not(:last-child)::after {
        content: "|";
        margin: 0 0 0 1em;
    }
} /* end PC */



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

@media (max-width: 768px) {
/* -------------------------------- news */
    #news {
        margin: 0px 0 12px;
        padding:10px;
        border: solid #D0D0D0;
        line-height: 20px;
    }

    #news > h3 {
        font-size: 2.0rem;
        font-weight: normal;
        margin: 0 0 10px;
    }

    #news li {
        margin: 10px 0 10px 20px;
    }

    #news p {
        margin: 10px 0 20px 10px;
    }

    #visual {
        border-bottom: 2px #cbcbcb solid;
    }

    #searches.inside {
        padding: 0;
    }

    #searches h2 {
        border-bottom: 2px #cbcbcb solid;
        font-size: 1.8rem;
        padding: 0 13px 6px;
        margin: 0 0 12px;
    }

    #searchbox {
        border-bottom: 2px #cbcbcb solid;
        padding: 0 13px 20px;
    }

    #searchbox .under > *:not(p),
#searchbox .under .reset {
        display: none !important;
    }

    #searchbox dl {
        margin: 0 0 12px;
    }

    #searchbox dt {
        font-size: 1.4rem;
        margin: 0 0 6px;
    }

    #searchbox .name-wrap input,
#searchbox .check-wrap dd div,
#searchbox .count-wrap {
        border: 2px #333 solid;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    #searches input#stay {
        border: none;
        background: none;
        font-weight: bold;
    }

/* name-wrap */

    #searchbox .name-wrap dd {
        position: relative;
    }

    #searchbox .name-wrap input {
        width: 100%;
        font-size: 1.4rem;
        padding: 10px 8px 10px 30px;
    }

    #searchbox .name-wrap dd label {
        position: absolute;
        top: 50%;
        left: 10px;
        -webkit-transform: translateY(-50%);
 /* Safari用 */
        transform: translateY(-50%);
        font-size: 16px;
        color: #878787;
    }

/* check-wrap */

    #searchbox .check-wrap {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    #searchbox .check-wrap > li {
        display: table-cell;
        padding: 0 0 0 10px;
    }

    #searchbox .check-wrap > li:first-child {
        padding: 0 10px 0 0;
    }

    #searchbox .check-wrap > li dd div {
        text-align: center;
        font-weight: normal;
        font-size: 2.0rem;
        line-height: 1.4;
        padding: 0px 8px 8px;
    }

    #searchbox .check-wrap > li dd div small {
        font-size: 1.3rem;
    }

/* noframe-wrap */

    #searchbox .stay {
        color: #6f0318;
        font-size: 1.6rem;
        font-weight: bold;
        text-align: right;
        margin: 0 0 10px;
    }

/* count-wrap */

    #searchbox .count-wrap {
        font-size: 1.6rem;
        padding: 6px 12px;
        margin: 0 0 16px;
    }

    #searchbox .count-wrap small {
        font-size: 1.3rem;
        font-weight: normal;
    }

    #searchbox .count-wrap strong {
        font-size: 3.0rem;
        font-weight: normal;
        margin: 0 6px 0 0;
    }

    #searchbox .count-wrap a {
        color: #6f0318;
        font-size: 3.4rem;
        margin: 0 0 0 8px;
    }

    #searchbox .count-wrap table {
        width: 100%;
    }

    #searchbox .count-wrap table th,
#searchbox .count-wrap table td {
        padding: 6px 4px;
    }

    #searchbox .count-wrap table th {
        width: 48%;
        text-align: right;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #searchbox .count-wrap table td:not(.count) {
        text-align: right;
    }

    #searchbox .count-wrap table tr:not( :last-child ) {
        border-bottom: 1px #333 dotted;
    }

/* submit */

    #searches #submit_button {
        width: 100%;
        font-size: 1.8rem;
        padding: 12px 50px;
    }

/* -------------------------------- carousel-wrap */

    #carousel-wrap {
        padding: 20px 0;
    }

    #carousel-wrap > h3 {
        font-size: 1.8rem;
        padding: 0 13px 10px;
    }

    #historys > div {
        margin: 0 0 12px;
    }

    #historys div a {
        display: table;
        width: 100%;
        border: 1px #ccc solid;
        color: #333;
        background: #fff;
    }

    #historys div a > figure {
        display: table-cell;
        width: 104px;
        vertical-align: middle;
    }

    #historys div a > div {
        display: table-cell;
        padding: 5px 12px;
        vertical-align: middle;
    }

    #historys div a > div h4 {
        font-size: 1.4rem;
        line-height: 1.3;
        margin: 0 0 6px;
    }

    #historys div a > div .date {
        color: #878787;
        font-size: 1.2rem;
    }

    #historys > div:nth-child( n+ 4 ) {
        display: none;
    }

    #historys.open > div:nth-child( n+ 4 ) {
        display: block;
    }

/* more */

    #hisroty-more {
        color: #6f0318;
        margin: 20px 13px 0;
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
    }

    #hisroty-more i {
        margin: 0 4px 0 0;
        font-size: 3.0rem;
        vertical-align: middle;
    }


/* -------------------------------- lead-wrap */

    #lead-wrap {
        padding: 28px 0 0;
    }

    #lead-wrap li {
        margin: 0 0 24px;
        position: relative;
    }

    #lead-wrap li::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: "\f058";
        color: #6f0318;
        font-size: 28px;
        position: absolute;
        top: -0;
        left: 0;
    }

    #lead-wrap li >div {
        margin: 0 0 0 32px;
    }

    #lead-wrap h2 {
        color: #6f0318;
        font-size: 1.7rem;
        line-height: 1.5;
        font-weight: bold;
        margin: 0 0 6px;
    }

    #lead-wrap p {
        line-height: 1.8;
    }

    #lead-wrap p br {
        display: none;
    }


/* -------------------------------- form */

    #visual .searches.inside {
        background: #fff;
    }

    #visual .searches h2 {
        font-size: 2.0rem;
        font-weight: normal;
        padding-top: 0;
        margin: 0 0 10px;
    }

    #visual .searches .upper {
        margin: 0 0 20px;
    }
} /* end MOBILES */


/* お知らせ */
#info {
    border-top: 4px solid #231762;
    background: #f5f5f5;
    padding: 10px 20px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
#info h2 {
    display: inline-block;
    border-bottom: 2px solid #bbb7c2;
    margin-bottom: 16px;
    padding: 8px;
    font-size: 17px;
    color: #231762;
}
#info ul {
    list-style: disc;
    padding: 0 20px 16px;
    font-weight: bold;
}
#info ul li {
    font-weight: normal;
    margin-bottom: 10px;
}

#info dl {
    padding: 16px;
    font-weight: bold;
}

#info .red {
    color: #ba0009;
}
#info .sign {
    margin-top: 20px;
    text-align: right;
}

#info .red {
    color: #ba0009;
}
#info .sign {
    margin-top: 20px;
    text-align: right;
}
@media (max-width: 768px) {
    #info {
        margin-top: 15px;
    }
}
@media (min-width:521px) {
#info dl dt {
    float: left;
    margin-right: 20px;
    margin-bottom: 3px;
}
#info dl dd {
    margin-bottom: 3px;
}
}
@media (max-width:520px) {
#info dl {
    line-height: 1.2;
}
#info dl dd {
    margin-bottom: 14px;
    padding-left: 1em;
}
}