/* 全体の共通リセット（隙間の調整を簡単にするため） */
* {
  box-sizing: border-box;
}

/* 文字ボックス-ご予約の注意事項）.box-frameにて中央揃え----------------- */
.box-frame{
  margin: 0;
  min-height: 0vh;          /* 画面の高さいっぱいに広げる */
  display: flex;              /* Flexboxを有効化 */
  justify-content: center;    /* 左右（水平）中央に寄せる */
  align-items: center;        /* 上下（垂直）中央に寄せる */
}


.box-goyoyaku{
  /* 文字ボックス） */
  border: 4px #4E3400 dotted;
  background-color: #F0D69F;
  padding: 40px 20px 30px 20px;
  text-align: center;
  width:80%;
  border-radius: 20px; 
}


/* .box-goyoyaku  box-goyoyaku-midasiーーーーーーーーーーーーーーーーーー */
	 .box-goyoyaku-ttl{
      padding: 3px 0px;
      color:#BE0000; /* 文字色（見やすいように白に設定） */
      font-weight: 600;
      text-align: left;
     /* 区切り線（コミ出し）としての余白設定 */
      margin: 20px auto; 
      font-size: 1.8em;
      letter-spacing: 0.3em;
}	
      
     .box-goyoyaku-midasi span {
      width: 100%; /* 画面の横幅に対して90% */
      padding: 3px 0px;
      background-color: #B17400; /* 茶色 */
      color: #ffffff; /* 文字色（見やすいように白に設定） */
      border-radius: 4px; /* 角丸を少しつける */
      font-weight: 600;
      text-align: center;
     /* 区切り線（コミ出し）としての余白設定 */
      margin: 20px auto; 
      font-size: 1.1em;
      letter-spacing: 0.05em;
}	
		
     .box-goyoyaku-midasi{
      /* 茶色の背景 background-color: #E4C687;*/
       display: flex;
       justify-content: center; /* 左右均等の余白を中央寄せで確保 */
       width: 100%;
       z-index:1;
}

      .box-goyoyaku-hnbn{ 
	   color: #4E3400;
	   font-size: 1.1em;
	   font-weight: 600;
}

      .box-goyoyaku-hnbn li { 
	   list-style: none; 
	   text-align: left;
}

/* //基本：文字ボックス-ご予約の注意事項）.box-frameにて中央揃え------------- */


/* 　調　整　文字ボックス-ご予約の注意事項）　------------ */
@media (min-width: 1096px) {
       .box-goyoyaku-hnbn li { /* 全体を右に1文字分ずらす */
       text-indent: -1em;      /* 1行目（・の行）だけを左に1文字分戻す */
       margin: 0 0.2em 0.4em calc(25vw - 250px); /* 項目ごとの行間 */
       }	
}

@media (min-width: 767px)and (max-width: 1095px) {
       .box-goyoyaku-hnbn{ font-size: 1.0em;  }
       .box-goyoyaku-hnbn li { 
        text-indent: -1em;  /* 1行目（・の行）だけを左に1文字分戻す */
        margin:  0 0.2em 0.4em 2em ; /* 項目ごとの行間 */
        text-align: justify;  
       }	
}

@media (max-width: 766px) {
       .box-goyoyaku-hnbn{font-size: 1.0em;}
       .box-goyoyaku-hnbn li {
       text-indent: -1em;  /* 1行目（・の行）だけを左に1文字分戻す */
       margin:  0 0.5em 0.4em 1.5em ; /* 項目ごとの行間 */
       text-align: justify;
       }
	   .box-goyoyaku{ /* 文字ボックス） */       
	    padding: 40px 0px 30px 0px;
	    width:100%;
	    border-radius: 20px; 
	    }
	   .box-goyoyaku-midasi span { /* 茶色の帯幅をモバイル用に調整 */   
        margin: 20px 10px; 
        }	

}

/* ////調　整　文字ボックス-ご予約の注意事項）　------------ */

/* ////文字ボックス-ご予約の注意事項）.box-frameにて中央揃え----------------- */




/* ------(.box-2）---------------------------------------- */
.box-2 {
  background-color:#F0D69F;/* 文字ボックス） */
  border: 2px solid #4E3400;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  font-size: 16px;
  width:100%;
}

/* ─── 親要素（レスポンシブの設定） ─── */
.container-box-2 {
  display: flex;
  gap: 15px; /* ボックス同士のすき間 */
  
  /* 【スマホ用】基本は縦一列に並べる */
  flex-direction: column; 
  margin: 20px;
}

/* 【パソコン用】画面の横幅が 768px 以上になったら横並びにする */
@media (min-width: 900px) {
  .container-box-2 {
    /* 横並びにする */
    flex-direction: row; 
  }
  
  .box-2 {
	 background-color:#F0D69F;
    /* 2つのボックスを同じ幅（50%ずつ）で均等に広げる */
	 width:45%;
    flex: 1; 
  }
}



/* コンテナボックス−３----------------------------------------*/
.box-3 {
  background-color:#fff;/* 文字ボックス） */
  border: 2px solid #4E3400;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  margin-bottom: 20px ;
  font-size: 16px;
  width:100%;
}



.box-3 {
    display: flex;
    flex-direction: column;  /* 中身を縦並びにする */
    align-items: center;      /* 左右の中央揃え */
    text-align: center;       /* 文字も中央揃えにする */
}

/* 隙間の調整（お好みで変更してください） */
.caution-mark img{
    margin: 20px 0 20px 0; 
	width: 80px;/* 画像の下に10pxの隙間を作る */
}


/* ─── 親要素（レスポンシブの設定） ─── */
.container-box-3 {
  display: flex;
  gap: 15px; /* ボックス同士のすき間 */
  
  /* 【スマホ用】基本は縦一列に並べる */
  flex-direction: column; 
  margin: 20px;
}




/* 【携帯】container-box-2とcontainer-box-３の余白をとる　----------*/
@media screen and (max-width: 500px) {
     .container-box-2{ margin: 0px;}
     .container-box-3{ margin: 0px;}		
}



/* 【パソコン用】画面の横幅が 768px 以上になったら横並びにする---------- */
@media (min-width: 900px) {
  .container-box-3 {
    /* 横並びにする */
    flex-direction: row; 
  }
  
  .box-3 {
	 background-color:#fff;
    /* 2つのボックスを同じ幅（50%ずつ）で均等に広げる */
	 width:30%;
    flex: 1; 
  }
}

/* //コンテナボックス−３----------------------------------------*/