@charset "utf-8";
@import url('https://www.nta.co.jp/akafu/east/common/css/common.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500&family=Noto+Serif+JP:wght@400;700&display=swap');
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
/* CSS Document */
html{
	scroll-behavior:smooth;
  scroll-padding-top: 70px;
}
#wrapper {
	width: 100%;
	/*max-width:950px;*/
	margin:0 auto 10px;
	padding:0;
 	font-size:14px;
	line-height:1.6;
	overflow: hidden;
}
#wrapper * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#wrapper a{
   word-break: break-all;  
}
#wrapper img{
  vertical-align: bottom;
} 
#wrapper h2,
#wrapper h3,
#wrapper h4 {
	font-weight: bold;
}
@media screen and (min-width: 760px){
   .pc_none{
    	display: none;
  }
}
@media screen and (max-width: 759.9px){
   .sp_none{
    	display: none;
  }
}
.disnon {
	display:none;
}

/*-------------ページコンテンツ   --------------*/
.pageContent {
  width: 100%;
  padding: 60px 0 50px;
}
/*.pageContent:nth-child(odd) {
	background: rgba(214,222,244,1);
}*/

.pageContent .inner{
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}
.pageContent .inner h2{
  font-size: 160%;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	position: relative;
}
.pageContent .inner h2::before{
	content:"";
	width: 100%;
	height: 1px;
	position: absolute;
	top:50%;
	left: 0;
	right: 0;
	background:#004666;	/*青系*/
	z-index: 1;
}

.pageContent .inner h2 span{
  background-repeat: no-repeat,no-repeat;
  background-position: left center,right center;
  background-size: 32px,32px;
  padding-left: 45px;
  padding-right: 45px;
	z-index: 2;
	position: relative;
	background-color: #FFFFFF;
}
.pageContent:nth-child(even){
	background: rgba(214,222,244,1);/*青系*/
}
.pageContent:nth-child(even) .inner h2 span{
	background-color:rgba(214,222,244,1);/*青系*/
}
#hotelList .inner h2 span{
  background-image: url("../images/icon_hotel_b.svg"),url("../images/icon_hotel_b.svg");
}


/*-------------おすすめホテル一覧   --------------*/

/*ホテルボックス*/
.hotel_box_unit {
	width: 100%;
	padding:20px 10px 20px 15px;
	display: flex;
	flex-wrap: wrap;
}
.hotel_box {
	width: 32%;
	margin:  10px 0.5% ;
	border: 1px solid #CCC;
	padding: 5px 10px;
  position: relative;
	background: #FFFFFF;
}
@media screen and (max-width: 759.9px){
   .hotel_box{
		width: 100%;
  }
}
.region_picto {
  margin-bottom: 10px;
  width: 100%;
  text-align: right;
}
.region_picto .picto,
.region_picto .region{
  text-align: right;
  margin: 5px 0 5px 5px;
  display: inline-block;
}
.region_picto .region li{
		font-size: 95%;
		padding:0;
		display: inline;
		margin:0;
	}
.region li:first-child::after{
	content: "|";
	padding-left: 3px;
	padding-right: 3px;
}
.picto[data-type="hotel"]{
	background: rgb(86,201,121);
	color: #FFFFFF;
	padding: 1px 5px;
	border-radius: 3px;
  font-size: 80%;
}
.picto[data-type="ryokan"]{
	background: rgb(212,181,114);
	color: #FFFFFF;
	padding: 1px 5px;
	border-radius: 3px;
  font-size: 80%;
}
.hotel_data {
	width: 100%;
	margin-bottom: 10px;
}
.hotel_data h3{
	font-size: 150%;
	margin-bottom:0;
  min-height: 2.8em;
  line-height: 1.4;
}
.hotel_data p{
  min-height: 3em; 
  line-height: 1.4;
  margin-top: 5px;
}

@media screen and (max-width: 759.9px){
   .hotel_data h3{
		font-size: 140%;
	  font-weight: bold;
  }
}
.hotel_box .photo{
	width: 100%;
	padding-top: 60%;
	position: relative;
	margin-bottom: 10px;
	background: #EEEEEE;
  overflow: hidden;
}
.hotel_box .photo .newopen{
  position: absolute;
  top:5px;
  right: 5px;
	background: #F32A2D;
	color: #FFFFFF;
	padding: 1px 5px;
	border-radius: 3px;
  font-size: 80%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.hotel_box .photo img{
	width: auto;
	height:100%;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hotel_box a.more{
	border: 1px solid #CCC;
	border-radius: 5px;
	padding: 2px 10px;
  background: rgba(57,95,201,0.7);
	color: #FFF !important;
	text-decoration: none !important;
	width: 80%;
	display: block;
	margin: 10px auto;
	text-align: center;
}
.hotel_box a.more:hover{
  background: rgba(57,95,201,1.00);
}

/*section*/
#region h2{
 width: 100%;
  max-width: 950px;
  margin: 0 auto;
}

/*タブ*/
@media screen and (min-width: 760px){
  #tab{
    width:100%;
  }
  #tab .inner{
    width:100%;
    max-width: 950px;
    margin: 0 auto;
  }
  #tab ul{
    width:100%;
    margin-left: 0 !important;
    display: flex;
    flex-wrap: nowrap;
  }
  #tab ul div{
    width: 100%;
		padding-top: 80px;
  }
  #tab ul div li{
    border-left:1px solid #FFFFFF;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
    width:100%;
    text-align:center;
    padding:10px 0;
    background: #CCCCCC;
    cursor: pointer;
  }
  #tab ul div:first-child li{
    border-left:1px solid #CCC;
  }
  #tab ul div li.selected {
    color:#666;
    background: #FFF;
    border-bottom:1px solid #FFFFFF;
  }
  #tab ul div:last-child li.selected {
    border-right:1px solid #CCC;
  }
  #tab ul li h3{
    font-size:110%;
    color:#333;
    font-weight:bold;
    white-space: nowrap;
  }
  #tab ul li h3 span{
    font-size:80%;
    font-weight: normal;
  }
}
@media screen and (max-width: 759.9px){
  #tab{
    width:100%;
  }
  #tab ul div{
    padding-top:20px;
  }
  #tab ul{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-scrolling: touch;
    padding: 5px;
  }
  #tab ul li{
    text-align:center;
    padding:10px 15px;
    cursor: pointer;
    white-space: nowrap;
    background: #CCCCCC;
    border-radius: 10px;
    margin-right: 10px;
    font-size: 90%;
    border: 1px #CCC solid;
  }
  #tab ul li:last-child{
    border-right:1px solid #CCC;
  }
  #tab ul li h3{
    font-size:120%;
    color:#333;
    font-weight:bold;
  }
  #tab ul li h3 span{
    font-size:80%;
    font-weight:normal;
  }
  #tab ul li.selected {
    color:#666;
    background: #FFF;
  }
}

@media screen and (min-width: 760px){
	.tab_wrap {
		border-right:1px #CCC solid;
		border-left:1px #CCC solid;
		border-bottom:1px #CCC solid;
		width:100%;
		max-width: 950px;
		margin: 0 auto;
		background: #FFFFFF;
		padding-bottom: 20px;
	}
	.tab_wrap.noborder {
		border:none;
		background:none;
	}
}
@media screen and (max-width: 759.9px){
	.tab_wrap {
		width:95%;
		margin: 0 auto;
	}
}