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

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

------------------------------------------ */
.TopBox{background:url(https://travel.rakuten.co.jp/kaigai/special/family/beach/images/top_bg.jpg) no-repeat top -10px right 45%; background-size:cover; height:360px; position:relative;}
.TopBox:before{display:block; content:""; background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/top_line.png) repeat-x; width:100%; height:15px; position:absolute; bottom:10px; left:0; z-index:1;}


#maintit h1{ display:block; width:85%; position:absolute; left:0; bottom:30px;}
#maintit h1 img{width:100%; max-width:400px;}
#maintit p{ display:none;}

@media screen and (min-width:420px) and (max-width:720px){
.TopBox{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/top_bg.jpg) no-repeat top -10px right 60%; background-size:cover; height:320px; position:relative;}
#maintit h1{ display:block; width:70%; position:absolute; left:0; bottom:20px;}
}
/* -----  -----*/

.pc{display:none;}
.sp{display:block;}

#contentsArea #contents{padding:0; background:#fff;}


.prBox{display:block; line-height:160%; color:#1d8dd1; font-weight:bold; font-size:90%; margin:10px;}


.spBox{display:block; margin:10px;}
.spBox li{ display:block; border:1px solid #53ade4; padding:10px;}
.spBox .first{ margin-bottom:10px; border:1px solid #ff6699;}
.spBox li h2{ text-align:center;}
.spBox li h2 img{width:100%; max-width:320px;}
.spBox li p{font-size:80%; line-height:160%; padding:10px;}
.spBox li span{ display:block; text-align:center;}

@media screen and (min-width:460px) and (max-width:720px){
.spBox li p{font-size:80%; line-height:160%; padding:10px; float:left; width:50%;}
.spBox li span{ float:left; width:40%; padding-top:10px;}
}


#contentsArea .pageBtn li{display:block;}
#contentsArea .pageBtn a:link{background:none; border:none; text-shadow:none; font-size:80%; line-height:140%; padding:5px 0; display:table; width:100%; color:#fff;}
#contentsArea .pageBtn a span{display:table-cell; vertical-align:middle; color:#fff;}
#contentsArea .pageBtn a span b{display:block; font-size:120%;}
#contentsArea .pageBtn .c1{background:#ff6699 !important;}
#contentsArea .pageBtn .c2{background:#53ade4 !important;}
#contentsArea .pageBtn .c3{background:#ebb718 !important;}
#contentsArea .pageBtn .c4{background:#89ba55 !important;}
#contentsArea .pageBtn .c5{background:#ff6666 !important;}


.titAll span{display:block; text-align:center; width:100%; padding:10px 0;}
.titAll p{float:left; padding:0 10px 10px; font-size:90%; line-height:160%;}
.t01{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/title01_line.gif) no-repeat right top;}
.t02{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/title02_line.gif) no-repeat right top;}
.t03{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/title03_line.gif) no-repeat right top;}
.t04{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/title04_line.gif) no-repeat right top;}
.t05{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/title05_line.gif) no-repeat right top;}
.t06{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/title06_line.gif) no-repeat right top;}


