/* css reset */
@charset "utf-8";
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, img, a,
ol, ul, li,
form, label,
table, tbody, tfoot, thead, tr, th, td,
article,footer, header, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	list-style: none;
	text-decoration: none;
	vertical-align: baseline;
}
/*
body {
	font-family: sans-serif; 
	padding: 20px; 
	background: #f7f7f7;
}
*/
body { 
	font-family: sans-serif; 
	padding: 1em; 
	background: #fff;	/*#f5f5f5;*/ 
}
.rt{float:right;}
a:hover{color:red;}
.container { 
	width: 100%; 
	margin: 0 auto;
}

/*********** カレンダータイトル ***************************************************************/
header{
	width:100%;
	padding:10px 0;
	margin:0;
	text-align: center;
	/*border-bottom: 1px solid #ccc;*/
	box-shadow: 1px 0 5px 1px #999;
	background:#2589d0;
}
h1.mix{
	color:#fff;
}
@media (max-width: 768px) {
	header{
		padding:20px 0;
	}
	h1.mix{
		font-size: 1.2rem;
	}
}
/****** 年度NAV *********************************************************************************/

.nav{
	display:flex;
	align-items: center;
	width:60%;
	margin:0 auto;
	padding:30px 0;
	/*background:#fff000;*/
}
.nav a{
	margin:0 auto;
	color:#000;
}
.nav a:hover{
	color:#2589d0;
}
.nav a span{
	display:inline-block;
	padding:0 10px;
	font-weight:bold;
}
.nav .nendo{
	font-size: 1.2rem;
	font-weight: bold;
	border:1px solid #ccc;
	padding:10px 15px;
}
@media (max-width: 768px) {
	.nav{
		width:100%;
	}

}


/********* イベントコース選択 select ******************************************/
.select_box{
	width:100%;
	padding:10px 0;
	background:#fff;
}
.mess_txt{
	width:60%;
	margin:0 auto;
	text-align: center;
}
form {
    text-align: center;
	padding:20px 0 0;
}
.selectbox-2 {
    display: inline-block; /* ← form の中央に配置される */
    position: relative;
}
.selectbox-2::before,
.selectbox-2::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
.selectbox-2::before {
    right: 0;
    display: inline-block;
    width: 2.8em;
    height: 2.8em;
    border-radius: 0 3px 3px 0;
    background-color: #2589d0;
    content: '';
}
.selectbox-2::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
}
.selectbox-2 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em 3.6em .4em .8em;
    border: 2px solid #2589d0;
    border-radius: 3px;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}
.selectbox-2 select:focus {
    outline: 1px solid #2589d0;
}
@media (max-width: 768px) {
	.mess_txt{
		width:90%;
		margin:0 auto;
		text-align: center;
}
}
/*********** カレンダーTable CSS *************************************************************/
table.calendar {
	width: 100%;
	border-collapse: collapse;
	background: white;
	table-layout: fixed;
}
table.calendar th, table.calendar td {
	border: 1px solid #ccc;
	padding: 5px;
	vertical-align: top;
	height: 100px;
	width: 14.28%;
}
table.calendar th {
	background: #f0f0f0;
	font-weight: bold;
	vertical-align: middle;
	font-size: 1.5rem;
}
.sunday {
	color: red;
}
.saturday {
	color: blue;
}
.weekday {
	color: black;
}
.holiday {
	color: red;
	font-weight: bold;
}
.event {
	margin-top: 5px;
	font-size: 0.9em;
}
.full {color: red;
	font-weight: bold;
}
.warning {
	color: orange;
}

