@charset "utf-8";
/*
* ★★CSS for smartphone
*
* @date 2013.03.13
* @author Daisuke Hayashi
*/

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

------------------------------------------ */
#keyVisual #countDownArea{
	width:300px;
	height: 58px;
	margin: 15px auto;
	background:url(https://img.travel.rakuten.co.jp/kaigai/support/201609/images/cd_back.gif) no-repeat;	
}
#keyVisual { margin:0;}
#contents { background:#ffffff; padding:6px 0;}
.pc { display:none;}
.bg_gray { background:#ffffff;}
.page_tlt { position:absolute; top:26%; left:2%; line-height:1.4; font-size:140%; text-align:center; width:100%; }
.page_tlt dd { font-size:130%; }

/* ----- nav -----*/
#PAGEnavi { background:#ffffff;}
.page_nav {  margin:auto; margin-bottom:6px;}
.page_nav ul { margin-left:1%;}
.page_nav ul li { float:left; margin-left:1%; font-size:95%; margin-bottom:4px; width:31.7%; }
#contentsArea .page_nav ul li a { display:block; text-align:center; background:#efefef; width:98%; padding:5px 1% 6px 1%; color:#76ae25; transition:background 0.7s;
-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; font-size:78%;}
.page_nav ul li a svg { width:80%;}
.page_nav ul li a svg g { fill:#76ae25;}
#contentsArea .page_nav ul li a:active { background:#76ae25; color:#fff; text-decoration:none;}
.page_nav ul li a:active svg g { fill:#FFFFFF;}
.nav_info { text-align:right; margin:auto; padding-right:10px; font-size:85%;}
#contentsArea .nav_info a { text-decoration:underline; color:#000000;}
#contentsArea .service_box section .ser_box_link { box-shadow:0 2px 5px #999999; }
#contentsArea .service_box section a { text-decoration:none; color:#000000;}
#contentsArea .service_box section a:hover { text-decoration:none; opacity:0.8;}
.ser_link { text-align:right; font-size:78%;}
#contentsArea .service_box section .ser_link a { text-decoration:underline;}
.ser_link2 { text-align:right; font-size:78%;}
#contentsArea .ser_link2 a { text-decoration:underline;}

/* ----- SERVICE -----*/
.page_h2 { font-size:140%; margin-bottom:6px; text-align:center; background:#3d3d3d; color:#ffffff; padding:4px 0; margin-top:30px;}
.service_box { width:96%; padding:2%;} 
.service_box section { width:100%; margin-bottom:8px;}
.service_box section h1 { margin-bottom:6px; text-align:center;}
.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; line-height:1.4; background:#ffffff; margin-bottom:8px;}
.service_box section dl dt { font-weight:bold; font-size:92%; margin-bottom:5px;}
.service_box section dl dd { font-size:82%;}

/* ----- ser_info -----*/
.ser_info { margin:auto auto 6px auto;}
.ser_info_h3 { margin-bottom:6px; text-align:cente; margin-top:20px;}
.ser_exp { line-height:1.4; font-size:82%; margin-bottom:6px; padding:0 2%;}
.ser_info_photo { width:48%; overflow:hidden; float:left; margin:1%; position:relative; }
.ser_info_photo img.box_img { 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:active { transform: scale(1.1);}

.info_icon { position:absolute; text-align:center; width:95%; top:25%; left:2.5%;}
.info_icon svg { width:62%;}
.info_icon svg g { fill:#ffffff;}
.info_icon span { display:block; color:#ffffff; font-size:72%;}
.ser_link2 { text-align:right; font-size:78%; margin:6px 10px 6px auto;}
#contentsArea .ser_link2 a { text-decoration:underline;}
#contentsArea .ser_link2 a:hover { color:#76ae25}

/* ----- pattern_box -----*/
.pattern_box { margin:auto 2% 10px 2%;}
.pattern_exp { font-size:88%; line-height:1.4; margin-bottom:8px;}
.pat { width:96%; box-shadow:0 2px 5px #666666; background:#ffffff; margin:0 2% 8px 2%;}
.left_img { width:45%; float:left; }
.left_img img { width:100%; 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:2px 2% 2%; width:51%; 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:85%; margin-bottom:5px;}
.right_text dd { font-size:78%;}
.insur { position:relative;}
.insur_icon { position:absolute; width:71px; height:38px; background:url(https://img.travel.rakuten.co.jp/kaigai/support/201609/images/icon_insu_sp.jpg) no-repeat; top:4px; right:4px; }

/* ----- TOUR -----*/
.tour_box { width:47%; float:left; margin:0 1.5% 8px 1.5%; box-shadow:0 2px 5px #666666; background:#fff;}
#contentsArea .tour_box a { display:block; color:#000; }
#contentsArea .tour_box a:hover { text-decoration:none; border:1px solid #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:82%; line-height:1.3; font-weight:bold;}
.tour_text { font-size:78%; line-height:1.3; padding:0 4px 4px;}
.tour_text span { line-height:2.6; background:#76ae25; padding:4px; color:#fff; border-radius:4px;}

/* -----  -----*/
.bnr { border:2px solid #76ae25; padding:6px; margin:10px; text-align:center; font-weight:bold;}
#contentsArea .bnr a { color:#76ae25; display:block;}


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


.ser_info_txt{
width:48%;
overflow: hidden;
float: left;
margin:10px 1% 0;
display: block;
}

.ser_info_txt .ser_info_h3{margin-top:0px;}

#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;
  display: none;
}
.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 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: 16px 0 !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: 78px !important; bottom: 410px; right: 0 !important;padding-right: 0 !important; z-index: 999;}
.pagetop a { width: 78px !important;}

.page_tlt { width: 98% !important;}
  
p.atten{font-size:75%; line-height:150%; margin:0px 10px; padding-top:20px;}