@charset "utf-8";

/*
 * CSS for SmartPhone
 * @date     20190221
 * @author   yang
 */


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

------------------------------------------ */
#keyVisual{padding:10px 5px 15px;}
#contentsArea{ background-image: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/bg_all_sp.jpg); background-repeat: no-repeat; background-position: top center; background-attachment:fixed;}
#contentsArea.subP{ background-color:#fcfaee;}
#contents.column1{background: none;}
.pc{display: none!important;}
/* -----  -----*/

.titAll{margin: 0 auto 20px; border-bottom: 1px solid #926b02; padding-bottom: 10px; text-align: center;}
.titAll span{font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 110%; color: #926b02; font-weight: bold;}
.titAll img{ display: block;margin: 0 auto;}
.mapBox{margin-bottom: 30px;}
.mapBox ul{ display: flex; flex-wrap: wrap; padding-left:1% ; }
.mapBox ul li{ width: 31%; margin: 1%; }

#contentsArea .mapBox ul li a {
  padding: 16px 0;
    display: inline-block;
    background: #127308;
    color: #fff;
    font-size: 80%;
    width: 100%;
    text-align: center;
    position: relative;
    /*letter-spacing: 1px;*/
}
#contentsArea .mapBox ul li a:hover{color: #fff; text-decoration: none; background: #0f9901;}
/* 
#contentsArea .mapBox ul li a:before {
    display: block;
    content: "";
    background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/map_icon.png)no-repeat;
    width: 5px;
    height: 9px;
    position: absolute;
    top: 15px;
    right: 2px;
} */
.awardBox{margin-bottom: 30px;}
.awardBox ul li{ margin-bottom: 10px; text-align: center;}
@media screen and (min-width: 360px) {
  .awardBox ul li{ text-align: center; float: left; width: 47%; margin: 0 1.5% 10px;}
  .awardBox ul li img{width: 100%;}
}

.intrBox{background: #fff; padding:40px 30px 30px; margin: 0 10px 30px;}
.intrBox p{ font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 180%; color: #000;}
.intrBox p span{ display: block; margin-bottom: 15px;}
#contentsArea .intrBox p a{color: #127308; text-decoration: underline;}

#search-box h2{position: relative; padding: 10px 0 10px 20px;}
#search-box h2.open:after {
    content: "+";
    border: 1px solid #cbc2a0;
    width: 12px;
    height: 14px;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -9px;
    right: 5px;
    line-height: 0.8;
    text-align: center;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
  }
  #search-box h2.close:after {
    content: "-";
    border: 1px solid #cbc2a0;
    width: 12px;
    height: 14px;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -9px;
    right: 5px;
    line-height: 0.8;
    text-align: center;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
  }


  .lastTALK{ font-size: 80%; line-height: 160%; color: #7b7b7b; margin:30px 10px 20px;}


/* ----- 下層ページ -----*/
.navBox{ padding:5px 0; z-index: 9999; width: 100%; position: fixed; bottom: 5%; right: 5px;}
#contentsArea .navBox .has-submenu{background: #127308; color:#fdfb44; font-size: 12px; padding: 10px 2px; width: 55px; text-align: center; text-decoration: none; position: absolute; bottom: 10px; right: 0; z-index: 9999;}
.navBox .has-submenu span{display: none;}
.navBox ul.jb {
    padding: 10px 0 44px 10px;
    background: #127308;
    position: absolute;
    bottom: 10px;
    right: 0;
}

.navBox ul.jb li {
    width: 22.6%;
    float: left;
    margin: 0 1% 10px;
}
#jdsSmartMenuSU ul.jb li:nth-child(5) a,
#jdsSmartMenuSU ul.jb li:nth-child(6) a,
#jdsSmartMenuSU ul.jb li:nth-child(7) a,
#jdsSmartMenuSU ul.jb li:nth-child(8) a,
#jdsSmartMenuSU ul.jb li:nth-child(9) a,
#jdsSmartMenuSU ul.jb li:nth-child(10) a,
#jdsSmartMenuSU ul.jb li:nth-child(11) a,
#jdsSmartMenuSU ul.jb li:nth-child(12) a,
#jdsSmartMenuSU ul.jb li:nth-child(13) a,
#jdsSmartMenuSU ul.jb li:nth-child(14) a,
#jdsSmartMenuSU ul.jb li:nth-child(15) a,
#jdsSmartMenuSU ul.jb li:nth-child(5) em,
#jdsSmartMenuSU ul.jb li:nth-child(6) em,
#jdsSmartMenuSU ul.jb li:nth-child(7) em,
#jdsSmartMenuSU ul.jb li:nth-child(8) em,
#jdsSmartMenuSU ul.jb li:nth-child(9) em,
#jdsSmartMenuSU ul.jb li:nth-child(10) em,
#jdsSmartMenuSU ul.jb li:nth-child(11) em,
#jdsSmartMenuSU ul.jb li:nth-child(12) em,
#jdsSmartMenuSU ul.jb li:nth-child(13) em,
#jdsSmartMenuSU ul.jb li:nth-child(14) em,
#jdsSmartMenuSU ul.jb li:nth-child(15) em
{  height: 40px;}
/* #jdsSmartMenuSU ul.jb li:nth-child(5) ,
#jdsSmartMenuSU ul.jb li:nth-child(6) ,
#jdsSmartMenuSU ul.jb li:nth-child(8) ,
#jdsSmartMenuSU ul.jb li:nth-child(10) ,
#jdsSmartMenuSU ul.jb li:nth-child(11) ,
#jdsSmartMenuSU ul.jb li:nth-child(12) ,
#jdsSmartMenuSU ul.jb li:nth-child(5) em,
#jdsSmartMenuSU ul.jb li:nth-child(6) em,
#jdsSmartMenuSU ul.jb li:nth-child(11) em,
#jdsSmartMenuSU ul.jb li:nth-child(14) em,
#jdsSmartMenuSU ul.jb li:nth-child(15) em
{ line-height: 40px;} */

#contentsArea .navBox ul.jb li a {
    display: block;
    background: #fff;
    color: #127308;
    font-size: 90%;
    font-weight: bold;
    padding: 13px 0;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    /*text-decoration: underline;*/
}
#contentsArea .navBox ul.jb li em {
    display: block;
    background: #fdfb44;
    color: #127308;
    font-size: 90%;
    font-weight: bold;
    padding: 13px 0;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
}
.navFoot{display: none;}

