@charset "UTF-8";

.nav {
	margin-top: 45px;
	width: 100%;
	padding: 10px;
	background-color: #E7E7E7;
	border-bottom: #AEAEAE;
}
.nav ul {
	overflow: hidden;
}
.nav .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav .menu li {
	border: solid 1px #797979;
	border-radius: 8px;
	float: left;
	font-size: 12px;
	margin-right: 5px;	
}

.nav .menu li a {
  display: block;           /* ← aタグがliの全体を覆うように */
  padding: 5px 10px;
  background-color: #ffffff;
  color: #000;
  text-decoration: none;
  transition: background-color 0.3s;
  border-radius: 8px;
}


.logo {
	text-align: center;
	margin: 30px 0;
}
.menuBox {
	width: 90%;
	margin: 20px auto;
}	
.table {
  width: 100%;
  display: flex;
  flex-direction: column;	
}
.row {
  display: flex;
  border: 1px solid #ccc;
　font-size: 14px;
  align-items: center;

  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.rowh {
  display: flex;
  border: 1px solid #ccc;
　font-size: 16px;
  align-items: center;
  padding: 3px;
  border-bottom: 1px solid #ccc;
}

.cell {
  flex: 1; /* 各セルを等幅に */
  padding: 10px;
  border-right: 1px solid #ccc;
}

.cell:last-child {
  border-right: none;
}

.header {
  background-color:#E2E2E2;
  font-weight: bold;
}
.row:hover {
  background-color: #<?php echo $cl_color2 ?>;
}
input[type="radio"] {
  margin: 10px;
}
h3 {
	background-color: #A08A5D;
	padding: 20px;
	font-size: 22px;
	color: #FFFFFF;
}
table.timet {
    width: 100%;
    border-collapse: collapse;
}
table.timet th, table.timet td {
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
}
th {
    background-color: #f9f9f9;
}
a {
    color: red;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
#calendar-navigation {
    margin-bottom: 10px;
    text-align: center;
}
#calendar-navigation button {
    margin: 0 5px;
    padding: 6px 12px;
}

/* ▼ 横スクロールラッパー */
.ttTable-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ▼ テーブル */
.ttTable {
  border-collapse: collapse;
  min-width: max-content;
}

/* ▼ 共通セル */
.ttTable th,
.ttTable td {
  width: 45px;
  height: 25px;  
  border: 1px solid #ccc;
  padding: 12px 12px;
  text-align: center;
  white-space: nowrap;
  background: #fff;
}
/* 予約不可 */
.ttTable td.slot-ng {
    background: #FEFEFE;
    color: #B3B3B3;
}

/* 休診 */
.ttTable td.slot-closed {
    background: #FEFEFE;
    color: #B3B3B3;
}
/* =========================
   左端「時間」列を固定
========================= */
.ttTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

/* =========================
   上部ヘッダーを固定
========================= */
.ttTable th {
  position: sticky;
  top: 0;
  background: #f7f7f7;
  z-index: 3;
}

/* =========================
   ★ 左上「時間」セル固定
========================= */
.ttTable th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  background: #f0f0f0;
  z-index: 4; /* 最前面 */
}
/* 日付ヘッダのみ */
.ttTable th.sun {
    background: #FFF3F3; /* 日曜・祝日：うす赤 */
}

.ttTable th.sat {
    background: #E1EBF2; /* 土曜：うす青 */
}

/* ## width 767px 以下の場合の設定 (for All Mobile Dvices) ## */
@media (max-width: 767px) {

.nav {
	
	width: 100%;
	padding: 10px;
	background-color: #E7E7E7;
	border-bottom: #AEAEAE;
}
.nav ul {
	overflow: hidden;
}
.nav .menu {
  list-style: none;
  padding: 0;
  margin-top: 16px;
}

.nav .menu li {
	  width: calc(94%/2);
	border: solid 1px #797979;
	border-radius: 8px;
	float: left;
	font-size: 11px;
	margin: 5px;
	text-align: center;
}

.nav .menu li a {
  display: block;           /* ← aタグがliの全体を覆うように */
  padding: 5px 10px;
  background-color: #ffffff;
  color: #000;
  text-decoration: none;
  transition: background-color 0.3s;
  border-radius: 8px;
}

.nav .menu li a:hover {
  background-color: #<?php echo $cl_color2 ?>;
  cursor: pointer;          /* ← カーソルをポインターに */
}
.logo {
	text-align: center;
	margin: 30px 0;
	padding: 2%;
}
.logo img {
	width: 100%;
}
.menuBox {
	width: 90%;
	margin: 20px auto;
}	
.table {
  width: 100%;
  display: flex;
  flex-direction: column;	
}
.row {
  display: flex;
  border: 1px solid #ccc;
　font-size: 14px;
  align-items: center;

  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.rowh {
  display: flex;
  border: 1px solid #ccc;
　font-size: 16px;
  align-items: center;
  padding: 3px;
  border-bottom: 1px solid #ccc;
}

.cell {
  flex: 1; /* 各セルを等幅に */
  padding: 10px;
  border-right: 1px solid #ccc;
}

.cell:last-child {
  border-right: none;
}


.row:hover {
  background-color: #<?php echo $cl_color2 ?>;
}
input[type="radio"] {
  margin: 10px;
}
h3 {
	background-color: #A08A5D;
	padding: 8px;
	font-size: 16px;
	color: #FFFFFF;
}
table.timet {
    width: 100%;
    border-collapse: collapse;
}
table.timet th, table.timet td {
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
}
th {
    background-color: #f9f9f9;
}
a {
    color: red;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
#calendar-navigation {
    margin-bottom: 10px;
    text-align: center;
}
#calendar-navigation button {
    margin: 0 5px;
    padding: 6px 12px;
}

/* ▼ 横スクロールラッパー */
.ttTable-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ▼ テーブル */
.ttTable {
  border-collapse: collapse;
  min-width: max-content;
}

/* ▼ 共通セル */
.ttTable th,
.ttTable td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
  background: #fff;
	font-weight: bold;
}

/* =========================
   左端「時間」列を固定
========================= */
.ttTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

/* =========================
   上部ヘッダーを固定
========================= */
.ttTable th {
  position: sticky;
  top: 0;
  background: #f7f7f7;
  z-index: 3;
}

/* =========================
   ★ 左上「時間」セル固定
========================= */
.ttTable th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  background: #f0f0f0;
  z-index: 4; /* 最前面 */
}
#contents {
	max-width: 1000px;
	margin: 0 auto;
	padding: 4%;
	background-color: #ffffff;
	line-height: 1.4;
}	
	
}