@charset "utf-8";
/*
 * CSS for SmartPhone
* 2014.12.29
* miura
*/

/* comment
topのみ.topPageのクラスで制御
*/

/*--------------------------------------------
	grpheaderArea
--------------------------------------------*/
div#grpheaderArea{
	border-bottom: 2px solid #69B82A;
}
div#grpheaderArea p#grpTagLine{
	display: none;
}
div#grpheaderArea p#grpSiteID{
	width: 64px;
	margin: 3px 0 5px 3px;
}
div#grpheaderArea p#grpSiteID img{
	width: 64px;
	height: 32px;
}
div#grpheaderArea p#grpServiceTitle{
	display: none;
}

div#grpheaderArea dl#grpRemoteNav{
	display: none;
}
div#grpheaderArea dl#grpSectionDomestic,
div#grpheaderArea dl#grpSectionForeign,
div#grpheaderArea dl#grpSubSectionForeign{
	display: none;
}
div#grpheaderArea dl#sectionNav{
	display: none;
}
#spBnrThn{
	display: none;
}
#grpLocationArea{
	display: none;
}
#wideEventBanner a {
	display:none;
	}

/* ------------------------------------------
	contentsArea
------------------------------------------ */
#contentsArea {
	/*font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Helvetica", "Verdana", "Arial", "ＭＳ Ｐゴシック", "MS P Gothic", "Osaka", sans-serif;*/
}

#contentsArea .htlBox a:link,
#contentsArea .htlBox a:visited    { color: #333333; text-decoration: none;}
#contentsArea .htlBox a:visited:hover,
#contentsArea .htlBox a:link:hover,
#contentsArea .htlBox a:visited:active,
#contentsArea .htlBox a:link:active{ color: #333333; }


#addDate img{    width: 100%;display:block;}

a, a:visited {
   color:#1d54a7;
}
/* ------------------------------------------
	dealHead
------------------------------------------ */
#dealHead{
	position: relative;
	margin-bottom: 5px;
}
#dealHead:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
#dealHead h1{
    margin: 10px 0;
    text-align: center;
    width: 100%;
}
#dealHead h2{
	display:none;}
#dealHead p{
	color:#CC0000;
	font-weight:bold;
	line-height:1.2;
	text-align: center;
	margin:0 5px;
	font-size:75%;
	}
#dealHead span{
	display: block;
	font-size: 140%;
}

#dealHead h1 img {
    margin: 0 auto;
    max-width: 95%;
    width: 95%;
}

#dealHead .rslides{
	margin-bottom: 7px;
}

#dealHead .rslides li img{
	width: 100%;
	max-width: 100%;
	height: auto;
}

#dealHead .rslides_tabs{
	position: relative;
	left: 50%;
	float: left;
	margin-top: 7px;
}
#dealHead .rslides_tabs:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
#dealHead .rslides_tabs li{
	position: relative;
	left: -50%;
	float: left;
	width: 40px;
	margin: 0 4px;
}
#dealHead .rslides_tabs li a{
	display: block;
	padding: 5px 10px;
	background-color: #FFF;
	border: 1px solid #333;
	text-align: center;
}
#dealHead .btn{
	width: 100%;
}
#dealHead .btn:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
	background-color: #CC0000;
}
#dealHead .btn li{
	float: left;
	width: 50%;
	height: 44px;
	margin: 0;
}
#dealHead .btn li a{
	display: block;
	height: 44px;
	background: #CCC;
}

/* ------------------------------------------
	term
------------------------------------------ */
#term{
	padding: 0 10px;
	background: #EEE;
	font-size: 90%;
	color: #FFF;
	line-height: 1.2;
	clear: both;
	text-align: center;
}
.topPage #term{
	display:none;
}
#term dl dt,
#term dl dd{
	position:relative;
}
#term dl dt:after,
#term dl dd:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-top: 3px solid #999;
	border-right: 3px solid #999;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}
#term dl dd.btnArea{
	display:none;}
#term dl a,
#term dl em{
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    display: block;
    font-size: 100%;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 8px 10px;
    position: relative;
    text-align: left;
}
#term p{
	font-size: 86%;
}
/* ------------------------------------------
	Banner
------------------------------------------ */
p.exBnr {
	margin:20px;
	text-align:center;}

/* ------------------------------------------
	kanban
------------------------------------------ */

