@charset "utf-8";


#yashi {
    width: 490px;
	top: 0;
	left:0;
	position: absolute;
	z-index:1;
}

#yashi img{
    width: auto;
	height:450px;
}

@media screen and (max-width: 800px) {
#yashi {
    width: 490px;
}

#yashi img{
    width: auto;
	height:250px;
}
}

@media screen and (max-width: 568px) {
#yashi {
    width: 35%;
}

#yashi img{
    width: 100%;
	height:auto;
}
}

/*topimg
---------------------------------------------------------------------------*/
.topimg {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 400px;
  overflow:hidden;
}

@media screen and (max-width: 810px) {
.topimg {
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.topimg {
  height: 350px;
}
}

/*bx-slider
---------------------------------------------------------------------------*/
.bx-wrapper {
  height: 100%;
  min-height: 400px;
  width: 100%;
  margin: 0px auto;
  position: relative;
  z-index:0;
  overflow:hidden;
}

@media screen and (max-width: 810px) {
.bx-wrapper {
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.bx-wrapper {
  height: 350px;
}
}

.bx-wrapper #dot {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(000, 000, 000, 1), rgba(000, 000, 000, 0));
  opacity: 0.7;
}

#slider01 li{
  position: relative;
  height: 100vh;
  min-height: 400px;
}

@media screen and (max-width: 810px) {
#slider01 li{
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
#slider01 li{
  height: 350px;
  text-align: center;
}
}

.bx-wrapper img {
  width: 100%;
  height:auto;
  min-height: 100%;
  display: block;
  position: relative;
  z-index:0;
}

@media screen and (max-width: 810px) {
.bx-wrapper img {
  width: auto;
  min-width: 100%;
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.bx-wrapper img {
  height: 350px;
}
}

#sl_row {
  width: 50%;
  height:auto;
  position: absolute;
  top: 0;
  left: 25%;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media screen and (max-width: 810px) {
#sl_row {
  width: 100%;
  left: 0;
  padding:0 10%;
  box-sizing: border-box;
}
}

.sld-text {
  color: #fff;
  position: relative;
  z-index: 1;
  width:100%;
  margin:0;
  padding-top:5%;
  text-shadow:1px 1px 1px #000;
}

.sld-text .stx01{
  letter-spacing:.1em;
  font-weight:500;
  text-transform: uppercase;
  font-size:1.6em;
  margin-bottom:15px;
  line-height:1.6;
  font-family: 'Roboto', sans-serif;
}

@media screen and (max-width: 810px) {
.sld-text .stx01{
  font-size:2em;
  margin-bottom:10px;
  line-height:1.5;
  letter-spacing:.2em;
}
}

@media screen and (max-width: 568px) {
.sld-text .stx01{
  font-size:1.2em;
  line-height:1.4;
  margin-bottom:5px;
  letter-spacing:.15em;
}
}

.sld-text .stx02{
  letter-spacing:.02em;
  font-weight:400;
  line-height:2;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
}

@media screen and (max-width: 568px) {
.sld-text .stx02{
  font-size:15px;
  line-height:1.8;
  letter-spacing:0em;
}
}

.stx-buttons{
  margin-top:15px;
  font-family: Roboto,sans-serif;
  letter-spacing:0.2em;
  text-transform: uppercase;
  font-size:12px;
  font-weight:400;
  line-height:1;
  display:inline-block;
}

@media screen and (max-width: 810px) {
.stx-buttons{
  text-align: center;
}
}

