@charset "UTF-8";

/* ===================================================================
file name       :style.css
=================================================================== */

/*----------------------------------------------------
        areaNavi
----------------------------------------------------*/
.areaNavi {
    width: 100%;
    margin: -1px 0 0;
    display: table;
    table-layout: fixed;
}
.areaNavi li {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
}
.areaNavi a {
        display: block;
        position: relative;
        overflow: hidden;
        background: #000;
}

.areaNavi {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: -1px 0 0;
}


.areaNavi .btnBg {
        width: 100%;
        transition: 0.5s;
}
.areaNavi a:hover .btnBg {
        transition: 2s;
        -moz-transform: scale(1.1,1.1);
        -webkit-transform: scale(1.1,1.1);
        -o-transform: scale(1.1,1.1);
        -ms-transform: scale(1.1,1.1);
        filter: alpha(opacity=50);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=50)";  /* ie 8 */
    -moz-opacity:0.5;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.5;              /* Safari 1.x */
    opacity:0.5;
}
.areaNavi span {
        display: block;
        margin: auto;
        width: 100%;
        position: absolute;
        left: 0;
        top: 25%;
        right: 0;
        z-index: 2;
}
.areaNavi a:after {
    content: url(../images/icon_puls.png);
        position: absolute;
        right: 5px;
        bottom: 5px;
}

/*----------------------------------------------------
        info
----------------------------------------------------*/
#section-info {
        /*background: url(../images/info_bg.gif) repeat left top;
        padding: 100px 0px;
        */
}
#section-info p.lead {
        margin: 40px auto 0;
        width: 720px;
        font-size: 1.1em;
        line-height: 1.8em;
        color: #FFF;
}
.infoCalender {
        margin: -50px auto 0;
        width: 960px;
        display: table;
}
.infoCalender div,
.infoCalender dl {
        display: table-cell;
        text-align: left;
        vertical-align: top;
}
.infoCalender div.graph {
        padding: 70px 0 0 20px;
}
.infoCalender dd {
        width: 330px;
        display: table;
        color: #FFF;
        margin: 10px 0 0;
        font-size: 0.8em;
}
.infoCalender dd p {
        font-size: 1.2em;
        color: #0A2C91;
        background: #FFF;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        font-weight: bold;
        text-align: center;
        padding: 1em 0 0;
        margin: 0 10px 0 0;
}
.infoCalender dd p span {
        font-size: 2em;
        line-height: 1em;
}
.infoCalender dd strong {
        font-size: 1.2em;
        color: #FFF933;
        display: block;
}



/*----------------------------------------------------
        ranking
----------------------------------------------------*/
#contents h3 {
        padding: 50px 0px;
}
#section-ranking {
        background: url(../images/ranking_bg.jpg) center center no-repeat;
        background-size: cover;
        padding: 20px 0 120px;
}
#section-ranking ul {
        margin: 0 auto;
        width: 990px;
}
#section-ranking li {
        background: #FFF;
        border: solid 1px #CCC;
        display: inline-block;
        margin: 7px;
        width: 310px;
}
#section-ranking h4 {
        font-size: 1.8em;
        font-weight: bold;
        color: #193072;
        background: url(../images/line_yellow.gif) repeat-x left bottom;
        padding: 10px 0;
}
#section-ranking div {
        text-align: left;
        margin: 10px;
}
#section-ranking div:not(:last-child) {
        border-bottom: 1px dashed #CCC;
        padding: 0 0 5px;
}
#section-ranking h5 {
        font-size: 1.3em;
        font-weight: bold;
        color: #193072;
}
#section-ranking h5.crown {
        padding: 10px 0 0;
        background: url(../images/icon_crown.gif) no-repeat left top;
        margin: 3px 0 0;
}
#section-ranking h5 span {
        font-size: 0.9em;
        display:inline-block;
        text-align: center;
}
#section-ranking h5.crown span {
        width: 2.5em;
}
#section-ranking div.column2 {
        display: table;
        font-size: 0.9em;
        line-height: 1.3em;
}
#section-ranking div.column2 div {
        display: table-cell;
        text-align: left;
        vertical-align: top;
        margin: 0;
        padding: 0;
        border-bottom: none;
}
#section-ranking div.column2 span {
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        background: #F8ED3F;
        line-height: 1.6em;
        margin: 0 5px 5px 0;
}
.pageBtn a {
    display: block;
        font-size: 1.2em;
        text-align: center;
    padding: 0.5em 2em;
    border-radius: 3px;
    background: #103281;
    color: #FFF;
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
.pageBtn a:hover {
    background: #0A3DB6;
}

/*----------------------------------------------------
        tour
----------------------------------------------------*/
#sen-section-tour h3,
#section-tour h3 {
        background: url(../ishigaki/images/hotel_ttl_bg.gif) repeat-x left 5px, url(../ishigaki/images/hotel_ttl_bg.gif) repeat-x left 128px;
        background-color: #193075;
}
.tourBox .icnArea {
        line-height: 62px;
        color: #FFF;
        height: 60px;
        width: 60px;
        position: absolute;
        left: -5px;
        top: -5px;
        border-radius: 50%;
        z-index: 3;
        display: inline-block;
        text-align: center;
}
.tourBox .icnArea.mi {
        background: #1FC0E4;
}
.tourBox .icnArea.ishi {
        background: #4695F7;
}
.tourBox .icnArea.iri {
        background: #46A74E;
}