@charset "utf-8";
/*
* ★★CSS for smartphone
*
* @date 2017.07.11
* @author   zhaoly
*/

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

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


.pc{display: none !important;}

#keyVisual{width: 100%; margin: 0px;}
#keyVisual img{width: 100%;}

#contents.column1{width: 100%; padding: 24px 0 0 0; background-color: #EEF1F3; margin-top: 24px; overflow: hidden;}
#contentsArea a:hover{text-decoration: none !important;}

.box{width: 94%; border: 1px solid #ccc; border-radius: 10px; background-color: #fff; box-sizing: border-box; margin: 0 auto 24px; padding: 16px 0 ;}
#navi-box{ margin: 24px auto 0; border: none; width: 80%; padding: 0px;}
#navi-ul{display: block;}
#navi-ul li {margin: 0 0 8px 0;}
#navi-ul li div{border-bottom: 4px solid #ccc; text-align: center; padding: 0 20px 8px; font-size: 16px; font-weight: bold;}
#navi-ul li div.more_area_back { border: none;}
#navi-ul li div.more_area_back:hover { border: none;}
#navi-ul li div:hover{border-bottom: 4px solid #9ac0da; cursor: pointer;}
#navi-ul li a{display: block; text-decoration: none !important;}
.more-area{position: relative; display: block;}
.more-area::after{position: absolute; z-index: 3; content: ""; width: 16px; height: 16px; background: url(../images/down.png) no-repeat; top: 1px; right: 5px;}
.more-ul{display: block; box-sizing: border-box; background-color: #fff; width: 80%; margin: 0 auto;}
.more-ul li{margin: 0 !important;}
.more-ul a{display: block; font-size: 13px; font-weight: bold; text-align: center; padding: 8px 0; width: 100%;}
.more-ul a:hover{background-color: #9ac0da; color: #fff !important;}

/* coupon */
#COUPON {padding-bottom: 8px;}
#COUPON .cpnholder{background-color: #fff; padding-bottom: 0px;}
#COUPON .cpnholder li{border-color: #fff;}
#COUPON  .ov{margin-top: 8px;}

.ttl-box{width: 90%; margin: 0 auto 0; padding-bottom: 10px; border-bottom: 4px solid #ccc; font-size: 16px; font-weight: bold; text-align: center;}
.sub-ttl-box{width: 90%; margin: 16px auto 0; padding: 8px 0; text-align: center; font-size: 14px; font-weight: bold; color: #fff; background-color: #9AC0DA;}
.pagebox{width: 90%; margin: 16px auto 0; overflow: hidden; padding: 30px 12px 16px 12px; box-sizing: border-box; background-color: #F6F6F6; border-radius: 10px;}
.pagebox a{display: block; text-decoration: none !important;}
.pagebox a:hover{opacity: 0.8;}
.pagebox img{display: block; width: 100%; margin-bottom: 12px;}
.pagebox p{display: block; font-size: 13px; line-height: 150%;}
.pagebox p span{display: block; font-size: 120%; font-weight: bold; margin-bottom: 8px;}

/* search */
#search-box{width: 94%; margin: 0 auto 24px; border: 1px solid #ccc; border-radius: 10px;}
#search-box h1{ color: #000; margin: 10px; text-align: center;}

.rt-footer{
  z-index: 9;
}
p.subTtl_waterblue{
	font-weight:bold;
	text-align:center;
}

.cpnholder .btmarea .overtime span {
    margin-right: 5px;
    padding-left: 22px;
}

.pagebox { position: relative;}
.mytrip_s { position: absolute; padding: 3px 6px; font-size: 12px; color: #fff; background: #66B821; top: 0; left: 0; border-radius: 0 0 10px 0;}
span.area_s { position: absolute; padding: 3px 12px; font-size: 14px; color: #fff; background: #1896a4; top: 0; left: 0; border-radius: 0 0 10px 0;}
span.plan_s { position: absolute; padding: 3px 12px; font-size: 14px; color: #fff; background: #f76ae1; top: 0; left: 0; border-radius: 0 0 10px 0;}
span.service_s { position: absolute; padding: 3px 12px; font-size: 14px; color: #fff; background: #57adff; top: 0; left: 0; border-radius: 0 0 10px 0;}
span.point_s { position: absolute; padding: 3px 12px; font-size: 14px; color: #fff; background: #f6c500; top: 0; left: 0; border-radius: 0 0 10px 0;}



.pagebox a { display: block; height: 100%; position: relative;}
.btn_link { background: #777; color: #fff; font-size: 14px; padding:6px 0; display: block; text-align: center; margin: 12px auto auto auto; width: 82%;}
.sub-ttl-box { display: none;}


p.date { font-weight: bold; text-align: center; margin-bottom: 20px;}
#COUPON { margin-top: 40px;}

.cpnholder.jssBox.allList { background: none !important;}
.cpnholder.jssBox.allList li.jss { padding: 0 !important; margin: 0 !important; border-color: #fff !important;}
a.kakunin.jss_couponPopUp { color: #1D54A7 !important;}

#COUPON.cs { position: relative; margin-top: 24px;}
#COUPON.cs::before{ display:flex; justify-content: center; align-items: center; position: absolute; width: 100%; top: -16px; z-index: 9999; height:100%; text-align: center; content: "COMING SOON..."; font-size:48px; color: #fff; background: #333; opacity: 0.65;}

ul.svs li:first-child { width: 70%;}
ul.svs li:nth-child(2){ width: 30%;}

.mainTtl span,.cpLinkwindow { padding-left: 0 !important;}

.cpnholder .ov.guam .couponimg p:after { width: 50px; height: 71px; left:8px; background: url(../images/logo_guam.png) no-repeat !important; background-size:50px 71px;}