#kanban {
	background-color: #FFF;
		padding-top:50px;
	background-position: left top;
	background-image: url(http://img.travel.rakuten.co.jp/superdeal/images/base/keyvisual_sp01.jpg);
	background-repeat:repeat-x;
}
#kanban div.memberEntry{
    clear: both;
    display: inline-block;
    font-size: 90%;
    margin: 10px;
}
#kanban div.memberEntry p.lead {
    font-size: 90%;
    line-height: 1.2;
    padding: 10px 10px 0 10px;
}
#kanban div.memberEntry p.btn {
	font-size: 100%;
	border: 1px solid #CC0000;
	color: #CC0000;
	text-align: center;border-radius: 5px;
	background-color: #FFF;
	margin: 10px;
	position:relative;
	clear:both;
}
#kanban div.memberEntry p.btn a{
	padding: 5px 10px;display:block;}
#kanban div.memberEntry p.btn a:link, #kanban div.memberEntry p.btn a:visited {
    color: #CC0000;
}
ul#mark{
    background-color: #fff;
    clear: both;
    display: inline-block;
    margin: 10px;
    padding: 4px;
}
ul#mark li{
    display: block;
    float: left;
    width: 31%;
	padding-left:5px;
}
ul#mark li img{
	width:100%;
	}

/* ------------------------------------------
	keyVisual
------------------------------------------ */
#keyVisual{
	clear: both;
	position: relative;
}
#keyVisual:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
#keyVisual h1{
	overflow: hidden;
	width: 100%;
}
#keyVisual h1 img{
	width: 100%;
	max-width: 100%;
	height: auto;
}
#keyVisual .number img{
    position: absolute;
    right: 10px;
    width: 80px;
	}
#keyVisual .number em{ font-size: 140%; font-style: normal;font-weight: bold; }
#keyVisual .comment {
	line-height:1.2;
	font-size:82%;
	margin:8px;
}
#keyVisual .comment li {
	line-height:1.2;
	font-size:82%;
	margin-bottom:5px
}
.serviceInfo .rate span { color: #BF0A0A;font-size:140%;font-weight: bold;}
.serviceInfo .btn   {
    background-color: #fff;
    border: 1px solid #cc0000;
    border-radius: 5px;
    color: #cc0000;
    font-size: 100%;
    margin: 10px;
    position: relative;
    text-align: center;
	}
.serviceInfo .btn a {padding:5px 10px;display:block;}
#contentsArea .serviceInfo .btn a:link,
#contentsArea .serviceInfo .btn a:visited {
    color: #cc0000;
}
.serviceInfo .rate,
.serviceInfo .term   { font-size: 82%; list-style-type: none;margin: 7px;}
.serviceInfo .term li.attention { color: #CC0000;font-size: 90%;}
.serviceInfo .term li a{
	text-align: right;
	padding:8px 0;
	display:block;
	}
#contentsArea .term li a:link, #contentsArea .term li a:visited {
    color: #1d54a7;
}
.pointStep {margin: 5px 10px;text-align: center;}
.pointStep img {margin:0 auto;}
.pointStep dl {
	clear: both;
    margin-top: 10px;
	 text-align: left;}
.pointStep dl dt {font-weight: bold;}
.pointStep dl dt span {color: #019FE8;}
.pointStep dl dd {margin-bottom: 5px;}

.serviceLead{
	font-size:90%;
}
.serviceLead dt{
	font-weight:bold;
	color:#CC0000;
    font-size: 120%;
}
.serviceLead dd{
	line-height:1.2;
	}
.serviceLead dd img{
	width:100%;
		}
.serviceLead dd strong{
	color:#CC0000;
    font-size: 110%;
}
.btnMember {
	margin:5px 0;}
.comment {
	line-height:1.2;
	font-size:75%;
	margin-top:10px;}

/* ------------------------------------------
	areaMenu
------------------------------------------ */
#areaMenu dl {
	display:inline-block;}

#areaMenu dl dt,
#ichibaMenu dl dt{
	font-weight:bold;
	color:#CC0000;
	clear:both;
}
#areaMenu dl dt span,
#ichibaMenu dl dt span{
    display: inline-block;
    margin-top: 5px;
}
#areaMenu dl dd,
#ichibaMenu dl dd{
	list-style-type: none;
	border-style: none;
	border-bottom: 1px solid #CCC;
	line-height: 1.4;
}
#areaMenu dl dd.sanyo {
	font-size:75%;}
#ichibaMenu dl dd.ichiba{
	font-size:82%;
	line-height:1.2;
	}
#ichibaMenu dl dd.ichiba a{
    padding-bottom: 20px;
    padding-top: 10px;
}