.stx-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.stx-button.c-button--ghost{display:block;padding:15px 50px;border:1px solid #fff;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.stx-buttons a{text-decoration:none;}
.stx-buttons a:hover{text-decoration:none;display:inline-table;background-color:#fff;color:#222;text-shadow:0 0 0 #FFF;}

@media screen and (max-width: 568px) {
.stx-button.c-button--ghost{
  padding:10px 40px;
}
}

/*THEME */

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url(https://www.okinawa-fishing.jp/images/bx_loader.gif) center center no-repeat #fff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .9em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  z-index:50;
  position: absolute;
  bottom: 3%;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  text-indent: -9999px;
  display: block;
  width: 5px;
  height: 5px;
  margin: 0 8px;
  outline: 0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border:0.2em solid #FFF;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #FFF;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
  width:30px;
  height:30px;
  left: 20px;
  background: url(https://www.okinawa-fishing.jp/images/top/arrowL_off.png) no-repeat;
  background-size:cover;
}

.bx-wrapper .bx-next {
  width:30px;
  height:30px;
  right: 20px;
  background: url(https://www.okinawa-fishing.jp/images/top/arrowR_off.png) no-repeat;
  background-size:cover;
}

.bx-wrapper .bx-prev:hover {
  opacity: 0.7;
}

.bx-wrapper .bx-next:hover {
  opacity: 0.7;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
}


@media only screen and (max-width: 568px)  {
.bx-wrapper .bx-prev {
  left: 10px;
}
.bx-wrapper .bx-next {
  right: 10px;
}
}

.bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  outline: 0;
  width:30px;
  height:30px;
  text-indent: -9999px;
  z-index: 9999;
}

.bx-controls-direction a:hover {
  width:30px;
  height:30px;
  text-indent: -9999px;
  z-index: 9999;
}

#toujitu2 {
  height:auto;
  position:absolute;
  top:20%;
  right:30%;
  width:180px;
  margin-left:-90px;
  z-index: 1;
}

@media screen and (max-width: 1580px) {
#toujitu2 {
  right:20%;
  margin-left:0px;
}
}

@media screen and (max-width: 1280px) {
#toujitu2 {
  right:15%;
  margin-left:0px;
}
}

@media screen and (max-width: 800px) {
#toujitu2 {
  right:5%;
}
}

@media screen and (max-width: 568px) {
#toujitu2 {
  width:115px;
  right:1%;
  bottom:1%;
  top: initial;
}
}

#toujitu2 img{
  width:100%;
}


/* top_info
--------------------------------------- */
.top_info  {
  padding: 1% 0 0;
  text-align: center;
  font-size:2.2em;
  color:#FF3171;
  font-weight:500;
}

@media screen and (max-width: 800px) {
.top_info {
  padding: 1% 3%;
}
}

@media screen and (max-width: 568px) {
.top_info {
  font-size:1.3em;
  line-height:1.5;
  padding: 1% 1%;
}
}

/* catch
--------------------------------------- */
.catch  {
  padding: 1% 0;
  text-align: center;
  line-height:1.8;
}

@media screen and (max-width: 800px) {
.catch {
  text-align: left;
  font-size:0.9em;
  padding: 1% 3%;
}
}

@media screen and (max-width: 568px) {
.catch {
  font-size:14px;
  line-height:1.6;
}
}

/* osusume
--------------------------------------- */
.osusume {
    width:52%;
	margin: 1% auto 1%;
	position: relative;
	box-sizing: border-box;
	padding:0 2% 0 0;
	float:left;
}

@media screen and (max-width: 800px) {
.osusume {
  width:100%;
  box-sizing: border-box;
  padding:0 2%;
}
}

@media screen and (max-width: 568px) {
.osusume {
  padding:0 0;
}
}

.osusume .w50{
	width:100%;
	box-sizing: border-box;
	position: relative;
	margin: 0 0 4.5%;
}

#bra{
	background-image: url(https://www.okinawa-fishing.jp/images/top/bg_bra.gif) ;
	}
	
#ore{
	background-image: url(https://www.okinawa-fishing.jp/images/top/bg_ore.gif) ;
	}
	
#gr{
	background-image: url(https://www.okinawa-fishing.jp/images/top/bg_gre.gif) ;
	}
	
#bl{
	background-image: url(https://www.okinawa-fishing.jp/images/top/bg_bl.gif) ;
	}

#navee{
	background-image: url(https://www.okinawa-fishing.jp/images/top/bg_navi.gif) ;
	}
	
#pk{
	background-image: url(https://www.okinawa-fishing.jp/images/top/bg_pk.gif) ;
	}

#ppl{
	background-image: url(https://www.okinawa-fishing.jp/images/top/bg_ppl.gif) ;
	}
	
