@media(max-width:300px){
	#headelement, #bodyelement, #recommendation, .places, #footer, #copyright{
		display:none;
	}
	#caution{
		display:block;
		color:black;
		top:50%;
		margin:10px;
		writing-mode:vertical-rl;
	}
}
@media(min-width:300px){
	#caution{
		display:none;
	}
}
h3{
	font-size:22px;
	font-weight:600;
	border-left:solid;
	padding-left:15px;
	margin:10px 0px;
}
@media(min-width:750px){
	p{
		font-size:16px;
		margin-left:20px;
		margin-right:20px;
	}
	#bodyelement{
		margin:30px;
		margin-right:auto;
		margin-left:auto;
		width:700px;
		overflow:hidden;
	}
	.contentstitle{
		width:700px;
		margin-top:30px;
		padding:10px;
		text-align:center;
		margin-right:auto;
		margin-left:auto;
		font-size:30px;
		border-top:solid;
		border-bottom:solid;
		border-width:2px;
	}
}
@media(max-width:750px){
	h3,ul,p{
		line-height:2em;
	}
	p{
		font-size:16px;
	}
	#bodyelement{
		padding:20px;
	}
	.contentstitle{
		padding:10px 0;
		text-align:center;
		font-size:30px;
		border-top:solid;
		border-bottom:solid;
		border-width:2px;
	}
}
#calendar{
}
#tabbutton{
	width:100%;
	padding:0;
	margin:0;
	background-color:white;
	border:none;
	/*border-bottom:solid 1px #cccccc;*/
	text-align:center;
	display:flex;
	font-weight:500;
	}
#tabbutton label{
	color:white;
	cursor:pointer;
	text-align:center;
	padding-bottom:0.5em;
	padding-top:0.5em;
	width:25%;
	margin:0;
	color:black;
	border-bottom:solid 2px #eeeeee;
	float:left;
	display:block;
	transition:all ease 0.3s;
}


#tabbutton label:hover{
	border-color:#bbbbbb;
}
section{
	display:none;
}
input{
	display:none;
}

#spring:checked ~ #tabbutton label[for = "spring"],
#summer:checked ~ #tabbutton label[for = "summer"],
#automn:checked ~ #tabbutton label[for = "automn"],
#winter:checked ~ #tabbutton label[for = "winter"]{
	background-color:white;
	font-weight:600;
	color:forestgreen;
	border-bottom:solid 2px forestgreen;
}
#spring:checked ~ #tabcontents section:nth-child(1),
#summer:checked ~ #tabcontents section:nth-child(2),
#automn:checked ~ #tabcontents section:nth-child(3),
#winter:checked ~ #tabcontents section:nth-child(4){
	display:inherit;
}

#calendar table{
	margin-top:15px;
	width:100%;
	border-spacing:0;
	table-layout:fixed;
}
#calendar th{
	font-weight:600;
	text-align:center;
	/*border-bottom:solid 1px #cccccc;*/
	border-right:solid 2px black;
	padding:0.2em 0;
	/*background-color:#eeeeee;
	color:white;*/
}
#calendar th:last-child{
	border-right:none;
}
#calendar td{
	margin:0;
	padding:0;
	padding-left:5px;
	padding-top:20px;
	padding-bottom:2px;
	color:#333333;
	font-size:15px;
	font-weight:500;
}

#calendar td:after{
	font-size:10px;
	color:white;
	display:inline-block;
	padding:0.3em 0.6em;
	text-align:center;
	vertical-align:center;
	border-radius:3px;
	position:relative;
	left:10px;
	bottom:2px;
}
.f,.fr,.b,.br,.r,.rr,.y,.yr{
	border-bottom:solid 1px;
	text-align:left;
}
.f, .fr{
	border-color:#6495ED;
}

.f:after, .fr:after{
	content:"花";
	background-color:#6495ED;
}
.b, .br{
	border-color:forestgreen;
}
.b:after, .br:after{
	content:"実";
	background-color:forestgreen;
}
.r, .rr{
	border-color:tomato;
}
.r:after, .rr:after{
	content:"紅";
	background-color:tomato;
}
.y, .yr{
	border-color:orange;
}
.y:after, .yr:after{
	content:"黄";
	background-color:orange;
}



#calendar .fr, #calendar .br,#calendar .rr, #calendar .yr{
	font-weight:600;
}
#calendar .fr{
	color:#6495ED;
}
#calendar .br{
	color:forestgreen;
}
#calendar .rr{
	color:tomato;
}
#calendar .yr{
	color:orange;
}
.c2{
	visibility:hidden;
}
.cSeasons{
	padding:10px 0;
	font-weight:600;
	font-size:17px;
}