/* CSS Document */
	
	#header {
		background-image:url("../bin/index/top.jpg");
		background-position:center;
		background-size: cover;
		height: 80vh;
		position: relative;
	}
	
	section{
		margin-bottom:100px;
	}
	
	 #header #main_title{
	  position: absolute;
	  top: 60%;
	  left: 50%;
		transform: translate(-50%, -60%);	  
		width: 100%;       /* 基本は画面幅いっぱいに広げる */
		  max-width: 600px;  /* 画像の「元の最大サイズ」を指定（例: 600px） */
		  box-sizing: border-box; /* パディングなどのズレ防止 */
		}
	
	#header #main_title img {
		display: block;
		  max-width: 100%;    /* 親要素（max-width: 100%）を超えないように縮小 */
		  height: auto;
		  margin: 0 auto;     /* 念のための左右中央寄せ */
		  padding: 0;         /* 予期せぬ余白をリセット */
}
	
	
	
h2 {
  text-align: center;
  font-size: 1.8rem;
  margin: 80px 0 40px;
  position: relative;
  padding-bottom: 20px;
  letter-spacing: 0.1em;
  color: #2c3e50; /* 落ち着いたダークグレー */
}

/* パターンA：中央にさりげないライン */
h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #2c5e2e; /* 自然を感じるグリーン */
}	
		
	

.btn {
  display: block;
  text-align: center;
  background: #007bff; /* 好みの色に変えてね */
  color: #fff;
  padding: 10px;
  text-decoration: none;
  border-radius: 4px;
}
	
.btn2 {
  display: block;
  text-align: center;
  padding: 12px;
  background: #aaa;
  color: #fff;
  text-decoration: none;
  pointer-events: none;	  
}	
	
.btn:hover{
	opacity: 0.8;
	transition: 0.5s;
}	
	


/* スマホ用 */
@media (max-width: 768px) {
  .tour-grid {
    grid-template-columns: 1fr; /* スマホで1列 */
  }
}	

	#contents .message{
		background-color: rgba(255,255,255,0.6);
		font-weight: bold;
	}	

#contents .message h1{
	font-size: clamp(1.3rem, 5vw, 1.85rem);
	text-align: center;
	 margin:2em 0;
	}	
	
	
#contents .message h3{
		font-size: 1.1em;
	    margin-bottom:0.8em;
	}
	
#contents .message p{
		margin-bottom:1.5em!important;
	   line-height: 1.8em;
	font-size: clamp(1rem, 5vw, 1.25rem);
	}
#contents .message p span{
		display: inline-block;
	}	
	
#contents .message #sub_copy{
		width:100%;
	    max-width: 8detail00px;
	    margin:0 auto;
		font-weight: normal;
	    text-align: left;
		font-size: 16px;
	
	}		
	
	#course div {
		background-color: rgba(229,237,225,0.5);
		padding:2em;
		border-radius: 10px;
	}
	
	#detail div{
		padding:2em 2em 1em;
		background-color: rgba(229,237,225,0.5);
	}
	#detail_top{
		display: flex;
	}
	#detail_top div{
		width: 50%;
	}	

	
	
	#detail div div{
		margin-bottom:2em;
		background-color: #fff;
	    padding:1em 1em 0;
		overflow: hidden;
	}
@media (max-width: 768px) {
	#detail_top{
		display: inherit;
	}
	#detail_top div{
		width: 90%;
		margin:0 auto;
	}
	#detail div div{
		margin-bottom:2em;
		background-color: #fff;
	    padding:1em 0 0;
		overflow: hidden;
	}	
	}	
	
	
	#detail div div p{
	font-size: clamp(1rem, 2vw, 1.15rem);
	font-weight: bold;
	}	
	#detail div div ul li{
		margin:0.5em 0;
	}	
	#detail div div ul li span{
		width:80px;
		display: inline-block;
		margin:0 0.5em 0 0;
		background-color: #eee;
		text-align: center;
		border-radius: 5px;
	}		
	#detail div div ul li .detail_man{
		width:250px;
		background-color: inherit;
		display:block;		
		text-align: right;
	}	
	#detail div p{
		margin-bottom:1.5em!important;	
	}	