.plan_list {
    width:100%;
	height: auto;
	margin: 0;
	position: relative;
	-moz-box-shadow: 0 1px 3px #C2C2C2;
	-webkit-box-shadow: 0 1px 3px #C2C2C2;
	box-shadow: 0 1px 3px #C2C2C2;
	background-size:100% auto;
	background-position: top left;
	background-repeat: repeat-y;
	padding:2% 3%;
	}

@media screen and (max-width: 800px) {
.osusume .w50{
	margin: 0 0 3%;
}

.plan_list {
  box-sizing: border-box;
}
}

.plan_list .p-photo{
  width:44%;
  height: auto;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  margin:1% 0 0.5%;
}

.plan_list .p-text{
  width:55%;
  display: inline-block;
  vertical-align: top;
  padding:1.5% 0% 0 3%;
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
.plan_list .p-photo{
	width:49%;
	}

.plan_list .p-text{
	width:50%;
	}
}

@media screen and (max-width: 568px) {
.plan_list .p-photo{
	width:96%;
	display: block;
	margin:0 2%;
	}

.plan_list .p-text{
	width:100%;
	display: block;
	padding:0 2% 3%;
	}
}

.plan_list img{
  width:100%;
  height: auto;
}

@media screen and (max-width: 568px) {
.plan_list img{
	margin:0;
	}
}

.plan_list h3 {
	font-size:1.2em;
	line-height:1.1;
	color:#FFF;
	font-weight:400;
	padding:0 1% 7px;
}

.plan_list h3 span{
	color:#FFFC00;
	font-weight:500;
}

@media screen and (max-width: 800px) {
.plan_list h3 {
	letter-spacing:0em;
}
}

@media screen and (max-width: 568px) {
.plan_list h3 {
	font-size:1.2em;
	line-height:1.4;
	padding:0 0 7px 3%;
}
}

.plan_list .cg_text {
	color:#FFF;
	line-height:1.8;
	font-size:0.9em;
}

@media screen and (max-width: 568px) {
.plan_list .cg_text {
	margin-top:10px;
	line-height:1.6;
}
}

.pt_bt{
	letter-spacing	: 0.05em;
	margin:10px auto 5px;
	text-align: center;
	width:150px;
}

