/*
======== table of content. =================================

��new top

============================================================
*/


/* ----------------------------------------------------------------------------
��basic
---------------------------------------------------------------------------- */
#top{
  width:646px;
}
#emergency {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 10px;
  padding: 3px;
  border: 2px solid #ff0000;
}
#emergency p{
  padding:4px 4px;
}
#emergency p + p{
  border-top:1px dotted #980b0b;
}
#emergency a{
  color:#f00;
  display: inline-block;
}

/* ----------------------------------------------------------------------------
��main_slide
---------------------------------------------------------------------------- */
.main_title{
  color:#000;
  font-size:12px;
  margin-bottom:20px;
  padding-top:5px;
  margin-bottom:10px;
}

#main_slide{
  width:646px;
  margin-bottom:18px;
  position:relative;
}
#slide_case{
  width:646px;
  height:402px;
  position:relative;
}
#slide_case p{
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}

#slide_case p .shadow{
  width:646px;
  height:402px;
  display:block;
  z-index:1;
  position:absolute;
  top:0px;
  left:0px;
  background:url("../images/home/top_main_slide_shadow.png") 0 0 no-repeat;
}

#slide_case p a{
  display:block;
  cursor:pointer;
}

#main_slide ul{
  overflow:hidden;
}
#main_slide ul li{
  width:122px;
  font-size:14px;
  line-height:120%;
  color:#666666;
  padding:12px 0 7px;
  margin-right:9px;
  text-align:center;
  vertical-align:top;
  cursor:pointer;
  display:block;
  background:url("../images/home/top_main_slide_paging02.gif") 0 0 no-repeat;
  background-color:#efefef;
  float:left;
}
#main_slide ul li:last-child{margin-right:0;}
#main_slide ul .on{
  cursor:default;
  background-position:-122px 0;
  background-color:#ba8cbc;
  color:#fff;
}
#main_slide ul .lastItem{
  margin-right:0px;
}
*:first-child+html #main_slide ul li{
  display:inline;
  zoom:1;
}
#main_slide ul li span{
  display:block;
}

#main_slide ul li a{
  text-decoration:none;
  color:#666666;
}
#main_slide ul li a:hover{color:#ffffff;}



/* prev�裳ext */
#main_slide .prev,
#main_slide .next{
  width:38px;
  height:402px;
  position:absolute;
  z-index:2;
}
#main_slide .prev a,
#main_slide .next a{
  display:block;
  width:38px;
  height:402px;
}

#main_slide .prev a{
  background:url("../images/home/top_main_slide_prev.png") right center no-repeat;
}
#main_slide .prev a:hover{
  background:url("../images/home/top_main_slide_prev_on.png") right center no-repeat;
}

#main_slide .next a{
  background:url("../images/home/top_main_slide_next.png") 0 center no-repeat;
}
#main_slide .next a:hover{
  background:url("../images/home/top_main_slide_next_on.png") 0 center no-repeat;
}


#main_slide .prev{
  top:0px;
  left:0px;
}
#main_slide .next{
  top:0px;
  right:0px;
}


/* detail_link */
#main_slide .detail_link a{

  position:absolute;
  right:8px;
  top:361px;
  padding:0 10px;
  height:32px;
  color:#fff;
  background:url("../images/home/top_main_slide_detail_link.png");

  font-size:14px;
  line-height:32px;
  text-align:center;
  z-index:3;
}
#main_slide .detail_link a:hover{
  text-decoration:underline;
}



/* ----------------------------------------------------------------------------
��ryokan_hotel_bnr
---------------------------------------------------------------------------- */
#ryokan_hotel_bnr{
  margin-bottom:20px;
}
#ryokan_hotel_bnr li{
  float:left;
}
#ryokan_hotel_bnr .lastItem{
  float:right;
}


/* ----------------------------------------------------------------------------
��bnr
---------------------------------------------------------------------------- */
.bnr{
  margin-bottom:20px;
}