.navSub{margin: 20px 0;}
.navSub ul{ margin: 0 10px;}
.navSub ul li{ margin-bottom: 5px}
.navSub ul li:last-child{margin-right: 0;}
#contentsArea .navSub ul li a{font-size: 80%; padding: 10px 0 8px; display: block; text-align: center; position: relative; letter-spacing: 1px;}
#contentsArea .navSub ul li a:before{ display: block; content: ""; position: absolute; width: 7px; height: 4px; top: 15px; right: 10px;}
#contentsArea .navSub ul li .btn0{background: #fcf5f1; border: 1px solid #7d2f00; color: #7d2f00;}
#contentsArea .navSub ul li .btn0:before{background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/award_icon0.png) no-repeat;}
#contentsArea .navSub ul li .btn1{background: #fffde2; border: 1px solid #aa800e; color: #aa800e;}
#contentsArea .navSub ul li .btn2{background: #f3f3f3; border: 1px solid #7b7b7b; color: #7b7b7b;}
#contentsArea .navSub ul li .btn3{background: #e9ffe7; border: 1px solid #2b8821; color: #2b8821;}
#contentsArea .navSub ul li .btn1:before{background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/award_icon1.png) no-repeat;}
#contentsArea .navSub ul li .btn2:before{background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/award_icon2.png) no-repeat;}
#contentsArea .navSub ul li .btn3:before{background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/award_icon3.png) no-repeat;}

.htlBox {margin: 20px 10px 10px !important;}
.htlBox .btn li {width: 100%; margin: 0 !important;}
.htlBox .btn li:nth-child(2n-1) a{ margin: 0 !important;}
#contentsArea .htlBox .btn li a {font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 120%; letter-spacing: 1px; font-weight: bold;
  padding: 10px 0;
  background: #c49e02;
  border-radius: 0;
  position: relative;
  margin: 0 10px 10px !important;
}
#contentsArea .htlBox .btn{margin-bottom: 10px;}

