
/* ----------------------------------
      TOPimage
 ---------------------------------- */
 

 .campBnrArea {
    padding: 25px;
}
.area__topImage{position:relative;
}
.area__topImage img{height: 250px;}
.area__topImage::before {
    content: "";
    z-index: 1;
    /* background: #33333370; */
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: absolute;
}
.area_furano .area__topImage::before,.area_kyushu .area__topImage::before{
    background: #3333331c;  
}
.at__inr {
    z-index: 2;
    position: absolute;
    padding: 0 30px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 1px 1px 10px #333;
}
.area__topImage h1{
    font-size: 34px;
    font-weight: bold;
}
.area__topImage .area__name,
.mainImgBlock .area__name{
    box-sizing: border-box;
    text-transform: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    font-size: 34px;
    font-weight: bold;
}
.area__topImage p{font-size: 14px;}
.getdpprice_info img{
    width: 40px;
    display: block;
    margin: 0 auto;
}


/* ----------------------------------
      SearchBox
 ---------------------------------- */
.sw__dwWrap{
  width: calc(100% - 30px);
  margin: 15px auto;
  border-radius: 10px;
  border: 2px solid #e1e1e1;
  overflow: hidden;
  background:#fff;

}
.docoWrap--ttl {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 15px 10px;
}
.docoWrap--ttl i{
  margin-right: 10px;
  background: #afe0f3;
  padding: 10px;
  border-radius: 40px;
  color: #005e87;
}
.sw__dwWrap .docoSelect{padding: 0 15px 15px;}
.dWrap .ttl,.ttl-type-doco{color:#333;}
.docoWrap.top{height:auto;box-shadow:inherit;}

#docoAcbtn {background: #afe0f3;text-align:center;}
#dppBtn {
    background: #afe0f3;
    color: #000;
    font-weight: bold;
}
#returnBtn {
    background: #afe0f3;
    font-weight: bold;
    margin-top: 15px;
}
.dwWrap__left{display:none;}

body[class*=area_] .def__dpp .dwWrap__left{display: none;}

/* ----------------------------------
    Slidebanner
 ---------------------------------- */
 
.swiper-container .pic {
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}
 
.swiper-container {
    overflow: hidden;
    position: relative;
}
.swiper-pagination{position: inherit;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left:  20%;
    right: inherit;
    top: auto;
    height: 50px;
    margin: 0 0 0 5px;
    bottom: 0;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    left: inherit;
    right: 20%;
    top: auto;
    bottom:0;
    height: 50px;
    margin: 0 5px 0 0;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f30a";
    background: #fff;
    color: #2896c7;
    border: 1px solid #ccc;
    display: block;
    padding: 6px;
    border-radius: 20px;
    font-size: 10px;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f30b";
    background: #fff;
    color: #2896c7;
    border: 1px solid #ccc;
    display: block;
    padding: 6px;
    border-radius: 20px;
    font-size: 10px;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity:0;
}
.swiper-pagination-bullet-active {
    background: #2896c7;
}
.camp__readMore a{
    cursor: pointer;
    border-radius: 30px;
    border: 1px solid #ccc;
    display: block;
    margin: 0 auto;
    font-size: 12px;
    width: 200px;
    text-align: center;
    padding: 9px 0;
}

/* ----------------------------------
    tourBox
 ---------------------------------- */
.at__ttl {
    position: relative;
    font-size: 20px;
    border-left: 6px solid #0070b4;
    padding-left: 15px;
    line-height: 1.8;
}
.at__ttl::before {
    content: "";
    width: 6px;
    height: calc(100% / 2);
    background: #69acd5;
    display: block;
    position: absolute;
    left: -6px;
    bottom: 0;
}
.at__ttl span{display:block;}
.at__ttl .lead{font-weight:bold;}
.at__ttl .sub{
  font-size:16px;
}
.at_inr{padding:20px;}

