/*モバイルファーストリスポンシブル
  ①全共通（スマホ用をメインに）========================================*/
  
  .fixed-header {
	position: fixed;
	top: 0;
	width: 100%;
	background: #fff;
	z-index: 1000;
	padding-top: 10px;
	padding-bottom: 10px;
}
  .top_down-w {/*①header以下全体の位置を下げる 口コミページ用*/
  	  	top: 109px;/*上からずらす位置*/
		position: relative; /*相対位置 他の要素の配置をもとに自身の配置が決定--*/;
		padding-left: 1.5%;
		padding-right: 1.5%;

}
   
 /*====①観光レビューページ用ナビ =============*/
.navindex-menu{/*固定メニュー*/
 	position: fixed;
 	top: 30px; /* パンくずリストの高さに応じて調整 〇 */
 	left: 0;
 	width: 100%;
	z-index: 1000;
	background: #fff; /* 背景色を指定しておくと下の文字が透けない */
	/*margin-top: 24px; /* パンくずリストのすぐ下に位置するように調整 */
	/*padding: 5px 0;*/
}
 
.navindex-menu ul {/* ①トップページナビ */
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding: 0;
  	margin: 0;
  	list-style: none;
  	gap: 6px; /* ボタン間のギャップ */
  
}	
.navindex-menu li {
	flex: 1 1 60px;
	max-width: 80px;
	min-width: 60px;
	border: 1px solid #ccc;
	border-radius: 7px;
	box-sizing: border-box;
	text-align: center;
	background-color: #bfe7f5;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 0;
	transition: background-color 0.3s; /* トランジション追加 */

}
.navindex-menu li:hover {
  	background-color: #75c8e6;
  

}

/* リンクの下線を全状態で消す */
.navindex-menu a,
.navindex-menu a:link,
.navindex-menu a:visited,
.navindex-menu a:hover,
.navindex-menu a:active {
	 text-decoration: none;
	 color: #333; /* 必要なら色の指定を追加 */
}


 /*====①観光レビューページ用ナビ　固定じゃない =============*/
.navindex2-menu{
 	left: 0;
 	width: 100%;
	z-index: 1000;
	background: #fff; /* 背景色を指定しておくと下の文字が透けない */
}
 
.navindex2-menu ul {/* ①トップページナビ */
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding: 0;
  	margin: 0;
  	list-style: none;
  	gap: 6px; /* ボタン間のギャップ */
  
}	
.navindex2-menu li {
	flex: 1 1 60px;
	max-width: 80px;
	min-width: 60px;
	border: 1px solid #ccc;
	border-radius: 7px;
	box-sizing: border-box;
	text-align: center;
	background-color: #bfe7f5;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 0;
	transition: background-color 0.3s; /* トランジション追加 */
}


.navindex2-menu li:hover {
  	background-color: #75c8e6;

}


/* リンクの下線を全状態で消す */
.navindex2-menu a,
.navindex2-menu a:link,
.navindex2-menu a:visited,
.navindex2-menu a:hover,
.navindex2-menu a:active {
	 text-decoration: none;
	 color: #333; /* 必要なら色の指定を追加 */
}




 
 .main-review {/*①観光レビューページ用 青枠あり------ */
  	padding: 1em;
	width: auto;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border: 5pt ridge #09C;
}



.main-title-sight {
/*①観光レビューページ用 メインタイトル用～固定メニュー------ */
	margin-top: 60px; /* パンくず + nav の高さ分下げる〇 */;
	font-weight: 700;
	color: #000000;
	border-left-style: solid;
	font-size: 1.15em;
	border-left-color: #06AEFF;
	border-left-width: 8px;
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-bottom-color: #06AEFF;
	line-height: 2;
	width: 100%;
	text-align: left;
	padding-left: 5px;
}
.photo-sightseeing1 img { /*①画像１枚～キャプションなし--------------*/  
  	width: 100%;
 	 height: auto;
 	 display: block; /*レイアウトの制御がしやすくなります。特に、幅や高さ、余白の調整が必要な場合に有効*/
 	 max-width: 250px;
 	 margin: 0 auto;
} 
 /*=======①Sighteeing内の詳細ボタン用=========*/     
 .continue {/*Sighteeing内の詳細ボタン用*/
	border-style: solid;
	border-width: thin;
	display: inline-block;
	background-color: #FFFFBF;
	font-size: 0.95em;
	padding: 3px 10px 3px 10px;
	text-decoration: none;
	border-radius: 30px;
	text-align: center;
	transition: background-color 0.3s ease;
	margin-top: 0;
	font-weight: 600;
	margin-bottom: 0;
	color: #000000;
}
 .continue:hover {
      	background-color: #FFFF4F;
      	text-decoration: none; /*リンクの線を消す*/
}
 /*=======①Sighteeing内のブログボタン用=========*/     
 .continue-blog {
/*Sighteeing内の詳細ボタン用*/
	text-decoration: none;
	font-weight: 600;
	color: #000000;
	font-size:0.9em;
}

