@charset 'utf-8';
@import url("./main.css");

/* ==================================================
  INDEX index.css
 ----------------------------------------------------
    reset,base,link
  1.header
  2.main
  3.main_content
  4.sideL
  5.sideR
  6.footer
  7.other
    7-1.line
    7-2.color
    7-3.background
    7-4.position
================================================== */

/* 1.new_course
------------------------------------------------*/
.new_course{
	width		: 290px;
	margin		: 0 0 0 25px;
	float       : left;
	}

.new_course img{
	width		: 290px;
	margin : 0 0 0;
	}



/* 2.tour_info
------------------------------------------------*/
.tour_info{
	width		: 395px;
	margin		: 0 0 10px 0;
	float       : left;
	}
		
.tour_list{
	width		: 390px;
	margin		: 0 0 20px 4px;
	border		: solid 1px #845C34;
	letter-spacing	: 0.1em;
	background	: #72A929;
	color       : #FFF;
	padding-bottom:5px;
		}

.stour_list{
	width		: 390px;
	margin		: 0 0 20px 4px;
	border		: solid 1px #845C34;
	letter-spacing	: 0.1em;
	background	: #CF834B;
	color       : #FFF;
	padding-bottom:5px;
		}
	
.ntour_list{
	width		: 390px;
	margin		: 0 0 10px 4px;
	border		: solid 1px #424242;
	letter-spacing	: 0.1em;
	background	: #000000;
	color       : #FFF;
	padding-bottom:5px;
		}
		
.tour_list h2,
.stour_list h2,
.ntour_list h2{
	padding		: 5px 0 0 5px;
	}
	
.tour_list p,
.stour_list p,
.ntour_list p{
	margin		: 0 2px 5px 5px;
	font-size   : 100%;
	}

.tour{
	float		: left;
	margin		: 10px 5px 8px 10px;
	}

.tour_syousai{
    width: 215px;
	float		: left;
	margin		: 5px 0 5px 0px;
	}
	
.tour_list h3{
	color		: #FFFC00;
	font-weight	: bold;
	font-size: 14px;
	margin		: 5px 2px 2px 5px;
	}

.stour_list h3{
	color		: #FFD24A;
	font-weight	: bold;
	font-size: 14px;
	margin		: 5px 2px 2px 5px;
	}
	
.ntour_list h3{
	color		: #1976A1;
	font-weight	: bold;
	font-size: 14px;
	margin		: 5px 2px 2px 5px;
	}
	
.tour_price{
    width: 370px;
	float		: left;
	margin		: 0 0 5px 15px;
	}

.tour_price strong{
	font-weight	: bold;
	font-size: 14px;
	color		: #DF0019;
	}

.t_syousai{
	text-align: center;
	}
	
.t_syousai a{
        text-decoration:none;
        color:#FFF;
        background:#845C34;
        display:block;
        padding:5px 5px 5px 5px;
		width     :280px;
        line-height:110%;
		margin-left:30px;
		}

.t_syousai a:hover{
        background:#FFA800;
        line-height:110%;
		color:#423636;
        text-decoration:none;
		}

/* 3.campaign_box
------------------------------------------------*/
.campaign_box{
	width		: 710px;
	margin		: 5px 0 15px 5px;
	float       : left;
	}

/* 4.kayak_news
------------------------------------------------*/
#kayak_news{
	width		: 705px;
	margin		: 10px 0px 5px 5px;
	float       : left;
	}

#kayak_news h4{
　　margin  	: 0;
	}
	
#news_box h5{
    margin		: 5px 0 3px 5px;
	font-weight: normal;
	line-height	: 1.2;
	}

#news_box h5 a,
#news_box h5 a:hover{
	color		: #C7EA5E;
	}
		
#news_box{
	width		: 690px;
	margin		: 0 10px 10px 5px;
	float       : left;
	border-bottom: 1px dashed #FFF;
	}
	
#news_box .photo {
	float: left;
	width: 120px;
	margin: 5px 15px 10px 10px;
	}
	
#news_box .news_txt {
	float: left;
	width: 535px;
	margin-top: 5px;
	}

#news_box .news_txt .more {
	text-align: right;
	padding-right: 5px;
	}

#news_box .news_txt .more a,
#news_box .news_txt .more a:hover{
	color		: #C7EA5E;
	}
	
/* 1.staff_box　スタッフ紹介
================================================== */
.staff_box {
    width		: 710px;
	margin		: 5px 0 15px 5px;
	float       : left;
	border-bottom: 1px dashed #ED9327;
	height: 100%;
	}
	
