@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 480px){

	.pc{
	display:none;
}
.sp{
	display:block;
}
  

#breadcrumb {
  width: 100%;
  margin: 0 auto;
}
#breadcrumb #body {
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 4px;
}
    
/*----- メインビジュアル -----*/
#mainImg {
  width: 100%;
  position: relative;
}
#mainImg img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}    
    
.inner {
  width: 100%;
  margin: 0 auto;
}
#tourArea .inner {
  width: 100%;
}
    
.tourList{
    display: block;
    width: 98%;
    margin: auto;
    }
    
.tourList li{
    width: 100%;
    margin-bottom: 20px;
    }    
    
.pointList{
    display: block;
    width: 98%;
    margin: auto;
    }    
.pointList li{
    width: 100%;
    min-height: 200px;
    } 
.pointList li:after{
    content: "";
    clear: both;
    display: block;
    padding-bottom: 5px;
    }
.tour_title .label{
        margin-top: 5px;
    }    
.tour_title h4{
    font-size: 1.1em;
    width: 70%;
    margin: 10px 3px 10px 3px;
    }    
    
.tour_title .point{
  margin: -5px 0 0 5px;
    }    
.pointList .img{
    width: 35%;
    float: left;
    margin: 0 0 0 5px;
    }    
.pointList .text{
    width: 60%;
    float: right;
    margin: -2px 5px 0 0 ;
    }    
.dp{
    font-size: 1.2em;
    width: 84%;
}   
.dp a{
    color: inherit;
}
	.banner{
		float: none;
		width:90%;
		margin: auto;
	}
	.banner img{
		width:100%;
		margin-top: 20px;

	} 
/*-------------------------

	 北海道

	---------------------------*/
.inner{
		width: 100%;
		padding: 0;
	}

.pc-on{
		display: none !important;
	}
.sp-on{
		display: block;
	}

.conts .link-button-small{
		width: 100%;
	}
	
.goTop__img--pc {
		width: 54px;
	}
/*-------------------------

	 スライダー

	---------------------------*/
	.top-slider{
		height: 200px;
	}
	
	.top-slider-logo{
		width: 100%;
		height: 200px;
	}

	.top-slider-logo .logo{
		position:absolute;
		bottom: 0;
		right: 10px;
		max-width: 230px;
		z-index: 100;
	}

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

	 最新のお知らせ

	---------------------------*/
	.news{
		margin: 0;
	}
	
	.news.inner{
		width: 100%;
	}

	.news-inner{
		display: block;
		margin-bottom: 0;
		width: 100%;
		padding: 0;
	}
	.news-title{
		padding: 25px;
		width: 100%;
	}
	
	.news-list{
		width: 85%;
		margin: 5% auto;
	}
.news-list a{
		color:inherit;
	}
	.news-icon{
		margin: 5px;
	}

	.news-title-name span{
		display: inline;
		padding-left: 15px;
	}
	.news-bnr{
		display: block;
		width: 85%;
		margin-bottom: 5%;
	}
	.news-bnr-img{
		width: 100%;
		margin-bottom: 5%;
	}
	
	.news-bnr-img:last-of-type{
		margin-bottom: 0;
	}

.area-nav{
  background: #1B3C55;
}
.area-list{
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
}
.area-list li{
  width: calc(100% / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
}
.area-list li:nth-child(odd){
  border-right: 1px solid #FFF;
}
.area-list li:nth-child(-n+4){
  border-bottom: 1px solid #FFF;
  border-left: 1px solid #fff;
}
.area-list li a{
  display: block;
  font-size: calc(24vw / (750 / 100));
  color: #FFF;
  text-align: center;
  line-height: 1.2;
  padding-bottom: calc(15vw / (750 / 100));
  position: relative;  
  text-decoration:none;
}
.area-list li a::after{
  content: "";
  background: url("../img/arrow.png") no-repeat;
  background-size: contain;
  width: calc(16vw / (750 / 100));
  height: calc(11vw / (750 / 100));
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto
}


.area-list .link a::after{

  background: url("../img/arrow02.png") no-repeat;
  background-size: contain;
  top:0;
  width: calc(16vw / (750 / 100));
  height: calc(20vw / (750 / 100));
  left: 100%;

 
}
.area-list .link a {
  padding-bottom:0;
 padding-right:10px;
}
.accessbox {
    margin: auto;
}

.accessbox>div {
    width: 100%;
    margin: 10px;
}
.access{
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
	background-color: #ffffff;
	margin:10px auto;
	width:97%;
}