/* 背景色 */
.tour-page {
    background-color: #cccc99; 
}

/*色*/
.red {color:#F00 !important}
.white {color:#FFF !important}
.green {color:rgba(30,173,60,1.00)}
.black {color:#000 !important}
.gray33 {color:#333 !important}
.gray66 {color:#666 !important}
.dark-blue {color:#00008B !important}

/*背景色*/
.BG-orange {background-color:#F90 !important}
.BG-blue {background-color:#03F !important}
.BG-yellow {background-color:#FF0 !important}
.BG-green {background-color:#006400 !important}
.BG-light-green {background-color:rgba(144, 248, 160, 0.55)}/*ツアーindex.htmlで使用*/
.BG-light-orange {background-color:rgba(210, 105, 30,0.25)}/*ツアーindex.htmlで使用*/
.BG-blue {background-color: rgba(173, 216, 230, 0.05)}/*ツアーindex.htmlで使用*/
.BG-red {background-color: rgba(165, 42, 42, 0.45)}/*ツアーindex.htmlで使用*/

.red {color: red}
.pink {color:deeppink}
.color-000080 {color:#000080}
.background-color-000080 {background-color: #000080}
.white {color:white}

/*フォントサイズ*/
.font-small {font-size:0.9em !important}
.font-xs {font-size:0.78em !important}
.font-weight-normal {font-weight:normal !important}
.font-size-1 {font-size:1em}
.font-notice-large {font-size:1.2em;line-height: 170% !important}

.bold {font-weight:bold}

.no-padding{padding:0 !important}
.padding-5 {padding:5px}
.padding-10 {padding:10px}
.padding-20 {padding:20px}
.padding-top-0 {padding-top:0 !important}
.padding-top-5 {padding-top:5px !important}
.padding-top-10 {padding-top:5px !important}
.padding-bottom-0 {padding-bottom:0 !important}
.padding-5px {padding:5px !important}
.padding-10px {padding:10px !important}
.padding-right-05em {padding-right:0.5em}
.padding-right-1em {padding-right:1em}
.padding-left-05em {padding-right:0.5em}
.padding-left-1em {padding-right:1em}
.padding-left-5px {padding-left:5px}
.padding-left-10px {padding-left:10px}
.padding-left-15px {padding-left:15px}
.padding-left-20px {padding-left:20px}
.padding-side-10px {padding:0 10px !important}
.padding-side-15px {padding:0 15px !important}
.padding-side-0px {padding:10px 0px !important
}
.padding-none{padding:0}
.padding-10-20 {padding:10px 20px !important}
.padding-20-allaround {padding:20px!important}

.padding-10-allaround {padding:10px!important}

.margin-0{margin: 0}
.margin-all-around-10 {margin:10px !important}
.margin-all-around-20 {margin:20px !important}
.margin-all-around-20-10 {margin:20px !important}

.margin-top-0 {margin-top:0 !important}
.margin-top{margin-top:10px !important}
.margin-top-5{margin-top:5px !important}
.margin-top-10{margin-top:10px !important}
.margin-top-15{margin-top:15px !important}
.margin-top-20{margin-top:20px !important}
.margin-top-bottom-10{margin:10px 0 !important}
.margin-20-20-10-20 {margin:20px 20px 10px 20px}

.margin-bottom-0 {margin-bottom:0 !important}
.margin-bottom-5{margin-bottom:5px}
.margin-bottom{margin-bottom:10px}
.margin-bottom-10{margin-bottom:10px !important}
.margin-bottom-15{margin-bottom:15px !important}
.margin-bottom-20{margin-bottom:20px !important}

.margin-side-20 {margin:auto 20px auto 20px !important}
.margin-side-10 {margin:0 10px 0 10px !important}
.margin-side-5 {margin:0 5px 0 5px !important}

.margin-left-0 {margin-left:0}
.margin-left-5 {margin-left:5px}
.margin-left-10 {margin-left:10px}
.margin-left-15 {margin-left:15px}
.margin-left-20 {margin-left:20px}
.margin-left-30 {margin-left:30px}
.margin-left-40 {margin-left:40px}

.margin-right-0 {margin-right:0}
.margin-right-5 {margin-right:5px}
.margin-right-10 {margin-right:10px}
.margin-right-15 {margin-right:15px}
.margin-right-20 {margin-right:20px}
.margin-right-30 {margin-right:30px}
.margin-right-40 {margin-right:40px}

.margin-20 {margin:20px}
.margin-30 {margin:30px}
.margin-10-20 {margin:10px 20px}
.margin-block-start-0 {margin-block-start:0}

.width-100percent {width:100% !important}
.width-80percent {width:80% !important}
.width-70percent {width:70% !important}
.width-60percent {width:60% !important}
.width-50percent {width:50% !important}
.width-40percent {width:40% !important}
.width-35percent {width:35% !important}
.with-100 {width:100% !important}

.height-auto {height: auto}
.height-min-100px {height: 100px}
.height-min-150px {height: 150px}
.height-min-200px {height: 200px}
.height-min-300px {height: 300px}
.height-min-400px {height: 400px}
.height-min-500px {height: 500px}

.inline {display: inline-block}
.block {display: block}

.border-price{border:2px solid rgba(48,10,163,1.00); display: inline-block;padding:5px 10px;background-color:rgba(192,200,215,0.5)}

.border-dotted{border:2px dotted rgba(48,10,163,1.00); display: inline-block;padding:5px 10px;background-color:rgba(192,200,215,0.5)}

.border-dotted-red{border:2px dotted rgba(48,10,163,1.00); display: inline-block;padding:5px 10px;background-color:rgba(240,57,91,0.90)}

.border-none{border:none}

.display-center  {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  width: 100%;
}

/*テーブルスタイル*/
/*ゴーカートの料金テーブル*/
.table-tour-price{width:100%;border-collapse:collapse;}
.table-tour-price,
.table-tour-price th,
.table-tour-price td{border:1px solid #999;}
.table-tour-price th,
.table-tour-price td{padding:10px;text-align:left;}
.table-tour-price th{background-color:#FFFF99;font-weight:bold;text-align:center;}
.table-tour-price td{background-color:#FFFFCC;}
.table-tour-price .center{text-align:center;}


.position-absolute {position: absolute}
.position-relative {position: relative}
.position-fixed {position: fixed}

.text-underline{text-decoration: underline}

.text-050 {font-size: 0.5em}
.text-0ten75 {font-size: 0.75em}
.text-1em {font-size: 1em}
.text-1ten2em {font-size: 1.2em}
.text-1ten3em {font-size: 1.3em}
.text-1ten4em {font-size: 1.4em}
.text-1ten5em {font-size: 1.5em}
.text-1ten75em {font-size: 1.75em}
.text-2em {font-size:2em}

.line-height-15em {line-height: 1.5em}
.line-height-175em {line-height: 1.75em}
.line-height-2em {line-height: 2.00em}
.lineheight-180-percent {line-height:180% !important}

.text-shadow {text-shadow: 1px 2px 3px #000000; }

/*予約フォーム*/
.form-tour div {margin:15px}
.form-tour p {margin:15px !important;line-height: 175% !important}
.form-tour h3 {margin:15px !important}

/*リスト　ツアー部門のセールスポイントのリスト*/
ul.cp_list {
	padding:0.5em;
	list-style-type:none;
    line-height:175%;
    font-size:1.2em;
    font-weight:bold;
}
ul.cp_list li {
	position:relative;
	padding: 0em 0.3em 0.3em 1.3em;
}
ul.cp_list li:before {
	position:absolute;
	content:'';
	top: 0.5em;
	left: 0.2em;
	height:0;
	width:0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #3F51B5;
}


/*画像*/
.image-shadow {
  box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, .5);
}

/*見出し*/
/*見出し1　tour/index*/

.heading-h3
{
  font-family: 'Open Sans', sans-serif; /* リラックスした雰囲気のフォント */
  font-size: 24px; /* 見やすいフォントサイズ */
  color: #2F4F4F; /* 自然を思わせるダークグリーン */ 
  padding: 10px; /* 余白を加える */
  border-left: 5px solid #D2691E; /* サイドに装飾的なボーダー */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* ソフトなシャドウ */
  margin-bottom: 15px; /* 下の要素との間隔 */
}

/*小見出し tour/index*/

.subheading-01 {
  font-family: 'Baloo 2', cursive; /* Google Fontsから */
  font-size: 1.5em; /* 適切なサイズに調整 */
  color: #005a29; /* ウェブサイトのカラーパレットに合わせた緑色 */
  border-left: 5px solid #FFA500; /* 左側のアクセントカラー */
  padding: 10px; /* テキストとボーダーの間の余白 */
  margin-bottom: 10px; /* 下のコンテンツとの間隔 */
  margin-right: 15px; /* 下のコンテンツとの間隔 */
}

/*見出し best3 tour  tour/index*/

.best-three-heading {
  font-family: 'Arial', sans-serif;
  font-size: 1.6em;
  border-bottom:rgba(248,7,7,1.00) 4px solid;
  background-color: rgba(255, 30, 0, 0.5);
  color: #333333;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-style-jouge-sen {/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px ;/*上線*/
  border-bottom: solid 3px ;/*下線*/}
  
  .header-underline-inline-block {/*文字色*/
  padding: 0.3em 0;/*上下の余白*/
  border-bottom: solid 2px ;/*下線*/
  display: inline-block}
  
    .header-underline {/*文字色*/
  padding: 0.3em 0;/*上下の余白*/
  border-bottom: solid 2px ;/*下線*/
  }

.text-shadow {text-shadow:1px 2px 3px #06C}

.align-center {text-align:center !important;margin:auto}
.align-right {text-align:right !important}
.align-left {text-align:left !important}

.center {text-align:center !important}

.width260 {width: 260px}
.max-width {max-width: 100% !important}
.width-max {width: 100% !important}

.zoom {zoom:200%}
/*ツアー一覧ボタン*/
.button-71 {
  background-color: #42C81E;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 12px 18px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-71:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.button-71:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}

.list-darkblue-fun {font-size:1.25em;font-weight:bold;line-height:190%;color:#000080;margin-top:0.5em;margin-left:20px;text-align:left}

.list-darkblue {font-size:1.2em;font-weight:bold;line-height:180%;color:#000080;margin-top:0.5em;margin-left:0px;text-align:left}

@media (min-width: 768px) {
  .button-71 {
    padding: 12px 18px;
  }
}
/*フォント色*/
.red {color:#F00}
.gray33 {color:#333 !important}
.gray66 {color:#666}

.text-align-left {text-align: left}
.text-align-center {text-align: center}

/* メインメニュー下のサブメニュー */

		.menu5	{
		margin:10px 20px;
		text-align:center;
		padding:0px 0px;
		}
		
.menu5 a{
		 text-align:center;
		 font-size:12px;
		 color:#333366;
		 text-decoration:none;
		 padding:0px 0px;
		 margin:15px 5px 15px 5px;
		 }

.menu5 a:hover {

			   background-color:#FFCC00;
			   color:#ffffff;
			   }
.space3		{margin:0px 2px;color:#FF6600;font-weight:bold;font-size:13px;padding:0px}

/* メインメニュー下のサブメニュー　体験ダイビング等 */
		.submenu	{
		margin:10px auto 20px auto;
		text-align:center;
		padding:0px 0px;
		}
		
.submenu a{
		 text-align:center;
		 font-size:0.875em;
		 font-weight:bold;
		 color:#333366;
		 text-decoration:none;
		 padding:0px 0px;
		 margin:15px 5px 15px 5px;
		 }

.submenu a:hover {

			   background-color:#FFCC00;
			   color:#ffffff;
			   }

.cp_link {
	padding: 0.1em 0.3em;
	position: relative;
	display: inline-block;
	transition: .3s;
	color: #AB47BC;
}
.cp_link::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #AB47BC;
	transition: .3s;
}
.cp_link:hover::after {
	width: 100%;
}			   		   
/*===========================================================================*/
/* 文章 */
/* メインコラムの本文 */
.p-standard {
	margin:0.975em;
	text-align:justify;
	text-justify:auto;
	line-height:170%;
	color:#666666;
	font-size:0.975em;
	font-weight:normal;
}

.p-standard-2 {
	margin:0.975em;
	text-align:justify;
	text-justify:auto;
	line-height:170%;
	color:#666666;
	font-size:0.975em;
	font-weight:normal;
}

.p-standard-header2-top
 {
	margin:0 0.975em 1em 0.975em;
	text-align:justify;
	text-justify:auto;
	line-height:170%;
	color:#666666;
	font-size:0.975em;
	font-weight:normal;
}
/*本文 赤 */
.p-standard-red {margin:5px 20px 25px 20px; text-align:left; line-height:150%; color:#ff0000;font-size:.975em}

/* 本文　小さめの文字 */
.p-standard-s {
	margin:5px 20px 25px 20px;
	text-align:left;
	line-height:170%;
	color:#666666;
	font-size:0.875em
}

/* メインコラムの本文　青色　サイズ 0.95em */
.p-standard-M-blue  {
	margin:5px 20px 25px 20px;
	text-align:left;
	line-height:180%;
	color:#00C;
	font-size:0.95em
}

/* メインコラムの本文　灰色　サイズ　0.95em */
.p-standard-gray  {
	margin:5px 20px 25px 20px;
	text-align:left;
	line-height:190%;
	color:#666;
	font-size:0.95em
}

/* メインコラム本文上のヘッダー*/
.p-standard-header {text-align:left;border-bottom:3px solid #F00;padding-bottom:5px}

.p-standard-header2-top {text-align:left;border-bottom:3px solid #F00;padding-bottom:5px;margin:1.4em 1em 1em 1em}
/*リスト　taiken/scheduleで使用*/
.tabpanel-list-inside {text-align:left;list-style:none;font-size:1.0em;line-height:150%;font-weight:bold}

/*ライセンス取得講習概要*/
.course-keypoint ul {margin:0px;padding:0px;}
.course-keypoint li {list-style:none;font-size:1.1em;font-weight:bold;line-height:200%;margin:0px auto 0px 0px;}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*テーブル*/
.table_01{
width: 100%;
border-collapse: collapse;
font-size:0.9em;
margin-bottom:10px;
}
.table_01 th{
width: auto;
padding: 6px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #eee;
border: 1px solid #b9b9b9;
}
.table_01 td{
padding: 6px;
background-color: #fff;
border: 1px solid #b9b9b9;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*リスト*/
/*コンテンツ幅580pxに入れているツアー時間割のリスト*/
.list-01 ul {}
.list-01 li {list-style:none;text-align:left;line-height:180%}
/*コンテンツ幅580pxに入れているツアー時間割のリスト。*/
/*文頭のリストスタイルなし*/
.list_05 {text-align:left;color:#666666;list-style:none;margin-left:20px !important;font-size:1.0em !important;font-weight:bold;}
.list_05 li {line-height:180%;}
.list_05 a:hover {color:#FF6600}
/*本文に入れるリスト*/
.list-02 ul {}
.list-02 h4 {text-decoration:underline}
.list-02 li {list-style:disc;text-align:left;line-height:180%}

/*本文に入れるリスト*/
.list-03 ul {}
.list-03 h4 {text-decoration:underline;color:#F00;margin-bottom:5px}
.list-03 li {list-style:disc;text-align:left;line-height:180%;font-size:1.0em;
			margin-left:20px}
			
/*ファンダイブ料金*/		
.list-price-fundive {font-size:1.2em;text-align:left;list-style-type:none;font-weight:bold;color:#0000CC;line-height:180%;margin-left:20px}	
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*見出し*/
/*各ダイビングツアーの料金表*/
.price-dive-header {text-align:left;font-size:1.2em;margin:10px 0px 10px 10px;border-bottom:1px #333 solid;font-weight:bold;}

.price-dive {font-size:1.3em;list-style:none;margin:10px 0px 25px 10px;font-weight:bold;color:#F00;text-align:left}

/*snorkelindexの料金表*/
.price-snorkel {text-align:left;margin:10px 0px 10px 20px;font-size:1.1em;list-style:none;line-height:190%;font-weight:bold}

.p-standard-header-02 {margin-left:0px;margin-bottom:0px;color:#000066;font-size:1.0em;text-align:left}
.header-red {margin-left:20px;margin-bottom:0px;color:#ff0000;font-size:1.2em;text-align:left}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*ヘッダー*/
.header-01 {background-color:none !important;color:#F00;text-align:left;font-size:1.3em;margin-left:0px;padding:0px;font-weight:bold}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*飛行機搭乗注意*/
.flight-after-dive {
	font-size: 1em;
	width: auto !important;
	line-height: 160%;
	color: #ff0000;
	font-weight: bold;
	border: 1px dashed #000;
	padding: 0.5em !important;
	text-align:center !important;
}

/*送迎代金*/
.transfer {
	font-size: 1em;
	width: auto !important;
	line-height: 160%;
	color: #ff0000;
	font-weight: bold;
	border: 1px dashed #000000;
	padding: 0.5em !important;
	text-align:center !important;
	margin:10px;
}

/*天候によってポイントが変わることがある注意*/
.notice-01 {
	font-size:0.85em;
	line-height:160%;
	color:#ff0000;
	border:1px dashed #000;
	padding:10px;
	font-weight:normal;
}

/*キャンペーン*/
.campain {border:2px dashed #f00;margin:10px}
/*キャンペーン見出し*/
.campain-header {font-size:0.975em;text-decoration:underline 2px solid #F00}
/*キャンペーン期間*/
.campain-period {color:#F00;font-size:0.975em;font-weight:bold;margin-top:0;padding:0;text-align:center !important}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*SAMUI GUIDE 内　エリア別案内で使用しているコード*/

.shop_list {width:700px;margin:10px auto}
.shop_list h2 {font-size:12px;text-align:left;margin:0px;padding:5px 0px 5px 10px;background-color:#0066CC;
               background-image:url(../sozai/graphic/samuiguide_shop.gif);background-repeat:no-repeat;
			   background-position:99% center;}
.shop_list p img {float:left;margin:0px 10px 10px 10px}
.shop_list ul {text-align:left;list-style:square}
.shop_list li {font-size:11px;line-height:150%}

.restaurant_list {width:700px;margin:10px auto}
.restaurant_list h2 {font-size:12px;text-align:left;margin:0px;padding:5px 0px 5px 10px;background-color:#00CC66;
               background-image:url(../sozai/graphic/samuiguide_restaurant.gif);background-repeat:no-repeat;
			   background-position:99% center;}
.restaurant_list p img {float:left;margin:0px 10px 10px 10px}
.restaurant_list ul {text-align:left;list-style:square}
.restaurant_list li {font-size:11px;line-height:150%}


.play_list {width:700px;margin:10px auto}
.play_list h2 {font-size:12px;text-align:left;margin:0px;padding:5px 0px 5px 10px;background-color:#FF0099;
               background-image:url(../sozai/graphic/samuiguide_play.gif);background-repeat:no-repeat;
			   background-position:99% center;}
.play_list p img {float:left;margin:0px 10px 10px 10px}
.play_list ul {text-align:left;list-style:square}
.play_list li {font-size:11px;line-height:150%}

.others_list {width:700px;margin:10px auto}
.others_list h2 {font-size:12px;text-align:left;margin:0px;padding:5px 0px 5px 10px;background-color:#CC3300;
               background-image:url(../sozai/graphic/samuiguide_others.gif);background-repeat:no-repeat;
			   background-position:99% center;}
.others_list p img {float:left;margin:0px 10px 10px 10px}
.others_list ul {text-align:left;list-style:square}
.others_list li {font-size:11px;line-height:150%}

.kanko_list {width:700px;margin:10px auto}
.kanko_list h2 {font-size:12px;text-align:left;margin:0px;padding:5px 0px 5px 10px;background-color:#FF6600;
               background-image:url(../sozai/graphic/samuiguide_kanko.gif);background-repeat:no-repeat;
			   background-position:99% center;}
.kanko_list p img {float:left;margin:0px 10px 10px 10px}
.kanko_list ul {text-align:left;list-style:square}
.kanko_list li {font-size:11px;line-height:150%}

.samuiguide_feture {width:700px;margin:10px auto}
.samuiguide_feture img {float:left}
.samuiguide_feture ul {text-align:left;margin-left:180px;font-size:14px;font-weight:bold;color:#FF0000}
.samuiguide_feture ul li {font-size:12px;font-weight:normal;color:#666666}
.samuiguide_feture h4 {font-size:16px;text-align:center;margin:0px}

/*Youtube 枠*/
.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
	margin-bottom: 0em;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*▼▼フォームの予約ボタン*/
.btn {
  background: #ffff5c;
  background-image: -webkit-linear-gradient(top, #ffff5c, #dde335);
  background-image: -moz-linear-gradient(top, #ffff5c, #dde335);
  background-image: -ms-linear-gradient(top, #ffff5c, #dde335);
  background-image: -o-linear-gradient(top, #ffff5c, #dde335);
  background-image: linear-gradient(to bottom, #ffff5c, #dde335);
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  text-shadow: 1px 1px 3px #f2e9f2;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #0f0c66;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  width:35%;
  float:left;
  margin-left:5%;
}

.btn a {text-decoration:none}

.btn2 {
 background: #ffff5c;
  background-image: -webkit-linear-gradient(top, #ffff5c, #dde335);
  background-image: -moz-linear-gradient(top, #ffff5c, #dde335);
  background-image: -ms-linear-gradient(top, #ffff5c, #dde335);
  background-image: -o-linear-gradient(top, #ffff5c, #dde335);
  background-image: linear-gradient(to bottom, #ffff5c, #dde335);
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  text-shadow: 1px 1px 3px #f2e9f2;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #0f0c66;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  width:35%;
   float:right;
   margin-right:5%;
}

.btn2 a {text-decoration:none}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn2:hover {
 background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn-box {
width: 100%;
height: auto;
margin-top:1.5em;
margin-bottom:1em !important;
text-align:center !important;
}

/*▼▼動画関連*/

.movie-title {margin:2px auto 1em;font-weight:normal;font-size:0.875em;}

/*▼▼ファンダイビング　タブ内の料金表とスケジュール*/
.price-fundive {text-align:left;}
.price-fundive h3 {margin-top:0;text-decoration:underline;font-size:1.2em}
.price-fundive hr {margin-right:5em;}
.price-fundive ul {font-size:1.0em;list-style-type:none;font-weight:600;color:#0000CC;line-height:170%}
.price-schedule {line-height:150% !important;color:#333 !important;font-weight:normal !important;}

.list-red-fun {font-size:1.25em;font-weight:bold;line-height:190%;color:#F00;margin-top:0.5em;margin-left:20px;text-align:left}c

.list-darkblue-fun {font-size:1.25em;font-weight:bold;line-height:190%;color:#000080;margin-top:0.5em;margin-left:20px;text-align:left}

.memo-under-price {margin:10px;line-height:170%}

.p-under-header-s {margin-top:0.1em;padding-top:0;margin-bottom:0;padding-bottom:0;line-height:150%;font-size:0.875em}




/*配置*/
.left {text-align:left !important}
.center {text-align:center !important}


.fundive-note-01 {font-size:0.9em !important;padding:15px;line-height:170%}

/*スペース*/

.dive-price-box {margin:20px}
.dive-price-box h2 {font-size:1.3em;font-weight:bold;}
.dive-price-box p {font-size:1.0em;font-weight:bold;}

.dive-week-schedule a {font-weight:normal !important; color:#039 !important}
.dive-week-schedule h3 {font-weight:bold !important;font-size:1em !important;margin-left:0 !important; color:#000080}
.dive-week-schedule ul {font-size:0.875em; list-style:none;padding:0 !important;}
.dive-week-schedule li {margin-bottom:8px}

/*料金表*/
.fundive-contents-transfer {margin:0 auto;width:600px}
.fundive-price 
{font-size:1.2em;text-align:left;
list-style-type:none;font-weight:bold;
color:#0000CC;
line-height:200%;margin-left:0px;}

ul.fundive-price {margin:0;padding:1em}
.fundive-schedule 
{text-align:left;font-size:1.0em;line-height:170%;list-style-type:none;margin:0;paddiing:0;}

.sales-point {background-color:#F9C;padding:1em !important; 
border:1px #333333 solid; border-radius:5px;}

.sales-point p {font-weight:bold;color:#006; font-size:1.3em;margin:0 !important; line-height:200%;}

.list-001 {font-size:1.3em;text-align:left;line-height:180%;font-weight:300; background-color:#F90}

.bg-black {background-color: #000;}

.panache-sailrock {
	width: 100%;
	height: 563px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tmp-close {text-decoration:line-through}

/* タブのスタイル */
.phototab {
  overflow: hidden;
  background-color: none;
  margin-bottom: 4px;
}

/* タブ内のボタン（tablinks）のスタイル */
.phototab button.phototablinks {
  background-color: #f1f1f1;
  float: left;
  border: 1px solid #4CAF50;
  outline: none;
  cursor: pointer;
  padding: 10px;
  transition: 0.3s;
  font-size: 17px;
  margin-right: 4px; /* 右に4pxのマージンを追加 */
  border-radius: 5px; /* 角を丸くする */
}

/* タブのボタンの最後の子にはマージンを追加しない */
.phototab button.phototablinks:last-child {
  margin-right: 0;
}

/* タブのボタンにマウスホバーしたときのスタイル */
.phototab button.phototablinks:hover {
  background-color: #ddd;
}

/* アクティブなタブのボタンのスタイル */
.phototab button.phototablinks.active {
  background-color: #4CAF50;
  color: white;
}


/* タブコンテンツ（写真）のスタイル */
.phototabcontent {
  display: none;
  padding: 6px;
  border: none;
}



/*---------===スマホ用CSS===------------*/
@media only screen and (min-width: 0px) and (max-width: 1024px) {

.smallscreen-margin-top-15px {margin-top: 15px}

.font-notice-large {font-size:0.75em;line-height: 170%}

.btn {
  background: #ffff5c;
  background-image: -webkit-linear-gradient(top, #ffff5c, #dde335);
  background-image: -moz-linear-gradient(top, #ffff5c, #dde335);
  background-image: -ms-linear-gradient(top, #ffff5c, #dde335);
  background-image: -o-linear-gradient(top, #ffff5c, #dde335);
  background-image: linear-gradient(to bottom, #ffff5c, #dde335);
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  text-shadow: 1px 1px 3px #f2e9f2;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #0f0c66;
  font-size: 1.3em;
  padding: 0.5em;
  text-decoration: none;
  width:80%;
  float:none;
  margin-bottom:1em;
}

.btn a {text-decoration:none}

.btn2 {
 background: #ffff5c;
  background-image: -webkit-linear-gradient(top, #ffff5c, #dde335);
  background-image: -moz-linear-gradient(top, #ffff5c, #dde335);
  background-image: -ms-linear-gradient(top, #ffff5c, #dde335);
  background-image: -o-linear-gradient(top, #ffff5c, #dde335);
  background-image: linear-gradient(to bottom, #ffff5c, #dde335);
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  text-shadow: 1px 1px 3px #f2e9f2;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #0f0c66;
  font-size: 1.3em;
  padding: 0.5em;
  text-decoration: none;
  width:80%;
     float:none;
	   display:block;
}

.btn2 a {text-decoration:none}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn2:hover {
 background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn-box {
width: 100%;
height: auto;
margin:1.5em auto 0 auto !important;
text-align:center;
}
	
	
.flight-after-dive {
	font-size: 0.875em;
	width:auto !important;
	line-height: 160%;
	color: #ff0000;
	font-weight: bold;
	border: 1px dashed #000;
	padding:0.5em;
}

/*送迎代金*/
.transfer {
	font-size: 0.875em;
	width: auto !important;
	line-height: 160%;
	color: #ff0000;
	font-weight: bold;
	border: 1px dashed #000000;
	text-align:center !important;
	margin:10px !important;
}


.p-standard-2 {
	margin:0 !important;
	padding:0 0 10px 0 !important;
	padding:5px !important;
	font-size:0.85em;
}

/*キャンペーン*/
.campain {border:2px dashed #f00;margin:10px;padding:4px}
/*キャンペーン見出し*/
.campain-header {font-size:0.9em;text-decoration:underline 2px solid #F00}
/*キャンペーン期間*/
.campain-period {color:#F00;font-size:0.7em;font-weight:bold;margin-top:0;padding:0;text-align:center !important}

.header-01 {background-color:none !important;color:#F00;text-align:left;font-size:1.0em;margin:auto 0.4em auto 0.4em;padding:0px}

.list-red-fun {font-size:1.25em;font-weight:bold;line-height:190%;color:#F00;margin-top:0.5em;margin-left:0.25em}

.memo-under-price {margin:10px;line-height:170%}

.price-snorkel {text-align:left;margin:10px 0px;font-size:1.0em;list-style:none;line-height:190%;font-weight:bold;padding:5px 10px 5px 25px}

.fundive-note-01 {font-size:0.9em !important;padding:0}

.font-weight-normal {font-weight:100 !important}

.margin-top{margin-top:5px}
.margin-bottom{margin-bottom:5px}

.dive-price-box {margin:5px}
.dive-price-box h2 {font-size:1.0em;font-weight:bold;}
.dive-price-box p {font-size:1.0em;font-weight:bold;}
.margin-all-around-10 {margin:5px !important}

/*料金表*/
.fundive-price {
	font-size:1.1em;text-align:left;
	list-style-type:none;font-weight:bold;
	color:#0000CC;
	line-height:200%;margin-left:0px; padding:5px !important}
	
.fundive-schedule {text-align:left;font-size:1.0em;line-height:170%;list-style-type:none;margin-left:0px;padding-left:1em}

.p-standard-header2-top {text-align:left;border-bottom:2px solid #F00;padding-bottom:3px;margin:5px}
	}
    
/*
========================================
SOP Optional Tour Menu
========================================
*/

.sop-tour-menu {
	max-width: 1120px;
	margin: 0 auto;
	color: #263238;
}

.sop-tour-menu *,
.sop-tour-menu *::before,
.sop-tour-menu *::after {
	box-sizing: border-box;
}


/* タイトル */

.sop-tour-header {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 20px;
	padding: 22px 24px;
	border: 1px solid rgba(25, 118, 210, 0.18);
	border-radius: 14px;
	background: linear-gradient(
		135deg,
		rgba(227, 242, 253, 0.98),
		rgba(232, 245, 233, 0.98)
	);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.sop-tour-header-icon {
	flex: 0 0 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background-color: #1565c0;
	color: #fff;
	font-size: 30px;
	box-shadow: 0 5px 14px rgba(21, 101, 192, 0.28);
}

.sop-tour-header-text {
	flex: 1;
	min-width: 0;
}

.sop-tour-header h3 {
	margin: 0 0 7px;
	color: #0d47a1;
	font-size: 1.65rem;
	line-height: 1.35;
}

.sop-tour-header p {
	margin: 0;
	color: #455a64;
	font-size: 0.96rem;
	line-height: 1.75;
}


/* LBMカラム */

.sop-tour-column {
	padding: 0 10px 10px;
}


/* カテゴリカード */

.sop-tour-card {
	overflow: hidden;
	margin: 0 0 20px;
	border: 1px solid #d9e1e5;
	border-radius: 14px;
	background-color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.sop-tour-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.13);
}

.sop-tour-card-title {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	color: #fff;
}

.sop-tour-card-heading {
	flex: 1;
	min-width: 0;
}

.sop-tour-card-title h4 {
	margin: 0 0 3px;
	color: inherit;
	font-size: 1.18rem;
	line-height: 1.4;
}

.sop-tour-card-title p {
	margin: 0;
	color: inherit;
	font-size: 0.82rem;
	line-height: 1.5;
	opacity: 0.92;
}

.sop-tour-card-icon {
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	font-size: 22px;
}


/* カテゴリごとの色 */

.sop-tour-card-sea .sop-tour-card-title {
	background: linear-gradient(135deg, #0277bd, #039be5);
}

.sop-tour-card-land .sop-tour-card-title {
	background: linear-gradient(135deg, #2e7d32, #43a047);
}

.sop-tour-card-spa .sop-tour-card-title {
	background: linear-gradient(135deg, #8e24aa, #ab47bc);
}

.sop-tour-card-service .sop-tour-card-title {
	background: linear-gradient(135deg, #ef6c00, #fb8c00);
}


/* ツアーリンク */

.sop-tour-list {
	margin: 0;
	padding: 10px 14px 15px;
	list-style: none;
}

.sop-tour-list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #eceff1;
}

.sop-tour-list li:last-child {
	border-bottom: none;
}

.sop-tour-list a {
	position: relative;
	display: block;
	min-height: 48px;
	padding: 13px 34px 13px 12px;
	border-radius: 7px;
	color: #263238;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.55;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		padding-left 0.2s ease;
}

.sop-tour-list a::after {
	content: "\203A";
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-52%);
	color: #90a4ae;
	font-family: Arial, sans-serif;
	font-size: 1.45rem;
	font-weight: normal;
	line-height: 1;
	transition:
		right 0.2s ease,
		color 0.2s ease;
}

.sop-tour-list a:hover,
.sop-tour-list a:focus {
	padding-left: 17px;
	background-color: #f3f7f9;
	color: #0d47a1;
	outline: none;
}

.sop-tour-list a:hover::after,
.sop-tour-list a:focus::after {
	right: 9px;
	color: #1565c0;
}


/* バッジ */

.sop-tour-badge {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 7px;
	vertical-align: 1px;
	border-radius: 999px;
	color: #fff;
	font-size: 0.64rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.sop-tour-badge-new {
	background-color: #e53935;
}

.sop-tour-badge-popular {
	background-color: #fb8c00;
}

.sop-tour-badge-recommend {
	background-color: #00897b;
}


/* お問い合わせ */

.sop-tour-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin: 2px 10px 10px;
	padding: 20px 22px;
	border: 1px solid #bbdefb;
	border-radius: 14px;
	background-color: #f5faff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.sop-tour-contact-text {
	flex: 1;
	min-width: 0;
}

.sop-tour-contact h4 {
	margin: 0 0 5px;
	color: #0d47a1;
	font-size: 1.05rem;
	line-height: 1.45;
}

.sop-tour-contact p {
	margin: 0;
	color: #546e7a;
	font-size: 0.88rem;
	line-height: 1.65;
}

.sop-tour-contact-button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	border-radius: 999px;
	background-color: #1565c0;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 5px 13px rgba(21, 101, 192, 0.25);
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.sop-tour-contact-button:hover,
.sop-tour-contact-button:focus {
	background-color: #0d47a1;
	color: #fff;
	transform: translateY(-2px);
	outline: none;
}


/* タブレット・スマートフォン */

@media only screen and (max-width: 760px) {

	.sop-tour-header {
		align-items: flex-start;
		margin-bottom: 16px;
		padding: 18px;
	}

	.sop-tour-header-icon {
		flex-basis: 54px;
		width: 54px;
		height: 54px;
		font-size: 24px;
	}

	.sop-tour-header h3 {
		font-size: 1.35rem;
	}

	.sop-tour-column {
		width: 100% !important;
		padding: 0 4px;
	}

	.sop-tour-card {
		margin-bottom: 16px;
	}

	.sop-tour-card:hover {
		transform: none;
	}

	.sop-tour-contact {
		display: block;
		margin: 0 4px 6px;
		padding: 18px;
	}

	.sop-tour-contact-button {
		display: flex;
		width: 100%;
		margin-top: 15px;
	}
}


@media only screen and (max-width: 480px) {

	.sop-content {
		padding: 26px 12px 18px;
	}

	.sop-tour-header {
		gap: 12px;
		padding: 15px;
	}

	.sop-tour-header-icon {
		flex-basis: 46px;
		width: 46px;
		height: 46px;
		font-size: 20px;
	}

	.sop-tour-header h3 {
		font-size: 1.2rem;
	}

	.sop-tour-header p {
		font-size: 0.86rem;
		line-height: 1.65;
	}

	.sop-tour-card-title {
		padding: 15px 16px;
	}

	.sop-tour-card-icon {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
		font-size: 19px;
	}

	.sop-tour-card-title h4 {
		font-size: 1.05rem;
	}

	.sop-tour-list {
		padding: 8px 10px 12px;
	}

	.sop-tour-list a {
		font-size: 0.9rem;
	}
}

/* ナンユアン島 概要 */
.nangyuan-overview {
  margin: 20px;
  padding: 22px;
  background-color: #f3fbff;
  border: 1px solid #b9dce9;
  border-radius: 8px;
  text-align: left;
  box-sizing: border-box;
}

.nangyuan-title {
  margin: 0 0 15px;
  padding-bottom: 10px;
  color: #005b83;
  font-size: 1.5em;
  border-bottom: 2px solid #49a9c7;
}

.nangyuan-title span {
  margin-left: 6px;
  color: #617984;
  font-size: 0.72em;
  font-weight: normal;
}

.nangyuan-lead {
  margin: 0 0 18px;
  line-height: 1.8;
  color: #333;
}

.nangyuan-info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #d2e6ee;
}

.nangyuan-info-list li {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 11px 8px;
  line-height: 1.6;
  border-bottom: 1px solid #d2e6ee;
}

.nangyuan-label {
  flex: 0 0 210px;
  color: #005b83;
  font-weight: bold;
}

.nangyuan-info-list a {
  color: #006da0;
  font-weight: bold;
  text-decoration: underline;
}

.nangyuan-info-list a:hover {
  color: #d45b00;
}

/* スマートフォン表示 */
@media only screen and (max-width: 600px) {
  .nangyuan-overview {
    margin: 15px 10px;
    padding: 17px 15px;
  }

  .nangyuan-title {
    font-size: 1.3em;
  }

  .nangyuan-info-list li {
    display: block;
  }

  .nangyuan-label {
    display: block;
    margin-bottom: 2px;
  }
}

/* ナンユアン島とタオ島の説明 */
.nangyuan-explanation {
  color: #333;
  line-height: 1.85;
}

.nangyuan-explanation h4 {
  margin: 25px 0 12px;
  padding: 9px 12px;
  color: #005d80;
  font-size: 1.1em;
  border-left: 5px solid #35a5c5;
  border-bottom: 1px solid #b9dce7;
  background-color: #f2fbfe;
}

.nangyuan-explanation h4:first-child {
  margin-top: 5px;
}

.nangyuan-explanation p {
  margin: 0 0 16px;
}

.nangyuan-question {
  margin: 18px 0;
  padding: 13px 16px;
  color: #005878;
  font-weight: bold;
  background-color: #eef9fd;
  border: 1px solid #b8dce8;
  border-radius: 6px;
}

.nangyuan-point-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 0 16px;
  padding: 0;
  list-style: none;
}

.nangyuan-point-list li {
  margin: 0;
  padding: 7px 13px;
  color: #fff;
  background-color: #1685a8;
  border-radius: 18px;
  font-size: 0.95em;
}

.nangyuan-note {
  margin-top: 20px;
  padding: 15px 18px;
  line-height: 1.7;
  background-color: #fff8e8;
  border-left: 5px solid #e6a22b;
  border-radius: 4px;
}

/* スマートフォン表示 */
@media only screen and (max-width: 600px) {
  .nangyuan-explanation h4 {
    font-size: 1.05em;
  }

  .nangyuan-question {
    padding: 12px;
  }

  .nangyuan-point-list {
    gap: 6px;
  }

  .nangyuan-point-list li {
    padding: 6px 10px;
    font-size: 0.9em;
  }

  .nangyuan-note {
    padding: 13px;
  }
}

/* ジェットスキーサファリ・スケジュール */
.jetski-schedule-wrapper {
  width: 96%;
  max-width: 960px;
  margin: 0 auto;
}

.jetski-schedule {
  margin: 0 0 2rem;
}

.jetski-schedule-title {
  margin: 0 0 0.75rem;
  padding: 0 0 0.55rem;
  border-bottom: 3px solid #6633cc;
  color: #5425a8;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  line-height: 1.5;
}

.jetski-schedule-title span {
  color: #6633cc;
}

.jetski-schedule-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #d6cff0;
  background: #ffffff;
}

.jetski-schedule-table th,
.jetski-schedule-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #d6cff0;
  font-size: 1rem;
  line-height: 1.65;
  vertical-align: middle;
}

.jetski-schedule-table tr:last-child th,
.jetski-schedule-table tr:last-child td {
  border-bottom: 0;
}

.jetski-schedule-table th {
  width: 110px;
  background: #6633cc;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

.jetski-schedule-table td {
  background: #f2effd;
  color: #333333;
}

.jetski-schedule-table tr:nth-child(even) td {
  background: #e9e4fa;
}

.jetski-schedule-note {
  margin: 0.5rem 0 2rem;
  padding: 1rem 1.2rem;
  border-left: 4px solid #6633cc;
  background: #f7f5fc;
  color: #444444;
}

.jetski-schedule-note p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
}

.jetski-schedule-note p + p {
  margin-top: 0.4rem;
}

/* スマートフォン表示 */
@media screen and (max-width: 600px) {
  .jetski-schedule-wrapper {
    width: 100%;
  }

  .jetski-schedule {
    margin-bottom: 1.6rem;
  }

  .jetski-schedule-table th,
  .jetski-schedule-table td {
    padding: 0.7rem 0.65rem;
    font-size: 0.92rem;
  }

  .jetski-schedule-table th {
    width: 68px;
  }

  .jetski-schedule-note {
    padding: 0.85rem 0.9rem;
  }

  .jetski-schedule-note p {
    font-size: 0.86rem;
  }
}

/* トップページの各サービス見出し */
.top-section-heading {
  box-sizing: border-box;
  width: calc(100% - 20px);
  margin: 18px auto 10px;
  padding: 12px 15px 13px;
  background: #ffffff;
  border-left: 6px solid #0078b8;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
  text-align: left;
}

.top-section-heading-tour {
  border-left-color: #f28a00;
}

.top-section-heading-diving {
  border-left-color: #0078b8;
}

.top-section-heading-en {
  display: block;
  margin-bottom: 3px;
  color: #0078b8;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.top-section-heading-tour .top-section-heading-en {
  color: #d96f00;
}

.top-section-heading h2 {
  margin: 0;
  padding: 0;
  color: #003f75;
  font-size: clamp(19px, 4.5vw, 25px);
  font-weight: bold;
  line-height: 1.35;
}

.top-section-heading p {
  margin: 6px 0 0;
  color: #444444;
  font-size: 13px;
  line-height: 1.65;
}

@media screen and (max-width: 600px) {
  .top-section-heading {
    margin-top: 14px;
    padding: 10px 12px 11px;
  }

  .top-section-heading h2 {
    font-size: 19px;
  }

  .top-section-heading p {
    font-size: 12px;
  }
}

/* ==================================================
   ナンユアン島シュノーケリング・タブエリア
================================================== */

.snorkel-opm-wrap {
	width: calc(100% - 40px);
	max-width: 1100px;
	margin: 25px auto;
	box-sizing: border-box;
}

/* Project Seven OPM本体を中央配置 */
.snorkel-opm-wrap #p7OPM_1 {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
	box-sizing: border-box;
	text-align: left;
}

/* タブ部分とパネル部分も中央に固定 */
.snorkel-opm-wrap #p7OPMtw_1,
.snorkel-opm-wrap #p7OPMpw_1,
.snorkel-opm-wrap .p7OPM-layout {
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}


/* スマートフォン */
@media only screen and (max-width: 700px) {

	.snorkel-opm-wrap {
		width: calc(100% - 24px);
		max-width: none;
		margin: 16px auto;
	}

	.snorkel-opm-wrap #p7OPM_1,
	.snorkel-opm-wrap .p7OPM-layout,
	.snorkel-opm-wrap .opm-tabs-wrapper,
	.snorkel-opm-wrap .opm-panel-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		box-sizing: border-box;
	}

}

/* ==================================================
   ナンユアン島ツアー・料金パネル
================================================== */

.nangyuan-price-panel {
	color: #26364a;
	box-sizing: border-box;
}

/* 見出し */

.nangyuan-price-heading {
	margin-bottom: 20px;
}

.nangyuan-price-heading h2 {
	margin-top: 8px;
	margin-bottom: 0;
}

.nangyuan-ship-label {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	background: #087db7;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.04em;
	border-radius: 20px;
}

/* 料金カード */

.nangyuan-price-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0;
}

.nangyuan-price-card {
	min-height: 120px;
	padding: 15px 10px;
	background: linear-gradient(180deg, #ffffff 0%, #f2f8fc 100%);
	border: 1px solid #b9d7e8;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 64, 110, 0.08);
	text-align: center;
	box-sizing: border-box;
}

.nangyuan-price-card p {
	margin-top: 0;
	margin-bottom: 6px;
}

.nangyuan-price-card .price-category {
	color: #075b90;
	font-size: 15px;
	font-weight: bold;
}

.nangyuan-price-card .price-amount {
	color: #e45b00;
	line-height: 1.2;
}

.nangyuan-price-card .price-amount strong {
	font-size: 28px;
	font-weight: bold;
}

.nangyuan-price-card .price-amount span {
	padding-left: 4px;
	font-size: 13px;
	font-weight: bold;
}

.nangyuan-price-card .price-condition {
	margin-bottom: 0;
	color: #566574;
	font-size: 12px;
	line-height: 1.5;
}

.nangyuan-price-free {
	background: linear-gradient(180deg, #fffef7 0%, #fff8df 100%);
	border-color: #efd389;
}

.nangyuan-price-free .price-amount {
	color: #d44d36;
}

/* プラン選択の案内 */

.nangyuan-plan-choice {
	margin: 18px 0;
	padding: 15px 18px;
	background: #fff7e9;
	border-left: 5px solid #f28a00;
	border-radius: 5px;
	line-height: 1.75;
	box-sizing: border-box;
}

.nangyuan-plan-choice p {
	margin: 0;
}

.nangyuan-plan-choice .nangyuan-info-title {
	margin-bottom: 5px;
	color: #cb5c00;
	font-size: 15px;
	font-weight: bold;
}

/* 料金に含まれるもの */

.nangyuan-included-box {
	margin: 18px 0;
	padding: 16px 20px;
	background: #eef8fd;
	border: 1px solid #b9ddeb;
	border-radius: 7px;
	box-sizing: border-box;
}

.nangyuan-included-box h3 {
	margin: 0 0 10px;
	padding: 0;
	color: #075b90;
	font-size: 16px;
	border: 0;
}

.nangyuan-included-box ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nangyuan-included-box li {
	position: relative;
	padding-left: 22px;
	line-height: 1.6;
}

.nangyuan-included-box li::before {
	position: absolute;
	top: 0;
	left: 0;
	color: #0782b8;
	font-weight: bold;
	content: "✓";
}

/* 注意事項 */

.nangyuan-fee-notes {
	margin-top: 18px;
}

.nangyuan-fee-notes p {
	margin: 10px 0;
	padding: 12px 14px;
	background: #fafafa;
	border: 1px solid #e1e5e8;
	border-radius: 5px;
	line-height: 1.75;
}

.nangyuan-fee-notes .note-label {
	display: inline-block;
	margin-right: 7px;
	padding: 3px 8px;
	background: #d9534f;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	border-radius: 3px;
	white-space: nowrap;
}

.nangyuan-fee-notes .note-label-blue {
	background: #287cab;
}

/* 専属送迎のツールチップ */

.nangyuan-private-transfer {
	margin: 18px 0 4px;
	text-align: right;
}

.nangyuan-private-transfer .p7TTM_trg {
	display: inline-block;
	padding: 8px 13px;
	background: #fff;
	color: #075b90;
	font-size: 13px;
	font-weight: bold;
	border: 1px solid #7bb4d1;
	border-radius: 4px;
	cursor: help;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.nangyuan-private-transfer .p7TTM_trg:hover {
	background: #075b90;
	color: #fff;
}


/* スマートフォン */

@media only screen and (max-width: 600px) {

	.nangyuan-price-panel {
		padding: 14px 12px !important;
	}

	.nangyuan-price-heading h2 {
		font-size: 18px;
		line-height: 1.5;
	}

	.nangyuan-price-grid {
		grid-template-columns: 1fr;
		gap: 9px;
		margin: 16px 0;
	}

	.nangyuan-price-card {
		min-height: 0;
		padding: 12px;
	}

	.nangyuan-price-card .price-category,
	.nangyuan-price-card .price-amount,
	.nangyuan-price-card .price-condition {
		display: inline-block;
		margin: 0 4px;
		vertical-align: middle;
	}

	.nangyuan-price-card .price-amount strong {
		font-size: 24px;
	}

	.nangyuan-plan-choice,
	.nangyuan-included-box {
		padding: 14px;
	}

	.nangyuan-included-box ul {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.nangyuan-fee-notes p {
		padding: 11px 12px;
	}

	.nangyuan-fee-notes .note-label {
		display: table;
		margin: 0 0 7px;
	}

	.nangyuan-private-transfer {
		text-align: left;
	}

	.nangyuan-private-transfer .p7TTM_trg {
		display: block;
		text-align: center;
	}

}

/* ==================================================
   ナンユアン島ツアー・よくある質問
================================================== */

.nangyuan-faq-heading {
	margin: 10px 0 10px;
	padding-bottom: 12px;
	border-bottom: 2px solid #0b78ad;
}

.nangyuan-faq-heading p {
	margin: 5px 0 0;
	color: #536575;
	font-size: 13px;
	line-height: 1.7;
}

.nangyuan-faq-heading .nangyuan-faq-en {
	margin: 0 0 3px;
	color: #0780b8;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.18em;
}

.nangyuan-faq-heading h2 {
	margin: 0;
	padding: 0;
	color: #064f7e;
	font-size: 22px;
	line-height: 1.5;
	border: 0;
	text-shadow: none;
}

/* FAQ全体 */

.nangyuan-faq {
	margin: 0 0 35px;
}

.nangyuan-faq .p7AP4root-wrapper {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* 質問ボタン */

.nangyuan-faq .p7AP4trig {
	margin: 0 0 10px !important;
}

.nangyuan-faq .p7AP4trig h3 {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.nangyuan-faq .p7AP4trig h3 a {
	position: relative;
	display: block;
	min-height: 24px;
	padding: 15px 45px 15px 56px !important;
	background: #ffffff !important;
	background-image: none !important;
	color: #075b8d !important;
	font-size: 15px !important;
	font-weight: bold !important;
	line-height: 1.6 !important;
	text-decoration: none !important;
	border: 1px solid #bed8e7 !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 7px rgba(0, 69, 110, 0.08);
	box-sizing: border-box;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

/* Qマーク */

.nangyuan-faq .p7AP4trig h3 a::before {
	position: absolute;
	top: 50%;
	left: 14px;
	display: flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	background: #0780b8;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	line-height: 1;
	border-radius: 50%;
	content: "Q";
	transform: translateY(-50%);
}

/* 右側の矢印 */

.nangyuan-faq .p7AP4trig h3 a::after {
	position: absolute;
	top: 50%;
	right: 17px;
	color: #0780b8;
	font-size: 22px;
	font-weight: normal;
	line-height: 1;
	content: "⌄";
	transform: translateY(-58%);
}

.nangyuan-faq .p7AP4trig h3 a:hover {
	background: #eef8fd !important;
	border-color: #73b3d3 !important;
	box-shadow: 0 3px 9px rgba(0, 69, 110, 0.13);
}

/* 回答部分 */

.nangyuan-faq .p7AP4content {
	position: relative;
	margin: -5px 0 12px !important;
	padding: 20px 20px 20px 58px !important;
	background: #f7fbfd !important;
	color: #334957;
	border: 1px solid #c8dde8 !important;
	border-top: 3px solid #0780b8 !important;
	border-radius: 0 0 8px 8px !important;
	box-sizing: border-box;
}

.nangyuan-faq .p7AP4content::before {
	position: absolute;
	top: 18px;
	left: 15px;
	display: flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	background: #ef7f00;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	line-height: 1;
	border-radius: 50%;
	content: "A";
}

.nangyuan-faq .p7AP4content h3,
.nangyuan-faq .p7AP4content h4 {
	margin: 0 0 10px;
	color: #075b8d;
	font-size: 16px;
	line-height: 1.6;
}

.nangyuan-faq .p7AP4content p {
	margin: 8px 0;
	line-height: 1.85;
}

.nangyuan-faq .p7AP4content ul {
	margin-top: 10px;
	margin-bottom: 15px;
	padding-left: 22px;
}

.nangyuan-faq .p7AP4content li {
	margin-bottom: 6px;
	line-height: 1.7;
}


/* スマートフォン */

@media only screen and (max-width: 600px) {

	.nangyuan-faq-heading {
		margin-top: 28px;
	}

	.nangyuan-faq-heading h2 {
		font-size: 20px;
	}

	.nangyuan-faq .p7AP4trig h3 a {
		padding: 13px 38px 13px 48px !important;
		font-size: 14px !important;
		line-height: 1.55 !important;
	}

	.nangyuan-faq .p7AP4trig h3 a::before {
		left: 11px;
		width: 26px;
		height: 26px;
		font-size: 14px;
	}

	.nangyuan-faq .p7AP4trig h3 a::after {
		right: 13px;
	}

	.nangyuan-faq .p7AP4content {
		padding: 17px 14px 17px 48px !important;
		font-size: 13px;
	}

	.nangyuan-faq .p7AP4content::before {
		top: 16px;
		left: 11px;
		width: 26px;
		height: 26px;
		font-size: 14px;
	}

}