.staff_photo {
	margin-top:5px;
	margin-left:5px;
	margin-bottom:5px;
	float:left;
	}

.staff_photo img {
	border:3px solid #E1F13B;
	}

.staff_photo ul {
	margin-top:7px;
	}

.staff_photo ul li {
	float:left;
	margin-right:5px;
	}
	

.staff .title {
	padding: 5px 0 0 0;}
	
.staff_box .pro {
	float: right;
	width: 255px;
	margin-top: 10px;
	margin-right: 5px;
	margin-left: 10px;
	}

.staff_box .pro h5 {
	float: left;
	padding-right: 1px;
	padding-top: 0px;
	font-size	: 110%;
	font-weight	: bold;
	color       : #C2CA6C;
	}
	
.entry_body{
	margin-left	: 5px;
	float		: left;
	}

/* 2.mangrove_box　マングローブとは
================================================== */	
.mangrove_box{
	width		: 705px;
	margin		: 5px 10px 15px 10px;
	float       : left;
	color		: #fffff0;
	}

.mangrove_box h3{
	margin		: 3px 0 10px 0px;
	font-size	: 14px;
	font-weight	: bold;
	color       : #C2CA6C;
	}
		
.mangrove{
	width		: 160px;
	margin		: 20px 5px 5px 5px;
	float		: left;
	}
		
.mangrove h4{
	font-size   : 14px;
	font-weight	: normal;
	margin-bottom: 5px;
	color		: #C2CA6C;
	text-align	: center;
	}

/* 3.shitumon_box　よくある質問
================================================== */	
.shitumon_box{
	width		: 700px;
	margin		: 5px 10px 15px 10px;
	float       : left;
	color		: #fffff0;
	}
	
.shitumon {
	padding: 5px;
	border-bottom: 1px dashed #ED9327;
	height: 100%;
	margin-bottom:0px;
	}

	
.question {
	display:block;
	padding-left:45px;
	padding-top:10px;
	margin-left:15px;
	margin-top:5px;
	color:#C2CA6C;
	font-size:14px;
	font-weight:bold;
	font-family:"メイリオ";
	background:url(../img/Question01.gif) no-repeat;
	min-height:40px;
}

.question a,
.question a:hover{
	color		: #C2CA6C;
	text-decoration	: none;
	}
	
.answer {
	display:block;
	padding-left:50px;
	padding-top:5px;
	padding-bottom:0px;
	margin-left:30px;
	margin-right:15px;
	margin-top:10px;
	margin-bottom:20px;
	line-height:125%;
	font-family:"メイリオ";
	background:url(../img/Answer02.gif) no-repeat;
	min-height:43px;
}

/* 6.Contact　お問い合わせ
=====================================*/	
.contact_box{
	width		: 700px;
	margin		: 5px 10px 15px 10px;
	float       : left;
	}

.contact_box h3{
	margin		: 5px auto 5px 5px;
	text-align	: left;
	font-weight	: bold;
	color		: #C2CA6C;
	font-size:14px;	
	}

.contact_info{
	margin		: 0px auto 5px 5px;
	text-align	: left;
	}
	
.contact_box table{
	width		: 650px;
	margin-left	: 25px;
	text-align	: left;
	background	: #113D0D;
	border-collapse	: collapse;
	border-top	: solid 1px #999;
	border-left	: solid 1px #999;
	line-height:2;
	}

.contact_box th,
.contact_box td{
	padding		: 6px 5px;
	empty-cells	: show;
	border-collapse	: collapse;
	border-right	: solid 1px #999;
	border-bottom	: solid 1px #999;
	}

.contact_box .setumei{
	line-height:1.6;
	padding-top:10px;
	}
		
.contact_box th,
.btn_send{
	text-align	: right;
	}

.btn_send input{
	padding		: 0 15px;
	}

.thanks{
	width		: 700px;
	margin		: 20px 10px 15px 10px;
	float		: left;
	background	: #0A2510;
	border		: solid 1px #999;
	}

/* 7.sitemap　サイトマップ
=====================================*/	
.sitemap_box{
	width		: 700px;
	margin		: 20px 10px 15px 10px;
	float       : left;
	padding-left	: 50px;
	}

.sitemap_box h3{
	margin		: 5px;
	text-align	: left;
	font-weight	: bold;
	}

/* 7.News 新着情報
=====================================*/		
.news_box{
	width		: 510px;
	margin		: 15px 0 auto 10px;
	float		: left;
		}