@media (max-width: 499px) {
	#detail div{
		padding:2em 1em 1em;
		background-color: rgba(229,237,225,0.5);
		border-radius: 10px;	
	}		
	}
	

	
	#flow ul li{
		margin:0 0 1em;
		padding:2em;
		background-color: rgba(229,237,225,0.5);
		border-radius: 10px;
	}	
	
	#flow ul li .flow_time {
		font-size: 1.2em;
		margin: 0 0 16px;

		/* 横並びにして、親要素の幅いっぱいに広げる */
		display: inline-flex;
		align-items: center;
		width: 100%;
	}

	#flow ul li .flow_time::after {
		content: "";
		flex-grow: 1;         /* 文字の右側の余白をすべて線にする */
		margin-left: 12px;    /* 文字と線の間のすき間 */


		/* 線のデザイン（太さ・種類・色） */
		border-bottom: 1px dotted rgba(84,115,69,1.00); 
	}	
	
	#flow ul li .flow_item{
		display: block;	
		font-size: 1.2em;
		margin:0 0 0.5em;
		font-weight: bold;
	}
	
	
	#middle_photo{
		display: flex;
	}	
	
	#middle_photo p{
		width: 50%;
	}		
@media (max-width: 499px) {
	#middle_photo{
		display: inherit;
	}	
	
	#middle_photo p{
		width: 100%;
	}		
	
	
	}
	

	
	
#cancel h3{
		display: none;
	}	
		
.table-container {
  overflow-x: auto;
  position: relative;
}

.tour-table {
  width: 100%;
  border-collapse: collapse;
  /* データが多い分、全体幅は余裕を持たせておく */
  text-align: center;
}

/* 1列目（項目列）の共通設定 */
.tour-table th:first-child,
.tour-table td:first-child {
  left: 0;
  width: 120px;       /* ここを150pxに固定 */
  background-color: #f2f2f2;
  border-right: 2px solid #ccc;
  z-index: 2;         /* データ列より前面に */
  box-sizing: border-box; /* パディングを含めて150pxにする */
}
	


/* ヘッダーの1列目だけはz-indexをさらに高くする（スクロール時に上に来るように） */
.tour-table thead th:first-child {
  z-index: 3;
}

/* その他セルの設定 */
.tour-table th, 
.tour-table td {
  width:216px;
  padding: 12px;
  border: 1px solid #ccc;
}

	
@media (max-width: 768px) {
.tour-table th,
.tour-table td{
width:90%!important;
margin:0 auto;
display: block;
border: 0;
}	
	
/* 1列目（項目列）の共通設定 */
.tour-table th:first-child,
.tour-table td:first-child {
  border-right:none!important;
}	

.tour-table td{
margin:0 auto 1em;
}		

}	
	
	
	
	
.canoe-types {
  margin:2em 0;
  display: flex;
  gap: 20px;
  align-items: stretch; /* 高さの不揃いを防ぐ */
}

.canoe-item {
  flex: 1;
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #E8F1E4; /* 背景は白でスッキリと */
  display: flex;
  flex-direction: column; /* 中身を縦に並べる */
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.canoe-item h3 {
  text-align: center; /* 中央揃え */
  margin-top: 0;
  font-size:1.2em;
  margin-top:0.6em;
  padding-bottom: 15px;
  border-bottom: 1px solid #333; /* 見出しの下にライン */
  margin-bottom: 15px;
}


/* スマホ対応 */
@media (max-width: 768px) {
  .canoe-types {
    flex-direction: column;
  }
}

	

	
	
.gear-guide{
  margin:0 auto;
}

.section-header{
  text-align:center;
  margin-bottom:50px;
}

.section-label{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.2em;
  color:#5a7c88;
  margin-bottom:10px;
}

.section-header h2{
  font-size:2rem;
  margin-bottom:10px;
  font-weight:600;
}

.section-header p{
  color:#666;
}

.gear-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px;
}

