@charset "UTF-8";

    .sp{
        display: none;
    }
    .pc{
        display: block;
    }
    #infscr-loading {
        clear: both;
    }

@media only screen and (min-width: 768px){

		body { position: relative;}
		.wysiwyg h2 {
			font-weight: bold;
			font-size: 1.4em;
			border-left: 10px solid #c0392b;
			border-bottom: 2px solid #c0392b;
			padding: 10px;
		        margin: 0px 0px 10px;
		}

		.wysiwyg h3 {
		  margin: 1.0em 0;
		  padding: 0.5em 0 0.5em 0;
		  border: 2px solid #c0392b;  
		  font-size: 100%;
		  font-weight: bold;
		  text-align:center;
		  width:150px;
		  border-radius: 10px;
		    -webkit-border-radius: 10px;
		    -moz-border-radius: 10px;
		}
		.commentSideAreaSpot .h3TtlB.ttl_sideB span{
		    padding-bottom: 0px;
		}    
		#contents2 #main_contents .rightArea .rightTravelPlanWrap .rightTtl2.mostpop{
		    background: url(/files/user/common/css/images/icn_popular.png?v=1482797992) left center no-repeat;
		    -moz-background-size: 22px 22px;
		    -o-background-size: 22px 22px;
		    -webkit-background-size: 22px 22px;
		    background-size: 22px 22px;
		    padding-left: 30px;
		}
		/*-------↓↓コメントアコーディオン↓↓-------*/
		.h3TtlB.ttl_sideB span {
		    margin-top: -6px;
		}
		.accordion label {
		    width:100%;
		    text-align: center;
		    display: block;
		    margin: 0;
		    border-radius: 4px;
		    border: 1px solid;
		    cursor: pointer;
		    cursor: hand;
		}
		input[type="checkbox"].on-off{
		    display: none;
		}
		.accordion ul {
		    -webkit-transition: all 0.5s;
		    -moz-transition: all 0.5s;
		    -ms-transition: all 0.5s;
		    -o-transition: all 0.5s;
		    transition: all 0.5s;
		    margin: 0;
		    padding: 0;
		    list-style: none;
		}
		.accordion li {
		    font-size: 11px;
		}
		/*-------↑↑コメントアコーディオン↑↑-------*/
  
        .accordion label {
            padding: 7px 2px;
  	    }

		/*----------↓↓ランキング↓↓------------*/
		input[type="checkbox"].on-off + ul{
		    height: 0;
		    overflow: hidden;
		}

		input[type="checkbox"].on-off:checked + ul{
		    height: auto;
		    width: 100%;
		}  
		.bigicon{
		    width:100%;
		    margin-bottom: 20px;
		}    
		.bigicon_text{
		    font-size: 13px;
		    font-weight: bold;
		}

		.bigicon_title{
		    margin-top: 3px;        
		}
		.inner label.after{
		    display: none;
		}
		.rank_pic img {
		    width: 260px;
		    height: 150px;
		}
		.ranking:before
		{
		    position: absolute;
		    top:0;
		    left: 0;
		    display: block;
		    width: 24px;
		    height: 24px;
		    background-color: red !important;
		    text-align: center;
		    font-size: 10px;
		    color: #fff;
		    background: none;
		    line-height: 25px;
		    font-size: 15px;
		    z-index: 10;
		}
		.ranking01 { position: relative;}
		.ranking01:before { content: '1';}
		#contents2 #main_contents .rightArea .rightSpotBlock.ranking02:before { content: '2';}
		#contents2 #main_contents .rightArea .rightSpotBlock.ranking03:before { content: '3';}
		#contents2 #main_contents .rightArea .rightSpotBlock.ranking04:before { content: '4';}
		#contents2 #main_contents .rightArea .rightSpotBlock.ranking05:before { content: '5';}

		/*---既存スタイルの上書き---*/
		#contents2 #main_contents .rightArea .rightBlock {
		    padding: 10px 20px;
		}
		/*---既存スタイルの上書き---*/

		/*---既存スタイルの上書き---*/
		/*---ランキング追従---*/
		.relation{
		    background-position-y: 2px !important;
		    background-position-x: 4px !important;
		}
		.fa{
		    margin-right: 0px !important;
		}
		.fa-angle-down,.fa-angle-up{
		    font-size: 20px !important;        
		}
		/*---ランキング追従---*/
		/*-------↑↑ランキング↑↑-------*/
}
@media only screen and (max-width: 767px){
   
		body { position: relative;}
		.wysiwyg h2 {
			font-weight: bold;
			font-size: 1.4em;
			border-left: 10px solid #c0392b;
			border-bottom: 2px solid #c0392b;
			padding: 10px;
		        margin: 0px 0px 10px;
		}

		.wysiwyg h3 {
		  margin: 1.0em 0;
		  padding: 0.5em 0 0.5em 0;
		  border: 2px solid #c0392b;  
		  font-size: 100%;
		  font-weight: bold;
		  text-align:center;
		  width:150px;
		  border-radius: 10px;
		    -webkit-border-radius: 10px;
		    -moz-border-radius: 10px;
		}
		/*以下TOM追加*/
		/*アコーディオン*/
		.accordion label {
	        width: 143px;
    	    height:15px;
		    text-align: center;
		    display: block;
		    margin: 0;
		    border-radius: 4px;
		    border: 1px solid;

		}

		input[type="checkbox"].on-off{
		    display: none;
		}

		.accordion ul {
		    -webkit-transition: all 0.5s;
		    -moz-transition: all 0.5s;
		    -ms-transition: all 0.5s;
		    -o-transition: all 0.5s;
		    transition: all 0.5s;
		    margin: 0;
		    padding: 0;
		    list-style: none;
		}

		.accordion li {
		    font-size: 11px;
		}
		/*ここまで*/
		input[type="checkbox"].on-off + ul{
		    height: 0;
		    overflow: hidden;
		}

		input[type="checkbox"].on-off:checked + ul{
		    height: auto;
		    width: 693px;
		}  
		.bigicon{
		    width:100%;
		    margin-bottom: 10px;
		}    
		.bigicon_text{
		    font-size: 13px;
		    font-weight: bold;
		}

		.bigicon_title{
		    margin-top: 3px;        
		}
		.inner label.after{
		    display: none;
		}
		    
		.rank{
		color: red;
		    border: 1px solid;
		    border-color: red;
		    width: 21px;
		    height: 19px;
		    display: inline-block;
		    text-align: center;
		    background-color: white;
		}

		.rank_big{
		    border: 1px solid;
		    border-color: red;
		    margin-left: 1px;
		    width: 25px;
		    height: 23px;
		    display: inline-block;
		    text-align: center;
		    background-color: white;
		}
		.rank_pic{
		    background-image:url(/files/topics/9592_ext_07_0.png?v=1456718471);
		    width: 261px;
		    height: 151px;
		}
		.h3TtlB.ttl_sideB span{
           padding-top: 1px;
           padding-right:0px;
    	
		}
		    
		 

		.relation{
		    background-position-y: 2px !important;
		    background-position-x: 4px !important;
		}
		.rightArea .rightSpotBlock img{
		    height: 80px !important;        
		} 
		.rightSpotBlock{
		    margin: 0 !important;
		}
		a:hover div div.big_box{
		    background:rgba(255,255,255,0.2);
		    width:261px;
		    height:151px;
		}
		a:hover div div.small_box{
		    background:rgba(255,255,255,0.2);
		    width:80px !important;
		    height:80px !important;
		}
		.small_pic{
		    width:80px;
		    height:80px;
		    float: left;
		    margin-bottom: 10px;
		}
		.fa{
		    margin-right: 0px !important;
		    margin-top: -4px !important;

		}
		.fa-angle-down,.fa-angle-up{
		    font-size: 20px !important;        
		}
    .smart_sideB{
        display: none;
    }

    .ttl_sideB{
        display:none;        
    }
    .smart_sideB{
        display:block; 
    }
    .sp_comment{
        float: right;
        margin-right: 0px;
    }
    .sp_comment > span{
        margin-top: 1px !important;
    }
    .sp_comment label span{
    }
    .accordion label{
        border: none;
    float: left;
    }
    input[type="checkbox"].on-off:checked + ul {
        width: 100%;
    }
    .iconCover{
        width:100%;
    }
    #contents2 #main_contents .centerSpotBlock .clearfix img{
        width:100%;
        height: auto;
    }
    .sp_andmore .before2{
        display:block;
    }
    .sp_andmore .after2{
        display: none;
    }
    .fa{
        float:right;
    }
  .h3TtlB.ttl_sideB .sp_comment .fa{
    
       width:10%; 
  }
    .sp_andmore{
        background-color:#2e2f2f;
        color: white;
        line-height:3.2;
        height:50px;
        text-align: center;
        margin-bottom: 25px;
        
    }
    .sp_andmore .before2 .fa,.sp_andmore .after2 .fa{
        margin-right: 22px !important;
        margin-top: 0px !important;
        line-height:2.4;
    }

    .centerSpotBlock{
        margin-bottom: 0px;
    }
    .centerSpotBlock.sp{
        margin-bottom: 0px;
    }
    .sp{
        display: block;
    }
    .pc{
        display: none;
    }
    .snsList{
        margin-bottom: 10px;
    }
    .rightSpotBlock_name{
        font-weight: bold;
    }
    ul li .centerSpotBlock.sp{
        font-size: initial;
    }

}

#contents2 #main_contents .rightArea .rightSpotBlock.ranking{
  display:table;
}
#contents2 #main_contents .rightArea .rightSpotBlock.ranking .rightSpotBlock_text{
      display: table-cell;
    vertical-align: middle;
    float: none;
}
.folder span.mark {  display: none; }
 
/*************************
* GoogleMap    Custom
*************************/
.ggmap {
position: relative;
padding-bottom: 0.25%;
padding-top: 30px;
height: 340px !important;
overflow: hidden;
boder:none;
display: block;  
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
border: 1px solid #eee;
}
.ggmapSP{
    display: none;
}
@media only screen and (max-width: 767px) {
   div.gm-style{
       height:80%;
    }
/*SP*/
    .ggmap{
        display: none;
    }
    .ggmapSP {
        display: block;
        position: relative;
        padding-bottom: 0.25%;
        padding-top: 0px;
        overflow: hidden;
        boder:none;

    }
     .ggmapSP iframe,
    .ggmapSP object,
    .ggmapSP embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    	height:100%;
        border: 1px solid #eee;
    }
  #map{
        height:300px;
  }
}
@media only screen and (max-width: 767px) {
  div.gm-style {height:80%; !important;}
}