.news_box h3{
	margin		: 5px 0 auto 5px;
	color		: #C2CA6C;
	font-size	: 14px;
	}
	
.news_box h3 a,
.news_box h3 a:hover{
	color		: #C2CA6C;
	text-decoration	: none;
	}
	
.entry_body{
	margin		: 5px 0 5px 0;
	}

.entry_footer{
	padding		: 5px 5px 30px 0;
	text-align	: right;
	clear		: both;
	border-top	: solid 1px #FFF;
	}
	
.content_nav{
	text-align	: center;
	}

.news_list{
	width		: 180px;
	margin		: 0 0 auto 5px;
	float		: right;
	background	: #113D0D;
		}
	
.news_menu{
	padding	: 5px 8px 5px 8px;
	float		: right;
	line-height	: 1.8;
	}
		
.news_menu h4,
	}

.news_menu ul{
	margin		: 5px 10px;
	}

.news_menu li{
	width		: 160px;
	}

.news_menu p{
	margin		: 2px auto 3px;
	}

/* カレンダー ここから ----------*/
/* 大枠 */
.calender{
	text-align: center;
	margin-bottom: 20px;
	padding	: 5px;
}
/* 上部年月日表示 */
.calendarhead{
	font-weight: bold;
	margin-bottom: 3px;
	font-size: 11px;
}
/* 枠 */
.calendartable{
	border: 1px solid #CCCCCC;
	font-size: 12px;
	width: 160px;
	margin-right: auto;
	margin-left: auto;
}
/* 曜日枠 */
.calendarwd{
	background-color: #BB3272;
	padding: 5px;
}
/* 曜日 */
.calendarweek{}
/* 日付枠 */
.calendard{
	text-align: center;
	border: 1px solid #CCCCCC;
}
/* 日曜日 */
.sun{
	color: #FF9999;
}
/* 土曜日 */
.sat{
	color: #33CCFF;
}
/* 今日 */
.today{
	font-weight: bold;
}
/* カレンダー ここまで ----------*/

/* 8.menu_box　メニュー詳細
================================================== */
.menu_box {
    width		: 710px;
	margin		: 5px 0 15px 5px;
	float       : left;
	height: 100%;
	}
	
.menu_photo {
	margin-top:5px;
	margin-left:5px;
	margin-bottom:5px;
	float:left;
	}

.menu_photo img {
	border:3px solid #254F0A;
	}

.menu_photo ul {
	margin-top:7px;
	}

.menu_photo ul li {
	float:left;
	margin-right:5px;
	}

.menu_syousai {
	width	  :340px;
	margin-top:5px;
	float:right;
	}

.menu_syousai h3{
    margin : 0px 5px 5px 7px;
    }

.price{
    float:right;
	margin : 10px 0px 0px 5px;
    }

.price_syousai{
    float:right;
	margin : 0px 15px;
    }
		
.menu_syousai p{
    margin : 5px 0 5px 10px;
    }

.ryoukin{
    border: 1px solid #CCCCCC;
	width: 330px;
	float:right;
	margin-top :10px;
	height: 100%;
	}

.area_box{
	width		: 350px;
	margin		: 10px 2px 0 5px;
	float		: left;
	}

/*.8-1 ツアースケジュール
================================================== */		
#schedule_box{
	width : 355px;
	float: left;
	background: url('https://www.okinawa-kayak.net/menu/img/bg_schedule.gif') repeat-y center;
	margin-left: 10px;
	margin-bottom: 25px;
	}

.ttl_schedule{
	margin		: 0 0;
	}
	
.floar_box{
	width		: 330px;
	margin		: 5px 10px 5px 10px;
	float       : left;
	color		: #fffff0;
	}
	
.nagare {
	height: 100%;
	margin-bottom:5px;
	}

	
