@charset "utf-8";
/*  hotel PC top  */
/* =========================================================
   common parts
========================================================= */
section a {
    color: #333 !important;
}

.wpr {
    position:relative;
    width:980px;
    margin: 0 auto;
    
    color: #333;
}

/* h2
--------------------------- */
section h2 {
    position:relative;
    text-align:center;
    margin-bottom: 45px;
    font-size:30px;
    font-weight: bold;
}
section h2 span {
    position: relative;
    display: inline-block;
    width:240px;
    background: #fff;
    z-index: 101;
}
section h2::after {
    content:'';
    width:500px;
    height:1px;
    position:absolute;
    top:22px;
    left: 50%;
    margin-left:-250px;
    background: #ccc;
    z-index: 99;
}

/* tag
--------------------------- */
.tag--area {
    position:absolute;
    top:0;
    left: -3px;
    width:80px;
    height: 22px;
    font-size:12px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: #003894;
    z-index: 201;
}

/* col3 
--------------------------- */
.col3 {
    margin-bottom: 90px;
}
.col3 > li {
    float: left;
    width:310px;
    margin:0 0 25px 25px;
}
.col3 > li:nth-child(3n+1) {
    margin-left:0;
}
.col3 > li img {
    width:100%;
    height: auto;
}

/* =========================================================
   crumb
========================================================= */
.crumb {
    height:30px;
    line-height:30px;
    font-size:12px;
    background: #e6e6e6;
}

