@charset "utf-8";

:root{
  --blue: #00ADE9;
  --beige: #EEECE6;
  --gray: #555555;
  --dgray: #221815;
  --lgray: #F7F7F9;
  --red: #f03e3e;
  --b_line: 1px dotted var(--blue);
  --g_line: 2px solid var(--dgray);
  --h_font: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.main *{
  box-sizing: border-box
}
.nopc{
  display: none;
}
.inner{
  width: 992px;
  margin: auto;
}

.title-wrapper{
  width: 100%;
  height: 360px;
  background: url("../img/title_bg.jpg") no-repeat center top;
  position: relative
}
.title-logo>img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.nav-wrapper{
  width: 100%;
  background: var(--dgray);
}
.nav-list{
  width: 992px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.nav-list>li{
  width: calc(100% / 3);
  border-right: 1px solid #FFF;
}
.nav-list>li:first-child{
  border-left: 1px solid #FFF
}
.nav-list>li>a{
  display: block;
  padding: 16px 0 30px;
  text-align: center;
  font-size: 16px;
  color: #FFF;
  position: relative
}
.nav-list>li>a::after{
  content: "";
  background: url("/cmn/icon/icon_arrow_down_white.svg") no-repeat center center / contain;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.3s;
}
.nav-list>li>a:hover{
  background: var(--blue)
}

.content-wrapper{
  width: 100%;
  padding: 50px 0;
}
.head-title{
  text-align: center;
  padding: 30px 0;
}
.head-title#about{
  font-size: 32px;
  border-bottom: 3px solid var(--blue);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.catch-copy{
  font-size: 24px;
  font-weight: bold;
  color: var(--blue);
  text-align: center;
  margin-bottom: 10px;
}
.about-txt{
  margin: 0 40px;
  font-size: 16px;
  text-align: center;
  line-height: 1.8
}
.note-txt{
  display: block;
  font-size: 12px;
  text-align: left;
  position: relative;
  padding-left: 1.0em;
}
.note-txt::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.hotel-salespoint{
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap
}
.hotel-salespoint>li{
  width: calc(100% / 3);
  position: relative;
  background: #000;
}
.hotel-salespoint>li>img{
  opacity: 1
}
.overlay{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.overlay>span{
  display: block;
  color: #FFF;
  padding: 0 10px;
}
.hotel-salespoint>li:hover>img{
  opacity: 0.4
}
.hotel-salespoint>li:hover .overlay{
  opacity: 1
}

.content-wrapper.tour-block{
  background: var(--lgray)
}
.area-list{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.area-list>li{
  width: calc(93% / 8);
  margin-right: 1%;
  border: var(--g_line);
  background: #FFF;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;
  color: var(--dgray);
  text-align: center;
}
.area-list>li:last-child{
  margin-right: 0
}
.area-list>li.nav-on,
.area-list>li:hover{
  background: var(--dgray);
  color: #FFF;
}
.area00 {
  display: none;
}
.sub-title{
  text-align: center;
  margin-bottom: 10px;
  border-bottom: var(--b_line);
}
.sub-title>span{
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: var(--blue);
}
.sub-title>span::after{
  content: "おすすめツアー";
  display: inline-block;
  color: var(--dgray);
  margin-left: 5px;
}
.link-button{
  width: 800px;
  margin: 20px auto 0;
}
.link-button>a{
  display: block;
  background: #FFF;
  border: var(--g_line);
  font-size: 16px;
  font-weight: bold;
  color: var(--dgray);
  position: relative;
  padding: 10px;
  text-align: center;
}
.link-button>a::after{
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/cmn/icon/icon_arrow_right_black.svg");
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 0;
  margin: auto;
}
.link-button>a:hover{
  background: var(--dgray);
  color: #FFF;
}
.link-button>a:hover::after{
  background-image: url("/cmn/icon/icon_arrow_right_white.svg")
}

.content-wrapper.hotel-block{
  background: var(--beige)
}
.hotel-list{
  display: flex;
  justify-content: space-between;
}
.hotel-map{
  width: 400px;
  margin-right: 20px;
}
.hotel-list__data{
  flex: 1
}
.area-name{
  font-size: 20px;
  font-weight: bold;
  color: var(--dgray);
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--blue);
  position: relative
}
.area-name::after{
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/cmn/icon/icon_arrow_down.svg");
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.area-name.up::after{
  background-image: url("/cmn/icon/icon_arrow_top.svg");
}
.area_num{
  display: inline-block;
  margin-left: 1.0em;
}
.area_num::after{
  content: "Hotels";
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
}
.js-openbox{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.js-openbox>li{
  width: calc(98% / 2);
  border: 3px solid var(--dgray);
  background: #FFF;
  position: relative
}
.js-openbox>li::after{
  content: "";
  background: url("/cmn/icon/icon_arrow_down.svg") no-repeat center center / contain;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}
.js-openbox>li:nth-child(odd){
  margin-right: 2%;
}
.js-openbox>li:nth-child(n+3){
  margin-top: 2%
}
.js-openbox>li>a{
  display: block;
  height: 100%;
  padding: 20px 16px;
  position: relative;
}
.js-openbox>li>a:hover{
  background: var(--blue)
}
.hotel-sub{
  display: block;
  font-size: 12px;
  color: var(--red);
  margin-bottom: 5px;
}
.hotel-content{
  margin-top: 50px;
}
.hotel-listbox>li{
  display: flex;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: var(--b_line);
  margin-bottom: 40px;
}
.hotel-listbox>li:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0
}
.hotel-left{
  width: 480px;
  margin-right: 20px;
}
.hotel-title{
  margin-bottom: 20px;
}
.hotel-txt{
  font-family: var(--h_font);
  font-weight: bold;
  color: var(--gray);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: var(--b_line);
}
.hotel-data{
  font-size: 12px;
}
.hotel-access{
  font-weight: bold;
  font-family: var(--h_font);
  margin-bottom: 5px
}
.hotel-access::before{
  content: "アクセス";
  color: #FFF;
  font-weight: bold;
  background: var(--dgray);
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-right: 5px;
}
.hotel-right{
  width: calc(992px - 500px)
}