@charset "utf-8";
/*
* ★★CSS for PC
*
* @date 2016.05.20
* @author   zhaoly
*/

/* ------------------------------------------

------------------------------------------ */
#widewrapper { width:100%;}
#keyVisual { width:100%; margin-bottom:20px; height:200px;}
#keyVisual.newKV { height:200px; background:#d2eefc url(https://img.travel.rakuten.co.jp/kaigai/support/201609/images/keyvisual01.jpg) no-repeat top center; border-bottom:9px solid #76ae25;}
#contents.column1 { width:100%; padding:0; margin:0 auto;}
.sp { display:none;}
#contents { background:#ffffff;}
.top_tlt { width:850px; margin:auto;}
.page_tlt { line-height:1.4; font-size:36px; width:478px; float:left; margin-bottom:40px; text-align:center; padding-top:36px;}
.page_tlt dd { font-size:56px; }
.family { bottom:-1px;float:left; margin-right:20px;}
.girl { float:right;}

/* ----- nav -----*/
#PAGEnavi { background:#ffffff;}
.page_nav { width:950px; margin:auto;}
.page_nav ul { margin-left:3px;}
.page_nav ul li { float:left; margin-left:15px; font-size:92%; margin-bottom:15px;}
#contentsArea .page_nav ul li a { display:block; text-align:center; background:#efefef; width:171px; color:#76ae25; transition:background 0.8s;
-moz-transition:background 0.7s; /* Firefox 4 */
-webkit-transition:background 0.7s; /* Safari and Chrome */
-o-transition:background 0.7s; /* Opera */ }
#contentsArea .page_nav ul li a span { display:block; padding-top:20px;}
#contentsArea .page_nav ul li a span.lo { letter-spacing:-0.8px;}
.page_nav ul li a svg g { fill:#76ae25;}
#contentsArea .page_nav ul li a:hover{ background:#76ae25; color:#fff; text-decoration:none;}
.page_nav ul li a p{border:3px solid #efefef; padding:25px 4px 20px 4px; }
.page_nav ul li a:hover p{border-color:#fff; transform:scale(0.95) }
.page_nav ul li a:hover svg g { fill:#FFFFFF;}
.nav_info { width:950px; text-align:right; margin:0 auto 20px auto; padding-right:25px; font-size:85%;}
#contentsArea .nav_info a { text-decoration:underline; color:#000000;}
.page_nav ul li a svg{ height:80px\0;}

/* ----- SERVICE -----*/
.page_h2 { font-size:160%; margin-left:20px; margin-bottom:20px;}
#SERVICE { padding:30px 0 2px 0 ;}
.bg_gray { background:#efefef;}
.service_box { width:950px; margin:auto auto 30px auto; } 
.service_box section { width:442px; margin-left:20px; float:left; margin-right:5px;}
.service_box section h1 { margin-bottom:10px; font-size:110%;}
.service_box section p.ser_photo { width:100%;}
.service_box section p.ser_photo img { width:100%; display:block;}
.service_box section dl { padding:10px 10px 15px 10px; line-height:1.4; background:#ffffff; margin-bottom:15px;}
.service_box section dl dt { font-weight:bold; font-size:95%; margin-bottom:5px;}
.service_box section dl dd { font-size:82%;}
#contentsArea .service_box section .ser_box_link { box-shadow:0 2px 5px #999999; }
#contentsArea .service_box section .ser_box_link:hover { box-shadow:0 0 0 3px #ffcc00; } 
#contentsArea .service_box section a { text-decoration:none; color:#000000;}
#contentsArea .service_box section a:hover { text-decoration:none; }
.ser_link { text-align:right; font-size:82%;}
#contentsArea .service_box section .ser_link a { text-decoration:underline;}
#contentsArea .service_box section .ser_link a:hover { color:#76ae25}

/* ----- ser_info -----*/
.ser_info { width:930px; margin:auto auto 30px auto; padding-left:20px;}
.ser_info_h3 { margin-bottom:10px;}
.ser_exp { line-height:1.4; font-size:82%; margin-bottom:10px;}
.ser_info_photo { width:452px; height:260px; overflow:hidden; float:left; margin-right:5px; position:relative; display:block;}

.ser_info_photo a img.box_img { transition: transform 0.5s linear; width:100%; }
.ser_info_photo a:hover{ text-decoration:none!important;}
.ser_info_photo a:hover img.box_img { transform: scale(1.1);}
.ser_info_photo a img.box_img:hover { transform: scale(1.1);}

.info_icon { position:absolute; text-align:center; width:240px; top:32%; left:105px; top:25%\0;}
.info_icon svg { height:86px\0;}
.info_icon svg g { fill:#ffffff;}
.info_icon span { display:block; color:#ffffff; padding-top:8px; font-weight:bold; padding-left:8px; line-height:150%;}
.ser_link2 { text-align:right; font-size:82%; margin:15px 20px 20px auto;}
#contentsArea .ser_link2 a { text-decoration:underline;}
#contentsArea .ser_link2 a:hover { color:#76ae25}

/* ----- CAR -----*/
#CAR { padding:30px 0 10px 0 ;}

/* ----- pattern_box -----*/
.pattern_box { width:950px; margin:auto}
.pattern_exp { font-size:88%; line-height:1.4; padding:0 20px; margin-bottom:15px;}
.pat { width:445px; box-shadow:0 2px 5px #666666; margin-left:20px; float:left; background:#ffffff; margin-bottom:20px;}
.left_img { width:206px; float:left; }
.left_img img { width:206px; display:block;}
#contentsArea a .right_text { color:#000000; text-decoration:none; display:block;}
#contentsArea .pattern_box a:hover { opacity:0.8;}
.right_text { float:right; padding:4px 8px 8px 0; width:220px; line-height:1.4;}
#contentsArea a .right_text span { background:#76ae25; padding:4px; border-radius:4px; color:#ffffff; font-size:82%; line-height:2.6;}
.right_text dt { font-size:88%; margin-bottom:5px;}
.right_text dd { font-size:82%;}

/* ----- INSU -----*/
#INSU { padding:30px 0 10px 0;}
.insur { position:relative;}
.insur_icon { position:absolute; width:103px; height:56px; background:url(https://img.travel.rakuten.co.jp/kaigai/support/201609/images/icon_insu.jpg) no-repeat; top:10px; right:10px;}

/* ----- TOUR -----*/
#TOUR { padding:30px 0 10px 0;}
.tour_box { width:213px; float:left; margin-left:20px; background:#fff; margin-bottom:20px;  }
#contentsArea .tour_box a { display:block; color:#000; box-shadow:0 2px 5px #666666;}
#contentsArea .tour_box a:hover { text-decoration:none; box-shadow:0 0 0 3px #ffcc00; }
.tour_photo { position:relative; width:100%;}
.tour_photo img { display:block; width:100%;}
.travel_logo { position:absolute; width:67px; height:36px; right:4px; top:4px; background:url(https://img.travel.rakuten.co.jp/kaigai/support/201609/images/travel_logo.jpg) no-repeat;}
.tour_photo .tlt { position:absolute; background:#000; opacity:0.7; color:#fff; bottom:0; padding:6px; font-size:80%; line-height:1.3; font-weight:bold;}
.tour_text { font-size:82%; line-height:1.3; padding:4px 8px 8px 8px; }
.tour_text span { line-height:2.6; background:#76ae25; padding:4px; color:#fff; border-radius:4px;}

/* ----- WIFI -----*/
#WIFI { padding:30px 0 10px 0;}

/* ----- RIDE -----*/
#RIDE { padding:30px 0 10px 0;}

/* ----- RENT -----*/
#RENT { padding:30px 0 10px 0;}

/* ----- INFO -----*/
#INFO { padding:30px 0 10px 0;}

/* ----- PARKING -----*/
#PARKING { padding:30px 0 10px 0;}



/* -----  -----*/
.htlBox .rate .hide, .htlBox .rank .hide {
margin-top: -3px;
}
.htlBox .rate .hide:after, .htlBox .rank .hide:after {
content: ' ';
display: block;
height: 2px;
}


span.icon2{background:#e84b65; margin-right:4px;}


p.atten{font-size:75%; line-height:150%; margin:0px auto; width:900px; padding-top:20px;}

#contents .pagetop { width:38px; margin:auto; padding-right:20px;}
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 120%;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #76ae25;
    text-align: center;
    color: #fff;
    font-size: 120%;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}


.ser_info_txt{
width: 452px;
overflow: hidden;
float: left;
margin-right: 5px;
display: block;
margin-top:10px;
}

#HELP { padding: 30px 0 10px !important;}
.chat-floating{
  position: fixed;
  top:390px;
  right: 0;
  z-index: 999;
  padding: 16px 0 16px 16px;
  color: #54822B;
  border: 1px solid #54822B;
  border-right: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.2);
          box-shadow: 0 0 4px rgba(0,0,0,.2);
}
.collapse-icon{
  transform: translateX(-50%);
  -ms-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
}
.icon-chat{
  width: 45px;
  height: 45px;
  -webkit-background-size: 100% auto;
     -moz-background-size: 100% auto;
       -o-background-size: 100% auto;
          background-size: 100% auto;
  background-image: url(https://travel.faq.rakuten.net/resource/1687851359000/RRR_TravelCSStyle/images/chat.svg);
  margin-right:16px;
  display: inline-block;
}
.chat-floating .chat-text{
  width: 100px;
  text-align: justify;
}
.chat-floating .chat{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #54822B !important;
  font-weight: bold;
}
.chat-floating a.chat:link,.chat-floating a.chat:visited,.chat-floating a.chat:active,.chat-floating a.chat:hover{
  color: #54822B !important;
  text-decoration: none !important;
}
.chat-floating a.chat:hover{ font-size: 15px !important;}
.page_nav.active { z-index: 999; right: 0; width: 78px; 
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.2);
          box-shadow: 0 0 4px rgba(0,0,0,.2);
}
.page_nav.active { width: 178px;}
.page_nav.active ul { margin: 0; border: 1px solid #54822B; border-bottom: 0; border-right: 0; background: #54822B !important;}
.page_nav.active ul li { width: 100%; margin: 0; float: none; font-size: 16px !important; border-bottom: 1px solid #fff;}
.page_nav.active ul li a {color: #fff !important; font-weight: bold !important; width: auto !important; padding: 0 0 16px !important;}
.page_nav.active ul li a svg { display: none;}
.page_nav.active ul li a p { padding: 0 4px; border: 0; display: flex; align-items: center; justify-content: center;}
.page_nav.active ul li a { background: #54822B !important; color: #fff !important;font-size: 16px !important; font-weight: bold;}
.page_nav.active ul li a:hover { background: #54822B !important;color: #fff !important;font-size: 16px !important; font-weight: bold;}
.page_nav.active ul li br.sp { display: none;}

.pagetop{ width: 178px !important; bottom: 410px; right: 0 !important;padding-right: 0 !important; z-index: 999;}
.pagetop a { width: 178px !important;}