/* ----------------------------------------------------------------------------
��topics
---------------------------------------------------------------------------- */
#topics{
  width:604px;
  background-color:#fcf9fc;
  border:1px solid #c290c3;
  position:relative;
  padding:40px 20px 20px;
  margin-bottom:15px;
}
#topics h3{
  position:absolute;
  top:-1px;
  left:-1px;
}
#topics dl{
  margin-bottom:20px;
}
#topics .lastItem{
  margin-bottom:0px;
}
#topics dl dt{
  color:#bb8cbc;
  background:url("") 0 0 no-repeat;
}
#topics dl dd{
  color:#333;
  line-height:180%;
  background:url("") 0 0 no-repeat;
}
#topics dl dd a{
  padding:0 0 0 11px;
  color:#0024ff;
  background:url("../images/home/top_topics_arrow.gif") 0 5px no-repeat !important;
}



/* ----------------------------------------------------------------------------
��special_topics
---------------------------------------------------------------------------- */
#special_topics{
  width:646px;
  margin-bottom:30px;
  position:relative;
}
#special_topics h3{
  margin-bottom:15px;
  border-top:1px solid #ba8cbc;
}
#special_topics h3 span{
  background-color:#333;
  color:#fff;
  font-size:16px;
  line-height:120%;
  text-align:center;
  display:inline-block;
  padding:5px 10px;
}


#special_topics .more a{
  text-decoration:none;
  position: absolute;
    top: 11px;
    right: 0;
    background-color: #e09a1b;
    color: #ffffff;
    padding: 0 15px;
    border-radius: 10px;
  letter-spacing: 1px;
  font-size:16px;
}

#special_topics .more a:hover{
  transition:0.3s;
  opacity:0.8;
}




/* ----------------------------------------------------------------------------
��BannerArea
---------------------------------------------------------------------------- */
#special_topics #BannerArea .boxarea1{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  padding-left:0;
}
#special_topics #BannerArea .boxarea1 li {
  flex-basis: calc(100% / 2 - 5px * (1 / 2) - .01px);
}
#special_topics #BannerArea .boxarea1 li:not(:nth-child(2n)) {
  margin-right: 5px;
}

#special_topics #BannerArea .boxarea2{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  margin-top: 10px;
  padding-left:0;
}
#special_topics #BannerArea .boxarea2 li {
  flex-basis: calc(100% / 3 - 5px * (2 / 3) - .01px);
}
#special_topics #BannerArea .boxarea2 li:not(:nth-child(3n)) {
  margin-right: 5px;
}

#special_topics #BannerArea .boxarea3{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  margin-top: 10px;
  padding-left:0;
}
#special_topics #BannerArea .boxarea3 li {
  flex-basis: calc(100% / 3 - 5px * (2 / 3) - .01px);
}
#special_topics #BannerArea .boxarea3 li:not(:nth-child(3n)) {
  margin-right: 5px;
}
#special_topics #BannerArea .boxarea1 li p, .boxarea2 li p, .boxarea3 li p{
  margin:0;
  font-size:12px;
  padding:5px 0 0 5px;
}

#special_topics #BannerArea ul li a:hover{
  opacity:0.8;
  transition:0.3s;
}

#special_topics #BannerArea .boxarea1 li a, #special_topics #BannerArea .boxarea2 li a{
    color: #444;
  text-decoration:none;
  display:block;
}

#special_topics #BannerArea .boxarea1 li a:hover .ttl, #special_topics #BannerArea .boxarea2 li a:hover .ttl{
  text-decoration:none;
  }


#special_topics #BannerArea .boxarea1 li .ttl, #special_topics #BannerArea .boxarea2 li .ttl{
  font-size: 14px;
    display: block;
    margin-bottom: 8px;
    font-weight: normal;
    text-align: center;
  margin-top:10px;
  text-decoration:underline;
}

#special_topics #BannerArea .boxarea1 li .txt, #special_topics #BannerArea .boxarea2 li .txt{
    font-size: 12px;
    line-height: 1.4;
}





/* ----------------------------------------------------------------------------
��RECOMMENDED HOTELS & RYOKAN
---------------------------------------------------------------------------- */
#recommended{
  width:646px;
  position:relative;
}
#recommended h3{
  margin-bottom:15px;
  border-top:1px solid #ba8cbc;
}
#recommended h3 span{
  background-color:#333;
  color:#fff;
  font-size:16px;
  line-height:120%;
  text-align:center;
  display:inline-block;
  padding:5px 10px;
}


#recommended h2{
  color:#000;
  font-size:14px;
  margin-bottom:10px;
}
#recommended ul li{
  width:202px;
  float:left;
  margin:0 20px 25px 0;
}
#recommended ul li a{
  display:block;
  color:#333;
  cursor:pointer;
  text-decoration:none;
}
#recommended ul .lastItem{
  margin-right:0px;
}
#recommended ul li .photo{
  position:relative;
  margin-bottom:5px;
}