/*=======①新画像--====================*/    
 img {	
  	max-width: 100%;/*画像の最大幅を親要素の幅に制限 はみだし防止*/
  	height: auto;/*画像の高さを自動調整し、アスペクト比（縦横比）を維持 伸び縮み防止*/
  }
.photo-1 img { /*①画像１枚～キャプションなし--------------*/  
  	width: 100%;
 	 height: auto;
 	 display: block; /*レイアウトの制御がしやすくなります。特に、幅や高さ、余白の調整が必要な場合に有効*/
 	 max-width: 500px;
 	 margin: 0 auto;
} 
/*-------------------------------------------------------------------------*/
  /*①画像２枚～キャプションなし--------------*/   
.photo-2 {/*①画像２枚～--------------*/   
 	 display: flex;
  	flex-direction: column;
 	 gap: 16px;
 	 align-items: center;
}
.photo-2 img {
  	  width: 100%;
  	max-width:500px;
  	height: auto;
 }
/*-------------------------------------------------------------------------*/
.photo-2-link { /*①リンク付画像２枚～キャプションなし Index用 ---*/  
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	gap: 16px;
}
.photo-2-link img {
 	width: 100%;
  	max-width: 500px;
  	height: auto;
  	display: block;
}
.photo-2-link a {
  	display: block;
  	width: 100%;
  	max-width: 500px;
}
.display-onoff {
  	display: none !important; /*他のコマンドに影響されないように*/
}
/*-------------------------------------------------------------------------*/
.photo-4 { /*①画像４枚----------*/
  	display: flex;
 	flex-wrap: nowrap; /* 折り返さず横並び */
 	justify-content: space-between;
 	gap: 0.5em;
} 
 .photo-4 img {
  	flex: 1 1 0;
  	width: 0;
  	max-width: 100%;
  	height: auto;
}
/*-------------------------------------------------------------------------*/
  .photo-2-with { /*①画像2枚～キャプションあり（写真消さない roomページ用）----*/
 	 display: flex;
 	 justify-content: center;
 	gap: 5px; /* 画像間のスペースをゼロに設定 */
  	width: 100%;
  	box-sizing: border-box;
  	padding: 0;
}
.photo-2-with-figure {
	 flex: 1 1 auto0; 
	 max-width: calc(50% - 4px);  /* ギャップ考慮した幅 */
 	 text-align: center;
  	margin: 0;
}
.photo-2-with-figure img {
  	width: 100%;
 	 height: auto;
 	 aspect-ratio: 4 / 3; /* 画像の縦横比を維持 */
 	 display: block;
}
.photo-2-with-figure figcaption {
	  margin-top: 4px;
 	 font-size: 0.85em;
 	 color: #555; 
}
/*-------------------------------------------------------------------------*/
.photo-2-withoff { /*①画像2枚～キャプションあり（写真１枚消す）---------*/
 	display: flex;
  	flex-direction: column;
  	align-items: center;
  	gap: 1rem;
}
.photo-2-withoff-figure {
 	 margin: 0;
 	 text-align: center;
}

