@charset "utf-8";
/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
SP用スタイル：～　768px
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/


/* slick js
----------------------------------------------------------------------------- */
/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
  content:""!important;
  font-size: 8.125vw!important;
  width: 8.125vw;
  height: 8.125vw;
  display: inline-block;
  opacity: 1!important;
}
.slick-prev:before{
  background: url(../img/s_arrow_r.png);
  background-size: contain;
}
.slick-next:before {
  background: url(../img/s_arrow_l.png);
  background-size: contain;
}
.slick-prev, .slick-next {
  width: 8.125vw!important;
  height: 8.125vw!important;
}
/*左右の矢印の位置を変える*/
.slick-next {
  right: -3vw!important;
  z-index: 99!important;
}
.slick-prev {
  left: -3vw!important;
  z-index: 100!important;
}
.slick-dots {
bottom: -8vw!important;
}
.slick-dots li {
  margin: 0!important;
}
.slick-dots li button::before {
  font-size: 11px!important;
}
.slick-dots li.slick-active button:before {
  color: #a7c4e1!important;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
  color: #a7c4e1!important;
}

/* キービジュアル
----------------------------------------------------------------------------- */
#kv{
  width: 100%;
}
#navi{
  position: relative;
  top: -3vw;
  margin-bottom: 3vw;
}
#navi:before{
  content: '';
  background: url(../img/navi_nami01.png) top center no-repeat;
  background-size: 270vw;
  display: block;
  width: 100%;
  height: 3vw;
}
#navi:after{
  content: '';
  background: url(../img/navi_nami02.png) bottom center no-repeat;
  background-size: 270vw;
  display: block;
  width: 100%;
  height: 3vw;
}
#navi .in_navi{
  background: #88ccd4;
  padding: 6vw 0 3vw;
}
#navi ul{
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#navi ul li{
  font-size: 3.75vw;
  font-weight: bold;
  width: 49%;
  text-align: center;
  position: relative;
  padding: 2vw 0;
}
#navi ul li:nth-child(3),
#navi ul li:last-child{
  margin: 4vw 0 0;
}
#navi ul li:before{
  content: '';
  width: 0.2vw;
  height: 8vw;
  display: inline-block;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  vertical-align: middle;
}
#navi ul li:nth-child(2n):after{
  content: '';
  width: 0.2vw;
  height: 8vw;
  display: inline-block;
  background: #fff;
  position: absolute;
  right: 0;
  top: 0;
  vertical-align: middle;
}
#navi ul li a{
  display: block;
  color: #0e5180;
  text-decoration: none;
  padding-top: 3vw;
}
#navi ul li a:before{
  content: '';
  display: inline-block;
}
#navi ul li:first-child a:before{
  background: url(../img/01.png) no-repeat top center;
  background-size: contain;
  width: 10vw;
  height: 4vw;
  left: 50%;
  top: -2vw;
  position: absolute;
  margin-left: -6vw;
}
#navi ul li:nth-child(2) a:before{
  background: url(../img/02.png) no-repeat top center;
  background-size: contain;
  width: 10vw;
  height: 4vw;
  left: 50%;
  top: -2vw;
  position: absolute;
  margin-left: -6vw;
}
#navi ul li:nth-child(3) a:before{
  background: url(../img/03.png) no-repeat top center;
  background-size: contain;
  width: 10vw;
  height: 4vw;
  left: 50%;
  top: -2vw;
  position: absolute;
  margin-left: -6vw;
}
#navi ul li:last-child a:before{
  background: url(../img/04.png) no-repeat top center;
  background-size: contain;
  width: 10vw;
  height: 4vw;
  left: 50%;
  top: -2vw;
  position: absolute;
  margin-left: -6vw;
}
#navi ul li a:hover{
  color: #dce820;
}
/* 久米島はどんなところ？
----------------------------------------------------------------------------- */
#about {
  width: 94%;
