@charset "UTF-8";


/* メニューの角丸区切りバーーーーーーーーーーーーーーーーーーーーーーー */
.midasi-line{
 /* 茶色の背景  background-color: #E4C687;*/
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.midasi-line span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 10px 20px;
  background-color: #B17400; /* 茶色 */
  color: #ffffff; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  font-weight: bold;
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 40px auto; 
  font-size: 1.7em;
  letter-spacing: 0.05em;
}

/* ここまで　メニューの角丸区切りバーーーーーーーーーーーーーーーーーーーーーーーーー */





/* 説明文の囲みケイーーーーーーーーーーーーーーーーーーーーー */
.txt-box {
  width: 100%;
  border: 0px solid #333; /* 2pxの実線、濃い灰色 */
  padding: 60px 0 35px 0; 
  margin: -70px 0 30px 0;/* 枠と文章の間の余白 */
  background-color:#FAE5B9 ; /* 茶色の背景 #FAE5B9*/
  /* display: flex; */
  align-items: center;
  justify-content: center;
  border-radius: 30px;
	
}
/* ここまで　説明文の囲みケイーーーーーーーーーーーーーーーーーーーーー */





/* レスポンシブコンテナ２　--------------------------------------*/

/* 画面幅が768px以上の場合（PC用：横並び） */

/* 見た目の調整 */
.ctnr-box{
  padding: 0px;
  border: 1.5px solid #000;   
  background-color:#FAE5B9 ;
  box-sizing: border-box;
  border-radius: 30px;
  margin: 0 0%;
}


.ctnr-box img {
  max-width: 100%; /* 枠の幅を超えないようにする */
  height: auto;     /* 縦横比を崩さない */
  display: block;   /* 下部の不要な隙間を消す */
}


/* レスポンシブコンテナ２　------------------------------------*/


  /* 💻 パソコンなど：画面幅が768px以上のときは「横並び」 */
  
    .container2 {
      display: flex;
      gap: 20px;                  /* 枠と枠の間隔 */
    }
    .ctnr-box {
      flex: 1; /* y横幅を均等にする */
	  padding: 20px; 
    }



/* レスポンシブコンテナ２　-----------------------------------*/



/* 限定文字囲み罫線ありーーーーーーーーーーーーーーーーーーーーーーー */

 .Kakomi-box01{
  border: 2px solid #4E3400; /* 線の太さ、種類、色 */
  padding: 0px 2em;          /* 文字と枠の間の余白 */
  display: inline-block;     /* 文字の長さに合わせる */
  background-color: #E4C687;/* （確認用）背景色 */
  font-size: 1.2em;
  letter-spacing: 0.3em;
  margin: 0 0 10px 0;
}
/* //限定文字囲み罫線ありーーーーーーーーーーーーーーーーーーーーーー */


/* 見出しのみーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.midasi-moji{
 /* 茶色の背景 background-color: #E4C687; */
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.midasi-moji span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 0;
  color: #4E3400; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 0px auto 0px; 
  font-size: 3.0em;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* ここまで　みだしのみーーーーーーーーーーーーーーーーーーーーーーー */