#recommended ul li .place{
  margin-bottom:5px;
}
#recommended ul li .place01{
  display:inline-block;
  background: url("../images/home/top_recommended_place01.gif") right center no-repeat;
  background-color:#323232;
  vertical-align:top;
  color:#fff;
  line-height:115%;
  padding:3px 10px 3px 7px;
  position:relative;
  font-size:10px;
}
#recommended ul li .place02{
  display:inline-block;
  background: url("../images/home/top_recommended_place02.gif") right center no-repeat;
  background-color:#6a6a6a;
  vertical-align:top;
  color:#fff;
  line-height:115%;
  padding:3px 15px 3px 5px;
  position:relative;
  font-size:10px;
}

*:first-child+html #recommended ul li .place01{
  display:inline;
  zoom:1;
}
*:first-child+html #recommended ul li .place02{
  display:inline;
  zoom:1;
}


#recommended ul li .place span{
  display:block;
}


#recommended ul li a .title{
  text-align:center;
  margin-bottom:5px;
  text-decoration:underline;
}
#recommended ul li a:hover .title{
  text-decoration:none;
}

#recommended ul li .title span{
  display:block;
}

#recommended ul li a .text{
  /*color:#333;*/
  color:#5b5b5b;
}

#recommended ul li .price {
  margin-top:10px;
}
#recommended ul li .price span{
  color:#8f1c33;
}


/* ----------------------------------------------------------------------------
more-buttun
---------------------------------------------------------------------------- */
#recommended .more a{
  text-decoration:none;
  position: absolute;
    top: 11px;
    right: 0;
    background-color: #e09a1b;
    color: #ffffff;
    padding: 0 15px;
    border-radius: 10px;
  letter-spacing: 1px;
  font-size:16px;
}

#recommended .more a:hover{
  transition:0.3s;
  opacity:0.8;
}



/* ----------------------------------------------------------------------------
��RECOMMENDED HOTELS & RYOKAN
---------------------------------------------------------------------------- */
#recommended_themes{
  width:646px;
}

#recommended_themes h3{
  margin-bottom:15px;
  border-top:1px solid #ba8cbc;
}
#recommended_themes h3 span{
  background-color:#333;
  color:#fff;
  font-size:16px;
  line-height:120%;
  text-align:center;
  display:inline-block;
  padding:5px 10px;
}

#recommended_themes h2{
  color:#000;
  font-size:14px;
  margin-bottom:10px;
}
#recommended_themes ul li{
  width:202px;
  float:left;
  margin:0 20px 25px 0;
}
#recommended_themes ul li a{
  display:block;
  color:#333;
  cursor:pointer;
  text-decoration:none;
}
#recommended_themes ul .lastItem{
  margin-right:0px;
}
#recommended_themes ul li .photo{
  position:relative;
  margin-bottom:5px;
}

#recommended_themes ul li .place{
  margin-bottom:5px;
}
#recommended_themes ul li .place01{
  display:inline-block;
  background: url("../images/home/top_recommended_place01.gif") right center no-repeat;
  background-color:#323232;
  vertical-align:top;
  color:#fff;
  line-height:115%;
  padding:3px 10px 3px 7px;
  position:relative;
  font-size:10px;
}
#recommended_themes ul li .place02{
  display:inline-block;
  background: url("../images/home/top_recommended_place02.gif") right center no-repeat;
  background-color:#6a6a6a;
  vertical-align:top;
  color:#fff;
  line-height:115%;
  padding:3px 15px 3px 5px;
  position:relative;
  font-size:10px;
}

*:first-child+html #recommended_themes ul li .place01{
  display:inline;
  zoom:1;
}
*:first-child+html #recommended_themes ul li .place02{
  display:inline;
  zoom:1;
}


#recommended_themes ul li .place span{
  display:block;
}


#recommended_themes ul li a .title{
  text-align:center;
  margin-bottom:5px;
  text-decoration:underline;
}
#recommended_themes ul li a:hover .title{
  text-decoration:none;
}

#recommended_themes ul li .title span{
  display:block;
}

#recommended_themes ul li a .text{
  /*color:#333;*/
  color:#5b5b5b;
}