#areaMenu dl dd em,
#areaMenu dl dd a,
#ichibaMenu dl dd em,
#ichibaMenu dl dd a{
	position: relative;
	display: block;
	padding: 12px 18px 12px 7px;
	background-color: #FFF;
	border-right: 1px solid #CCC;
	text-decoration: none;
	color: #333;
	font-size: 100%;
}
:root *> #areaMenu dl dd a:before,
:root *> #areaMenu dl dd em:before,
:root *> #ichibaMenu dl dd a:before,
:root *> #ichibaMenu dl dd em:before { /* arrow */
	display: block;
	position: absolute;
	top: 19px;
	right: 8px;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-top: 3px solid #999;
	border-right: 3px solid #999;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

/* ------------------------------------------
	Point
------------------------------------------ */

.pointCharge {
    background-color: #c6eeff;
    clear: both;
    display: block;
    margin: 10px;
    padding: 5px;
    text-align: center;
}
.pointCharge img{
	width: 130px;
	margin:5px 20px 5px 5px;
	float: left;
}
.pointCharge p{
	text-align: left;
	font-size: 82%;
	padding:5px;
	line-height: 1.2;
}
.pointCharge p span{
	display: block;
}
#areaMenu,
#ichibaMenu{
	clear: both;
	margin: 0 10px 10px;
	}

#areaMenu ul:after,
#ichibaMenu ul:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
#areaMenu dl dd{
   float: left;
    list-style-type: none;
    text-align: center;
    width: 50%;
	position:relative;
}
#ichibaMenu dl dd{
    list-style-type: none;
    text-align: center;
    width: 100%;
	position:relative;
}

#areaMenu dl.tab6 dd:nth-child(2n-1),
#ichibaMenu dl.tab6 dd:nth-child(2n-1){
	margin-left: 0;
}
#areaMenu dl dd em,
#areaMenu dl dd a,
#ichibaMenu dl dd em,
#ichibaMenu dl dd a {
	display: block;
	height: 20px;
}

/* ------------------------------------------
	contents
------------------------------------------ */
#contents{
	background-color: #EEE;
}

#contents .pagetop{
	position: fixed;
	z-index: 9;
	bottom: 0;
	right: 5px;
	width: 40px;
	height: 30px;
}
#contents .pagetop a{
	display: block;
	width: 40px;
	height: 30px;
	background: rgba(0,0,0,0.8);
	border-radius: 4px 4px 0 0;
	color: #FFF;
	text-indent: -9999px;
}
#contents .pagetop a:before{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-top: -3px;
	margin-left: -7px;
	border-top: 4px solid #FFF;
	border-right: 4px solid #FFF;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	content: "";
}

/* ----- pageBtn -----*/
.pageBtn{
	margin: 10px;
}

.pageBtn p.btn1{
	width: 100%;
}
.pageBtn p.btn1 a{
	display: block;
	height: 44px;
	text-align: center;
}

.pageBtn ul:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
.pageBtn ul li{
	float: left;
	width: 49%;
	margin-left: 2%;
	list-style-type: none;
	text-align: center;
}
.pageBtn ul.btn3 li,
.pageBtn ul.btn4 li,
.pageBtn ul.btn5 li,
.pageBtn ul.btn6 li{ margin-bottom: 8px;}

.pageBtn ul.btn2 li:first-child{margin-left: 0;}
.pageBtn ul.btn3 li:nth-child(2n-1),
.pageBtn ul.btn4 li:nth-child(2n-1),
.pageBtn ul.btn5 li:nth-child(2n-1),
.pageBtn ul.btn6 li:nth-child(2n-1){
	margin-left: 0;
}

.pageBtn ul li a{
	display: block;
	height: 44px;
}
.pageBtn ul li em{
	display: block;
	height: 44px;
	font-style: normal;
	font-weight: bold;
}

