/* ===================================================
   1. 【最上部】基本の宣言（スマホ用：縦並び）


<div class="flex-container">
       <div class="toujitu-text-box">
          <div class="toujitu-mdsi">WEB予約・ご購入の方</div>
             <p>ここには文章が流れ込みます。テキストが長くなっても自動的に折り返され、綺麗なレイアウトを保ちます。レスポンシブ対応なので、スマホで見ると縦並びになり、パソコンで見ると左右に7:3の比率で並びます
		     </p>
		  </div> 

   =================================================== */

/* 全体のコンテナ */
.flex-container {
  display: flex;
  gap: 0px;              /* 文字と写真の間のすき間 */
  width: 100%;
  max-width: 1200px;      /* コンテナの最大幅 */
  margin: 0 auto;         /* 画面中央に配置 */
  padding: 0px;
  box-sizing: border-box;	
/* row or column; 画面が広くなったら横並びに変更だが、現在は固定中 */ 
   flex-direction: row;  /* 画面が広くなったら横並びに変更 */
   align-items: center;  /* 必要に応じて上下中央揃えに（不要なら消してOK） */
   
  }

  /*  flex-basis を使って 7:3 (70% と 30%) の比率にする */
  .toujitu-text-box {
    flex-basis: 70%;
  }

  .toujitu-image-box {
    flex-basis: 30%;
  }



.toujitu-text-box{
	color:#4E3400;
    font-size: 1.5em;
	font-weight: 600;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  }



.toujitu-mdsi{
    font-size: 1.2em;
	font-weight: 800;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	display: inline-block;
    background-color: #4E3400; /* 帯の色（お好みの色に変更してください） */
    color: #ffffff;            /* 文字色（白） */
    padding: 3px 15px;         /* 帯の内側の余白（上下 左右） */
    border-radius: 60px;       /* 角丸の大きさ */
	margin: 0.3em 0 -0.1em 0 ;
  }



.toujitu-numbr{
	color: #4E3400;
    font-size: 3.5em;
	font-weight: 800;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin: -0.5em 0 0 0;
	
}	

.num-red {
  font-size: 2.5em;
  font-weight: 800;
  color: #B17400;  /* 文字色を赤にする */
  display: inline-block;  /* 下に下げるためにブロック化する */
  transform: translateY(0.07em); /* 10px下に下げる */
  margin: 0 0.1em 0 0;
}
	
.toujitu-hnbn{color:#4E3400;}	


.toujitu-cntnr-waku{
  width: 90%;
  max-width: 1200px;      /* コンテナの最大幅 */
  margin: 0 auto;         /* 画面中央に配置 */
  box-sizing: border-box;
  padding: 0 3vw 2vw ;
  border: 2px solid #4E3400;
  border-radius: 20px;
  background-color:#F0D69F;
}
 /* 	
@media (min-width: 321px)and (max-width: 1000px) {	
	.flex-container	{ margin: 0 0 -0.3em 0;}
	.toujitu-text-box{ font-size: 1.0em;  color: #4E3400;}	
	.toujitu-cntnr-waku{ background-color: #F0D69F;}
}

	 /* コ#F0D69F  背景色*/
@media (max-width: 1000px) {	
	.flex-container	{ margin: 0 0 -0.3em 0;}
	.toujitu-text-box{ font-size: 1.0em;  color: #4E3400;}	
	.toujitu-cntnr-waku{ }
	.num-red {font-size: 3.0em;font-weight: 800;}
	.toujitu-numbr{font-size: 2.5em;font-weight: 800;}
}

	 /* コ#F0D69F  背景色*/
@media (max-width: 700px) {	
	.flex-container	{ margin: 0 0 -0.3em 0;}
	.toujitu-text-box{ font-size: 1.0em;  color: #4E3400;}	
	.toujitu-cntnr-waku{ }
	.num-red {font-size: 3.0em;font-weight: 800;}
	.toujitu-numbr{font-size: 2.0em;font-weight: 800;}
}


@media (max-width: 330px) {	
	.flex-container	{ margin: 0 0 -0.3em 0;}
	.toujitu-text-box{ font-size: 1.0em;  color: #4E3400;}	
	.toujitu-cntnr-waku{ width: 100%}
	.num-red {font-size: 3.0em;font-weight: 800;}
	.toujitu-numbr{font-size: 1.1em;font-weight: 800;}
	.toujitu-mdsi{font-size: 1.0em;font-weight: 800;
		          letter-spacing: -0.2px;border-radius: 156px;margin: 2px 0px;}
}