.chBox{display:block; margin-bottom:40px;}
.chBox ul{display:block; margin-bottom:10px;}
.chBox ul li{margin:10px; border:1px solid #ffb2cc; border-top:none;}
.chBox ul .first{}
.chBox ul li h2{background:#ffb2cc; font-size:100%; color:#fff; letter-spacing:2px; text-align:center; padding:5px 0 4px; position:relative;}
.chBox ul li h2 b{font-size:150%;}
.chBox ul li h2 span{display:block; position:absolute; left:10px; top:-5px;}
.chBox ul li p{padding:15px 15px 20px; font-size:80%; line-height:140%;}
.chBox ul li p span{display:block; font-weight:bold; font-size:125%; letter-spacing:1px; line-height:160%; margin-bottom:8px;}
.chBox ul li .photo{ display:block; width:100%;}
.chBox div{margin:10px;}
.chBox div h2{display:block; padding:5px 0; text-align:center; color:#fff; background:#ffb6cf;}
.chBox div h2 img{display:none;}
.chBox div h2 span{ font-size:90%;}
.chBox div dl{display:block; border:1px solid #ffb2cc; border-top:none;}
.chBox div dl dd{font-size:80%; line-height:180%; padding:10px;}
#contentsArea .chBox div dl dd a:link{color:#0183ec;}
.chBox div dl dt{padding:0 0 10px; text-align:center;}
#contentsArea .chBox .btn{display:block; margin:10px; text-align:center;}
#contentsArea .chBox .btn img{width:100%; max-width:600px;}

.blue ul li{border:1px solid #a9d6f1;}
.blue ul li h2{background:#a9d6f1;}
.blue div dl{border:1px solid #a9d6f1;}
.blue div h2{background:#a9d6f1;}



.fam_tit{ background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/family_tit01.gif) no-repeat top center; height:50px; margin:0 10px 10px;}
.fam_tit img{display:none;}
.fam2{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/family_tit02.gif) no-repeat top center;}
.column1 .hotels{margin-bottom:10px;}
.column1 .htlBox2{}
#contentsArea .htlBox{border-color:#e9c966;}
#contentsArea .htlBox .area{background:#e9c966; padding:7px 10px; color:#fff;}
.htlBox h1{margin:10px 15px;}
.htlBox .photo{width:90%;}
.htlBox2 .photo .thumPhotos li{width:49%;}
.htlBox .basic{border-bottom:none;}
.htlBox .rank{padding:5px 0;}
#contentsArea .htlBox .plan li a{background-color:#fcfbea; border-color:#ded6bf; position:relative;}
#contentsArea .htlBox .plan li a .icon{display:block; width:55px; position:absolute; top:15px; left:5px;}
#contentsArea .htlBox2 .plan li a .planName{ color:#664416; padding:10px 0 0 60px;}
.htlBox .plan li a .price{padding-left:60px; text-align:left;}
.htlBox .plan li a .price span{color:#bc0303; font-weight:bold;}
.htlBox .plan li a .price span em{font-size:190%;}
#contentsArea .htlBox .btn li a{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/family_bg.gif) repeat; position:relative; font-size:75%; margin: 0;}
#contentsArea .htlBox .btn li a:hover{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/family_bg.gif) repeat; opacity:0.7;}
#contentsArea .htlBox .btn li a:before{display:block; content:""; background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/family_btn_icon.png) no-repeat; width:4px; height:7px; position:absolute; top:13px; right:5px;}
@media screen and (max-width:360px){
.htlBox .plan li a .price span{display:block;}
}
.fam-btn{display:block; margin:0 10px 20px; text-align:center;}
.fam-btn img{width:100%; max-width:600px;}
.fam-text{display:block; margin:0 10px; font-size:80%; line-height:160%; margin-bottom:10px;}



.safeBox{border:1px solid #b1da80; margin:10px 0 20px; padding-top:10px;}
.safeBox dl{padding:0 10px;}
.safeBox dl dt{display:block; background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/safe_bg.gif) repeat-y; padding:10px; color:#fff; font-size:105%; font-weight:bold; letter-spacing:1px;}
.safeBox dl dd{display:block; padding:10px; font-size:78%; line-height:180%;}
#contentsArea .safeBox dl dd a:link{color:#0183ec;}


.column1 #search-box{border:1px solid #ffb2b2; margin-bottom:20px;}
#search-box h1{ color:#ff6666;}
#search-box h1.open:after{border: 1px solid #ffb2b2;}


.otherBox{border:1px solid #e7c79b; margin:10px; padding:10px;}
.otherBox .bnr{display:block; margin-bottom:20px;}
.otherBox .bnr img{ width:100%; max-width:700px;}
.otherBox h2{ background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/other_tit.gif) no-repeat top center; height:25px; margin-bottom:20px;}
.otherBox h2 img{display:none;}

.otherBox ul{ display:block;}
.otherBox ul li{margin-bottom:10px;}
.otherBox ul li a{display:block; background:#fdf8ea; border:1px solid #e1d1c0; padding:15px;}
.otherBox ul li a img{ display:block; width:100%;}
.otherBox ul li a p{padding:10px; font-size:80%; line-height:160%;}
.otherBox ul li a p span{display:block; font-size:120%; font-weight:bold; margin-bottom:5px; text-align:center;}


.htlBox.htlBox2  ul.btn li {  margin: 8px 4px 10px 0; float:none; width:auto; }

.htlBox.htlBox2  ul.btn { margin: 10px 3px 10px 7px;}

.htlBox.htlBox2 ul.plan li a ul.btn { margin: 10px 0 0px 10px;}
.htlBox.htlBox2 ul.plan li a ul.btn li{background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/family_bg.gif) repeat; position:relative; font-size:95%; padding: 10px 0; text-align: center; color: #fff; border-radius: 5px;}
.htlBox.htlBox2 ul.plan li a ul.btn li:before{display:block; content:""; background:url(https://img.travel.rakuten.co.jp/kaigai/special/family/beach/images/family_btn_icon.png) no-repeat; width:4px; height:7px; position:absolute; top:16px; right:15px;}

/*--------DPPLAN*/
.htlBox .dpplan{margin:0 7px;}
#contentsArea .htlBox .dpplan li a{ border: 1px solid #479f1b; background-color:#fff; position:relative;}
#contentsArea .htlBox .dpplan li a .icon{display:block; position:absolute; top:-11px; left:3px;}
#contentsArea .htlBox2 .dpplan li a .planName{ font-size:90%;  color:#fff; font-weight: bold; text-align: center; padding:6px 0; display:block; background:#479f1b;}
.htlBox .dpplan li a .price{ padding:10px; text-align:center; font-size: 82%; line-height: 1.3;}
.htlBox .dpplan li a .price small{ background: #f3f3f3; padding:8px; margin: 5px;  display:block; text-align:center;}
.htlBox .dpplan li a .price span{color:#bc0303; font-weight:bold;}
.htlBox .dpplan li a .price span em{font-size:245%; font-style: normal;}


.noicon { padding: 10px 0 0 10px !important;}

.bnrbox{  margin: 10px auto; text-align: center; float: none;}
.bnrbox img{ width: 100%;}