.photo-2-withoff-figure img {
 	 max-width: 100%;
 	 height: auto;
 	 display: block;
}
.photo-2-withoff-figure:nth-child(2) {/* 2枚目の画像を非表示にする */
  	display: none;
}
/*-------------------------------------------------------------------------*/
.photo-4-with {/*①画像４枚 キャプションあり　PC４枚→スマホ２枚（index）--*/
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	gap: 2px;
  	padding: 0;
  	margin: 0;
  }
  .photo-4-with img {
  	width: 100%;
  	height: auto;
  	display: block;
  	margin: 0 auto;
  	max-width: 250px;
}
.photo-4-with-figure {/* 各画像＋キャプションセットのスタイル */
  	 flex: 0 0 48%;
  	text-align: center;
  	margin: 0;
  }
 .photo-4-with-figure figcaption {/* キャプションのスタイル */
  	font-size: 0.9em; /* フォントサイズを小さめに設定 */
  	color: #555; /* 文字色をグレーに設定 */
  	margin-top: 0.5em;/* 上部の余白を設定 */
}
/*-------------------------------------------------------------------------*/
.photo2-sightseeing { /*①観光ページ用囲み写真--*/ 
 	display: flex;
  	flex-wrap: nowrap; /* 折り返しを防止 */
  	gap: 5px;
  	writing-mode: horizontal-tb; /* 横書きに明示 */
}
.photo2-sightseeing-item {
  	flex: 0 0 50%;/* 常に幅50%で2列 */
  	box-sizing: border-box;
  	padding: 8px;/* 枠ぎりぎりまで画像を広げる */
  	border-radius: 10px;
  	border: 1px solid #000;
  	min-width: 0;/* はみ出し防止 */ 
}
.photo2-sightseeing-item img {
 	width: 100%;
  	height: auto;
  	display: block;
  	object-fit: cover;  /* 画像のアスペクト比を維持しつつ、枠いっぱいに表示 */ 
}
.photo2-sightseeing-item .text {
  	display: -webkit-box;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 3; /* 表示する行数を指定 */
  	overflow: hidden;
} 
.photo2-sightseeing-item figure {
  	margin: 5px; /* デフォルトのマージンを削除 */
}
figcaption {
  	font-size: 0.9em;
  	margin-top: 5px;
  	text-align: center;
  	font-weight:600;
}
  .sightseeing-title {
  	font-weight: 700;
  	color: #000000;
  	border-left: thick solid #06AEFF;
  	background-color: #8DE3FC;
  	text-align: left;
  	padding-left: 0.5em;
  	margin-top: 0.5em;
  	line-height: 1.8;
  	white-space: nowrap; /* テキストの折り返しを防止 */
  	overflow: hidden;     /* はみ出したテキストを非表示 */
  	text-overflow: ellipsis; /* はみ出したテキストに省略記号を表示 */
  	font-size: clamp(0.8em, 2.5vw, 1.1em); /* フォントサイズを画面幅に応じて調整 */
  	scroll-margin-top: 0px; /* 固定ヘッダーの高さに合わせて調整 */
  	writing-mode: horizontal-tb;
  text-orientation: mixed;
  /* 既存スタイルそのままでOK */
 }
 
 
 
 /*-------------------------------------------------------------------------*/
.photo1-sightseeing-item {
  	flex: 0 0 50%;/* 常に幅50%で2列 */
  	box-sizing: border-box;
  	padding: 8px;/* 枠ぎりぎりまで画像を広げる */
  	border-radius: 10px;
  	border: 1px solid #000;
  	min-width: 0;/* はみ出し防止 */ 
}
.photo1-sightseeing-item img {
 	width: 100%;
  	height: auto;
  	display: block;
  	object-fit: cover;  /* 画像のアスペクト比を維持しつつ、枠いっぱいに表示 */ 
}
.photo1-sightseeing-item .text {
  
} 
.photo1-sightseeing-item figure {
  	margin: 5px; /* デフォルトのマージンを削除 */
}
 
 /*-------------------------------------------------------------------------*/  

 
 .iframe-wrp { /*①観光各ページ・埋め込みGoogleマップ用*/ 
    	position: relative;
    	width: 100%;
    	padding-bottom: 56.25%; /* 16:9 のアスペクト比 */
    	height: 0;
    	overflow: hidden;
    	max-width: 700px;
    	margin: 20px auto;/* 上下の余白20px */
  }
 .iframe-wrp iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	border: 0;
  }
  
  /* Static Mapsの img 用スタイル */
.iframe-wrp a,
.iframe-wrp a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 画像が中央寄せで表示され、縦横比を維持したまま余白なく画面にフィット */
}