/* ----- mainContents -----*/
.htlBox2{
	height: auto !important;
	margin: 10px 10px 20px;
	border: 1px solid #ddd;
	line-height: 1.2;
	background-color: #FFF;
	position:relative;
}
.htlBox4{
	height: auto !important;
	margin: 0 0 20px 10px;
	border: 1px solid #ddd;
	line-height: 1.2;
	background-color: #FFF;
	width: 45%;
	float: left;
	position:relative;
}
.htlBox a{
	display: block;
}
.htlBox a:hover{ background-color:#FFFFEE;}
.htlBox .basic{
	position: relative;
}
.htlBox .basic:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
.htlBox .area{
    color: #fff;
    padding: 5px 10px;
	background-color:#000;
    top: -2px;
    z-index: 3;
	position:absolute;
	left:0;
	top:0;
}
.htlBox1 .area{
	padding-right: 210px;
}
.htlBox .city{
	margin:5px 7px;
	font-size: 82%;
	color:#993300;
}
.htlBox h1{
	margin: 5px 7px;
	font-size: 90%;
}
.htlBox .chara{
	width: 100%;
}
.htlBox .chara:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
.htlBox .basic .chara{ margin: 0 0 7px 0;}

.htlBox .chara li{
	float: left;
	margin-left: 7px;
	padding: 3px 5px;
	background-color: #60502E;
	border-radius: 3px;
	color: #FFF;
	font-size: 82%;
	line-height: 1.1;
}
.htlBox .point{
	background-image: url(http://img.travel.rakuten.co.jp/superdeal/images/base/SD_icn_gbgb_large.png);
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 25px 20px;
    position: absolute;
    right: -13px;
    text-align: center;
    top: -13px;
    width: 75px;
}
.htlBox4 .point {
    background-color: #cc0000;
    background-image: none;
    display: block;
    font-size: 65%;
    padding: 4px 0;
    position: inherit;
	width:auto;
}

.htlBox .point span{
	font-size: 200%;
	font-weight: bold;
	display:block;
	line-height: 1;
}
.htlBox4 .point span {
	display:inline-block;
	}
.htlBox .point span em{
	font-size: 65%;
}
.htlBox .explain{
	margin: 7px;
	font-size: 90%;
}
.htlBox3 .explain,
.htlBox4 .explain{
	float: right;
	position: relative;
	width: 64%;
	margin: 0 7px 7px 0;
}

.htlBox .photo{
	width: 100%;
	margin: 0 auto;
}
.htlBox3 .photo,
.htlBox4 .photo{
	float: left;
	width: 100%;
}

.htlBox .photo .thumPhotos{
	width: 100%;
	margin-top: 5px;
}
.htlBox .photo .thumPhotos:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
.htlBox .photo .thumPhotos li{
	float: left;
	overflow: hidden;
	max-height: 80px;
	margin-right: 1.6%;
	list-style-type: none;
}
.htlBox1 .photo .thumPhotos li{ width: 23.8%;}
.htlBox2 .photo .thumPhotos li{ width: 32%;}

.htlBox .photo .thumPhotos li:last-child{ margin-right: 0;}

.htlBox .photo img{
	width: 100%;
	max-width: 100%;
	height: auto;
}
.htlBox3 .photo img,
.htlBox4 .photo img{
	width: 100%;
	max-width: 100%;
}

.htlBox .rate em{ padding-left: 100px;}
.htlBox .rank em{ padding-left: 115px;}

.htlBox .plan{
	margin: 0 7px 7px 7px;
	line-height:1.4;
}
.htlBox2 .planName{ font-size: 82%;font-weight: normal; margin: 0 10px;}
.htlBox4 .planName{ font-size: 82%;font-weight: normal;margin: 0 10px;}

.htlBox .plan .chara li{
	margin: 0 7px 7px 0;
}
.htlBox .plan .planName{
    font-size: 82%;
    font-weight: normal;
    line-height: 1.2;
    margin-top: 5px;
}
.htlBox .plan .price{
	font-size: 82%;
}
.htlBox .plan .return{
	font-size: 75%;
}
.htlBox .plan .price span,
.htlBox .plan .return span{
	color: #CC0000;
	font-weight:bold;
	margin-right:5px;
}
.htlBox .plan .price span em,
.htlBox .plan .return span em{
	font-size: 150%;
	font-style: normal;
}

.htlBox .btn:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
.htlBox .btn li{
	float: left;
	width: 50%;
	margin-bottom: 7px;
}

.htlBox a:before{
	display: block;
	position: absolute;
	top: 80%;
	right: 5px;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-top: 3px solid #999;
	border-right: 3px solid #999;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}
.htlBox4 a:before{
	top: 50%;
}
.hotels {
	display:inline-block;}

.hotels h2.title {
     background-color: #66b821;
    clear: both;
    color: #fff;
    margin:0 0 20px 0;
    width: 100%;}
.hotels h2.title span{
    display: inline-block;
    margin: 5px 10px;
	}

/* serviceInfo */
.serviceInfo{
	position: relative; 
	margin: 0 10px 15px 10px;
	padding: 2px;
	text-align: left;
	line-height: 1.4;
	clear: both;
	background-repeat: no-repeat;
	background-position: 10px 7px;
	background-color: #FFF;
}
#merit1 {	background-image: url("http://img.travel.rakuten.co.jp/superdeal/images/base/detail_title1.gif");}
#merit2 {	background-image: url("http://img.travel.rakuten.co.jp/superdeal/images/base/detail_title2.gif");}
#merit3 {	background-image: url("http://img.travel.rakuten.co.jp/superdeal/images/base/detail_title3.gif");}
.serviceInfo .catch{
	margin: 15px 5px;
	padding-left: 40px;
	color: #CC0000;
	font-size: 120%;
	font-weight: bold;
}


/* outline */
#outline{
	background-color: #ffffff;
    margin: 10px;
    max-width: 100%;
}
#outline h2{
    background-color:#66b821;
    color: #ffffff;
    font-size: 120%;
    line-height: 1.2;
    padding: 5px;
    text-align: center;
}
#outline .tit{ background:#cc0000; padding:8px; color:#fff; font-weight:bold; text-align:center;}
#outline dl  { padding:15px; font-size:90%; line-height:120%;}
#outline dl dt { color:#cc0000; font-weight:110%; font-weight:bold; padding-bottom:10px;}
#outline dl dd { padding-bottom:10px;}


/* bnrs, bnr2 */
.bnrs{
    background-color: #fff;
    border: 1px solid #eee;
    margin: 10px;
}
.bnrs h2{
    background-color:#66b821;
    color: #ffffff;
    font-size: 100%;
    line-height: 1.2;
    padding: 5px;
    text-align: center;
}
.bnrs li{
	margin: 15px 10px;
	list-style-type: none;
}
.bnrs li a{
	display: block;
	font-size: 90%;
	line-height: 1.2;
}
.bnrs li a:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}