@media screen and (max-width: 568px) {
.pt_bt{
	margin-bottom:0;
	font-size:14px;
}
}
.pt_bt a{font-size:13px;	color:#FFF;text-decoration:none;background-color:#000;padding:4px 5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.pt_bt a:hover{color:#FFF;text-decoration:none;background-color:#5E5E5E;}

@media screen and (max-width: 568px) {
.pt_bt:hover{
	margin-bottom:0;
	font-size:14px;
}
}

.ptHide{
	display:none;
}

@media screen and (max-width: 568px) {
.ptHide{
	display:block;
}
}

/* captain
--------------------------------------- */
.captain{
	width:45%;
	float:right;
	box-sizing: border-box;
	padding:0 0 0 2%;
	text-align:left;
	position: relative;
	margin-top:1.7%;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
	}

@media screen and (max-width: 800px) {
.captain{
	width:90%;
	float:left;
	padding:0;
	margin:2% 5%;
}
}

@media screen and (max-width: 568px) {
.captain{
	width:100%;
	padding:0 1%;
	margin:2% 0;
}
}

.captain img{
	width:37%;
	height:auto;
	margin:0 3% 0 0;
	float:left;
	z-index:1;
	position: relative;
	}

@media screen and (max-width: 800px) {
.captain img{
	width:40%;
}
}

.cptin_tx{
	padding:3% 2% 3% 48px;
	background:#FFE26C;
	color:#593A0E;
	width:70%;
	position: absolute;
	bottom: 2%;
	right:0;
	box-sizing: border-box;
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
	-moz-box-shadow: 0 1px 3px #C2C2C2;
	-webkit-box-shadow: 0 1px 3px #C2C2C2;
	box-shadow: 0 1px 3px #C2C2C2;
	}

@media screen and (max-width: 1280px) {
.cptin_tx{
	padding:3% 3% 3% 45px;
}
}

.cptin_nam{margin-bottom:10px;font-size:1.3em;}

@media screen and (max-width: 568px) {
.cptin_tx{
	font-size:0.9em;
	padding:3% 3% 3% 43px;
}
}

/* map_right
--------------------------------------- */
.map_right{
	width:45%;
	float:right;
	box-sizing: border-box;
	padding:2% 0 0 2%;
	text-align:left;
	position: relative;
	margin-top:1%;
	margin-top:0;
	}

@media screen and (max-width: 800px) {
.map_right{
	width:80%;
	float:left;
	padding:0;
	margin:2% 10%;
}
}

@media screen and (max-width: 568px) {
.map_right{
	width:100%;
	padding:0 0;
	margin:2% 0;
}
}

.map_right img{
	width:100%;
	max-width:516px;
	height:auto;
	margin:0 0;
	}

@media screen and (max-width: 800px) {
.map_right img{
	width:100%;
	margin:0 auto;
	padding:0 0 0 2%;
}
}

@media screen and (max-width: 568px) {
.map_right img{
	width:100%;
	margin:0 0 5px;
}
}

.map_right .map-text{
	width:45%;
	position: absolute;
	bottom: 0;
	right:0;
	font-size:0.9em;
	}

@media screen and (max-width: 568px) {
.map_right map-text{
	width:94%;
	position: relative;
	margin:0 auto;
}
}

.map_right .map-text p{
  padding-top:5px;
}

.map-text strong{
  font-weight:400;
  font-size:1.2em;
  color:#FF6969;
	}

@media screen and (max-width: 568px) {
.map_right strong{
	font-size:1.2em;
}
}

/* insta
--------------------------------------- */
.insta {
	width:53.5%;
	margin: 1% 0 4%;
	box-sizing: border-box;
	padding:0 1%;
	float:left;
}

@media screen and (max-width: 800px) {
.insta {
	width:100%;
	padding-left:5px;
}
}

@media screen and (max-width: 568px) {
.insta {
	width:100%;
	margin: 2% 0 2%;
	padding:0 1%;
}
}

.insta .insta_top{
	padding:1% 2% 4%;
	text-align: center;
	}

@media screen and (max-width: 568px) {
.insta .insta_top{
	font-size:0.9em;
	padding:1% 2% 3%;
}
}

.insta .insta_top img{
	width:100%;
	max-width:261px;
	height:auto;
	margin:0 auto 10px;
	}

@media only screen and  (max-width: 568px) {
.insta .insta_top img{
	max-width:180px;
	margin:0 auto 3px;
}
}


.insta_bt{
	letter-spacing	: 0.05em;
	margin:0 auto 5px;
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",MS P Gothic,Osaka,Arial,Verdana,sans-serif;
	text-align: center;
	width:250px;
}

@media screen and (max-width: 568px) {
.insta_bt{
	margin-bottom:0;
	font-size:14px;
}
}
.insta_bt a{font-size:13px;	color:#FFF;text-decoration:none;background-color:#000;padding:4px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.insta_bt a:hover{color:#FFF;text-decoration:none;background-color:#5E5E5E;}

@media screen and (max-width: 568px) {
.insta_bt:hover{
	margin-bottom:0;
	font-size:14px;
}
}

/* insta2
--------------------------------------- */
.insta2 {
	width:100%;
	margin: 1% 0 1%;
	box-sizing: border-box;
	padding:0 1%;
	float:left;
}

@media screen and (max-width: 800px) {
.insta2 {
	padding-left:5px;
}
}

@media screen and (max-width: 568px) {
.insta2 {
	margin: 2% 0 2%;
	padding:0 1%;
	overflow:hidden;
	display:block;
}
}

.insta2 .insta_top{
	padding:0 2% 2%;
	text-align: center;
	}

@media screen and (max-width: 568px) {
.insta2 .insta_top{
	font-size:0.9em;
	padding:1% 2% 3%;
}
}

.insta2 .insta_top img{
	width:100%;
	max-width:261px;
	height:auto;
	margin:0 auto 10px;
	}

@media only screen and  (max-width: 568px) {
.insta2 .insta_top img{
	max-width:180px;
	margin:0 auto 3px;
}
}