.htlBox .btn li a:before{display: block; content: ""; background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/map_icon.png) no-repeat; width: 5px; height: 9px; position: absolute; top: 17px; right: 15px;}
.htlBox .btn li a span{ width: 150px; margin: 0 auto; display: block; padding-left: 20px; text-align: center; position: relative;}
.htlBox .btn li a span:before{display: block; content: ""; background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/airplan.png) no-repeat; width: 17px; height: 18px; position: absolute; top: 2px; left: 8px;}
.htlBox .btn li .plan_s span:before{display: none;}
.htlBox .plan li{margin:0 0 19px;}
.htlBox .plan li a{border-radius: 0; padding: 15px; border-color: #b48404; position: relative;}
.htlBox .plan li a .planName{ margin-bottom: 5px; color: #b48404; text-align: center; font-size: 110%; letter-spacing: 1px; font-weight: bold; font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin-top: 0;} 
.htlBox .plan li a .text{font-size: 80%; line-height: 160%;}
.htlBox .plan li a:before{display: block; content: ""; background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/ribbon1.png) no-repeat; width: 69px; height: 39px; position: absolute; top: -2px; left: -5px; border: none !important; transform:none !important;}
.htlBox .plan li a:after{display: block; content: ""; background: url(https://img.travel.rakuten.co.jp/kaigai/award/2024/images/ribbon2.png) no-repeat; width: 69px; height: 39px; position: absolute; bottom: -4px; right: -7px;}
#contentsArea .htlBox .plan li a:hover{text-decoration: none; background: #fefdeb;}
.htlBox .basic{border-bottom: none; padding-bottom: 0;}
.htlBox .basic:before{display: none;}
.htlBox .photo{ margin: 10px 0 15px; width: 100%;}


.htlBox .area{ letter-spacing: 1px; background: none; color: #000; padding: 0; margin-top: 10px; text-align: center;}
.htlBox h2{ margin-top: 20px; padding: 0 10px; text-align: center; font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 120%; letter-spacing: 1px;}
.column1 .htlBox .plan{ margin: 0 10px;}
.htlBox1 .plan li.sub dl dt{ float: right;}
.htlBox1 .plan li.sub dl dd{font-size: 80%; line-height: 160%; }
.htlBox1 .plan li.sub.point dl dd{font-size: 70%; line-height: 160%; width: 100%;}
.htlBox1 .plan li.sub dl dd span{display: block; border-bottom: 1px solid #b48404; padding-bottom: 8px; margin-bottom: 8px; color: #b48404; text-align: left; font-size: 110%; letter-spacing: 1px; font-weight: bold; font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}





/* surveyForm */


input:checked + .survey-radio-btn::after {
    content: '';
    display: block;
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #565656;
    top: 3px;
    left: 3px;
}
.typTxt { font-size: 12px; padding: 3%; width: 87%; margin: 10px auto;}
.subBtn {width: 190px;
height: 30px;
line-height: 28px;
border-radius: 100px;
background-color: #565656;
border: none;
display: block;
margin: 0 auto;
font-size: 14px;
text-align: center;
color: #ffffff;
overflow: hidden;
outline: none;
cursor: pointer;
-webkit-appearance: none;}
.subBtn:hover { opacity: 0.8;}

#PART03 { padding: 20px 0 0;}
#PART01,#PART02,#PART03 { font-size: 120%;}

/* ----受賞名から探す---- */
.awards { display: flex; justify-content: center; flex-wrap: wrap; margin: 24px 8px 0;}
.awards li { width: 50%;}
.awards li a { display: block; text-align: center;}
.awards li img { width: 100%; max-width: 384px;}

#keyVisual p {
        margin: 0 16px 24px;
        font-family: "Hiragino Mincho ProN", "Noto Sans Japanese", serif;
        font-size: 14px;
        line-height: 24px;
        color: #98730F;
    }

    #keyVisual.sub h1 img {
        display: block;
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    /* ----絞り込み枠---- */
.fontF { font-family: "Hiragino Mincho ProN", "Noto Sans Japanese", serif;}
.selectBtnNew{ overflow: hidden; margin:0 8px;}
.selectBtnNew.sbox2 .submenu{ margin: 0px 0 24px; overflow: hidden;}
.submenu p{ display: inline; font-weight: bold; width:30%; margin: 10px 0;font-size: 15px;}
.submenu p.count{ font-size: 14px; margin: 20px 10px 0 0; width: 30%; color: #aa800e;}
.submenu p.count span.countNum{width: 35px; text-align: right; margin-left: 68px;}
.submenu p.kome{ display: inline-block; width: auto; border-radius: 5px; color:#fff ; background: #c49e02; font-size: 14px; padding: 4px 8px; cursor: pointer;}
.submenu p.kome.on{color:#fff ;background: #c6bb8d;}
.jdsSelectNothing{ display: none; font-size: 14px; text-align: center; margin: 30px auto; width: 100%;}

.jdsSelectShow .oneline .thema{ display: flex; justify-content: center;}
.jdsSelectShow .oneline p { display: block; width: 100%; text-align: center; padding:0 0 8px 0; color: #aa800e;}


.typeRow{ margin: 0 auto; line-height: 1; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.typeRow ul{ display: flex; justify-content: center; align-items: center; /*flex-wrap: wrap;*/}
.typeRow ul li {display: inline-block;border: none;border-radius: none;padding: 0;}
.typeRow ul li a{ display: block; font-size: 13px; padding: 12px 12px; border:1px solid #c49e02; border-radius: 5px; background: #fff; color:#aa800e!important;text-decoration: none !important;}
.typeRow ul li.checked a{ background: #c49e02; color: #fff !important;}

.typeRow.area ul{ display: flex; justify-content: center; flex-wrap: wrap; overflow: hidden;}
.typeRow.area ul li {margin:0 4px 8px;}
.typeRow.area ul li a{ color:#bb001f !important;border: 1px solid #bb001f; padding: 12px;}
.typeRow.area ul li.none a{ border:1px solid #ddd; background: #fff; color: #ddd !important; }
.typeRow.area ul li.none.checked a { border:1px solid #ddd; background: #fff; color: #ddd !important; }
.typeRow.area ul li.checked a{ background: #bb001f; color: #fff !important;}
.typeRow.area p { width: 100%; text-align: center; color: #aa800e;}


/* ----Rakuten Travel Hotel & Ryokan of the Year 2024---- */
.hotels section.plan { width: calc(100% - 16px); margin: 0 8px 8px; margin-bottom: 14px; background: #fff; overflow: hidden;}

.hotels ul.jdsSlides { width: 100%; overflow: hidden; position: relative;}
.hotels ul.jdsSlides img{ width: 100%;}

.hotels div.planinfo {width: 100%; overflow: hidden; padding: 20px 0 24px 0;font-family: "Hiragino Mincho ProN", "Noto Sans Japanese", serif;}
.hotels .area { text-align: center; font-size: 14px;}
.hotels .htlname{ font-weight: bold; text-align: center; font-size: 18px; line-height: 24px; padding: 16px 16px 0;}
.hotels .btn {width: calc(100%-32px); margin:0 16px 24px 16px; overflow: hidden; display: flex; justify-content: center;}
.hotels .btn li { width: 46%; margin:0 2%;}
.hotels .btn li a { display: block; width: 100%; border-radius: 6px; padding:12px 0; text-align: center; color: #fff !important; background-color:#483e26;}
.gold .btn li a { background-color:#C49E02 !important;}
.silver .btn li a { background-color:#696A69 !important;}
.jstyle .btn li a { background-color:#387E31 !important;}

.hotels section.column1 { width: calc(100% - 16px); background: #fff; overflow: hidden; margin:24px 8px 0; position: relative;}
.hotels section.column1 ul.jdsSlides { width: 100%; float: left; position: relative; background-color: #ccc;}
.hotels section.column1 ul.jdsSlides li { background: #ccc;}
.hotels section.column1 ul.jdsSlides img{ width: 100%;}

.hotels section.column1 div.planinfo {width: 100%; position: relative; float:right; padding: 24px 0; font-family: "Hiragino Mincho ProN", "Noto Sans Japanese", serif;}
.hotels section.column1 div.planinfo .area   { color: #483e26; font-size: 16px;}
.hotels section.column1 div.planinfo .htlname{ color: #483e26; padding: 16px 0; font-size: 21px; line-height: 150%;}
.hotels section.column1 div.planinfo .explain{ display:none; position: relative; text-align: center; line-height: 150%; color: #825C11; font-size: 14px; padding: 32px 16px; background: url(https://img.travel.rakuten.co.jp/award/2025/images/line_ryokan_top.png) no-repeat top center;}
.hotels section.column1 div.planinfo .explain::before {display: block; position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 20px; background: url(https://img.travel.rakuten.co.jp/award/2025/images/line_ryokan_btm.png) no-repeat bottom center;}
.hotels section.column1 .rank { text-align: center; color: #95711A; font-size: 24px; font-weight: bold; margin:0 0 24px; position: relative;}
.hotels section.column1 .rank span{ font-size: 28px;}
.hotels section.column1 .rank em { display: block; font-size: 16px;}
.hotels section.column1 .hotelimg { display: block; position: relative;}
.hotels section.column1 .rank:after { display: block; position: absolute; content: ""; top: -10px; left:50%; margin-left: -170px; width: 81px; height: 81px; z-index: 99;}
.hotels section.column1 .rank.first:after { background: url(https://img.travel.rakuten.co.jp/award/2025/images/ryokan1st.png) no-repeat; background-size: cover;}
.hotels section.column1 .rank.second:after { background: url(https://img.travel.rakuten.co.jp/award/2025/images/ryokan2nd.png) no-repeat; background-size: cover;}
.hotels section.column1 .rank.third::after { background: url(https://img.travel.rakuten.co.jp/award/2025/images/ryokan3rd.png) no-repeat; background-size: cover;}
.hotels section.column1 .chiikiinfo {width:100%; position: relative; float:right; padding: 24px 0; font-family: "Hiragino Mincho ProN", "Noto Sans Japanese", serif; }
.hotels section.column1 .chiikiinfo .area { font-size: 18px;font-weight: bold;}
.hotels section.column1 .chiikiinfo .explain {display: block;line-height: 150%; font-size: 14px; padding:16px;}
.hotels section.column1 .chiikiinfo ul.btn { justify-content: center;}
.hotels section.column1 .chiikiinfo ul.btn li {  width: 90%;}

.hotels section.column1 img.chiikimap { width: 100%; float: left;}
.hotels section.column3 .btn li,.hotels section.column4 .btn li {width: 100%;}


.bronze .jdsCoponSwitch { background-color: #975530;}
.bronze .jdsCoponSwitch.active-submenu { background: url(https://img.travel.rakuten.co.jp/award/2025/images/close.png) no-repeat 96% 50% #975530;}
.jstyle .jdsCoponSwitch { background-color: #387E31;}
.jstyle .jdsCoponSwitch.active-submenu { background: url(https://img.travel.rakuten.co.jp/award/2025/images/close.png) no-repeat 96% 50% #387E31;}
.jdsCoponSwitch { width:calc(100% - 16px); overflow: hidden; margin:0 8px 1px; background: url(https://img.travel.rakuten.co.jp/award/2025/images/open.png) no-repeat 96% 50%; font-size: 16px; text-align: center; color: #fff; font-weight: bold; font-family: "Hiragino Mincho ProN", "Noto Sans Japanese", serif;  padding: 16px 0;}
.hotellists { width:100%; margin: 24px 0 0; overflow: hidden;}
.hotellists ul {width:calc(100% - 16px); padding: 8px 8px 24px; float: left; overflow: hidden;}
.hotellists ul li { width: 100%; margin: 2px 0; float: left; line-height: 18px; font-size: 14px; font-family: "Hiragino Mincho ProN", "Noto Sans Japanese", serif;}
.hotellists ul li a {display: block; color: #000 !important;}
.hotellists h3.area{text-align: center; padding-top: 12px;}