@charset "utf-8";
/* グリッド */
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 左右2カラム */
	grid-auto-rows: minmax(200px, auto); /* 上下2行（高さはコンテンツに合わせて伸びる） */
	gap: 20px;
	max-width: 1600px;
	margin: 0 auto;
	padding-bottom: 50px;
}




/* 各カード */
.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(15,20,30,0.06);
  display: flex;                /* 横並びにする */
  flex-direction: row;          /* 左右分割 */
  gap: 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(15,20,30,0.10); }


.card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.card p { color: #555; line-height: 1.6; }


/* 特定のマスを大きく使いたい場合（例：左上を1.5行に跨らせる等）はここを調整できます） */
/* 例：.card--tall { grid-row: span 2; } */


/* 左右のパネル */
.card-left {
flex: 3; /* ← 左を広めに */
  padding-right: 5px;
}
.card-right {
 flex: 2; /* ← 右を少し狭く */
  padding-left: 20px;
border: 2px solid #D5C4AD;
	border-radius: 10px;	
	background-color: #FFFDEF;
  }

  /* 大きな番号 */
  .number {
	font-size: 56px;
	font-weight: 800;
	color: #FFCE00;
	line-height: 1;
	margin-bottom: 14px;

  }

  /* 写真と名前 */
  .photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 0px solid #E7D2B7;
	display: block;
	margin-bottom: 12px;
	float: right;
  }
  .name {
	font-size: 1.8em;
	font-weight: 700;
	margin-bottom: 8px;
	  color: #6B3F0C;
  }

  .subtitle {
	font-size: 1.1em;
	font-weight: 700;
	color: #A8782B;
	margin-top: 1em;
	margin-bottom: 8px;
	margin-left: 0px;
  }

  .info-list {
	margin-top: 0;
	margin-right: 0;
	margin-left: 18px;
	margin-bottom: 1em;
	padding-top: 0;
	padding-right: 0;
	padding-left: 1em;
	padding-bottom: 0;
	line-height: 1.6;
	list-style-type: disc;
	font-size: 0.9em;
	color: #414141;
  }

  /* 出勤（曜日行 + 参加/不参加行） */
  .schedule-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.9em;
  }
  .schedule-table th,
  .schedule-table td {
    border: 1px solid #e6e9ef;
    padding: 8px 6px;
  }
  .schedule-table th {
	background: #f3f6fb;
	font-weight: 700;
	color: #775A33;
  }
  .schedule-table td.houmon {
	background-color: #A3947F;
	color: #fff;
	font-weight: 700;
  }
  .schedule-table td.daycare {
	background-color: #CDE9E0;
	color: #36656F;
	font-weight: 700;
  }
  .schedule-table td.kuhaku {
    background: #f3f4f6;
    color: #6b7280;
  }
  .schedule-table td.yasumi {
	background-color: #FFFFFF;
	color: #B9696B;
	font-weight: 700;
  }
  .schedule-table td.lodging {
	background-color: #D5E0F3;
	color: #2E3858;
	font-weight: 700;
  }

  /* 右側：枠付きリスト */
  .card-right ul {
	list-style-type: disc;
	padding-top: 15px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0.8em;
	margin-right: 0.8em;
	color: #D5C4AD;
  }
.card-right ul span{
	color: #3B3B3B;
}
  .card-right li {
	padding-left: 0.2em;
	font-size: 1em;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
  }
.card-right p{
	font-size: 0.9em;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 1em;
	padding-right: 1em;
}
/* レスポンシブブレイクポイント */
@media (max-width: 1000px) {
.page { padding: 24px; }
.grid { gap: 16px; grid-template-columns: repeat(2, 1fr); }
.card { padding: 16px; }
}
/* スマホ表示（縦積み） */
@media (max-width: 860px) {
  .card {
    flex-direction: column; /* 左右分割 → 縦積み */
  }
  .card-left {
    border-right: none;
    border-bottom: 1px solid #eef2f6;
    padding-right: 0;
    padding-bottom: 16px;
  }
  .card-right {
	padding-left: 1em;
	padding-top: 1em;
  }
  /* 右側：枠付きリスト */
  .card-right ul {
	list-style-type: disc;
	padding-top: 15px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 1.5em;
	margin-right: 1.5em;
	color: #D5C4AD;
  }	
}


@media (max-width: 600px) {
/* スマホでは縦1列表示にして読みやすく */
.grid { grid-template-columns: 1fr; }
.card { padding: 14px; }
}