.gear-card{
  background:#fff;
  border-radius:20px;
  padding:35px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.gear-card h3{
  margin-bottom:25px;
  font-size:1.4rem;
  border-bottom:1px solid #e5e5e5;
  padding-bottom:12px;
}

.gear-item{
  margin-bottom:20px;
}

.gear-item h4{
  font-size:.95rem;
  color:#2f5f6f;
  margin-bottom:5px;
}

.gear-item p{
  color:#555;
  line-height:1.8;
}

.caution{
  padding-top:15px;
  border-top:1px solid #eee;
}

.gear-list{
  list-style:none;
  padding:0;
  margin:0 0 1em;
}

.gear-list li{
  padding:12px 0;
  border-bottom:1px solid #f0f0f0;
}

.note{
  margin-top:25px;
  font-size:.85rem;
  color:#777;
}
	
	.about li{
		margin:0.3em 0;
		padding:0.5em 0 0.5em 1em;
		text-indent: -1em;
		border-bottom: 1px dotted #ccc;
	}	
	
	
	
	
	#caution div{
		border:1px solid #eee;
		padding:1.5em;
  		box-shadow:0 10px 30px rgba(0,0,0,.08);	
		border-radius: 10px;
	}	
	#caution div p{
		margin:0.5em 1em 0;
	}
	#caution div ul{
		margin:0 0 0 0.2em;
	}	
	#caution div ul li{
		margin:0.3em 0;
		padding:0 0 0 1em;
		text-indent: -1em;
	}
	#caution div h3 {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  margin:1.5em 0 0;
}

#caution h3::after {
  content: "";
  flex-grow: 1; /* 残りのスペースを全て埋める */
  height: 1px;  /* 線の太さ */
  background-color: #ccc; /* 線の色 */
  margin-left: 15px; /* 文字と線の間の余白 */
}
	
	#contents .message2{
		padding:0.5em;
		background-color: rgba(255,255,255,0.4);
		background-image: url("../bin/ctrl/bin/index/message.jpg");
		background-size: cover;
	}	

	#contents .message2 h3{
			font-size: 1.1em;
			margin-bottom:0.8em;
		}

	#contents .message2 p{
			margin-bottom:1.5em!important;
		   line-height: 1.8em;
		}	
	
	
	.message2{
		display: none;
	}

	
	/* ==========================================================================
   セクション全体・レイアウト
   ========================================================================== */

/* 中央揃えの見出し（下に短いアクセントライン付き） */
.section-title {
  text-align: center;
  font-size: 2rem;
  color: #333;
  margin-bottom: 40px;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: #00a896; /* テーマカラー */
  margin: 12px auto 0;
  border-radius: 2px;
}

/* グリッド配置（スマホは1列、PCは自動で複数列に） */
.point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding:20px;	
  background-color: #f9fbfd; /* 爽やかな薄い背景色 */	
}

/* ==========================================================================
   各カードのデザイン
   ========================================================================== */
.point-item {
  background-color: #ffffff;
  padding: 35px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* 軽い影 */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスホバー時に少し浮き上がる演出 */
.point-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   カード内の文字装飾
   ========================================================================== */
/* スタイリッシュで細めの数字 */
.point-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 300; /* 数字を細くして綺麗に見せる */
  color: #00a896; /* テーマカラー */
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

/* メインのテキスト */
.point-text {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.5;
}
		



	#meeting_place{
		padding:1em;
		border:4px dotted #ccc;
		border-radius: 5px;
	}	
	#meeting_place li{
		margin:0.5em 0;
	}	
	
#tour-table-caution{
	margin-top:0.5em;
	padding:0.5em;
	border:1px solid #eee;
}
#tour-table-caution li{
	   margin:0.2em 0;
	}	


#button_back{
	width: 300px;
	text-align: center;
	margin:3em auto 0!important;
	border:1px solid #222;
	padding:1em 0;
	color:#222222!important;
	border-radius: 5px;
}
#button_back:hover{
	background-color: rgba(187,248,187,0.10);
	transition: 0.5s;
}

#panel {
  margin-top:6em;
  display: flex;       /* 基本は横並び */
  flex-direction: row; 
  gap: 10px;           /* 画像同士の隙間（必要に応じて調整してね） */
}

#panel div {
  flex: 1;             /* 幅を均等にする場合 */
}

#panel img {
  width: 100%;         /* 親要素の幅に合わせる */
  height: auto;        /* 比率を維持 */
  display: block;
}

/* スマホ用の設定（画面幅が768px以下のとき） */
@media (max-width: 499px) {
  #panel {
    flex-direction: column; /* 縦並びに変更 */
  }
}