margin: 0 auto 13vw;
}
#about .ttl_box{
  position: relative;
}
#about .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/01_01_img03.png) no-repeat;
  position: absolute;
  left: 2vw;
  top: 0;
  width: 29vw;
  height: 16vw;
  background-size: contain;
}
#about .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/01_01_img02.png) no-repeat;
  position: absolute;
  right: 2vw;
  top: -5vw;
  width: 29vw;
  height: 22vw;
  background-size: contain;
}
#about .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 5vw;
  background: url(../img/01_01_img01.png) no-repeat top center;
  background-size: 24vw;
  padding: 18vw 0 5vw;
  text-align: center;
}
#about .box{
  border: 1.5vw solid #e0e3b6;
  padding: 5vw;
}
#about .box .cont_wrap{
  margin-bottom: 3vw;
}
#about .box .cont_wrap .txt_cont{
  width: 100%;
}
#about .box .cont_wrap .txt_cont h3{
  width: 32vw;
  margin-bottom: 2vw;
}
#about .box .cont_wrap .txt_cont h3:nth-child(3){
  width: 48vw;
  margin-top: 4vw;
}
#about .box .cont_wrap .txt_cont p{
  font-size: 3.75vw;
  line-height: 1.6;
}
#about .box .cont_wrap .movie{
  margin-top: 2vw;
}
#about .box .cont_wrap .movie iframe{
  width: 100%;
  height: 45.5vw;
}
/* 久米島の主なみどころ
----------------------------------------------------------------------------- */
#promise {
  width: 94%;
  margin: 0 auto 5vw;
  
}
#promise .ttl_box{
  position: relative;
}
#promise .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/01_02_img03.png) no-repeat;
  position: absolute;
  left: 0;
  top: -6vw;
  width: 35vw;
  height: 16vw;
  background-size: contain;
}
#promise .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/01_02_img02.png) no-repeat;
  position: absolute;
  right: 2vw;
  top: -6vw;
  width: 29vw;
  height: 7vw;
  background-size: contain;
}
#promise .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 5vw;
  background: url(../img/01_02_img01.png) no-repeat top center;
  background-size: 24vw;
  padding: 18vw 0 5vw;
  text-align: center;
}
#promise .box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#promise .box dl{
  width: 48%;
  margin-bottom: 5vw;
}
#promise .box dl dt{
  font-size: 4.0625vw;
  font-weight: bold;
  margin-bottom: 2vw;
  color: #247761;
  height: 7vw;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  line-height: 1.2;
}
#promise .box dl dt span{
  font-size: 3.125vw;
}
#promise .box dl dt span.w100{
  width: 100%;
}
#promise .box dl dd{
  position: relative;
}
#promise .box dl dd:nth-child(2){
  margin-bottom: 2vw;
}
#promise .box dl dd:nth-child(3){
  font-size: 3.75vw;
  color: #232c2e;
  line-height: 1.6;
}
#promise .box dl dd .stmp{
  display: block;
  position: absolute;
  right: -2vw;
  top: -2vw;
  width: 11vw;
}
/* 久米島のDEEPなガイドさん
----------------------------------------------------------------------------- */
#guider{
  margin-bottom: 5vw;
}
#guider:before{
  content: '';
  background: url(../img/box_nami01.png) top center no-repeat;
  display: block;
  width: 100%;
  height: 2vw;
  background-size: 270vw;
}
#guider:after{
  content: '';
  background: url(../img/box_nami02.png) top center no-repeat;
  display: block;
  width: 100%;
  height: 2vw;
  background-size: 270vw;
}
#guider .in_guider{
  background: #d7f4f6;
}
#guider .in_guider .wrapper{
  width: 94%;
  margin: 0 auto;
  padding: 5vw 0;
}
#guider .in_guider .wrapper .ttl_box{
  position: relative;
}
#guider .in_guider .wrapper .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/mizutama.png) no-repeat;
  position: absolute;
  left: 0;
  top: 7vw;
  width: 33vw;
  height: 2vw;
  background-size: 150%;
}
#guider .in_guider .wrapper .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/mizutama.png) no-repeat;
  position: absolute;
  right: 0;
  top: 7vw;
  width: 33vw;
  height: 2vw;
  background-size: 150%;
}
#guider .in_guider .wrapper .ttl_box .number{
  text-align: center;
  margin: 0 auto 5vw;
  width: 24vw;
}
#guider .in_guider .wrapper .ttl_box h2{
  font-size: 5vw;
  text-align: center;
  font-weight: bold;
  color: #4193ab;
}
#guider .in_guider .wrapper .box{
  position: relative;
}
#guider .in_guider .wrapper .box .ph{
  width: 60vw;
  margin: 5vw auto;
}
#guider .in_guider .wrapper .box .txt{
  color: #3b3b3b;
  line-height: 1.8;
  font-size: 3.75vw;
  margin: 5vw 0 0;
}
#guider .in_guider .wrapper .box .txt img{
  width: 90%;
  margin: 5vw auto;
  display: block;
}
/* 地元密着体験ツアー
----------------------------------------------------------------------------- */
#tour {
}
#tour .ttl_box{
  width: 94%;
  margin: 0 auto;
  position: relative;
}
#tour .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/03_img03.png) no-repeat;
  position: absolute;
  left: 0;
  top: -2vw;
  width: 35vw;
  height: 16vw;
  background-size: contain;
}
#tour .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/03_img02.png) no-repeat;
  position: absolute;
  right: 0;
  top: -3vw;
  width: 28vw;
  height: 16vw;
  background-size: contain;
}
#tour .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 5vw;
  background: url(../img/03_img01.png) no-repeat top center;
  background-size: 24vw;
  padding: 18vw 0 5vw;
  text-align: center;
}
#tour .box {
  width: 94%;
  margin: 0 auto 5vw;
  border-radius: 5px;
  padding: 30vw 5vw 0 5vw;
  background: #dfe6f3;
  position: relative;
}
#tour .box h3{
  color: #335ba4;
  font-weight: bold;
  font-size: 5vw;
  background: url(../img/ribon_sp.png) no-repeat;
  background-size: 100vw;
  text-align: center;
  width: 100vw;
  height: 23vw;
  margin: 0 auto;
  line-height: 21vw;
  position: absolute;
  left: -3vw;
  top: 4vw;
}
#tour .box .contents{
  margin-bottom: 2vw;
}
#tour .box .contents .ph{
  width: 100%;
  border: 8px solid #bfcde6;
  margin-bottom: 3vw;
}
#tour .box .contents .txt{
  width: 100%;
}
#tour .box .contents .txt dl{
  display: flex;
  align-items: flex-start;
  margin-bottom: 2vw;
}
#tour .box .contents .txt dl:nth-child(3){
  margin-bottom: 0;
}
#tour .box .contents .txt dl dt{
  width: 20%;
  color: #fff;
  font-weight: bold;
  background: #b1ba67;
  border-radius: 3px;
  padding: 1vw 0;
  text-align: center;
  margin-right: 2%;
  line-height: 1.4;
  font-size: 3.75vw;
}
#tour .box .contents .txt dl dd{
  width: 78%;
  padding: 1vw 0;
  line-height: 1.4;
  font-size: 3.75vw;
}
#tour .box .contents .txt dl:nth-child(3) dd span{
  background: #fff;
  padding: 1vw 3vw;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 2vw;
}
#tour .box .contents .txt dl:nth-child(3) dd .arrow{
  margin: 0 1vw;
  width: 5vw;
}
/*自転車あっちぃ（ポタリング） 上書き*/
#tour .box.pottering{
  background: #dff3e5;
}
#tour .box.pottering h3{
  color: #689654;
}
#tour .box.pottering .contents .ph {
  border: 8px solid #95bc84;
}
#tour .box.pottering .btn_area ul li a {
  background-color: #689654;
}
#tour .box.pottering .btn_area ul li a:hover {
  background-color: #519134;
}