/* =========================================================
   main visural
========================================================= */
.mv--area {
    position:relative;
    height: 420px;
    min-height: 420px;
    max-height: 420px;
    margin: 0 0 60px;
}
.mv--area .wpr {
    position:absolute;
    top:0;
    left:50%;
    margin-left: -490px;
    min-height: 420px;
    max-height: 420px;
}
.cycle-carousel-wrap {}
.cycle--wpr {
    margin-left:/*-1262px*/ -1300px;
}
.mv--mask {
    position: absolute;
    top:0;
    left: 50%;
    width:100%;
    height: 420px;
    margin-left: -50%;
    background: url(https://tc.tabirai.net/hotel/common/images/top/bg_pc_mv.png) center top no-repeat;
}
.cycle-arrows {
    position: relative;
    max-width:1100px;
    margin: -210px auto 0;
}
.cycle-arrows a { 
    position: absolute; 
    top: 50%; 
    width: 40px; 
    height:40px; 
    margin-top: -20px; 
    opacity: 0.7; 
    transition: 0.3s; 
    z-index: 502; 
    text-indent: -9999px;
}
.cycle-arrows #prev { 
    left: 0; 
    background:rgba(255,255,255,.7) url(https://tc.tabirai.net/hotel/common/images/top/arrow_prev@2x.png) left top no-repeat;
    background-size: 40px 40px;
}
.cycle-arrows #next { 
    right: 0; 
    background:rgba(255,255,255,.7) url(https://tc.tabirai.net/hotel/common/images/top/arrow_next@2x.png) top no-repeat;
    background-size: 40px 40px;
}
.cycle-arrows a:hover { 
    opacity:1; 
    transition: 0.3s;
    background: rgba(255,255,255,1);
}

/* blue back ttl */
.bl--ttl {
    width:220px;
    height:220px;
    position:absolute;
    left:0;
    top:50%;
    margin-top: -110px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    background:rgba(7,50,140,.8);
    z-index: 301;
}
.bl--ttl .sub {
    padding:50px 0 8px;
    font-size:16px;
}
.bl--ttl h1 {
    font-size:40px;
    font-weight:bolder;
}
.bl--ttl .des {
    display: block;
    padding:24px 0 0;
    font-size:14px;
}


/* =========================================================
   oshiyado 
========================================================= */
.ul--feature01 {
}
.ul--feature01 li {
    position: relative;
}
.ul--feature01 .photo {
    position: relative;
    z-index: 11px;
}
.ul--feature01 .photo span {
    display: block;
    width:100%;
}
.ul--feature01 .photo span img {
    width:100%;
    height:auto;
}
.ul--feature01 .photo span img:hover {
    opacity: .7;
}

.ul--feature01 h3 {
    margin: 0 0 8px;
    padding:8px 0;
    font-size:14px;
    font-weight: 700 !important;
    line-height: 1.35;
    border-bottom: 1px solid #333;
}

.ul--feature01 p {
    font-size:13px;
    line-height: 1.4;
}

/* =========================================================
   top--topic
========================================================= */
.top--topic {}
.top--topic li {
    position: relative;
}
.top--topic .photo {
    position: relative;
}
.top--topic a:hover .photo img { opacity: .7;}
.top--topic .ttl {
    position: absolute;
    bottom:0;
    left: 0;
    width:100%;
    height:40px;
    overflow: hidden;
    background:rgba(0,0,0,.6);
}
.top--topic .ttl::after {
    position: absolute;
    top: 40%;
    right: 12px;
    width: 8px;
    height: 8px;
    margin-top: -2px;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}
.top--topic .ttl h3 {
    padding:0 24px 0 12px;
    line-height: 40px;
    font-size:14px;
    font-weight: 700 !important;
    color:#fff;
}

/* =========================================================
   top--hotel_detail
========================================================= */
.top--hotel_detail {
    margin-bottom: 10px;
    padding:30px 0 35px;
    text-align: center;
    border-bottom:1px solid #ccc;
}
.top--hotel_detail:last-of-type {
    border: none;
}

.top--hotel_detail img { width:100%; height: auto;}


/* left block
--------------------------- */
.top--hotel_detail .fl_l {
    width:520px;
    text-align: left;
}
.top--hotel_detail .fl_l h3 {
    padding-bottom: 10px;
    font-size:20px;
    font-weight: 700;
    border-bottom:1px solid #333;
}
.top--hotel_detail .fl_l p {
    padding: 20px 0 0;
    border-bottom:1px solid #ccc;
}
.top--hotel_detail .fl_l p:last-child {
    padding-bottom:0;
    border: none;
}
.top--hotel_detail .fl_l .fl_l {
    width:120px;
    margin: 0 20px 20px 0;
}


/* right block
--------------------------- */
.top--hotel_detail .fl_r {
    width:420px;
}
.top--hotel_detail .fl_r .photo {
    position:relative;
}
.top--hotel_detail .fl_r .ttl {
    position: absolute;
    bottom:0;
    left: 0;
    width:100%;
    height:40px;
    overflow: hidden;
    background:rgba(0,0,0,.6);
}

.top--hotel_detail .fl_r .ttl::after {
    position: absolute;
    top: 40%;
    right: 12px;
    width: 8px;
    height: 8px;
    margin-top: -2px;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}
.top--hotel_detail .fl_r .ttl p {
    padding:0 24px 0 12px;
    line-height: 40px;
    font-size:14px;
    font-weight: 700 !important;
    color:#fff;
    text-align: right;
}

.top--hotel_detail .fl_r a:hover img,
.top--hotel_detail .fl_r a:hover .ttl { opacity: .7;}


/* orange block
--------------------------- */
.btn--area {
    clear:both;
    padding:30px 0 0 ;
    text-align: center;
}

.btn--goof {
    position: relative;
    display: inline-block;
    width:400px;
    height:50px;
    padding-right: 26px;
    text-align: center;
    color: #fff !important;
    font-size:16px;
    font-weight: 700;
    line-height: 50px;
    background: #f08300;
}
.btn--goof::after {
    position: absolute;
    top: 40%;
    right: 12px;
    width: 10px;
    height: 10px;
    margin-top: 0px;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}

/* green block */

.btn--green {
    position: relative;
    display: inline-block;
    width:400px;
    height:50px;
    padding-right: 26px;
    text-align: center;
    color: #fff !important;
    font-size:16px;
    font-weight: 700;
    line-height: 50px;
    background: #37b48c;
}
.btn--green::after {
    position: absolute;
    top: 40%;
    right: 12px;
    width: 10px;
    height: 10px;
    margin-top: 0px;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}




a:hover .tag--area { opacity: 1 !important;}