/* 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%;
	}

}
h3.m3{
	font-weight: normal;
	font-size:1rem;
	text-align: center;
	padding:0;
	margin:30px 0 0;
}
/********* イベントコース選択 select ******************************************/
.select_box{
	width:100%;
	padding:10px 0;
	background:#fff;
}
.mess_txt{
	width:60%;
	margin:0 auto;
	text-align: center;
	font-size:95%;
}
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: 50%;
	margin:0 auto;
	/*height:50vh;*/
	border-collapse: collapse;
	background: white;
	table-layout: fixed;
}
table.calendar th, table.calendar td {
	border: 1px solid #ccc;
	padding: 5px;
	vertical-align: top;
	height: 50px;
	width: 14.28%;
}
table.calendar th {
	background: #f0f0f0;
	font-weight: bold;
	vertical-align: middle;
	font-size: 1.1rem;
}
.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;
}

.week{
	width:100%;
	height:auto;
	margin:20px 0;
}
.week ul{
	width:100%;
	padding:10px;
	background:#ccc;
}

/********* スマホ ******************************************************/
@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%);
	}
}
/********* 20260224 追記 *****************************************************/
.has-event {
    background-color: #ffe8a3;
    position: relative;
}

.has-event::after {
    content: "";
    width: 6px;
    height: 6px;
    background: #ff6600;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.week-box {
    max-width: 900px;
    margin: 40px auto;
	padding-top: 10px;
	border-top: 3px solid #ccc;
}

.week-box h2 {
    margin-bottom: 20px;
}

.week-event {
    border: 2px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    background: #fafafa;
    border-radius: 8px;
}

.week-date {
    font-weight: bold;
    margin-bottom: 10px;
}




.event {
    background: #fff;
    padding: 8px;
    margin: 6px 0;
    border-radius: 6px;
    border-left: 4px solid #007bff;
}

.full {
    color: red;
    font-weight: bold;
}

.pre-open {
    color: orange;
    font-weight: bold;
}

.week-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
}

.week-nav button {
    padding: 8px 16px;
    background: #007bff;
    border: none;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.week-nav button:hover {
    background: #0056b3;
}

.week-range {
    font-weight: bold;
    font-size: 18px;
}
/*
.week-box {
    max-width: 700px;
    margin: 0 auto;
}
*/
.week-event {
    margin-bottom: 20px;
}

.week-date {
    font-weight: bold;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

.event {
    background: #fff;
    padding: 10px;
    margin: 6px 0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.full {
    color: red;
    font-weight: bold;
}

.pre-open {
    color: orange;
    font-weight: bold;
}

.calendar-day {
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 4px;
}

.calendar-day:hover {
    background: #007bff;
    color: white;
}


/* ================================
   基本レイアウト
================================ */

body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

#calendar-container {
    width: 95%;
    margin: 0 auto;
}

.week-box {
    width: 95%;
    margin: 40px auto;
}

.day-list {
    display: none;
}
h3.m4{
	display: none;
}
/* ================================
   タブレット対応（1024px以下）
================================ */
@media screen and (max-width: 1024px) {

    #calendar-container {
        width: 98%;
    }

    .week-box {
        width: 98%;
    }
}

/* ================================
   スマホ対応（768px以下）
================================ */
@media screen and (max-width: 768px) {

    /* 月カレンダー非表示 */
    #calendar-container {
        display: none;
    }

    .week-box {
        display: none;
    }
	h3.m3{
		display:none;
	}
	h3.m4{
		display: block;
		padding:20px 0;
		font-weight: normal;
	}

    /* スマホ日付一覧表示 */
    .day-list {
        display: block;
        padding: 10px;
    }

    .day-card {
        border: 1px solid #ddd;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    .day-header {
        padding: 10px;
        font-weight: bold;
        font-size: 14px;
    }

    .day-header.sunday {
        background: #ffe5e5;
        color: #c00;
    }

    .day-header.saturday {
        background: #e5f0ff;
        color: #0066cc;
    }

    .day-header.holiday {
        background: #ffd6d6;
        color: #c00;
    }

    .day-header.weekday {
        background: #f5f5f5;
    }

    .event {
        padding: 10px;
        border-top: 1px solid #eee;
        font-size: 14px;
    }

    .event a {
        color: #0073aa;
        text-decoration: none;
        font-weight: bold;
    }

    .event a:hover {
        text-decoration: underline;
    }

    .full {
        color: red;
        font-weight: bold;
    }
}

.mobile-nav {
    display: none;
}

@media screen and (max-width: 768px) {

    .mobile-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-weight: bold;
        background: #f8f8f8;
        border-bottom: 1px solid #ddd;
    }

    .mobile-nav button {
        padding: 5px 10px;
        border: none;
        background: #0073aa;
        color: #fff;
        border-radius: 5px;
    }
}