#recommended_themes ul li .price {
  margin-top:10px;
}
#recommended_themes ul li .price span{
  color:#8f1c33;
}




/* ----------------------------------------------------------------------------
��popularareas
---------------------------------------------------------------------------- */
#popularareas{
  margin-bottom:50px;
}
#popularareas h3{
  position:relative;
  top:30px;
  background-color:#333;
  color:#fff;
  font-size:16px;
  line-height:30px;
  text-align:center;
  width:214px;
  height:30px;
}

#popularareas .photo{
  width:646px;
  height:330px;
  position:relative;
  margin-bottom:20px;
}
#popularareas .photo li{
  position:absolute;
}
#popularareas .photo li a{
  display:block;
  position:relative;
  overflow:hidden;
  text-decoration:none !important;
  cursor:pointer;
}

#popularareas .photo li .hover{
  z-index:4;
}
#popularareas .photo li .hover2{
  width:100%;
  height:100%;
  position:absolute;
  left:0px;
  bottom:-100px;
  z-index:3;
  background: url("../images/home/top_popularareas_hover.png");
}
#popularareas .photo li .hover2_inner{
  position:relative;
}

#popularareas .photo li .hover2 .title{
  color:#000;
  padding:3px 5px;
  line-height:120%;
}
#popularareas .photo li .hover2 .text{
  color:#000;
  padding:0 12px;
  line-height:120%;
}


#popularareas .photo .osaka{
  top:222px;
  left:434px;
}

#popularareas .photo .tokyo{
  top:222px;
  left:218px;
}

#popularareas .photo .mtfuji{
  top:34px;
  left:0px;
}

#popularareas .photo .isawaonsen{
  top:111px;
  left:542px;
}

#popularareas .photo .okinawa{
  top:0px;
  left:434px;
}

#popularareas .photo .fukuoka{
  top:111px;
  left:218px;
}

#popularareas .photo .kyoto{
  top:111px;
  left:326px;
}

#popularareas .photo .sapporo{
  top:0px;
  left:218px;
}

#popularareas .photo .hakone{
  top:111px;
  left:434px;
}

#popularareas .photo .takayama,
#popularareas .photo .kamikochi{
  top:222px;
  left:0px;
}

#popularareas .photo .disney{
  top:34px;
  left:0px;
}


/* all_area */
#popularareas .all_area dl{
  margin-bottom:10px;
}
#popularareas .all_area dl{display: inline-block;}
/* Exclude Mac IE \*/
#popularareas .all_area dl{display: block;}
/**/
#popularareas .all_area dl:after{content:".";display:block;clear:both;height:0;visibility: hidden;}


#popularareas .all_area dl dt{
  width:130px;
  float:left;
  margin-right:5px;

  font-weight:bold;
  color:#323232;
  display:block;
  background: url("../images/home/top_popularareas_arrow.gif") right 5px no-repeat;
}
#popularareas .all_area dl dd{
  width:511px;
  float:left;
}

#popularareas .all_area dl dd ul{display: inline-block;}
/* Exclude Mac IE \*/
#popularareas .all_area dl dd ul{display: block;}
/**/
#popularareas .all_area dl dd ul:after{content:".";display:block;clear:both;height:0;visibility: hidden;}

#popularareas .all_area dl dd ul li{
  float:left;
  margin-right:5px;
}

#popularareas .all_area dl dd a{
  color:#323232;
}


/* ----------------------------------------------------------------------------
��bnr
---------------------------------------------------------------------------- */
#bnr{
  margin-top:25px;
}
#bnr p{
  margin-bottom:17px;
}

.cont01__inner01 {
  border-top: 1px solid #ba8cbc;
}
.cont01__ttl01 {
  display: inline-block;
  padding: 5px 45px;
  background: #333;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.cont01__list01 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 2px;
  row-gap: 2px;
  margin-top: 3px;
}
.cont01__link01 {
  display: block;
  position: relative;
  transition: opacity .2s;
}
.cont01__link01:hover {
  opacity: 0.8;
}
.cont01__imgWrapper {
  display: block;
}
.cont01__img {
  display: block;
  width: 100%;
}
.cont01__ttl02 {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  background: rgba(255, 255 ,255, 80%);
  font-size: 12px;
  font-weight: bold;
  color: #010101;
}