/*コーラルトレッキング 上書き*/
#tour .box.coraltrekking{
  background: #fcf5c4;
}
#tour .box.coraltrekking h3{
  color: #ea8611;
}
#tour .box.coraltrekking .contents .ph {
  border: 8px solid #ffc683;
}
#tour .box.coraltrekking .btn_area ul li a {
  background-color: #ea8611;
}
#tour .box.coraltrekking .btn_area ul li a:hover {
  background-color: #ff8900;
}

#tour .box .btn_area{
  padding: 3vw 0 3vw;
}
#tour .box .btn_area{
}
#tour .box .btn_area .ttl{
  font-size: 3.75vw;
  font-weight: bold;
  color: #2b2b2b;
  margin-bottom: 4vw;
  text-align: center;
}
#tour .box .btn_area ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
#tour .box .btn_area ul li{
  width: 49%;
  margin-right: 2%;
  text-align: center;
  margin-bottom: 3vw;
}
#tour .box .btn_area ul li:nth-child(2n){
  margin-right: 0;
}
#tour .box .btn_area ul li a{
  display: block;
  font-size: 4.375vw;
  font-weight: bold;
  color: #fff;
  background: #335ba4 url(../img/kamome.png) no-repeat right 2.5vw top 1.5vw;
  background-size: 6.5vw;
  padding: 3vw 0;
  box-shadow: 2px 3px 0px rgba(13,3,6,0.3);
}
#tour .box .btn_area ul li a:hover{
  text-decoration: none;
  background-color: #244684;
}
/* おすすめのホテル紹介
----------------------------------------------------------------------------- */
#hotel{
}
#hotel:before{
  content: '';
  background: url(../img/hotel_nami01.png) top center no-repeat;
  display: block;
  width: 100%;
  height: 2vw;
  background-size: 270vw;
}
#hotel:after{
  content: '';
  background: url(../img/hotel_nami02.png) top center no-repeat;
  display: block;
  width: 100%;
  height: 2vw;
  background-size: 270vw;
}
#hotel .in_hotel{
  background: #d7f4f6;
}
#hotel .cont_wrap{
  width: 100%;
  margin: 0 auto;
  padding: 5vw 0;
}
#hotel .ttl_box{
  position: relative;
}
#hotel .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/04_img03.png) no-repeat;
  position: absolute;
  left: 6vw;
  top: -2vw;
  width: 25vw;
  height: 21vw;
  background-size: contain;
}
#hotel .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/04_img02.png) no-repeat;
  position: absolute;
  right: 3vw;
  top: 0vw;
  width: 32vw;
  height: 16vw;
  background-size: contain;
}
#hotel .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 5vw;
  background: url(../img/04_img01.png) no-repeat top center;
  background-size: 24vw;
  padding: 18vw 0 5vw;
  text-align: center;
}
#hotel .box_wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 94%;
  margin: 0 auto;
}
#hotel .box{
  width: 100%;
  margin-bottom: 7vw;
}
#hotel .box h3{
  background: url(../img/board.png) no-repeat;
  font-size: 5vw;
  font-weight: bold;
  color: #08678a;
  text-align: center;
  padding: 2.8vw 0px;
  margin-bottom: 2vw;
  background-size: contain;
}
#hotel .box .photo img.current{
  display: block;
  margin: 0 auto;
}
#hotel .box .select{
  display: none;
}
#hotel .box p{
  font-size: 3.75vw;
  width: 100%;
  margin: 0 auto;
  padding-top: 3vw;
  color: #222222;
  line-height: 1.6;
}
/* フッター
----------------------------------------------------------------------------- */
.bnr_link {
  padding: 2vw 0;
}
.bnr_link dl{
}
.bnr_link dl dt{
  text-align: center;
  font-size: 3.125vw;
  margin-bottom: 3vw;
}
.bnr_link dl dd{
  width: 25vw;
  margin: 0 auto;
}