.step1 {
	display:block;
	padding-left:50px;
	margin-top:10px;
	margin-left:5px;
	margin-bottom:5px;
	color:#502505;
	font-size:14px;
	font-weight:bold;
	background:url(https://www.okinawa-kayak.net/menu/img/step1.gif) no-repeat;
	min-height:120%;
}

.step2 {
	display:block;
	padding-left:50px;
	margin-top:10px;
	margin-left:5px;
	margin-bottom:5px;
	color:#502505;
	font-size:14px;
	font-weight:bold;
	background:url(https://www.okinawa-kayak.net/menu/img/step2.gif) no-repeat;
	min-height:120%;
}

.step3 {
	display:block;
	padding-left:50px;
	margin-top:10px;
	margin-left:5px;
	margin-bottom:5px;
	color:#502505;
	font-size:14px;
	font-weight:bold;
	background:url(https://www.okinawa-kayak.net/menu/img/step3.gif) no-repeat;
	min-height:120%;
}

.step4 {
	display:block;
	padding-left:50px;
	margin-top:10px;
	margin-left:5px;
	margin-bottom:5px;
	color:#502505;
	font-size:14px;
	font-weight:bold;
	background:url(https://www.okinawa-kayak.net/menu/img/step4.gif) no-repeat;
	min-height:120%;
}
.step_syousai {
	display:block;
	margin:3px 0 0 5px;
	line-height:125%;
	color: #7F5728;
	}

/*.8-2 ツアー詳細
================================================== */
.syousai_box{
	background	: url("https://www.okinawa-kayak.net/menu/img/bg_fukusou.jpg") top center no-repeat;
	width: 330px;
	height:440px;
    float: right;
	margin-bottom: 10px;
	margin-top: 20px;
	}

#syousai_text{
	position	: relative;
	top			: 80px;
	left		: 140px;
	width		: 165px;
	padding		: 5px 5px 3px 10px;
	border		: solid 1px #AAAAAA;
	clear		: left;
	margin-top:10px;
	line-height	: 1.3;
	}



/*.8-3 持参するもの
================================================== */
.mochimono{
	width: 330px;
    float: right;
	color　　　 : #766839;
	border		: solid 1px #E1E4FE;
	background	: #556E24;
	margin-bottom: 10px;
	margin-top: 10px;
	}

.mochimono p{
	margin		: 10px;
	}

/* 8-4.tour_detail　ツアー詳細
================================================== */
.tour_detail{
	margin		: 10px;
	}

.tour_detail strong{
	font-size	: 13px;
	font-weight	: bold;
	color       : #FF0033;
	}
		
.tour_detail table{
	font-size	: 100%;
	border-collapse	: collapse;
	border-top	: solid 1px #CCC;
	border-left	: solid 1px #CCC;
	}
	

.tour_detail td{
	color	: #FFF;
	padding		: 5px 5px;
	border-collapse	: collapse;
	border-right	: solid 1px #CCC;
	border-bottom	: solid 1px #CCC;	
	}

.tour_detail th{
	width		: 145px;
	text-align	: center;
	background	: #8EB957;
	color	: #FFF;
	padding		: 5px 8px;
	border-collapse	: collapse;
	border-right	: solid 1px #CCC;
	border-bottom	: solid 1px #CCC;
	}

/* .campaign_box　キャンペーン
================================================== */	
.campaign_box{
	width		: 705px;
	margin		: 5px 0 40px 7px;
	float       : left;
	color		: #fffff0;
	}

#simpleTabs { width:700px; margin:0 auto;}
         .simpleTabs-nav ul { font-size:11px; overflow:hidden; list-style:none; margin:0; padding:0;  }
         .simpleTabs-nav li { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",MS P Gothic,Osaka,Arial,Verdana,sans-serif; background:#599100;float:left; margin:0 1px;padding:5px 10px 5px 10px; list-style:none; cursor:pointer; color:#FFF;line-height:1.6;font-weight:bold;border-top: solid 1px #482407;border-right: solid 1px #482407;border-left: solid 1px #482407; }
         .simpleTabs-nav li:hover { background:#1EBFD7;font-weight:bold; color:#FFF;}
         .simpleTabs-nav li.close { float:right; }
         .simpleTabs-nav li.actif { color:#FFFC01; font-weight:bold; background:#009570; }
		 .simpleTabs-content p{letter-spacing	: 0.1em;line-height:1.8;color:#FFF;}
         .simpleTabs-content { margin-left:1px;clear:both; padding:15px; color:#666666;background:#009570;bold;border-bottom: solid 1px #482407;border-right: solid 1px #482407;border-left: solid 1px #482407; }

.roman_cs{
	width		: 705px;
	margin		: 10px auto 15px;
	border:1px solid #425E74;
	}

/* .campaign_list　キャンペーン年表
================================================== */	
.campaign_list{
	width		: 100%;
	margin		: 5px 0 15px 0;
	}

.campaign_list table{
	width		: 100%;
	box-sizing: border-box;
	border-top	: 1px solid #666;
	border-left	: 1px solid #666;
	font-size	: 12px;
	color		: #333;
	background	: #FFF;
	}

.campaign_list td{
	border-right	: 1px solid #666;
	border-bottom	: 1px solid #666;
	position	: relative;
	}

.campaign_list th{
	padding		: 5px;
	background:#ccc;
	text-align	: center;
	border-right	: 1px solid #666;
	border-bottom	: 1px solid #666;
	line-height	: 1.8;
	}

.campaign_list .w16{
	width		: 16%;
	box-sizing: border-box;
	}

.campaign_list .w7{
	width		: 7%;
	box-sizing: border-box;
	}


.fam00{
	width: 12%;
	height:100%;
	position: absolute;
	top: 0;
	left: 18%;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:10px;
	letter-spacing	: 0em;
	}

.fam00 a{
    padding:7px 2px;
	width:100%;
	height:100%;
	display: block;
	background:#2DA6CE;
	box-sizing: border-box;
	color:#FFF;
}

.fam00 a:hover{
	background:#0964E1;
	color:#FFF;
}

.fam01{
	width: 13%;
	height:100%;
	position: absolute;
	top: 0;
	left: 45.2%;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:11px;
	letter-spacing	: 0em;
	}

.fam01 a{
    padding:6px 3px;
	width:100%;
	height:100%;
	display: block;
	background:#2DA6CE;
	box-sizing: border-box;
	color:#FFF;
}

.fam01 a:hover{
	background:#0964E1;
	color:#FFF;
}

.fam02{
	width: 13%;
	height:100%;
	position: absolute;
	top: 0;
	right: 1%;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:10px;
	letter-spacing	: 0em;
	}

.fam02 a{
    padding:7px 1px;
	width:100%;
	height:100%;
	display: block;
	background:#2DA6CE;
	box-sizing: border-box;
	color:#FFF;
}

.fam02 a:hover{
	background:#0964E1;
	color:#FFF;
}

.grp00{
	width: 16%;
	height:100%;
	position: absolute;
	top: 0;
	left: 2%;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:11px;
	letter-spacing	: 0em;
	}

.grp00 a{
    padding:6px 3px;
	width:100%;
	height:100%;
	display: block;
	background:#FF4191;
	box-sizing: border-box;
	color:#FFF;
}

.grp00 a:hover{
	background:#FF4949;
	color:#FFF;
}

.grp01{
	width: 25%;
	height:100%;
	position: absolute;
	top: 0;
	left: 58%;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:11px;
	letter-spacing	: 0em;
	}

.grp01 a{
    padding:6px 3px;
	width:100%;
	height:100%;
	display: block;
	background:#FF4191;
	box-sizing: border-box;
	color:#FFF;
}

.grp01 a:hover{
	background:#FF4949;
	color:#FFF;
}

.grp02{
	width: 12.5%;
	height:100%;
	position: absolute;
	top: 0;
	left: 29.5%;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:10px;
	letter-spacing	: 0em;
	}

.grp02 a{
    padding:7px 3px;
	width:100%;
	height:100%;
	display: block;
	background:#FF4191;
	box-sizing: border-box;
	color:#FFF;
}

.grp02 a:hover{
	background:#FF4949;
	color:#FFF;
}

.natsu01{
	width: 13%;
	height:100%;
	position: absolute;
	top: 0;
	left: 45.2%;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:11px;
	letter-spacing	: 0em;
	}

.natsu01 a{
    padding:6px 3px;
	width:100%;
	height:100%;
	display: block;
	background:#20A701;
	box-sizing: border-box;
	color:#FFF;
}

.natsu01 a:hover{
	background:#21850A;
	color:#FFF;
}

.web01{
	width: 45.2%;
	height:100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:11px;
	letter-spacing	: 0em;
	}

.web01 a{
    padding:6px 3px;
	width:100%;
	height:100%;
	display: block;
	background:#AEAEAE;
	box-sizing: border-box;
	color:#FFF;
}

.web01 a:hover{
	background:#8C8C8C;
	color:#FFF;
}

.web02{
	width: 41.7%;
	height:100%;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	text-align: center;
	box-sizing: border-box;
	font-size:11px;
	letter-spacing	: 0em;
	}

.web02 a{
    padding:6px 3px;
	width:100%;
	height:100%;
	display: block;
	background:#AEAEAE;
	box-sizing: border-box;
	color:#FFF;
}

.web02 a:hover{
	background:#8C8C8C;
	color:#FFF;
}

#mg-video{
	width:710px;
	margin:1% 0 2% 0;
	float:right;
	position	: relative;
	height: auto;
	cursor: pointer; 
}

.bg_video{
  background: #000; 
}

#mg-video .m_bt{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top:-25px;
	margin-left:-34px;
}

#mg-video p{
	text-align: center;
	margin-top:10px;
	color:#FFF;
}