/********* スマホ ******************************************************/
@media (max-width: 768px) {
	table.calendar {
		display: none;
	}
    .day-list {
		display: block;
	}
    .day-card {
        background: white;
		border: 1px solid #ccc;
		border-radius: 5px;
        margin-bottom: 10px;
		padding: 10px;
    }
    .day-header {
        font-weight: bold;
		border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
		margin-bottom: 5px;
    }
}
/********* スマホ ******************************************************/
@media (max-width: 768px) {
	/* スマホ基本レイアウト */
	.day-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 10px;
	}

	/* 各日付ブロック */
	.day-item {
		background: #fff;
		border-radius: 10px;
		padding: 14px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
		border-left: 6px solid #ccc; /* 曜日カラーで上書き */
	}

	/* 日付表示 */
	.day-item .day-num {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 8px;
	}

	/* 曜日ごとの色 */
	.day-item.sunday {
		border-left-color: #e53935;
		color: #d32f2f;
	}
	.day-item.saturday {
		border-left-color: #1e88e5;
		color: #1565c0;
	}
	.day-item.holiday {
		border-left-color: #e53935;
		color: #d32f2f;
	}
	.day-item.weekday {
		border-left-color: #616161;
		color: #333;
	}

	/* イベント枠 */
	.event {
		background: #f7f7f7;
		padding: 12px;
		border-radius: 8px;
		margin-top: 8px;
		box-shadow: inset 0 0 4px rgba(0,0,0,0.05);
	}

	/* イベントタイトル（リンク） */
	.event .title,
	.event a.title {
		font-size: 16px;
		font-weight: 700;
		color: #333;
		text-decoration: none;
		display: block;
		margin-bottom: 6px;
	}

	/* 受付前（事前公開） */
	.pre-open {
		background: #ffeb3b;
		color: #795548;
		padding: 4px 8px;
		border-radius: 5px;
		font-weight: bold;
		display: inline-block;
		margin-top: 5px;
	}

	/* 受付終了 */
	.full {
		background: #e57373;
		color: white;
		padding: 4px 8px;
		border-radius: 5px;
		font-weight: bold;
		display: inline-block;
		margin-top: 5px;
	}

	/* 開始時間・空き状況 */
	.event div {
		font-size: 14px;
		margin-top: 3px;
	}
}

/********** PC ******************************************************/
@media (min-width: 769px) {
    .day-list {
		display: none;
	}
}

/********** pre_event css *********************************************/
.wrap_s{
	width:600px;
	margin:0 auto;
	padding:10px 20px;
	margin-top:50vh;
	background:#f0f0f0;
}
.wrap_s h2{
	text-align:center;
	padding:10px;
	background:#2589d0;
	color:#fff;
}
.wrap_s .mmg{
	padding:20px 10px;
	background:#fff;
}
.wrap_s .foot_tx{
	width:100%;
	padding:20px 0;
	text-align:center;
}
.wrap_s .bck{
	border:0;
	line-height:2.5;
	padding:0 20px;
	font-size:1rem;
	text-align:center;
	color:#fff;
	text-shadow: 1px 1px 1px #000;
	border-radius: 10px;
	background-color:rgb(220 0 0 / 100%);
	background-image:linear-gradient( to top left,
	rgb(0 0 0 / 20%),
	rgb(0 0 0 / 20%) 30%,
	rgb(0 0 0 / 0%)
	);
	box-shadow: inset 2px 2px 3px rgb(255 255 255 / 60%),
				inset -2px -2px 3px rgb(0 0 0 / 60%);
}
.wrap_s .bck:hover{
	background-color:rgb(255 0 0 / 100%);
}
/********** スマホ *****************************************/
@media (max-width: 768px) {
	body{
		background:#f0f0f0;
	}
	.wrap_s{
		width:96%;
		margin:0 auto;
		padding:10px;
		margin-top:20vh;
		background:#f0f0f0;
	}
	.wrap_s h2{
		text-align:center;
		font-size: 1.1rem;
		padding:10px;
		background:#2589d0;
		color:#fff;
	}
	.wrap_s .mmg{
		padding:40px 10px;
		background:#fff;
	}
	.wrap_s .foot_tx{
		width:100%;
		padding:20px 0;
		text-align:center;
	}
	.wrap_s .bck{
		border:0;
		line-height:2.5;
		padding:0 40px;
		font-size:1rem;
		text-align:center;
		color:#fff;
		text-shadow: 1px 1px 1px #000;
		border-radius: 10px;
		background-color:rgb(220 0 0 / 100%);
		background-image:linear-gradient( to top left,
		rgb(0 0 0 / 20%),
		rgb(0 0 0 / 20%) 30%,
		rgb(0 0 0 / 0%)
		);
		box-shadow: inset 2px 2px 3px rgb(255 255 255 / 60%),
					inset -2px -2px 3px rgb(0 0 0 / 60%);
	}
	.wrap_s .bck:hover{
		background-color:rgb(255 0 0 / 100%);
	}
}