/* 小見出しのみーーーーーーーーーーーーーーーーーーーーーーー */
.komidasi-moji{

  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.komidasi-moji span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 0px 10px;
  color: #4E3400; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 0px auto; 
  font-size: 2.2em;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ここまで　小みだしのみーーーーーーーーーーーーーーーーーーーーーーーーー */



/* 最小見出しのみーーーーーーーーーーーーーーーーーーーーーーー */
.ko-komidasi-moji{
/* 茶色の背景  background-color: #E4C687; */
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.ko-komidasi-moji span {
  width: 100%; /* 画面の横幅に対して90% */
  padding: 0px 0px;
  color: #4E3400; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 0px ; 
  font-size: 1.5em;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* ここまで　最小みだしのみーーーーーーーーーーーーーーーーーーーーーーーーー */	




/* 本文のみーーーーーーーーーーーーーーーーーーーーーーー */
.honbun-moji{
 
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.honbun-moji span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 0px 0px;
  color: #4E3400; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 0px auto; 
  font-size: 1.4em;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* ここまで　本文のみーーーーーーーーーーーーーーーーーーーーーーーーー */	
	


/* おけのセンター縮小配置ーーーーーーーーーーーーーーーーーーーーーーー */

div.bnr_oke  {
  display: flex;            /* Flexboxを有効化 */
  justify-content: center;   /* 左右（水平）の真ん中に配置 */
  align-items: center;       /* 上下（垂直）の真ん中に配置 */
  height: 9vh;            /* 画面全体の高さ（ページ全体の中央にしたい場合） */
  width: 100%;              /* 横幅を画面いっぱいに広げる */
 /* （確認用）背景色  background-color: #E4C687;*/
  margin:  0;
  z-index: 9999;
  
}

	
/* setumei 写真ーーーーーーーーーーーーーーーーーーーーーーーーー */		
div.bnr_setumei  {
  display: flex;            /* Flexboxを有効化 */
  justify-content: center;   /* 左右（水平）の真ん中に配置 */
  align-items: center;       /* 上下（垂直）の真ん中に配置 */
  height: auto;            /* 画面全体の高さ（ページ全体の中央にしたい場合） */
  width: 100%;              /* 横幅を画面いっぱいに広げる */
  margin: 0px 0 0 0;
  z-index: 9999;
  
}


	
 /* 画像をさらに拡大 */	
.bnr_setumei_kakudai img {
 display: flex;            /* Flexboxを有効化 */
  justify-content: center;   /* 左右（水平）の真ん中に配置 */
  align-items: center;  /* 上下（垂直）の真ん中に配置 */
  width:80%;
  margin:0 auto;
	
  max-width: 100%;         /* 画像の横幅を小さく指定（お好みのサイズに） */
  height: auto; 
  background-color: #E4C687;/* （確認用）背景色 *//* 縦横比を維持 */
  z-index:9990;
}



.bnr_oke img {
  z-index: 9999;
  max-width: 120px;         /* 画像の横幅を小さく指定（お好みのサイズに） */
  height: auto;
  margin: 10px 0 -10px 0;
  
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {

/* メニューの角丸区切りバーーーーーーーーーーーーーーーーーーーーーーー */
.midasi-line{
 /* 茶色の背景 background-color: #E4C687; */
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.midasi-line span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 10px 20px;
  background-color: #B17400; /* 茶色 */
  color: #ffffff; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  font-weight: bold;
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 40px auto; 
  font-size: 1.4em;
  letter-spacing: 0.05em;
}

/* ここまで　メニューの角丸区切りバーーーーーーーーーーーーーーーーーーーーーーーーー */

/* 見出しのみーーーーーーーーーーーーーーーーーーーーーーー */
.midasi-moji{
  /* 茶色の背景 background-color: #E4C687;*/
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.midasi-moji span {
  width: 90%; /* 画面の横幅に対して90% */
  padding:0;
  color: #4E3400; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 0px ; 
  font-size: 1.7em;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ここまで　みだしのみーーーーーーーーーーーーーーーーーーーーーーーーー */


/* 小見出しのみーーーーーーーーーーーーーーーーーーーーーーー */
.komidasi-moji{
/* 茶色の背景  background-color: #E4C687; */
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.komidasi-moji span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 0px 0px;
  color: #4E3400; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 0px ; 
  font-size: 1.4em;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* ここまで　小みだしのみーーーーーーーーーーーーーーーーーーーーーーーーー */	




/* おけのセンター縮小配置ーーーーーーーーーーーーーーーーーーーーーーー */


/* 本文のみーーーーーーーーーーーーーーーーーーーーーーー */
.honbun-moji{
 /* 茶色の背景 background-color: #E4C687; */
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.honbun-moji span {
  width: 100%; /* 画面の横幅に対して90% */
  padding: 0px 0px;
  color: #4E3400; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 0px 0px 0 0; 
  font-size: 1.1em;
  letter-spacing: 0.0em;
  font-weight: 400;
}

/* ここまで　本文のみーーーーーーーーーーーーーーーーーーーーーーーーー */	
	
	
div.bnr_oke  {
  display: flex;            /* Flexboxを有効化 */
  justify-content: center;   /* 左右（水平）の真ん中に配置 */
  align-items: center;       /* 上下（垂直）の真ん中に配置 */
  height: 9vh;            /* 画面全体の高さ（ページ全体の中央にしたい場合） */
  width: 100%;              /* 横幅を画面いっぱいに広げる */
  /* background-color: #E4C687;（確認用）背景色 */
  margin: 0px 0 0px 0;
  z-index: 9999;
  
}

.bnr_oke img {
  z-index: 9999;
  max-width: 120px;         /* 画像の横幅を小さく指定（お好みのサイズに） */
  height: auto;             /* 縦横比を維持 */
  margin: 0px 0 0px 0;
}
	
	
/* setumei 写真ーーーーーーーーーーーーーーーーーーーーーーーーー */		
div.bnr_setumei  {
  display: flex;            /* Flexboxを有効化 */
  justify-content: center;   /* 左右（水平）の真ん中に配置 */
  align-items: center;       /* 上下（垂直）の真ん中に配置 */
  height: auto;            /* 画面全体の高さ（ページ全体の中央にしたい場合） */
  width: 100%;              /* 横幅を画面いっぱいに広げる */
  margin: 0px 0 0 0;
  z-index: 9999;
  
}

.bnr_setumei img {
	width: 100%;    /* 画像右の１％スペースをとるs.s */
  z-index: 9999;
  max-width: 100%;   /* 画像の横幅を小さく指定（100~85％）s.s */
  height: auto; 
  display: block; /* （画像センターに配置s.s */
  margin-left: auto; 
  margin-right: auto; 	
	
	
	
	
	
}
	
		
}


/* 文字を四角で囲む s.sーーーーーーーーーーーーーーーーー */

.box1 {
	
    padding: 15px 0 0 0;
	font-size: 1.2em;
    font-weight: bold;
	height: auto;
	justify-content: center;
    align-items: center;
    display: block;
    margin-left: auto;
    margin-right: auto; 
	width:100%;
    max-width: 600px; /* 最大の横幅 */
    margin: 0 auto;
	
}


.box1 p {
	
	/* 文字説明用 左右グリッド内に調節中　s.sーーーーーーー */
	
    margin: 10px; 
    padding: 10px;
	border: solid 2px #B17400;;
	width: 90%;
	line-height: 1.5em;
}

/* ここまで文字を四角で囲むーーーーーーーーーーーーーーーーー */
.strt-moji{
	color:#00ADF9;
}



/* divの隙間を埋めるーーーーーーーーーーーーーーーーーーーーーーーーー */







/* グーグルマップを中央に配置ーーーーーーーーーーーーーーーーー */
.map-container {
 display: flex;
  justify-content: center; /* 左右中央に配置 */
  align-items: center;     /* 上下中央に配置 */
  width: 100%;             /* 横幅を画面いっぱいに */
  height: 58vh;     
}



.iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* ここまでグーグルマップを中央に配置ーーーーーーーーーーーーーーーーー */




.map-hakei{
 background-color: #E4C687; /* 茶色の背景 */
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.map-haikei span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 10px 20px;
  
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 40px auto; 
  font-size: 1.7em;
  letter-spacing: 0.05em;
}

/* ここまで　メニューの角丸区切りバーーーーーーーーーーーーーーーーーーーーーーーーー */


/* メニューの角丸区切りバーーーーーーーーーーーーーーーーーーーーーーー */
.midasi-map{
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}

.midasi-map span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 10px 20px;
  color: #ffffff; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  font-weight: bold;
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 40px auto; 
  font-size: 1.7em;
  letter-spacing: 0.05em;
}



div.gallery{
  margin: -10px 0 -10px 0;
  padding: 0  0 -30 0;
}

/* ここまで　divの隙間を埋めるーーーーーーーーーーーーーーーーーーーーーーーーー */

.box1 p img{margin:15px 25px -5px 5px}
.tui-midasi{
text-align: center;
width: 100%;
padding: 0px 0px;
color: #4E3400;
border-radius: 9999px;
margin: 0px auto;
font-size: 2.0em;
letter-spacing: 0.2em;
line-height: 3.0em;
font-weight: 600;
}


.tui-hnbn{
text-align: center;
width: 90%;
padding:  0;
color: #4E3400;
border-radius: 9999px;
margin: 0px auto;
font-size: 1.1em;
letter-spacing: 0.02em;
font-weight: 600;
}


/* レスポンシブ携帯ーーーーーーーーーーーーーーーーーーーーーーー */
/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.midasi-map span iframe{
  width: auto;/* 携帯の幅 */
}

.box1 p img{margin:15px 25px -5px 5px}
.tui-midasi{
text-align: center;
width: 100%;
padding: 0px 0px;
color: #4E3400;
border-radius: 9999px;
margin: 0px auto;
font-size: 2.0em;
letter-spacing: 0.2em;
line-height: 1.2em;
font-weight: 600;
}
	
	
.break-img{
  display: block; /* 画像をブロック要素にして改行させる */
  margin-bottom: 200px 0 0 100px; /* 必要に応じて画像の下に余白を追加 */
  padding-bottom: 0em;
	width: 20%;
	height: auto;
}	
	
.break-img {
  display: block; /* 疑似要素による改行を機能させるために必要です */
}

.break-img::after {
  content: "\A"; /* 改行コードを表すCSSの記述 */
  white-space: pre; /* 改行を反映させるために必須のプロパティ */
}	

span.tui-midasi{
	text-align: center;
	padding: 2em 0 1em -2em;
	margin: 1.5em 0 1em 0;
	line-height: 1.5em; 
	}	
	
	
.tui-midasi{
text-align: center;
width: 90%;
padding: 0px 0px;
color: #4E3400;
border-radius: 9999px;
margin: 0px 0 20px 0;
font-size: 1.5em;
letter-spacing: 0.05em;
line-height: 1.2em;
font-weight: 600;
}	
.box1 p img{margin:30px 10px 12px 5px}	
	
	
}



/* 亀の井ロゴ設置ーーーーーーーーーー  */
.kamenoi-logo{
	text-align: center;
	 width: clamp(25%, 50vw - 10%, 35%); 
  margin: 70px 0 60px 0;
  background-color: #E4C687; /* 亀の井ロゴセンター合わせ */
}
.logo-box {
  text-align: center;
}	
/* ここまで亀の井ロゴ設置ーーーーー  */	

/* 亀の井ロゴ設置背景色指定ーーーーーーーーーーーーー */
	
.midasi-logo{
 background-color: #E4C687; /* 茶色の背景 */
  display: flex;
  justify-content: center; /* 左右均等の余白を中央寄せで確保 */
  width: 100%;
  z-index:1;
}
	

.midasi-logo span {
  width: 90%; /* 画面の横幅に対して90% */
  padding: 10px 20px;
  background-color: #B17400; /* 茶色 */
  color: #ffffff; /* 文字色（見やすいように白に設定） */
  border-radius: 9999px; /* 角丸をしっかりとつける */
  font-weight: bold;
  text-align: center;
  /* 区切り線（コミ出し）としての余白設定 */
  margin: 40px auto; 
  font-size: 1.7em;
  letter-spacing: 0.05em;
}
/* ここまで 亀の井ロゴ設置背景色指定ーーーーーーーーー */


	
/*  亀の井ロゴ break-img で極端に小さくなるのか s.sーーーーーーーーー */
@media screen and (max-width: 768px) {
	

/* .kamenoi-logoパスが通っている */	
 .kamenoi-logo {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    width: 50%;  
	  /* 親要素の幅を100%に広げる */
  }

  .footer-logo img {
	max-height: auto;/* 好みの高さに変更 */
	width:50%; /* 比率を保つ */ 
	margin: 0px;
	
  }

}