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

/* 共通
----------------------------------------------------------------------------- */
#top-page{
  min-width: 1000px;
}
.serif{font-family: century,'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','Kozuka Mincho Pro M', 'Kozuka Mincho Std M', '小塚明朝 Pro M', '小塚明朝 Std M', 'ＭＳ Ｐ明朝','MS PMincho',serif;}



/* キービジュアル
----------------------------------------------------------------------------- */
#kv{
  text-align: center;
}

/* ナビ
----------------------------------------------------------------------------- */
#navi{
  position: relative;
  top: -18px;
  margin-bottom: 30px;
}
#navi:before{
  content: '';
  background: url(../img/navi_nami01.png) top center no-repeat;
  display: block;
  width: 100%;
  height: 25px;
}
#navi:after{
  content: '';
  background: url(../img/navi_nami02.png) bottom center no-repeat;
  display: block;
  width: 100%;
  height: 25px;
}
#navi .in_navi{
  background: #88ccd4;
  padding: 30px 0 20px;
}
#navi ul{
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#navi ul li{
  font-size: 18px;
  font-weight: bold;
  width: 25%;
  text-align: center;
  position: relative;
  padding: 5px 0;
}
#navi ul li:first-child{
  width: 31%;
}
#navi ul li:nth-child(2){
  width: 28%;
}
#navi ul li:nth-child(3){
  width: 25%;
}
#navi ul li:last-child{
  width: 24%;
}
#navi ul li:before{
  content: '';
  width: 1px;
  height: 30px;
  display: inline-block;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  vertical-align: middle;
}
#navi ul li:last-child:after{
  content: '';
  width: 1px;
  height: 30px;
  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: 15px;
}
#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;
  width: 38px;
  height: 25px;
  left: 50%;
  top: -20px;
  position: absolute;
  margin-left: -24px;
}
#navi ul li:nth-child(2) a:before{
  background: url(../img/02.png) no-repeat top center;
  width: 44px;
  height: 27px;
  left: 50%;
  top: -20px;
  position: absolute;
  margin-left: -22px;
}
#navi ul li:nth-child(3) a:before{
  background: url(../img/03.png) no-repeat top center;
  width: 44px;
  height: 27px;
  left: 50%;
  top: -20px;
  position: absolute;
  margin-left: -22px;
}
#navi ul li:last-child a:before{
  background: url(../img/04.png) no-repeat top center;
  width: 44px;
  height: 27px;
  left: 50%;
  top: -20px;
  position: absolute;
  margin-left: -22px;
}
#navi ul li a:hover{
  color: #dce820;
}
/* 久米島はどんなところ？
----------------------------------------------------------------------------- */
#about {
  width: 1000px;
  margin: 0 auto 80px;
}
#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: 10px;
  bottom: 0;
  width: 305px;
  height: 162px;
}
#about .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/01_01_img02.png) no-repeat;
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 266px;
  height: 207px;
}
#about .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 30px;
  background: url(../img/01_01_img01.png) no-repeat top center;
  padding: 105px 0 50px;
  text-align: center;
}
#about .box{
  border: 5px solid #e0e3b6;
  padding: 60px;
}
#about .box .cont_wrap{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#about .box .cont_wrap .txt_cont{
  width: 426px;
}
#about .box .cont_wrap .txt_cont h3{
  margin-bottom: 10px;
}
#about .box .cont_wrap .txt_cont h3:nth-child(3){
  margin-top: 25px;
}
#about .box .cont_wrap .txt_cont p{
  font-size: 16px;
  line-height: 1.6;
}
#about .box .cont_wrap .movie iframe{
  width: 400px;
  height: 225px;
}
/* 久米島の主なみどころ
----------------------------------------------------------------------------- */
#promise {
  width: 1000px;
  margin: 0 auto;
}
#promise .ttl_box{
  position: relative;
  margin-bottom: 20px;
}
#promise .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/01_02_img03.png) no-repeat;
  position: absolute;
  left: -15px;
  top: 0;
  width: 374px;
  height: 170px;
}
#promise .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/01_02_img02.png) no-repeat;
  position: absolute;
  right: 0;
  top: 0;
  width: 318px;
  height: 73px;
}
#promise .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 30px;
  background: url(../img/01_02_img01.png) no-repeat top center;
  padding: 105px 0 50px;
  text-align: center;
}
#promise .box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#promise .box dl{
  width: 310px;
  margin-bottom: 50px;
}
#promise .box dl dt{
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #247761;
  height: 35px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#promise .box dl dt span{
  font-size: 16px;
}
#promise .box dl dt span.w100{
  width: 100%;
  margin-top: 2px;
}
#promise .box dl dd{
  position: relative;
}
#promise .box dl dd:nth-child(2){
  margin-bottom: 15px;
}
#promise .box dl dd:nth-child(3){
  font-size: 14px;
  color: #232c2e;
  line-height: 1.6;
}
#promise .box dl dd .stmp{
  display: block;
  position: absolute;
  right: -12px;
  top: -25px;
}
/* 久米島のDEEPなガイドさん
----------------------------------------------------------------------------- */
#guider{
  margin-bottom: 90px;
}
#guider:before{
  content: '';
  background: url(../img/box_nami01.png) top center no-repeat;
  display: block;
  width: 100%;
  height: 17px;
}
#guider:after{
  content: '';
  background: url(../img/box_nami02.png) top center no-repeat;
  display: block;
  width: 100%;
  height: 17px;
}
#guider .in_guider{
  background: #d7f4f6;
}
#guider .in_guider .wrapper{
  width: 1000px;
  margin: 0 auto;
  padding: 50px 0;
}
#guider .in_guider .wrapper .ttl_box .number{
  text-align: center;
  background-image: url(../img/mizutama.png),url(../img/mizutama.png);
  background-repeat: no-repeat;
  background-position: left top 50px,right top 50px;
  margin-bottom: 30px;
}
#guider .in_guider .wrapper .ttl_box h2{
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: #4193ab;
}
#guider .in_guider .wrapper .box{
  display: flex;
  position: relative;
}
#guider .in_guider .wrapper .box .ph{
  width: 381px;
  margin-right: 30px;
}
#guider .in_guider .wrapper .box .txt{
  width: 471px;
  color: #3b3b3b;
  line-height: 1.8;
  font-size: 16px;
  margin: 40px 0 0;
}
#guider .in_guider .wrapper .box .txt img{
  position: absolute;
  bottom: 30px;
  right: 50px;
}
/* 地元密着体験ツアー
----------------------------------------------------------------------------- */
#tour {
}
#tour .ttl_box{
  width: 1000px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 20px;
}
#tour .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/03_img03.png) no-repeat;
  position: absolute;
  left: 50px;
  top: 20px;
  width: 302px;
  height: 115px;
}
#tour .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/03_img02.png) no-repeat;
  position: absolute;
  right: 70px;
  top: 0;
  width: 270px;
  height: 156px;
}
#tour .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 30px;
  background: url(../img/03_img01.png) no-repeat top center;
  padding: 105px 0 20px;
  text-align: center;
}
#tour .box {
  width: 965px;
  margin: 0 auto;
  border-radius: 5px;
  padding: 160px 35px 0 35px;
  background: #dfe6f3;
  position: relative;
}
#tour .box h3{
  color: #335ba4;
  font-weight: bold;
  font-size: 24px;
  background: url(../img/ribon.png) no-repeat;
  text-align: center;
  width: 1034px;
  height: 98px;
  margin: 0 auto;
  line-height: 85px;
  position: absolute;
  left: -35px;
  top: 40px;
}
#tour .box .contents{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
#tour .box .contents .ph{
  width: 390px;
  border: 8px solid #bfcde6;
}
#tour .box .contents .txt{
  width: 490px;
}
#tour .box .contents .txt dl{
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}
#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: 4px 0;
  text-align: center;
  margin-right: 1%;
  line-height: 1.4;
  font-size: 16px;
}
#tour .box .contents .txt dl dd{
  width: 79%;
  padding: 5px;
  line-height: 1.4;
  font-size: 15px;
}
#tour .box .contents .txt dl:nth-child(3) dd span{
  background: #fff;
  padding: 1px 9px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 10px;
}
#tour .box .contents .txt dl:nth-child(3) dd .arrow{
  margin: 0 5px;
}
/*自転車あっちぃ（ポタリング） 上書き*/
#tour .box.pottering{
  background: #dff3e5;
}
#tour .box.pottering h3{
  color: #689654;
}
#tour .box.pottering .contents {
  flex-direction:row-reverse;
}
#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: 30px 0 40px;
  margin-bottom: 70px;
}
#tour .box .btn_area{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#tour .box .btn_area .ttl{
  font-size: 17px;
  font-weight: bold;
  color: #2b2b2b;
  width: 191px;
}
#tour .box .btn_area ul{
  width: 680px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#tour .box .btn_area ul li{
  width: 98%;
  margin-right: 2%;
  text-align: center;
}
#tour .box .btn_area ul li:last-child{
  margin-right: 0;
}
#tour .box .btn_area ul li a{
  display: block;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background: #335ba4 url(../img/kamome.png) no-repeat right 6px top 5px;
  padding: 10px;
  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;
  display: block;
  width: 100%;
  height: 17px;
}
#hotel:after{
  content: '';
  background: url(../img/hotel_nami02.png) top center;
  display: block;
  width: 100%;
  height: 17px;
}
#hotel .in_hotel{
  background: #d7f4f6;
}
#hotel .cont_wrap{
  width: 1020px;
  margin: 0 auto;
  padding-bottom: 30px;
}
#hotel .ttl_box{
  position: relative;
  padding: 50px;
}
#hotel .ttl_box:before{
  content: '';
  display: inline-block;
  background: url(../img/04_img03.png) no-repeat;
  position: absolute;
  left: 50px;
  top: 20px;
  width: 279px;
  height: 228px;
}
#hotel .ttl_box:after{
  content: '';
  display: inline-block;
  background: url(../img/04_img02.png) no-repeat;
  position: absolute;
  right: 30px;
  top: 65px;
  width: 302px;
  height: 123px;
}
#hotel .ttl_box h2{
  color: #4193ab;
  font-weight: bold;
  font-size: 30px;
  background: url(../img/04_img01.png) no-repeat top center;
  padding: 105px 0 20px;
  text-align: center;
}
#hotel .box_wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#hotel .box{
  width: 49%;
  margin-bottom: 30px;
}
#hotel .box h3{
  background: url(../img/board.png) no-repeat;
  font-size: 21px;
  font-weight: bold;
  color: #08678a;
  text-align: center;
  padding: 17px 0px;
  margin-bottom: 15px;
}
#hotel .box .photo img{
  display: none;
}
#hotel .box .photo img.current{
  display: block;
  margin: 0 auto;
}
#hotel .box .select{
  width: 450px;
  margin: 8px auto 15px;
}
#hotel .box .select ul{
  display: flex;
  justify-content: space-between;
}
#hotel .box .select ul li{
  width: 31%;
  cursor: pointer;
}
#hotel .box p{
  font-size: 15px;
  width: 450px;
  margin: 0 auto;
  color: #222222;
  line-height: 1.6;
}
/* フッター
----------------------------------------------------------------------------- */
.bnr_link {
  padding: 20px 0;
}
.bnr_link dl{
  display: flex;
  align-items: center;
  width: 1000px;
  margin:  0 auto;
}
.bnr_link dl dt{
  margin-left: auto;
  margin-right: 20px;
}