﻿/*******************************************************************************
title_bg
********************************************************************************/
/*タイトル背景*/
.title_bg {
    position: absolute;
    top: 0;
    transform: translateX(-50%) translateY(0);
    padding-top: 574px;
}
.title_bg img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
    opacity: 0;
}
.title_bg img:nth-child(1) {
}
.title_bg img:nth-child(2)  {
    animation-delay  : 5s;
}
.title_bg img:nth-child(3)  {
    animation-delay  : 10s;
}
.title_bg img:nth-child(4)  {
    animation-delay  : 15s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}


/*--840px以下 ------------------------------------*/
@media only screen and (max-width: 840px) {
.title_bg {
    padding-top: 76vw;
}
}




/*******************************************************************************
selectByArea
********************************************************************************/
/*複数県エリアの設定*/
#map > [id^="map_"]{
    display: none;
}

#map .mapBtn li{
    cursor: pointer;
    min-width: 5em;
    text-align: center;
}
#map #map_top{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1em;
    bottom: 1em;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    background-color: #FFF;
    color: #99ccff;
    box-sizing: border-box;
    cursor: pointer;
    display: none;
}
#map #map_top::before{
    content: "▼";
    display: block;
    line-height: 1;
    transform: rotate(90deg);
    font-size: 0.8em;
    margin-right: 0.2em;
}

/*九州のボタン配置*/
#map .mapBtn li.mapBtn_fukuoka{left:66%; top: 5%;}
#map .mapBtn li.mapBtn_saga{left:30%; top: 16%;}
#map .mapBtn li.mapBtn_nagasaki{left:12%; top: 33%;}
#map .mapBtn li.mapBtn_kumamoto{left:32%; top: 54%;}
#map .mapBtn li.mapBtn_oita{left:79%; top: 25%;}
#map .mapBtn li.mapBtn_miyazaki{left:77%; top: 61%;}
#map .mapBtn li.mapBtn_kagoshima{left:33%; top: 80%;}
/*福岡*/
#map .mapBtn li.mapBtn_fukuoka01{left:50%; top: 13%;}
#map .mapBtn li.mapBtn_fukuoka02{left:12%; top: 30%;}
#map .mapBtn li.mapBtn_fukuoka03{left:59%; top: 64%;}
/*佐賀*/
#map .mapBtn li.mapBtn_saga01{left:29%; top: 10%;}
#map .mapBtn li.mapBtn_saga02{left:68%; top: 60%;}
#map .mapBtn li.mapBtn_saga03{left:19%; top: 73%;}
/*長崎*/
#map .mapBtn li.mapBtn_nagasaki01{left:55%; top: 10%;}
#map .mapBtn li.mapBtn_nagasaki02{left:30%; top: 73%;}
#map .mapBtn li.mapBtn_nagasaki03{left:72%; top: 46%;}
#map .mapBtn li.mapBtn_nagasaki04{left:58%; top: 83%;}
#map .mapBtn li.mapBtn_nagasaki05{left:5%; top: 27%;}
/*熊本*/
#map .mapBtn li.mapBtn_kumamoto01{left:9%; top: 45%;}
#map .mapBtn li.mapBtn_kumamoto02{left:22%; top: 20%;}
#map .mapBtn li.mapBtn_kumamoto03{left:66%; top: 47%;}
#map .mapBtn li.mapBtn_kumamoto04{left:41%; top: 77%;}
/*大分*/
#map .mapBtn li.mapBtn_oita01{left:40%; top: 10%;}
#map .mapBtn li.mapBtn_oita02{left:65%; top: 33%;}
#map .mapBtn li.mapBtn_oita03{left:73%; top: 56%;}
#map .mapBtn li.mapBtn_oita04{left:13%; top: 70%;}
/*宮崎*/
#map .mapBtn li.mapBtn_miyazaki01{left:63%; top: 12%;}
#map .mapBtn li.mapBtn_miyazaki02{left:64%; top: 54%;}
#map .mapBtn li.mapBtn_miyazaki03{left:6%; top: 46%;}
/*鹿児島*/
#map .mapBtn li.mapBtn_kagoshima01{left:49%; top: 9%;}
#map .mapBtn li.mapBtn_kagoshima02{left:47%; top: 60%;}
#map .mapBtn li.mapBtn_kagoshima03{left:5%; top: 54%;}


/*******************************************************************************
selectByHotel
********************************************************************************/
/*--1000px以下 ------------------------------------*/
@media only screen and (max-width: 1000px) {
[class^="areaTab"] li {
    min-width: inherit;
}

}



/*******************************************************************************
prArea
********************************************************************************/
/*PRエリア個別設定*/
/*沖縄観光マップ*/
#PR-kankomap{
    background-color: #fde3e4;
    background-image: url("../img/pr_bg01.webp");
    background-repeat: no-repeat;
    background-position: right top;
}

/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {

}

/*******************************************************************************
AccessRanking　複数県
********************************************************************************/
.rankingWrap ul[id^="tab-"]{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid #999;
    border-top: 0;
}
.rankingWrap ul[id^="tab-"] li{
    text-align: center;
    flex-grow: 1;
    border-left: 1px solid #999;
    padding: 0.5em 0;
    cursor: pointer;
}
.rankingWrap ul[id^="tab-"] li:nth-of-type(1){
    border: 0;
}
[id^="webconnect-ranking-"] .fw-static-api-narrowdown {
    top: -7em;
}
.rankingWrap ul[id^="tab-"] li.active{
    background-color: #fde3e4;
}


/*--460px以下 ------------------------------------*/
@media only screen and (max-width: 460px) {
[id^="webconnect-ranking-"] .fw-static-api-narrowdown {
    top: 0em;
}
}


