body {
	font-family: "UDDigiKyokasho R JIS2004";
	background-color:#fff;
	margin:auto;
}

div {
	overflow:hidden;	
}

#content_base {
	margin-top:20px;
	max-width: 1330px;
	margin:auto;
}

#content {
  margin: auto;
  background-color: #fff;
  box-sizing: border-box;
}

#header {
}

h1 {
	float:left;
	margin-left:20px;
}

#head_phone {
	float:right;
	margin-bottom:10px;
	margin-top:10px;
	margin-right:10px;
}

#head_phone_smp {
	display:none;
}



#head_today_link {
	float:right;
	margin-right:30px;
	margin-top:10px;
	margin-bottom:10px;
}

#head_today_link_smp {
   display:none;
}

#main_menu {
  background-color: #63a4f7;
  min-height: 45px;
  clear:both;

}

#main_menu ul {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}

#main_menu ul li {
  display: inline-block;
  margin: 0 10px;
  position: relative;
  font-size: 20px;
}

#main_menu ul li:not(:last-child)::after {
  content: "|";
  margin-left: 14px;
  color: #fff;
  line-height: 45px; /* ← 縦中央に揃える */
}

#main_menu a {
  color: #fff;
  text-decoration: none;
  line-height: 45px; /* ← リンクテキストも縦中央に */
  padding:2px 10px;
  border-radius:20px;
}

#main_menu a:hover {
	background-color:#fff;
	color:#4172b1;
	padding:2px 10px;
	border-radius:20px;
}

.icon_center {
	display:block;
	margin:20px auto;
}

.crb {
	clear:both;
}

.drs {
	display:block;
	margin:80px auto;
}


#box1 {
	padding:20px 50px;
}

.box2 {
	background-color:#eef3fe;
	padding:50px 50px;
}




#msg1 {
	font-size:20px;
	margin:50px 70px;
	line-height:2em;
}

.msg2 {
	font-size:18px;
	margin:0px 70px;
	line-height:2em;
}

#bd1 {
	float:left;
	margin-left:150px;
	margin-top:40px;
	zoom:80%;
}

#bd2 {
	float:left;
	margin-left:60px;
}

#bd3 {
	float:left;
	margin-left:50px;
}

#yotei_mei {
	display: block;
	margin-bottom: 10px;
}

.waku {
	clear:both;
}

#box3 {
	padding:100px 50px;
}

.image-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.image-grid .row {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.image-grid img {
	height: auto;
}

#box4 {
	background-color:#eef3fe;
	padding:30px 0px;
}





footer {
	text-align:center;
	letter-spacing: 1px;
	color:#fff;
	background-color:#63bdf7;
	padding:5px 0px;
}

@media screen and (max-width: 581px) {
  #content {
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
  }

  #kiji_area {
	width: 100%;
	margin: 20px auto;
	height: auto;
  }

  #box1, .box2, #box3, #box4 {
	padding: 20px;
  }

  #bd1, #bd2, #bd3 {
	float: none;
	margin: 10px auto;
	text-align: center;
  }

  #main_menu ul li {
	display: block;
	margin: 10px 0;
  }

  #main_menu ul li:not(:last-child)::after {
	content: "";
  }
}


img {
  max-width: 100%;
  height: auto;
}



@media (max-width: 1014px) {
  /* 電話画像を中央揃え */
  #head_phone {
	display: block;
	margin: 10px auto;
	border: 1px solid #fff;
  }

  /* 当日予約リンク画像を右寄せ */
  #head_today_link {
	display: block;
	margin: 10px 10px 10px auto;
	border: 1px solid #fff;
	width: fit-content;
  }

  /* 他の画像との余白を調整するならここで追加 */
}


#box2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 幅が狭いときに折り返す */
  gap: 20px;       /* 要素間の間隔を確保 */
}

#cbox2 {
  width:700px;
  max-width: 100%; /* 狭い画面でははみ出さない */
  margin: 0 auto;  /* 中央寄せ */
}

.pcbr {display:block;}