/* キャプション用 */
.iframe-wrp .caption {
	position: absolute;
	bottom: 0px; /* 画像の下から10px */;
	left: 0px; /* 左から10px */;
	color: white;
	background: rgba(0, 0, 0, 0.5);
/* 半透明黒背景 */padding: 2px 5px 2px 5px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: bold;
	pointer-events: none; /* クリックを邪魔しない */
}
/*=======①新画像--====================*/    
 .expe-container {/*-----①新experienceページ 用------*/
  	display: flex;
  	flex-direction: column;
  	border: 3px ridge #09F;
  	margin: 0 auto;
  	padding: 16px;
  	gap: 16px;
}
.expe-image img {
  	width: 100%;
  	height: auto;
  	display: block;
    	max-width:250px;
}
.expe-text p {
  	margin: 0 0 1em;
}
.expe-text hr {
 	 border: none;
  	border-top: 1px solid #ccc;
  	margin: 1em 0;
}  
  
  /*====wページ下のページリンクボタン用=============*/
.sight-list {/*観光各ページ用一覧タイトル*/
	border-width: thin;
	display: inline-block;
	background-color: #59ACFF;
	color: white;
	text-decoration: none;
	border-radius: 30px;
	text-align: center;
	transition: background-color 0.3s ease;
	margin-top: 1em;
	border-top-style: solid;
	font-weight: 600;
	margin-bottom: 0px;
	padding-top: 2px;
	padding-right: 25px;
	padding-left: 25px;
}
  .pagination { /*〇観光各ページ用次へボタン*/
	text-align: center;
	padding: 15px 0;
      	font-family: sans-serif;
    }
    .page-number,
    .prev,
    .next {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 30px;/*〇の大きさ*/
	height: 30px;
	border: 2px solid #3399FF;
	border-radius: 50%;
	color: #3399FF;
	text-decoration: none;
	transition: all 0.3s ease;
	font-weight: bold;
	font-size: 12px;
	box-sizing: border-box;
}
.page-number:hover,
.prev:hover,
.next:hover {
     	background-color: #49add1;
      	color: white;
    }
.current {/*今のページ指定*/
      background-color: #49add1;
      color: white;
}
.dots {
      display: inline-block;
      margin: 0 10px;
      font-size: 18px;
      color: #999;
}


    /*===================================================*/
  /* ②画面サイズが600px以上はここを読み込む（タブレット用）*/
  /*==================================================*/

  @media (min-width: 600px) {

/*================②新画像用-===================*/ 

 /*②画像２枚～キャプションなし--------------*/   
  .photo-2 {/*②画像２枚～--------------*/  
    	flex-direction: row;/*横並び*/
    	justify-content: center;
  } 
   .photo-2 img {
    	max-width: 50%;
  }
	
 .photo-2-link {/*②リンク付画像２枚～キャプションなし Index用 --------------*/  
	    	flex-direction: row;
   		justify-content: center;
  }  
.photo-2-with {/*②画像2枚 キャプションあり-（横並びのまま room用）-------------*/
  		flex-direction: row;/*横並び*/
   		gap: 8px; /* 横並び時の間隔 */
  }
  .photo-2-with-figure {
  		width: 50%;
  }
  .photo-2-withoff { /*②画像2枚～キャプションあり（写真１枚消す）--------*/
   		 flex-direction: row;
   		 justify-content: center;
  }  
   /*===============②フォント=====================*/
.main-title2 {
		font-size: 1.2em;
}
}
 /*=====================================================*/
  /*③画面の横幅が768px以上（パソコン用）=============================*/
   /*=====================================================*/

  @media screen and (min-width:768px) {
  
  
  .top_down-w {/*②header以下全体の位置を下げる 口コミページ用*/
  		top: 100px;/*上からずらす位置*/
}


  /*=========③新画像用- ========*/  
 .photo-4 img {/*③画像４枚----------*/
	   	flex: 1 1 0;
  		width: 0;
  }
.photo-4-with-figure {/*③画像４枚 キャプションあり　PC４枚→スマホ２枚--------------*/
    		flex: 0 0 23%;
}
/*③画像2枚 キャプションあり　１枚消さない------------*/
.photo-2-withoff-figure:nth-child(2) {
  	 	 display: block;
  }
  

.iframe-wrp .caption { /*③観光各ページ・埋め込みGoogleマップ用*/   
	font-size: 12px;
}
  

/*====③ホームステイナビ  =============*/

.display-onoff {
    		display: block !important;
  }