.bnrs li a img{
	float: left;
	margin: 0 5px 0 0;
}

.bnrs2{
	margin: 10px;
	padding: 10px;
	border: 1px solid #CBC2A0;
	border-radius: 5px;
	background-color: #FFF;
}
.bnrs2 ul:after,
.bnrs2 ul li:after{
	display: block; clear: both; height: 0; line-height: 0; visibility: hidden; content: "."; font-size: 0.1em;
}
.bnrs2 ul li{
	float: left;
	width: 48%;
	margin: 0 4% 10px 0;
	list-style-type: none;
}
.bnrs2 ul li:nth-child(2n){
	margin-right: 0;
}
.bnrs2 ul li img{
	float: left;
	margin: 0 5px 0 0;
}
.bnrs2 ul li a{
	display: block;
	min-height: 60px;
	font-size: 90%;
	line-height: 1.2;
}

/* ----- text field -----*/
#login .input #inputID,
#login .input #inputPass,
#keywordSearch #f_query{
	min-height: 20px;
	padding: 3px 9px;
	background-color: #f0f0f0;
	border: 1px solid #878787;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 0px rgba(000,000,000,0),
		inset 0px 1px 3px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 0px rgba(000,000,000,0),
		inset 0px 1px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 0px rgba(000,000,000,0),
		inset 0px 1px 3px rgba(0,0,0,0.1);
	vertical-align: middle;
	line-height: 2.4;
}

/*--------------------------------------------
	grpRakutenLinkArea
--------------------------------------------*/
#grpRakutenLinkArea{
	margin-bottom: 7px;
	padding-top: 7px;
	border-top: 2px solid #CCCCCC;
}

#grpRakutenLinkArea ul.grpSpelinlk,
#grpRakutenLinkArea dl#grpKeyword,
#grpRakutenLinkArea div#grpFooter,
#grpRakutenLinkArea div#grpFooterNav dl dt,
#grpRakutenLinkArea div#grpFooterNav dl dd ul{
	display: none;
}
#grpRakutenLinkArea div#grpFooterNav dl dd p.grpCopyright{
	text-align: center;
	font-size: 65%;
}

/*--------------------------------------------
	Button Arrow
--------------------------------------------*/

#kanban div.memberEntry p.btn:after,
.serviceInfo .btn:after,
.serviceInfo .btn:after{
	display: block;
	position: absolute;
	top: 70%;
	right: 17px;
	width: 7px;
	height: 7px;
	margin-top: -12px;
	border-top: 3px solid #BF0A0A;
	border-right: 3px solid #BF0A0A;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

.timeStanp {font-size:82%;
line-height:1.2;
margin:10px 15px;}