@charset "utf-8";
#subhead {
    height: 60px;
}
#subhead p.title {
    float: left;
    padding: 28px 0px 0px 14px;
}
#subhead h1 {
    float: right;
    padding: 33px 0px 0px 0px;
    width: 411px;
    font-size: 12px;
    line-height: 120%;
    color: #fff;
}
#subhead h1.copy002 {
    width: 372px;
}
p.pagetop {
    padding: 10px 0px;
    height: 40px;
}
p.pagetop a {
    float: right;
    display: block;
    width: 180px;
    height: 40px;
    background: url("/image/ayana_spabali/bt_pagetop.gif") no-repeat 0px 0px;
}
p.pagetop a:hover {
    background-position: bottom;
}
p.pagetop a span {
    position: absolute;
    left: -7650px;
}
/* ------------------------------------------------------------ */
.underColumn {
    background-color: #d6f2fd;
    background-repeat: repeat;
}
.underColumn h2 {
    position: relative;
}
/* ------------------------------------------------------------ */
img {
    vertical-align: text-bottom;
}
li {
    list-style-type: none;
}
p {
    line-height: 1.4em;
}
#main {
    width: 960px;
    clear: both;
}
h1 {
    margin: 0px auto;
}
#main_content {
    margin: 0 auto;
    width: 940px;
    padding: 10px 0px;
    background-color: #d6f2fd;
    font-size: 1.2em;
    line-height: 1.1em;
    color: #333333;
}
#main_content .ayana_info {
    width: 800px;
    margin: 10px auto;
    padding: 20px;
    color: #FFF;
    line-height: 150%;
    background-color: #323b72;
}
#main_content .ayana_info li.photo {
    width: 360px;
    float: left;
}
#main_content .ayana_info li.txt {
    width: 400px;
    float: right;
}
#main_content .frm_r_top {
    background: url(/image/ayana_spabali/frame_r_top_1.gif) no-repeat left top;
    width: 840px;
    height: 10px;
    margin: 10px auto 0px auto;
}
#main_content .frm_r_middle {
    background: url(/image/ayana_spabali/frame_r_middle_1.gif) repeat-y left top;
    width: 820px;
    padding: 10px;
    margin: 0px auto;
}
#main_content .frm_r_bottom {
    background: url(/image/ayana_spabali/frame_r_bottom_1.gif) no-repeat left top;
    width: 840px;
    height: 10px;
    margin: 0px auto 20px auto;
}
#main_content .title_osusume {
    width: 780px;
    margin: 0px auto;
    padding: 0px;
}
#main_content .frm_osusume_top {
    background-color: #FFF;
    width: 770px;
    height: 90px;
    padding: 0px;
    margin: 0px auto;
}
#main_content .frm_osusume_middle {
    background: url(/image/ayana_spabali/frame_osusume_middle_1.gif) repeat-y left top;
    width: 710px;
    padding: 10px 30px;
    margin: 0px auto;
}
#main_content .frm_osusume_bottom {
    background: url(/image/ayana_spabali/frame_osusume_bottom_1.gif) no-repeat left top;
    width: 770px;
    height: 30px;
    margin: 0px auto 10px auto;
}
#main_content .frm_osusume_middle li.photo {
    width: 330px;
    float: left;
}
#main_content .frm_osusume_middle li.txt {
    width: 370px;
    float: right;
    line-height: 150%;
}
#main_content .frm_osusume_middle .comment_title {
    width: 710px;
    height: 60px;
    margin: 10px auto 0px auto;
}
#main_content .frm_osusume_middle .comment {
    width: 660px;
    margin: 0px auto 0px auto;
    background-color: #ffcc33;
    padding: 10px 25px;
}
#main_content .title_campaign {
    width: 720px;
    margin: 10px auto 0px auto;
    padding: 0px;
}
#main_content .gentei {
    width: 720px;
    margin: 10px auto 30px auto;
    padding: 0px;
    background-color: #7B001F;
}
#main_content .campaign1 {
    width: 720px;
    margin: 10px auto 10px auto;
    padding: 0px;
    background-color: #1f2346;
}
#main_content .campaign2 {
    width: 720px;
    margin: 10px auto 10px auto;
    padding: 0px;
    background-color: #2b3e22;
}
#main_content .campaign3 {
    width: 720px;
    margin: 10px auto 10px auto;
    padding: 0px;
    background-color: #410118;
}
#main_content .campaign4 {
    width: 720px;
    margin: 10px auto 10px auto;
    padding: 0px;
    background-color: #073f2e;
}
#main_content .bt_campaign {
    margin: 0px auto;
    width: 700px;
    padding: 10px 0px;
    height: 80px;
}
#main_content .bt_campaign a {
    display: block;
    width: 700px;
    height: 80px;
    background: url("/image/ayana_spabali/bt_campaign.gif") no-repeat 0px 0px;
}
#main_content .bt_campaign a:hover {
    background-position: bottom;
}
#main_content .bt_campaign a span {
    position: absolute;
    left: -7650px;
}
#main_content .bottom_link ul {
    list-style: none;
    width: 700px;
    padding: 0px;
    margin: 0px;
}
#main_content .bottom_link li.bt1 {
    float: left;
    margin: 0px;
    width: 226px;
    padding: 0px 4px 0px 0px;
}
#main_content .bottom_link li.bt2 {
    float: left;
    margin: 0px;
    width: 226px;
    padding: 0px 7px;
}
#main_content .bottom_link li.bt3 {
    float: left;
    margin: 0px;
    width: 226px;
    padding: 0px 0px 0px 4px;
}
#main_content .bt_report {
    margin: 0px auto;
    width: 226px;
    padding: 10px 0px;
    height: 54px;
}
/*#main_content .bt_report a{display:block;width:226px;height:54px;background:url("/image/ayana_spabali/bt_report.gif") no-repeat 0px 0px;}*/
#main_content .bt_report a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    /* ie 8 */
    -moz-opacity: 0.7;
    /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.7;
    /* Safari 1.x */
}
#main_content .bt_report a span {
    position: absolute;
    left: -7650px;
}
#main_content .bt_kuchikomi {
    margin: 0px auto;
    width: 226px;
    padding: 10px 0px;
    height: 54px;
}
/*#main_content .bt_kuchikomi a{display:block;width:226px;height:54px;background:url("/image/ayana_spabali/bt_kuchikomi.gif") no-repeat 0px 0px;}*/
#main_content .bt_kuchikomi a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    /* ie 8 */
    -moz-opacity: 0.7;
    /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.7;
    /* Safari 1.x */
}
#main_content .bt_kuchikomi a span {
    position: absolute;
    left: -7650px;
}
#main_content .bt_comment {
    margin: 0px auto;
    width: 226px;
    padding: 10px 0px;
    height: 54px;
}
/*#main_content .bt_comment a{display:block;width:226px;height:54px;background:url("/image/ayana_spabali/bt_comment.gif") no-repeat 0px 0px;}*/
#main_content .bt_comment a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    /* ie 8 */
    -moz-opacity: 0.7;
    /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.7;
    /* Safari 1.x */
}
#main_content .bt_comment a span {
    position: absolute;
    left: -7650px;
}
/*--add--*/
#main_content .bt_tour {
    margin: 0px auto;
    width: 560px;
    padding: 10px 0px;
    height: 64px;
}
#main_content .bt_tour a {
    display: block;
    width: 560px;
    height: 64px;
    background: url("/image/ayana_spabali/tour-btn.gif") no-repeat 0px 0px;
}
#main_content .bt_tour a:hover {
    background-position: bottom;
}
#main_content .bt_tour a span {
    position: absolute;
    left: -7650px;
}
.tokuten_tour {
    padding: 15px 0;
    background: url(/image/ayana_spabali/frame_r_middle_1.gif) repeat-y left top;
    margin: 0 auto;
    width: 840px;
    overflow: hidden;
}
.c_tour {
    width: 818px;
    margin: 20px auto;
    padding-left: 2px
}
.c_t_detail {
    float: left;
    width: 408px;
}
.c_t_detail p {
    line-height: 0;
}
.c_t_detail .tour_01 {
    display: block;
    width: 398px;
    padding-top: 6px;
    padding-left: 12px;
    height: 108px;
    background: url("/image/ayana_spabali/c_t_bg.png") no-repeat 0px 0px;
    margin-bottom: 10px;
    overflow: hidden;
}
.c_t_detail .tour_01 li {
    float: left;
    overflow: hidden;
    background-color: #FFF;
}
.c_t_detail .tour_01 li a:hover img {
    opacity: 0.7;
}
.c_t_detail .tour_01 li a:hover {
    background-color: #FFF;
    width: 189px;
    height: 45px;
    overflow: hidden;
}
.c_t_detail .tour_02 {
    display: block;
    width: 398px;
    padding-top: 6px;
    padding-left: 12px;
    height: 108px;
    background: url("/image/ayana_spabali/c_t_bg.png") no-repeat 0px 0px;
    margin-bottom: 10px;
    overflow: hidden;
}
.c_t_detail .tour_02 li {
    float: left;
    overflow: hidden;
    background-color: #FFF;
}
.c_t_detail .tour_02 li a:hover img {
    opacity: 0.7;
}
.c_t_detail .tour_02 li a:hover {
    background-color: #FFF;
    width: 189px;
    height: 45px;
    overflow: hidden;
}
.c_t_detail .tour_03 {
    display: block;
    width: 398px;
    padding-top: 6px;
    padding-left: 12px;
    height: 108px;
    background: url("/image/ayana_spabali/c_t_bg.png") no-repeat 0px 0px;
    margin-bottom: 20px;
    overflow: hidden;
}
.c_t_detail .tour_03 li {
    float: left;
    overflow: hidden;
    background-color: #FFF;
}
.c_t_detail .tour_03 li a:hover img {
    opacity: 0.7;
}
.c_t_detail .tour_03 li a:hover {
    background-color: #FFF;
    width: 189px;
    height: 45px;
    overflow: hidden;
}
.c_t_detail .tour_04 {
    display: block;
    width: 398px;
    padding-top: 6px;
    padding-left: 12px;
    height: 108px;
    background: url("/image/ayana_spabali/c_t_bg.png") no-repeat 0px 0px;
    margin-bottom: 20px;
    overflow: hidden;
}
.c_t_detail .tour_04 li {
    float: left;
    overflow: hidden;
    background-color: #FFF;
}
.c_t_detail .tour_04 li a:hover img {
    opacity: 0.7;
}
.c_t_detail .tour_04 li a:hover {
    background-color: #FFF;
    width: 189px;
    height: 45px;
    overflow: hidden;
}
/*2017/05/15追加*/
#main h3 {
    background: none !important;
    height: auto !important;
    margin-top: 0px !important;
}
.bottom_link {
    margin-left: 60px;
}
.spacer_link {
    text-align: center;
    margin: 0 0 30px 0;
}
.img_campaign_2_new {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
/*ホテル評価*/
#main .data-box {
    display: flex;
    font-size: 14px;
    position: absolute;
    top: 272px;
    right: 90px;
}
#main .data-box .iconbox p.rank {
    width: auto;
    color: #fff;
    border-radius: 12px;
    padding: 0 10px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
}
#main .data-box .iconbox p.rank.high {
    background: #a48700;
}
#main .data-box .iconbox p.rank.low {
    background: #213264;
}
#main .data-box p.kuchikomi .evaluation {
    font-weight: bold;
    padding-left: 4px;
}
#main .data-box p.kuchikomi {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
#main .data-box p.kuchikomi .evaluation.ore {
    color: #ff4e00;
}
#main .data-box p.kuchikomi .evaluation.yellow {
    color: #ff9900;
}
#main .data-box p.kuchikomi .evaluation .comment {
    padding-left: 0;
}
#main .data-box p.kuchikomi .number {
    font-weight: normal;
    color: #000;
    padding: 0;
    margin: 0;
}
#main .data-box p.kuchikomi .number a {
    text-decoration: underline;
    display: inline;
}
#main .data-box p.kuchikomi .star {
    display: flex;
}
#main .box-left .data-box, #main .box-right .data-box {
    width: 100%;
}
/* PCレイアウト */
@media (min-width: 640px) {
    /*--------------------------------------------------*
 *   PCでは無効/表示されない
 *--------------------------------------------------*/
    .pc_none {
        display: none !important;
    }
}
/* スマホレイアウト */
@media (max-width: 639px) {
    /*--------------------------------------------------*
 *   SPでは無効/表示されない
 *--------------------------------------------------*/
    .sp_none {
        display: none !important;
    }
    body {
        -webkit-text-size-adjust: 100%;
        padding: 0px;
    }
    .bottom img {
        width: 100%;
    }
    .img_bottom img {
        width: 100%;
    }
    #container {
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-image: none;
    }
    #main {
        width: 100%;
        float: none;
        font-size: 14px;
        line-height: 1.6;
        padding-bottom: 0px;
        overflow: visible;
    }
    #main * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
    #main img {
        border: 0px;
        vertical-align: top;
        max-width: 100%;
        height: auto;
        width
        /***/
        : auto;
    }
    #main h3 {
        background: none !important;
        height: auto !important;
        margin-top: 0px !important;
    }
    /************************************************************
 *   スマホ用CSS
 ************************************************************/
    /*ここからスマホのCSSを記入*/
    body {
        background-color: #ffffff;
    }
    #main_content, #main_content .ayana_info, #main_content .ayana_info li.photo, #main_content .ayana_info li.txt, #main_content .frm_r_top, #main_content .frm_r_middle, #main_content .frm_osusume_top, #main_content .frm_osusume_middle, #main_content .frm_osusume_middle .comment_title, #main_content .frm_osusume_middle .comment, #main_content .frm_osusume_bottom, #main_content .frm_r_bottom, .tokuten_tour, #main_content .title_campaign, #main_content .title_osusume, .c_tour, .c_t_detail .tour_01 {
        width: 100%;
    }
    #main_content .ayana_info li.photo, #main_content .ayana_info li.txt {
        float: none;
        margin-bottom: 10px;
    }
    #main_content .frm_osusume_middle {
        background-image: url(none);
        background-position-x: center;
        padding: 10px;
    }
    #main_content .frm_osusume_middle li.txt {
        width: 100%;
        float: none;
    }
    #main_content .frm_osusume_top, #main_content .frm_osusume_middle .comment_title, #main_content .frm_osusume_bottom, #main_content .frm_r_bottom, .c_t_detail .tour_01 {
        height: auto;
    }
    .c_t_detail {
        margin-bottom: 15px;
    }
    .c_t_detail .tour_01, .c_t_detail .tour_02, .c_t_detail .tour_03, .c_t_detail .tour_04 {
        margin-top: 15px;
        width: 100%;
        height: auto;
        text-align: center;
        background-image: url(none);
    }
    .c_t_detail .tour_01 li, .c_t_detail .tour_02 li, .c_t_detail .tour_03 li, .c_t_detail .tour_04 li {
        width: 48%;
    }
    #main_content .frm_osusume_middle ul li {
        margin-bottom: 15px;
    }
    p.pagetop a {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .c_t_detail {
        float: none;
        width: 100%;
    }
    /*追加*/
    #main_content {
        font-size: 14px;
    }
    #main_content .ayana_info li.photo {
        width: 100%;
        float: none;
        text-align: center;
    }
    #main_content .frm_osusume_middle ul li.photo {
        width: 100%;
        flex: none;
    }
    #main_content .frm_osusume_middle ul li.photo img {
        width: 48%;
    }
    #main_content .frm_osusume_middle ul li.txt {
        width: 100%;
        flex: none;
    }
    #main_content .frm_osusume_middle .comment {
        padding: 10px;
    }
    #main_content .bottom_link ul {
        width: 100%;
        text-align: center;
    }
    #main_content .bottom_link li.bt1 {
        float: none;
        margin: 0px;
        width: 100%;
        padding: 0px;
    }
    #main_content .bottom_link li.bt2 {
        float: none;
        margin: 0px;
        width: 100%;
        padding: 0px;
    }
    #main_content .bottom_link li.bt3 {
        float: none;
        margin: 0px;
        width: 100%;
        padding: 0px 0px 30px;
    }
    .bottom_link {
        margin-left: 0px;
    }
    .c_t_detail p {
        text-align: center;
    }
    /*パンくず*/
    #panlist_bali {
        background: #a00105 none repeat scroll 0 0;
        color: #fff;
        font-size: 12px;
        list-style: outside none none;
        margin: 0;
        overflow: hidden;
        padding: 4px;
        padding-top: 17%;
    }
    #panlist_bali li {
        float: left;
    }
    #panlist_bali li a {
        color: #ffcc00;
    }
    /*ホテル評価スマホ*/
    #main .data-box .iconbox p.rank {
        padding: 0 2px;
    }
    #main .data-box {
        font-size: 3vw;
        justify-content: center;
        padding: 5px 0;
        top: auto;
        bottom: 0;
        width: 100%;
        left: 0;
        background: rgba(255, 255, 255, 0.9);
    }
    #main .data-box p.kuchikomi {
        margin-left: 5px;
    }
    #main .data-box p.kuchikomi .star img {
        width: 15px;
    }
}