.at__Boxinr {
  background:#fff;
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    width: 300px;
}
.at__sclBox{overflow-x: scroll;}
.at__box--ttl {
    font-size: 16px;
    padding:15px;
    font-weight: bold;
}
.at__box--cat + .at__box--ttl {padding: 8px 15px;}
.at__box--txt {
    padding: 0 15px 15px;
    font-size: 12px;
    line-height: 1.8;
   /* display: none; */
}
.area__tourBox{background: #f2f5f9;}
.area__tourBox.ptn2{
  background: #fff;
}
.ptn-txt .at__box--txt{display:block;}
.at__box{
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1000px;
    margin-top:30px;
}
.at__Boxinr .at__box--dp{padding: 0 15px 15px;}
.getdpprice.pri{
    color: #ed5629;
    font-size: 25px;
    font-weight: bold;
}
.getdpprice + .getdpprice_info {
    font-size: 10px;
    color: #555;
    display: block;
}
.at__box--cat {
    padding: 0;
    margin: 20px 15px 5px;
}
.at__box--cat--cld{
    background: #333;
    color: #fff;
    padding: 5px 10px;
    margin-right: 10px;
}

/* scrollBar */
.at__sclBox::-webkit-scrollbar{
  height: 6px;
}
.at__sclBox::-webkit-scrollbar-track{
  background-color: #ccc;
  border-radius: 10px;
}
.at__sclBox::-webkit-scrollbar-thumb {
    background-color: #2698c4;
    width: 40%;
    border-radius: 10px;
}

/* ----------------------------------
    osusumeTour
 ---------------------------------- */
 
 .ao__box{display:none;}
 .ao__box.active{display:block !important;}
 .ao__box [data-key]{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
 }
 .ao__box--img{width:40%;}
 .ao__box-info{
   width:calc(100% - 40% - 20px);
 }

.ao__box--ttl {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}
.ao__box-List+.ao__box--ttl{
  margin: 10px 0; 
}
.ao__box-List_cld {
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    box-sizing: border-box;
    display: inline-block;
    margin-right: 6px;
}
.ao__box--txt {
    font-size: 12px;
    line-height: 1.8;
    padding: 5px 0;
    background: #f2f5f9;
    padding: 10px;
    border-radius: 8px;
}
.addBg .ao__box--txt{
  background: #fff; 
}

.ao__box a {
    display: block;
    margin-top: 20px;
}
.ttt03--ttl {
    padding: 1rem 0;
}

body[class*=area_] .def__dpp .docoWrap .searchBox_wbf{
  padding:0;
}
body[class*=area_] .def__dpp .docoWrap .docoWrap--ttl{
    padding:15px 0;
}
body[class*=area_] .def__dpp .docoWrap{
    height: inherit;
}

body[class*=area_] .def__dpp .dwWrap__left{
 display: none; 
}
body[class*=area_] .def__dpp .dwWrap__right{
 display: block; 
}

body[class*=area_] .def__dpp.def__dp .dwWrap__left{
 display: none; 
}
body[class*=area_] .def__dpp.def__dp .dwWrap__right{
 display: block; 
}
    
/* ----------------------------------
  areaScroll
 ---------------------------------- */  
.area__sclBox{overflow-x:scroll;}
.area__sclBox ul {
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    width: 1000px;
    margin-top: 15px;
}
.area__sclBox li {
    min-width: 4rem;
    text-align: center;
    margin-right: 5px;
}
.area__sclBox li > a,
.area__sclBox li > span{
  border: 1px solid #ccc;
  background:#fff;
  display: block;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 40px;
}
.area__sclBox li.sel > a,
.area__sclBox li.sel > span{
    border: 2px solid #2698c4;
    font-weight: bold;
    color: #2698c4;
    background: #d0f2ff;
}
/* scrollBar */
.area__sclBox::-webkit-scrollbar{
  height: 2px;
}
.area__sclBox::-webkit-scrollbar-track{
  background-color: #ccc;
  border-radius: 10px;
}
.area__sclBox::-webkit-scrollbar-thumb {
    background-color: #69acd5;
    width: 40%;
    border-radius: 10px;
}

/* ----------------------------------
  mokutekiList
 ---------------------------------- */
.mokutekiList{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 0px;
}
.mokutekiList a {
    display: block;
    width:100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
}
.mokutekiList .pic {
    background: #69acd5;
    padding: 10px;
}
.mokutekiList .pic > img {
    height: 60px;
    width: auto;
    margin: 0 auto;
}
.mokutekiList h4,.mokutekiList h3,.areaBox__list h4,.areaBox__list h3{
    text-align: center;
    font-size: 10px;
    line-height: 1;
    padding: 10px 0;
    font-weight: bold;
}
.areaBox__list h4,.areaBox__list h3 {
    padding: 15px 0;
    font-size: 12px;
    line-height: 1.5;
}
.areaBox__list h4 span,.areaBox__list h3 span {
  display: block;
  color: #666;
  font-weight: normal;
}
.areaBox__list p{
  font-size: 12px;
  padding: 0px 10px 10px;
}
.mokutekiList h4::after,.areaBox__list h4::after{
/*     font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0a9";
margin-left: 10px;
color: #69acd5; */
}

/* ----------------------------------
  areaBox
 ---------------------------------- */
.areaBox,.addBg{background: #f2f5f9;}
.departureBlk.addBg2,.spotBlk.addBg2{background: #fff;}
.spotBlk.addBg2 .at__ttl {
    margin: 20px 0;
}
.areaBox .middleArea,
.areaBox .middleArea2 {
  display: none;
}
.areaBox .middleArea p:first-child{
  background: #3cb371;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  margin: 10px 0 0 0;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  width: calc(100% / 1.2);  
}
.areaBox .middleArea p:nth-child(2){
  background: #32cd32;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  margin: 10px 0 0 0;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  width: calc(100% / 6);  
}
.areaBox .middleArea2 p:first-child{
  background: #1e90ff;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  margin: 10px 0 0 0;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  width: calc(100% / 3);  
}
.areaBox .middleArea2 p:nth-child(2){
  background: #9400d3;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  margin: 10px 0 0 0;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  width: calc(100% / 1.5);  
}
.areaBox__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 0px;
}
.areaBox__list > a {
    display: block;
    width:100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    background: #fff;
}
.areaBox__list .smallArea {
    display: block;
    width:100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    background: #fff;
}
.areaBox__list .smallArea .areaBtn p {
  width: 90%;
    border: 1px dotted rgb(170, 170, 170);
    border-radius: 5px;
    margin: 5px auto;
    padding: 5px;
    text-align: center;
    margin-top: 10px;
}

.rankingBox .tabItem2{
  padding:30px 0 0;
}

.gourmet_tourBox .at__box--txt,.purpose__tourBox .at__box--txt,.area__hotelBox .at__box--txt{
  display:block;
}
.at__box--img img{
    height: 220px;
    width: 100%;
}
.ao__box--img img {
    width: 100%;
  height: 135px;
}
.purpose__tourBox div[data-key]{
    padding-bottom: 20px;
}
.purpose__tourBox iframe {
  margin-top: 20px;
}
.getdpprice.pri .yen{font-size:80%;}
.area__hotelBox{background: #f2f5f9;}
[class*=area_okinawa] .area__hotelBox{background:#fff;}
.lpBlk{margin:0;}
.seasonBlk .at__ttl {
  color: #fff;
}

.departureBlk{
  background: #f3f5f9;
  padding: 30px 0;  
  margin:0;
}
.area_chugoku .departureBlk,.area_chugoku .spotBlk{background:#fff;}
.area_chugoku .spotBlk{padding:30px 0;}
.area_chugoku .spotBlk__wrap{padding:30px 0;}
.area_chugoku .kankoInfo__itm--txt{background:#fff;}

.seasonBlk {margin:0;padding: 30px 0;}
.seasonBlk .at__ttl {margin-bottom: 30px;}
.seasonBlk dl{padding: 20px 0;}
  
.spotBlk {
    background: #f5f5f5;
    padding: 10px 0 20px;
}
.kankoInfo{margin:30px 0;}
.faqBlock .item dt{min-height:inherit;}
.faqBlock .at__ttl{margin-bottom: 30px;}
.departureBlk ul{margin-top:30px;}


.area_kyushu .departureBlk{background:#fff;}

.faqBlock .item dd{
    background: #eee;
    padding: 20px;
    border-radius: 20px;
}
.faqBlock .item dd .txt {padding-top: 0;}

.faqBlock.addBg .item dd {
    background: #fff;
}
.area_sapporo .faqBlock{
  background: #f2f5f9;
  padding: 30px 0;
  margin:0;
}
.area_sapporo .faqBlock .item dd {
    background: #fff;
}

#big__bnrWrap {
    margin: 0;
    padding: 18px 0;
    background: #E0EAFC;
    background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);
    background: linear-gradient(to right, #CFDEF3, #E0EAFC);
}

#big__bnrWrap img{
  border: 1px solid #ccc;
  border-radius: 5px;
}
.mapBox li{text-align:center;}
/* .section-my-medium{margin:0;} */
.infoBlk,.faqBlock{padding:40px 0;}
.area_kanto .sbw_mddArea{margin-top:15px;}
.mainImgBlock .at__inr{background-color: #0070b4;}

@media only screen and (min-width:768px){
  .area_kanto .sbw_mddArea{margin-top:0;}
  .at__inr {
      text-align: center;
      top: 15%;
      width: 1000px;
      text-shadow: 0px 0px 6px #000;
  }
  .mainImgBlock .at__inr{background: none;}
  .area__topImage h1 {font-size: 50px;}
  .area__topImage .area__name,.mainImgBlock .area__name {font-size: 40px;}
  .area__topImage p {font-size: 18px;}
  .area__topImage img{width:100%;height:auto;}

  .swiper-button-prev, .swiper-rtl .swiper-button-next{left: 30%;}
  .swiper-button-next, .swiper-rtl .swiper-button-prev{right: 30%;}
  
  .top__sbWrap{
    position:relative;
    overflow: hidden;
    padding-bottom:20px;
  }
  .sw__dwWrap{
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      z-index: 1;
      width: 1100px;
      display: flex;
      flex-wrap: wrap;
      border: none;
      background:none;
      justify-content: space-between;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .docoWrap.top {
      height: 560px;
      box-shadow: inherit;
      background: #ffffffeb;
  }
  .dwWrap__left {display: block;width: 765px;}
    .dwWrap__right {
        background: #ffffffeb;
        width: calc(100% - 785px);
        border-radius: 10px;
    }
   .docoBtnList li, .docoBtnList.mokuteki li{background:#fff;}
   .campBnrArea{
      margin: 60px auto;
      width: 1200px;
      padding: 0;
    }
  .at_inr {
      padding: 50px 0;
      width: 1100px;
      margin: 0 auto;
  }
  .at__ttl{font-size:26px;}
  .at__ttl span:nth-of-type(2) {font-size: 16px;}
  .getdpprice_info{width:100%;}
  .at__box--txt{font-size:14px;}
  .at__sclBox{overflow-x:inherit;}
  .at__Boxinr {
      /* width: calc(100% / 4 - 10px); */
      width:100%;
      margin-bottom: 15px;
  }
  .area__hotelBox .at__Boxinr {
      /* width: calc(100% / 3 - 15px); */
      width: 100%;
  }
  .at__box {width: 1100px;}
  .at__box--ttl {font-size: 18px;}.at__box--cat{font-size:12px;}.getdpprice.pri{font-size:20px;}
  .ao__box a {
    background: #fff;
      margin-top: 20px;
      /* width: calc(100% / 3 - 15px); */
      width:100%;
      border: 1px solid #ccc;
      border-radius: 6px;
      overflow: hidden;
  }
  .ao__box{
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .area__sclBox ul{width:100%;}
  .ao__box.active{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 0px;
  }
  .area__topImage img {
      width: 100%;
      height: 830px;
  }
  .ao__box-info {
      width: 100%;
      padding: 20px;
      background: #fff;
  }
  .area__sclBox{overflow-x: inherit;}
  .mokutekiList .pic {
      background: inherit;
      padding: 0;
  }
  .mokutekiList{
    grid-template-columns: repeat(6, 1fr);
  }
  .mokutekiList a {
      margin-top: 20px;
  }
  .mokutekiList .pic > img {
      height: auto;
      width: 100%;
      margin: 0 auto;
  }
  .mokutekiList h4,.mokutekiList h3, .areaBox__list h4,.areaBox__list h3 {
      font-size: 14px;
      padding: 15px 0;
  }
  .purpose__tourBox iframe {
  margin-top: 20px;
  width: 1100px;
  height: 500px;
  }
  .areaBox__list p{
    padding: 0 5px 5px;
    font-size: 12px;
  }
  .areaBox__list p{
    padding: 0 10px 10px;
    font-size: 13px;
  }
  .areaBox__list > a {
    width: calc(100% / 6 - 10px);
  }
  .docoSelect {width: 50%;}
  .docoWrap #docoMap {width: 48%;}
  .mapPankuzu{right: 175px;}
  
  /* map */
  .mapBox li.map_hkd-sapporo {left: 33px;}
  .mapBox li.map_oka-rito {left: 71px;}  
  .mapWrap.shikoku .mapBox {
    background: url(/upload/tenant_1/shi_map.webp) no-repeat right; 
        background-size: 75% auto;
  }
  .mapWrap.kyushu .mapBox {
      background: url(/upload/tenant_1/kyu_map.webp) no-repeat right;
          background-size: 75% auto;
  }
  .mapWrap li.map_shi-ehime {left: 59px;}  
  /* 九州 */
  .mapBox li.map_kyu-fukuoka {left: 220px;top: -10px;}
  .mapBox li.map_kyu-oita {left: 270px;top: 58px;}
  .mapBox li.map_kyu-miyazaki {top: 143px;left: 270px;}
  .mapBox li.map_kyu-yakushima {top: 208px;left: 240px;}
  .mapBox li.map_kyu-kagoshima {left: 124px;top: 173px;}
  .mapBox li.map_kyu-amami {top: 206px;left: 43px;}
  .mapBox li.map_kyu-kumamoto {top: 105px;left: 208px;}
  .mapBox li.map_kyu-nagasaki {top: 95px;left: 132px;}
  .mapBox li.map_kyu-goto {top: 65px;left: 70px;}
  .mapBox li.map_kyu-saga {top: 20px;left: 135px;}
  .mapBox li.map_kyu-iki{left: 50px;}
  .ao__box--img{width:100%;}

.at__box--img img{
    height: 200px;
    width: 100%;
}

.gourmet_tourBox .at__box--img img{
    width: 100%;
    height: auto;
}

.ao__box--img img {
    height: 235px;
    width: 100%;
}
/* .at__box .at__Boxinr:nth-of-type(2).last-box,.at__box .at__Boxinr:nth-of-type(5).last-box {
    margin-right: auto;
    margin-left: 18px;
} */
#big__bnrWrap {
    padding: 30px 0;
}
.areaBox__list{
  grid-template-columns: repeat(6, 1fr);
}
.area_sapporo .areaBox__list{
  grid-template-columns: repeat(4, 1fr);
}
.areaBox__list > a{width:100%;}
.areaBox .middleArea,
.areaBox .middleArea2 {
  display: flex;
}
.addBg .ao__box--txt{
  background: #f2f5f9; 
}
.at__box{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}

.gourmet_tourBox .at___box{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    margin-top: 30px;
}

.gourmet_tourBox .at___box a {
  background: #fff;
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    pointer-events: none;
    margin-bottom: 20px;
}

.area_kanto .sw__dwWrap {
    top: 56%;
}
/* .area_kanto .area__topImage img {
    height: 750px;
} */
}
@media only screen and (max-width: 599px){
  .gourmet_tourBox .at___box {
    width: 100%;
    display: block;
  }
}

.area_kanto .area__hotelBox#page_4{background:#fff;}
.area_kanto .areaBox#page_6{background:#fff;}
@media only screen and (max-width:768px){
  [class*=area_kyushu] .docoWrap.top {
      height: auto;
  }
  .docoWrap.top.acd{
      height: auto !important;
  }
    
}

/* --------------------------------------------
          トップバナー ここから
--------------------------------------------*/
@media only screen and (min-width: 768px){
  .area__topImage{
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 40px 0;
  }
  .area__topImage img{
    position: absolute;
    top: 0;
    z-index: -1;
    bottom: 0;
    right: 0;
    left: 0;
    object-fit: cover;
    height: 1000px;
  }
  .area_kanto .area__topImage img,
  .area_kansai .area__topImage img {
    position: absolute;
    top: 0;
    z-index: -1;
    bottom: 0;
    right: 0;
    left: 0;
    object-fit: cover;
    height: 800px;
  }
  .at__inr{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    -webkit-transform: inherit;
    margin-left: auto;
    margin-right: auto;
  }
  .sw__dwWrap{
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    -webkit-transform: inherit;
    margin-bottom: 30px;
  }
  body[class*=area_] .def__dpp .dwWrap__left{
   display: block; 
  }
  body[class*=area_] .def__dpp .dwWrap__right{
   display: block; 
  }
  body[class*=area_] .def__dpp.def__dp .dwWrap__left{
   display: block; 
  }
  body[class*=area_] .def__dpp.def__dp .dwWrap__right{
   display: block; 
  }
  body[class*=area_] .sw__dwWrap.def__dpp {width:900px;}
  body[class*=area_] .def__dpp  .dwWrap__left {
      display: block;
      width: 480px;
  } 
  body[class*=area_] .def__dpp  .dwWrap__right {
    width: calc(100% - 500px);
  } 
  body[class*=area_] .def__dpp .sbw__btn {
      margin-top: 20px;
  }
  body[class*=area_] .def__dpp .docoWrap .docoWrap--ttl {
      padding: 5px 0 0;
  }  
  body[class*=area_] .def__dpp .docoWrap {
    padding: 10px 20px 30px;
  }
  
}

/* 四国・沖縄トップバナー */
.topLongBnr{
    position: absolute;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 10;
}
.topLongBnr a{
      display: block;
      width: 1200px;
}
.topLongBnr a img{
  width: 100%;
    height: auto;
    max-width: 1200px;
}
@media only screen and (min-width: 768px){
  .topLongBnr{
    position: relative;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .topLongBnr a{
    width: 100%;
    text-align: center;
  }
  .topLongBnr a img{
    position: relative;
    display: inline;
  }
  .topLongBnr a img.pcOnry{
    display: inline;
  }
  .topLongBnr a img.spOnry{
    display: none;
  }
}
@media only screen and (max-width: 767px){
  .area__topImage{
    padding: 10px 0;
  }
  .topLongBnr a img.pcOnry{
    display: none;
  }
  .topLongBnr a img.spOnry{
    display: inline;
  }
  .topLongBnr{
    width: 90%;
    margin-left: 5%;
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: inherit;
    margin-bottom: 10px;
  }
  .area__topImage img{
    width: 100%;
    object-fit: cover;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -10;
  }
  .topLongBnr a{
    height: 100%;
    min-height: 158px;
  }
  .at__inr{
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: inherit;
    padding: 30px;
  }
}
/* --------------------------------------------
          トップバナー ここまで
--------------------------------------------*/


/* --------------------------------------------
          新着トピックス
--------------------------------------------*/
.news .ttl02 {
    font-size: 40px;
    padding-bottom: 22px;
    text-align: center;
    color: #555;
    margin: 0 auto;
    width: 100%;
    letter-spacing: 0.135em;
    position: relative;
    margin-bottom: 30px;
}

.news .ttl02 .en {
    font-size: 24px;
    margin-bottom: 16px;
    font-weight: bold;
    color: #a8b4b8;
    display: inline-block;
    margin-bottom: 12px;
    height: auto;
    line-height: 1.6;
    padding: 0;
    letter-spacing: 0;
    font-family: "Oswald", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.news .ttl02::after {
    content: "";
    width: 73px;
    height: 4px;
    background: #fff07c;
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.news ul li {
    border-top: 1px dashed #999;
    padding-top: 25px;
    margin-bottom: 15px;
    border-bottom: 0;
}

.news ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #1D7DBE;
}

.news ul li .date {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 95px;
    flex: 0 0 95px;
    font-size: 14px;
    margin-right: 5px;
}

.news ul li .categoly {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
    height: 21px;
    margin-right: 15px;
    padding: 3px 0 0;
    text-align: center;
    color: #FFFFFF;
    font-size: 11px;
    background: #3a77c7;
    border-radius: 2px;
}

.news ul li .body {
    line-height: 1.2;
}

.news .readMore {
    font-size: 12px;
    text-align: right;
}

.news .readMore a {
    color: #1D7DBE;
}

.news .readMore a::after {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    font-weight: bold;
    margin-left: 3px;
}

@media (max-width: 599px) {
  .news .ttl02 .en {
    font-size: 14px;
}
  .news .ttl02 {
    font-size: 20px;
}
      .news ul li a {
        display: block;
    }

    .news ul li .categoly {
        width: 120px;
        display: inline-block;
    }

    .news ul li .body {
        display: block;
        margin-top: 5px;
    }

}


/* Enquete */
.bg__ptn1 {
    background-image: linear-gradient(22.5deg, rgba(67, 67, 67, 0.02) 0%, rgba(67, 67, 67, 0.02) 29%,rgba(47, 47, 47, 0.02) 29%, rgba(47, 47, 47, 0.02) 37%,rgba(23, 23, 23, 0.02) 37%, rgba(23, 23, 23, 0.02) 55%,rgba(182, 182, 182, 0.02) 55%, rgba(182, 182, 182, 0.02) 69%,rgba(27, 27, 27, 0.02) 69%, rgba(27, 27, 27, 0.02) 71%,rgba(250, 250, 250, 0.02) 71%, rgba(250, 250, 250, 0.02) 100%),linear-gradient(67.5deg, rgba(117, 117, 117, 0.02) 0%, rgba(117, 117, 117, 0.02) 14%,rgba(199, 199, 199, 0.02) 14%, rgba(199, 199, 199, 0.02) 40%,rgba(33, 33, 33, 0.02) 40%, rgba(33, 33, 33, 0.02) 48%,rgba(135, 135, 135, 0.02) 48%, rgba(135, 135, 135, 0.02) 60%,rgba(148, 148, 148, 0.02) 60%, rgba(148, 148, 148, 0.02) 95%,rgba(53, 53, 53, 0.02) 95%, rgba(53, 53, 53, 0.02) 100%),linear-gradient(135deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 6%,rgba(251, 251, 251, 0.02) 6%, rgba(251, 251, 251, 0.02) 18%,rgba(2, 2, 2, 0.02) 18%, rgba(2, 2, 2, 0.02) 27%,rgba(253, 253, 253, 0.02) 27%, rgba(253, 253, 253, 0.02) 49%,rgba(128, 128, 128, 0.02) 49%, rgba(128, 128, 128, 0.02) 76%,rgba(150, 150, 150, 0.02) 76%, rgba(150, 150, 150, 0.02) 100%),linear-gradient(90deg, #ffffff,#ffffff);
}
.bg__ptn1 .cmn-ttl {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    padding: 3rem 0;
    color: var(--sc);
}
.bg__ptn1 .cmn-ttl > span:nth-of-type(1) {
    color: #333;
}
.bg__ptn1 .cmn-ttl > span:nth-of-type(2) {
    color: var(--main-color);
    font-size: 80%;
    display: block;
}
.voiceWrap ul {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 12px 8px;
    display: -ms-flexbox;
    display: flex;
}
.voiceWrap{padding-bottom: 4rem;}
.voiceWrap ul {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px 8px;
  display: -ms-flexbox;
  display: flex;
}
.voiceWrap li {
  background: #edf3fb;
  border: 1px solid #edf3fb;
  padding: 15px;
  margin-right: 15px;
  border-radius: 10px;
  box-sizing: border-box;
  width: 24%;
}
.voiceInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom:10px;
}
.voiceWrap .person{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}
.starBox,
.htlNameBox{
  font-size:14px;
}
.starBox span{
    color: #d69f21;
}
.voiceWrap .area {
  color: #3a77c7;
  display: block;
}
.voiceWrap i{
  margin-right:1.5rem;
  font-size: 3rem;
  color: #3b77c8;
}
.voiceWrap .txt{
    height: calc(1.2rem * 8);
  font-size: .8rem;
  padding: 1rem 0;
  line-height: 1.8;
  color: #333;
}
.voiceWrap .over{
  position:relative;
}
.voiceWrap .over::after{
  content: "続きを読む";
  background: #b7c4d7d1;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  padding: 0.5rem 0;
  border-radius: 0 0 0.5rem 0.5rem;
  text-shadow: 1px 1px 1px #fff;
  font-weight: bold;
}
.over .txt{overflow: hidden;}

@media (max-width: 599px) {
  .voiceWrap li {
      width: 60%;
  }
.voiceWrap ul::-webkit-scrollbar {
    width: 3px;
}
.voiceWrap ul::-webkit-scrollbar-thumb {
    background: #3183d0;
    border-radius: 3px;
}
.voiceWrap ul::-webkit-scrollbar-track {
    background: #eeeeee;
}
  
  
}


/* SearchBox(2024) */
.searxhbox_bg,.searxhbox_bg--entry{
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    height: 830px;
}
.searxhbox_bg--entry img{
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    height: 100%;
}
.searxhbox_bg:has(+ .searxhbox_bg--entry){display: none;}


.searchWrap_box{
  position: relative;
}
.searchBox__wrap{
  position: absolute;
  top:0;
  width: 1100px;
  top: 25%;
  left: 50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%, 0);
}
.searchLeftBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* tab */
.searchBox__change{
  width: 160px;
  display: none;
}
.searchWrap_box:has(.searxhbox_bg--entry) .searchBox__change{
  display: block;
}
.searchBox__change label {
    background:var(--main-color);
    display: block;
    text-align: center;
    padding: 60px 0;
    font-weight: bold;
    color:#fff;
}
.searchBox__change label:has(input:checked) {
    background: #fff;
    color: var(--main-color);
}
.searchBox__change input{opacity: 0;}
.atInr {
    position: absolute;
    top: 0;
    width: 900px;
    color: #fff;
    padding: 40px 0 0;
    left: 50%;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%, 0);
    text-align: center;
    text-shadow: 0px 0px 10px #000;
}
.atInr .area__name{
    font-size: 45px;
    font-weight: bold;
}
.area__name.tour{display: none;}
.searchWrap_box:has(.searxhbox_bg--entry) .area__name.def{display: none;}
.searchWrap_box:has(.searxhbox_bg--entry) .area__name.tour{display: block;}
.atInr .area__name + p{
    font-size: 18px;
}
.searchWrap_box:has(.searxhbox_bg--entry) .atInr{
  display: none;
}

/* ==========================
  @Box
  Sale情報なし（デフォルト）
 ==========================*/
.searchBox__wrap .area__name{
    font-size: 24px;
    font-weight: bold;
}
.searchBox__wrap .area__name i {
    color: var(--main-color);
    margin-right: 0.5rem;
}
.searchLeftBox .searchBox_wbf{
  background:#fff;
}

.searchBox__wrap .right__add{
  width: calc(100% - 600px);
}
.searchBox_wbf {
    width: 410px;
    padding: 20px;
    border-radius: 8px;
}
.searchBox__wrap{width: 900px;}

/* ==========================
  @Box
  Sale情報あり
 ==========================*/
 
.searchWrap_box:has(.searxhbox_bg--entry) [data-element-id] [class*=dep_]{display:none !important;}
 
.searchWrap_box:has(.searxhbox_bg--entry) .searchBox__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1100px;
    top:12%;
}
 
.searchWrap_box:has(.searxhbox_bg--entry) .searchLeftBox{
  width: 600px;
}
.searchWrap_box:has(.searxhbox_bg--entry) .searchBox_wbf {
    width: calc(100% - 160px);
    padding: 30px;
    border-radius: 0 8px 8px;
}

.searchWrap_box:has(.searxhbox_bg--entry) .searchBox_wbf{display:none;}
.searchWrap_box:has(input[value=dpp]:checked) .searchBox_wbf.dpp{display:block;}
.searchWrap_box:has(input[value=dp]:checked) .searchBox_wbf.dp{display:block;}

.dppTxt {
    background: #eee;
    margin: 20px 0;
    padding: 15px;
    border-radius: 10px;
    font-size: 12px;
    text-align: left;
}
@media (max-width: 599px) {
  .searchBox__wrap{width:100%;top: 5%;}
  .searchBox__change {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }
  .searchBox__change label {
      width: calc(100%/2);
      padding: 15px 0;
  }
  .searchWrap_box:has(.searxhbox_bg--entry) .searchBox_wbf {
      width: 100%;
      padding: 20px;
      border-radius: 0;
  }
  .searchBox__wrap .area__name {
      font-size: 18px;
      display: none;
  }
  .searchWrap_box:has(.searxhbox_bg--entry) .searchLeftBox {
      width: 100%;
  }
  .searchBox__wrap .right__add {
      width: 100%;
      padding: 0 20px;
      display: block;
      position: absolute;
      top: 20px;
  }
  .searchWrap_box{position: static;}
  .searchBox__wrap{
    position: static;
    transform:inherit;
  }
  
  .searchWrap_box:has(.searxhbox_bg--entry) .searchBox__wrap{position:absolute;}
  .searchWrap_box:has(.searxhbox_bg--entry){position:relative;} 
  .searchWrap_box:has(.searxhbox_bg--entry) .searchBox__change{display:flex;}
  .searchWrap_box:has(.searxhbox_bg--entry) .searxhbox_bg,.searchWrap_box:has(.searxhbox_bg--entry) .searxhbox_bg--entry{height: 620px;}

  .searchWrap_box:has(.searxhbox_bg--entry) .searchBox__wrap{
    position:static;
    top: inherit;
    left:inherit;
    transform:inherit;
    -webkit-transform:inherit;
    width: 100%;
  }
  .searchBox_wbf.dpp{display: none;}
  .areaText {
      height: 300px;
      overflow: hidden;
      position: relative;
  }
  .searchWrap_box:has(.searxhbox_bg--entry) .areaText{display:none;}
  .searxhbox_bg{
    height: 100%;
  }
  .atInr {
      width: 100%;
      padding: 0 20px;
      text-align: left;
      top:50%;
      transform: translate(-50%,-50%);
  }
  .atInr .area__name {font-size: 30px;}
  .atInr .area__name + p{font-size:14px;}
  .searchBox_wbf {
      display: block;
      width: 100% !important;
      margin: 0 auto !important;
  }
}


/*kokunaiArea*/
.kokunaiArea .box {
    background: #fff;
    padding: 40px 50px;
    position: relative;
    z-index: 0;
}

.kokunaiArea .box .morebox {
    text-align: right;
    margin-bottom: 10px;
}

.kokunaiArea .box .morebox li {
    display: inline-block;
}

.kokunaiArea .box .morebox li > * {
    color: #2896c7;
    background-image: url(/import/tenant_1/www.wbf.co.jp/kaigai/module/destination/images/mark003.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 12px;
}

.kokunaiArea .box .name {
    font-size: 15px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
    line-height: 34px;
    margin-bottom: 20px;
}

.kokunaiArea .box .name .img {
    margin-right: 5px;
}

.kokunaiArea .box .name .img img {
    display: inline-block;
}

.kokunaiArea .box .left {
    width: 38%;
}

.kokunaiArea .box .right {
    width: 60%;
}

.tabWrap .tabItem .kokunaiAreaDetail{
    display: flex;
    justify-content: space-between;
}

@media (max-width: 1024px) {
    .kokunaiArea .box .left {
        width: 100%;
    }
    
    .kokunaiArea .box .right {
        width: 100%;
        margin-top: 30px;
    }
}

@media (max-width: 599px) {
    .kokunaiArea .box {
        padding: 50px 20px 50px;
    }
    
    .kokunaiArea .box .name {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    
    .kokunaiArea .box .morebox {
        margin-bottom: 40px;
    }
    
    .kokunaiArea .box .morebox li > * {
        font-size: 13px;
    }
    .tabWrap .tabItem .kokunaiAreaDetail{
      display: block;
    }
}

/*kokunaiAreaMap*/
.backimg01 {
    background-image: url(/upload/tenant_1/bg_kaigai_wall001.webp);
}

.kokunaiAreaMap {
    position: relative;
    z-index: 0;
}

.kokunaiAreaMap .img {
    max-width: 100%;
    margin: auto;
    position: relative;
    z-index: 0;
}

.kokunaiAreaMap ul li {
    text-align: left;
    border-bottom: 1px solid #44b0e5;
    position: absolute;
    z-index: 0;
}

.kokunaiAreaMap ul li > * {
    background-image: url(/import/tenant_1/www.wbf.co.jp/kaigai/module/destination/images/mark013.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 12px;
    font-size: 17px;
    font-weight: bold;
    color: #2896c7;
    cursor: pointer;
}

.kokunaiAreaMap ul li span.bg-yellow {
    border-bottom: none;
}

.kokunaiAreaMap ul li span.bg-yellow {
    background-image: url(/import/tenant_1/www.wbf.co.jp/kaigai/module/destination/images/mark014.png);
    background-position: left 8px center;
    background-color: #2896c6;
    color: #fff;
    padding: 8px 8px 8px 20px;
}

@media (max-width: 599px) {
    .kokunaiAreaMap ul li > * {
        font-size: 13px;
    }
}

/*kokunaiAreaDetail*/
.kokunaiAreaDetail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.kokunaiAreaDetail .img {
    width: 48%;
}

.kokunaiAreaDetail .txtbox {
    width: 50%;
}

.kokunaiAreaDetail .txtbox .tit {
    font-size: 23px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
    margin-bottom: 10px;
}

.kokunaiAreaDetail .txtbox .catch {
    font-weight: bold;
    margin-bottom: 10px;
}

.kokunaiAreaDetail .txtbox .txt {
    font-size: 12px;
}

.kokunaiAreaDetail .txtbox .more {
    margin-top: 30px;
}

.kokunaiAreaDetail .txtbox .more > * {
    color: #00b0ff;
    background-image: url(/import/tenant_1/www.wbf.co.jp/kaigai/module/destination/images/mark003.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 12px;
}

@media (max-width: 599px) {
    .kokunaiAreaDetail .img {
        width: 100%;
    }
    
    .kokunaiAreaDetail .txtbox {
        width: 100%;
        margin-top: 5px;
    }
    
    .kokunaiAreaDetail .txtbox .tit {
        margin-bottom: 5px;
    }
    
    .kokunaiAreaDetail .txtbox .catch {
        margin-bottom: 5px;
    }
}


/*沖縄*/
.kokunaiAreaMap.kokunai_OkinawaMap ul li.area01 {
    top: 180px;
    left: 230px;
    width: 110px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area02 {
    top: 155px;
    left: 190px;
    width: auto;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area03 {
    top: 120px;
    left: 190px;
    width: 100px;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area04 {
    top: 90px;
    left: 200px;
    width: 90px;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area05 {
    top: 100px;
    left: 310px;
    width: 90px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area06 {
    top: 140px;
    left: 250px;
    width: 120px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area07 {
    top: 210px;
    left: 225px;
    width: 100px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area08 {
    top: 150px;
    left: 80px;
    width: 90px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area09 {
    top: 55px;
    left: 20px;
    width: 90px;
}

@media (max-width: 599px){
  .kokunaiAreaMap.kokunai_OkinawaMap ul li.area01 {
    left: 185px;
    top: 150px;
    width: 80px;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area02 {
    top: 130px;
    left: 160px;
    width: auto;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area03 {
    top: 90px;
    left: 170px;
    width: 80px;
    text-align: left;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area04 {
    top: 65px;
    left: 170px;
    width: 80px;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area05 {
    top: 85px;
    left: 255px;
    width: 90px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area06 {
    top: 110px;
    left: 200px;
    width: 100px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area07 {
    top: 165px;
    left: 190px;
    width: 120px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area08 {
    top: 165px;
    left: 50px;
    width: auto;
    text-align: left;
}

.kokunaiAreaMap.kokunai_OkinawaMap ul li.area09 {
    top: 40px;
    left: 10px;
    width: 80px;
}
}

/*北海道*/
.kokunaiAreaMap.kokunai_HokkaidoMap ul li.area01 {
    top: 130px;
    left: 30px;
    width: 130px;
}

.kokunaiAreaMap.kokunai_HokkaidoMap ul li.area02 {
    top: 200px;
    left: 80px;
    width: 80px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_HokkaidoMap ul li.area03 {
    top: 50px;
    left: 200px;
    width: 80px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_HokkaidoMap ul li.area04 {
    top: 140px;
    left: 257px;
    width: 100px;
    text-align: right;
}


@media (max-width: 599px){
  .kokunaiAreaMap.kokunai_HokkaidoMap ul li.area01 {
    left: 35px;
    top: 110px;
    width: 80px;
}

.kokunaiAreaMap.kokunai_HokkaidoMap ul li.area02 {
    top: 165px;
    left: 68px;
    width: 60px;
}

.kokunaiAreaMap.kokunai_HokkaidoMap ul li.area03 {
    top: 40px;
    left: 160px;
    width: 80px;
    text-align: right;
}

.kokunaiAreaMap.kokunai_HokkaidoMap ul li.area04 {
    top: 120px;
    left: 220px;
    width: 80px;
}
}
@media (min-width: 599px){
  .top__sbWrap.kansai{
    background: url(/upload/tenant_1/ks_shinsekai1.webp) no-repeat;
    background-size: 100% 100%;
  }
  .top__sbWrap.kanto{
    background: url(/upload/tenant_1/kk_asakusa1_2.webp) no-repeat;
    background-size: 100% 100%;
  }
  .top__sbWrap.tokyo{
    background: url(/upload/tenant_1/kk_skytree_1.webp) no-repeat;
    background-size: 100% 100%;
  }
  .top__sbWrap.kanagawa{
    background: url(/upload/tenant_1/kk_yokohama_2.webp) no-repeat;
    background-size: 100% 100%;
  }  
  .top__sbWrap.chiba{
    background: url(/upload/tenant_1/kk_chiba_1.webp) no-repeat;
    background-size: 100% 100%;
  }  
  
}


/* ----------------------------------
  familyList
 ---------------------------------- */
.familyList{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  text-align: center;
}

.familyList a {
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.familyList .pic {
  background: inherit;
  padding: 0;
}

.familyList .pic > img {
  height: auto;
  width: 100%;
  margin: 0 auto;
}

.familyList .tit {
  font-size: 18px;
  padding: 15px 0;
  font-weight: bold;
}

.familyList .text {
  padding: 10px;
}

.familyList .areaBtn p {
  width: 90%;
  border: 1px dotted rgb(170, 170, 170);
  border-radius: 5px;
  margin: 5px auto;
  padding: 5px;
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 599px){
  .familyList {
   grid-template-columns: repeat(1, 1fr);
  }
  .familyList .tit {
    font-size: 16px;
    padding: 15px 0 0;
    font-weight: bold;
  }
  .familyList .text {
    font-size: 12px;
    line-height: 1.8;
  }
}

@media (min-width: 768px){
 .sw__dwWrap{
   overflow: inherit;
 }
}


/* ----------------------------------
  accessBlk
 ---------------------------------- */
.accessBlk table {
    border-collapse: collapse;
    margin: 20px;
}

.accessBlk th,td {
    padding: 5px 10px;
}

.accessBlk th {
    background-color: #2196F3;
    color:  #fff;
    font-weight:  normal;
    position:  relative;
    text-align: left;
    z-index: 10;
}

.accessBlk td {
    background-color:  #c0c9ff;
    padding-left: 40px;
}

.accessBlk th::after {
    content:'';
    position:  absolute;
    height: 24px; 
    width: 24px;
    background-color: #2196F3;
    transform:  rotate(45deg);
    top: 5px;
    right: -12px;
    z-index:  -1;
}

.accessBlk tr {
    border-bottom:  solid #fff;
}


/* ----------------------------------
  areaseasonBlk
 ---------------------------------- */
.areaseasonBlk {
  padding: 30px 0;
}
.areaseasonBlk table {
    border-collapse: collapse;
    margin: 20px;
}

.areaseasonBlk .table01 {
    width: 100%;
    margin: 40px auto 50px;
    padding: 0;
    border-collapse: separate;
    border-spacing: 2px;
}

.areaseasonBlk .table01 th.bg_none {
    background: none;
    border: none;
}

.areaseasonBlk .table01 th.bg_red {
    background: #ff0000;
}

.areaseasonBlk .table01 th {
    background: #5d9bcd;
    color: #FFF;
    font-weight: normal;
}

.areaseasonBlk .table01 th, 
.areaseasonBlk .table01 td {
    padding: 8px 4px;
    vertical-align: middle;
    text-align: center;
    border: solid 2px #ddd;
}

.areaseasonBlk .table01 .high_temp {
    color: #ff8602;
}

.areaseasonBlk .table01 .area {
    background: #ff8602;
    color: #FFF;
}

.areaseasonBlk .table01 .area02 {
    background: #5d9bcd;
    color: #fff;
}

.areaseasonBlk .table01 td {
    background: rgba(255, 255, 255, 0.8);
}

.areaseasonBlk .table01 .low_temp {
    color: #5d9bcd;
}

.areaseasonBlk .osusumeWrap:last-of-type {
    border: none;
    margin-top: 28px;
    padding-bottom: 30px;
}

.areaseasonBlk .osusumeWrap .item01 {
    padding: 24px 0;
    position: relative;
}

.areaseasonBlk .osusumeWrap .item01:not(:last-of-type) {
    border-bottom: 1px solid #a0a0a0;
}

.areaseasonBlk .osusumeWrap .__top{
    margin-bottom: 16px;
}

.areaseasonBlk .__top{
    margin: 16px 0;
}

.areaseasonBlk .osusumeWrap .__top img {
  position: absolute;
    margin-left: 300px;
    margin-top: -30px;
    width: 70px;
    height: 70px;
}

.areaseasonBlk .osusumeWrap .titleS,
.areaseasonBlk .titleS{
    font-size: 20px;
    margin-bottom: 0;
    padding: 0;
    font-weight: bold;
}

.areaseasonBlk .osusumeWrap .titleS .cloth img,
.areaseasonBlk .osusumeWrap .titleS .belong img{
  width: 80%;
  margin: 0 10px;
}

.areaseasonBlk .osusumeWrap .osusume {
    font-size: 14px;
    margin: 0 12px;
    padding: 4px 12px;
    background: #e773c2;
    color: #fff;
    border-radius: 10em;
    line-height: 1em;
}

.areaseasonBlk .osusumeWrap .star {
    font-size: 20px;
    padding: 0;
    color: #f39800;
    letter-spacing: 0.2em;
}

.areaseasonBlk .osusumeWrap .p,
.areaseasonBlk .p{
    line-height: 1em;
}

.areaseasonBlk .osusumeWrap .copy {
    text-align: left;
    line-height: 1.6em;
}

.areaseasonBlk .text {
  margin-top: 30px;
}

@media (max-width: 599px){
    .areaseasonBlk .table01 {
      width: 200%;
    }
    .areaseasonBlk .tableScroll {
        overflow-x: scroll;
    }
    .areaseasonBlk #whetherWrap .table01 {
        padding-left: 15px;
        padding-right: 15px;
    }
}



/* ----------------------------------
  eventBlk
 ---------------------------------- */
.eventBlk {
  padding: 30px 0;
}

.eventBlk p {
  margin-top: 20px;
}

.eventBlk table {
    border-collapse: collapse;
    margin: 20px;
}

.eventBlk .table01 {
    width: 100%;
    margin: 40px auto 50px;
    padding: 0;
    border-collapse: separate;
    border-spacing: 2px;
}

.eventBlk .table01 th.bg_none {
    background: none;
    border: none;
}

.eventBlk .table01 td.bg_blue {
    background: #4169e1;
}

.eventBlk .table01 td.bg_pink {
    background: #ffc0cb;
}

.eventBlk .table01 td.bg_orange {
    background: #ffa500;
}

.eventBlk .table01 td.bg_yellow {
    background: #ffff00;
}

.eventBlk .table01 th {
    background: #5d9bcd;
    color: #FFF;
    font-weight: normal;
}

.eventBlk .table01 th, 
.eventBlk .table01 td {
    padding: 8px 4px;
    vertical-align: middle;
    text-align: center;
    border: solid 2px #ddd;
}

@media (max-width: 599px){
    .eventBlk .table01 {
      width: 200%;
    }
    .eventBlk .tableScroll {
        overflow-x: scroll;
    }
    .eventBlk .table01 {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* ----------------------------------
  budgetBlk
 ---------------------------------- */
.budgetBlk {
  padding: 30px 0;
}

.budgetBlk p {
  margin-top: 20px;
}


.area--ttl {
    margin-bottom: 16px;
    line-height: 1.8;
}

.area--ttl h2 {
   display: block;
   font-size: 22px;
   font-weight: bold;
   padding-left: 16px;
   border-left: 6px solid var(--main-color);
}
@media screen and (max-width:768px) {
   .area--ttl {
      margin: 24px 0;
      line-height: 1.5;
   }

   .area--ttl h2 {
      font-size: 20px;
   }

   .area--ttl p {
      font-size: 14px;
      margin-top: 8px;
   }
}
