.places{
	z-index:0;
}
body{
	margin:0px;
	background-color:white;
}
*{
	font-family:"游ゴシック";
	text-decoration:none;
}

a{
	text-decoration:none;
	color:black;
}
ul{
	margin:0px;
	margin-left:20px;
	padding:0px;
	color:black;
	width:300px;
	text-align:left;
}
li{
	list-style-type:none;
	font-size:18px;
	margin:5px;
	text-align:left;
	font-weight:600;
}
li:hover{
	filter:opacity(25%);
	color:forestgreen;
	-webkit-transition:all 0.3s ease;
}
table{
	border-spacing:10px 0px;
}
#development{
	transition:all ease 0.3s;
	font-size:17px;
	text-align:center;
	width:300px;
	margin:0px auto;
	margin-top:50px;
	padding:0.3em;
	background-color:#555555;
	border-radius:5px;
}
#development a{
	font-weight:500;
	color:white;
}
#development:hover{
	transition:all ease 0.3s;
	background-color:#555555;
}




#headelement th:hover{
	filter:opacity(75%);
	-webkit-transition:all 0.3s ease;
}
#bodyelement, #recommendation, #seasons, #places{
	z-index:0;
}
.contentstitle{
	width:300px;
	margin:30px;
	margin-right:auto;
	margin-left:auto;
	padding:5px 0px;
	text-align:center;
	font-size:30px;
	border-left:solid;
	border-right:solid;
}
/*
h3::after{
	content:" ";
	width:80px;
	height:3px;
	background-color:#aaaaaa;
	bottom:-8px;
	padding:5px 0;
}
h3{
	border-bottom:solid;
	border-width:3px;
	border-color:#cccccc;
}
*/
@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;
	}
}


#graph1{
	display:inline-block;
	width:200px;
	height:200px;
	border-radius:50%;
	background-image:conic-gradient(
		gold 0,
		gold 50%,
		royalblue 50%,
		royalblue 93%,
		tomato 93%,
		tomato 100%
	);
	margin:30px;
}
#graph1::after{
	content:"60種";
	text-align:center;
	line-height:150px;
	font-size:35px;
	font-weight:600;
	position:relative;
	width:150px;
	height:150px;
	border-radius:50%;
	top:25px;
	left:25px;
	background-color:white;
	display:block;
}
#graph1-s{
	display:inline-block;
	border-spacing:0 10px;
	vertical-align:top;
	margin:30px 0;
}
#graph1-s th{
	color:black;
	margin:10px;
	font-size:17px;
	font-weight:600;
	text-align:left;
	border-radius:50%;
}
.counter, .seikaku{
	padding:0 1em;
	border-radius:0;
}
#info-1{
	display:inline-block;
}
#info-2{
	display:inline-block;
	vertical-align:top;
	width:calc(100% - 560px);
	margin:30px 30px;
	padding:0;
}
@media(max-width:800px){
	#info-2{
		width:calc(100% - 40px);
		margin:20px;
		padding:0;
	}
	#info-1{
		display:inline;
		text-align:center;
	}
}
@media(max-width:500px){
	#graph1{
		text-align:center;
		width:calc(100% - 60px);
		height:calc(100vw - 90px);
	}
	#graph1::after{
		width: calc((100vw - 90px) * 0.8);
	    height: calc((100vw - 90px) * 0.8);
	    top: calc((100vw - 90px) * 0.1);
	    left: calc((100vw - 90px) * 0.1);
	    line-height:calc((100vw - 90px) * 0.8);
	    font-size:calc((100vw - 90px) * 0.8 * 35 / 150);
	}
	#graph1-s{
		margin:20px;
	}
}


#Besttime{
	text-align:center;
	padding:30px 20px;
	width:calc(100% - 40px);
	margin:20px 0;
	text-align:left;
	border-radius:10px;
	box-shadow: 0 0 5px #CCCCCC;
}
#Besttime:before{
	content:"更新｜2019/06/02";
	font-size:15px;
	background-color:tomato;
	font-weight:600;
	color:white;
	padding:5px 15px;
	position:relative;
	left:-20px;
}
.flower, .blossom, .leaves{
	font-weight:600;
	font-size:20px;
}
.Bclassification, .Blocation{
	font-size:17px;
	font-weight:600;
	color:#cccccc;
}
#Besttime img{
	display:inline-block;
	vertical-align:top;
	margin:10px 20px;
	overflow:hidden;
	object-fit:cover;
}
#Besttime li{
	padding:20px 0;
	margin:0px;
	text-align:left;
	font-size:16px;
	border-bottom:solid 2px #dddddd;
}
#Besttime li:hover{
	filter:opacity(100%);
	color:black;
	-webkit-transition:all 0.3s ease;
}
#Besttime li:last-child{
	border-bottom:none;
}
.detail{
	font-weight:500;
	margin:0;
	margin-top:20px;
	padding:0;
}
.flower, .blossom, .leaves{
	margin:5px 0;
}
.Bclassification, .Blocation{
	padding:0;
	margin:0;
	display:block;
		
}

@media(min-width:900px){
	#Besttime:before{
		position:relative;
		left:0px;
	}
	#Besttime{
		background-color:white;
		margin:0;
		margin-bottom:30px;
	}
	#Bcontainer{
		display:flex;
		flex-direction:row;
		justify-content:space-around;
	}
	#Besttime img{
		display:block;
		width:100%;
		height:calc(((100vw - 70px) / 3 - 40px) * 0.75);
		margin:0;
		padding:0;
	}
	.flower, .blossom, .leaves{
		margin-top:20px;
	}
	#Besttime li{
		display:block;
		border-bottom:none;
		padding:20px;
		width:calc((100% - 40px) / 3);
	}
	#detail{
		width:100%;
	}
}
@media(max-width:900px){
	#Besttime img{
		display:inline-block;
		width:100px;
		margin:0;
		margin-left:auto;
		margin-right:auto;
	}
	.Btop{
		display:inline-block;
	}
	.Bclassification, .Blocation{
		margin-left:20px;
	}
	.flower, .blossom, .leaves{
		margin-left:20px;
	}
}
@media(min-width:1100px){
	#Besttime:before{
		position:relative;
		left:0px;
	}
	#Besttime{
		width:1000px;
		margin:30px auto;
		background-color:white;
		text-align:center;
	}
	#Besttime img{
		height:calc((1000px / 3 - 40px ) * 0.75);
	}
}


@media(min-width:600px){
	#article2{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-self:stretch;
	}
	.article2{
		padding-top:0px;
		padding-bottom:20px;
		text-align:center;
		background-color:white;
		margin-right:15px;	
		margin:15px 30px;
		width:300px;
	}
	#Bcontent{
		display:block;
		padding-bottom:20px;
	}
	.articletitle2{
		color:black;
		font-size:16px;
		font-weight:600;
		margin:5px;
		text-align:left;
		margin-left:auto;
		margin-right:auto;
		width:260px;
		overflow:hidden;
	}
	
	.articledate2{
		color:#CCCCCC;
		font-size:15px;
		text-align:right;
		margin:0px;
		margin-right:auto;
		margin-left:auto;
		width:260px;
	}
	figure{
		width:300px;
		height:200px;
	}
	.articlepic2{
		width:300px;
		height:200px;
		object-fit:cover;
		-webkit-transition:all 0.2s ease;
	}
	.articletitle2{
		width:85%;
	}
	
	.articledate2{
		color:#CCCCCC;
		font-size:15px;
		text-align:right;
		margin-right:auto;
		margin-left:auto;
		width:85%;
	}
}
@media(max-width:600px){
	.article2{
		display:block;
		margin:15px 0;
		text-align:center;
		background-color:white;
		width:100%;
		height:120px;
		font-size:15px;
	}
	
	.articletitle2{
		display:block;
	}
	.article2 .articlepic{
		display:block;
	}

	.articletitle2{
		width:calc(100% - 120px - 1.5em * 2);
		font-weight:600;
		font-size:15px;
		margin:0;
		margin-left:1.5em;
		margin-right:1.5em;
		margin-top:1em;
		overflow:hidden;
		display:block;
		float:left;
		text-align:left;
	}
	.articledate2{
		display:block;
		color:#CCCCCC;
		font-size:15px;
		position:absolute;
		margin:15px;
		margin-top:85px;
		right:15px;
	}
	.articlepic2{
		width:120px;
		height:120px;
		object-fit:cover;
		float:left;
	}

	#Bcontent{
		padding:30px;
	}
	.contentstitle{
		width:250px;
	}
	time{
		margin:10px 20px;
		margin-top:0;
		text-align:right;
	}
}

@media (min-width:900px){
	.article2{
		margin:15px 2%;
		width:29%;
	}
	figure{
		width:100%;
		height:calc((100vw - 20px - 12vw ) / 3 * 2 / 3);
	}
	.article2 .articlepic2{
		width:100%;
		height:calc((100vw - 20px - 12vw ) / 3 * 2 / 3);
		object-fit:cover;
	}
}
@media (min-width:1100px){
	.article2{
		margin:15px 2%;
		width:300px;
	}
	figure{
		width:300px;
		height:200px;
	}
	.article2 .articlepic2{
		width:300px;
		height:200px;
		object-fit:cover;
	}
}
@media (min-width:600px) and (max-width:900px){
	.article2{
		margin:15px 2%;
		width:46%;
	}
	figure{
		width:100%;
		height:calc((100vw - 20px - 120px ) / 2 * 2 / 3);
	}
	.article2 .articlepic2{
		width:100%;
		height:calc((100vw - 20px - 120px ) / 2 * 2 / 3);
		object-fit:cover;
	}
	
}

time{
	display:block;
	text-align:right;
	margin:0px 20px;
}
@media(min-width:600px){
	.article2{
		border-radius:0 0 10px 10px;
	}
}
@media(max-width:600px){
	.article2{
		border-radius:0 10px 10px 0;
	}
}

.article2{
	border:none;
	box-shadow:0 0 5px #bbbbbb;
}
.articlepic2{
	overflow:hidden;
}
label{
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	padding:0.3em 1.5em;
	border-radius:5px;
	border:none;
	margin:0px auto;
	background-color:#eeeeee;
	color:black;
	font-weight:600;
	font-size:17px;
	box-shadow:0 0 5px #bbbbbb;
	display:inline-block;
	text-align:center;
}
.labels label{
	margin:30px auto;
}
.labels{
	display:block;
	text-align:center;
}
label:hover{
	transform:translateY(5px);
}
input{
	display:none;
}
@media(min-width:600px){
	figure{
		padding:0;
		overflow:hidden;
		margin:0;
		margin-bottom:10px;
	}
	#article2 .articlepic2{
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: .2s ease-in-out;
		transition: .2s ease-in-out;
	}
	#article2 .articlepic2:hover{
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		filter:blur(3px);
	}
}
@media(max-width:600px){
	figure{
		margin:0;
		padding:0;
	}
}




@media(min-width:1100px){
	
	#bodyelement{
		margin:30px;
		margin-right:auto;
		margin-left:auto;
		width:1080px;
		overflow:hidden;
	}
	time{
		margin:10px 20px;
	}

}
@media(max-width:1100px){
	#bodyelement{
		width:100%;
		margin-right:0;
		margin-left:0;
	}
	#pickup{
		padding:15px;
	}
}


#bodyelement{
}
/*.contentstitle{
	padding:10px 0;
	text-align:center;
	font-size:30px;
	border-top:solid;
	border-bottom:solid;
	border-width:2px;
}*/

.rcmbtn1, .rcmbtn2{
	border-radius:0;
	width:50px;
	height:50px;
	line-height:25px;
	margin:0 auto;
	border:none;
	position:absolute;
	border-radius:50%;
}
.rcmbtn1:hover, .rcmbtn2:hover{
	background-color:white;
	color:forestgreen;
}
.rcmbtn1{
	left:50px;
}
.rcmbtn2{
	right:50px;
}
article{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-self:stretch;
	padding:0;
	text-align:center;
	width:1700px;
	margin-left:auto;
	margin-right:auto;
}

.js, .jk ,.rk{
	text-align:left;
	display:block;
	width:300px;
	padding:0px;
	font-weight:600;
	margin:20px 20px;
	border:none;
	border-bottom:solid 5px;
	box-shadow:0 0 10px #cccccc;
	background-color:white;
}
.listpic{
	width:300px;
	height:250px;
	object-fit:cover;
	margin:0;
}
.name{
	font-size:18px;
	color:black;
	width:250px;
	padding:5px 20px;
	margin:0;
	margin-top:0;
	font-weight:600;
}
#slider .classification{
	font-size:17px;
	font-weight:500;
	color:#aaaaaa;
	margin:0px 25px;
}
.text{
	font-size:17px;
	font-weight:400;
	margin:0px 25px;
	margin-bottom:30px;
}


@media(min-width:600px){
	#recommendation{
		padding-top:20px;
		background-color:#eeeeee;
		padding-right:auto;
		padding-left:auto;
		margin-right:auto;
		margin-left:auto;
		overflow-x:scroll;
	}
}


.flower::after,.leaves::after,.blossom::after{
	display:inline-block;
	position:relative;
	left:10px;
	padding:0.3em 0.6em;
	border-radius:5px;
	font-size:10px;
	font-weight:500;
	color:white;
}
.flower::after{
	background-color:#6495ED;
	content:"開花";
}
.blossom::after{
	filter:opacity(75%);
	background-color:forestgreen;
	content:"結実";
}
.leaves::after{
	background-color:orange;
	content:"紅葉・黄葉";
}









@media(min-width:1100px){

}
@media(max-width:1100px){
	#recommendation{
		padding-top:20px;
		background-color:#eeeeee;
		padding-right:auto;
		padding-left:auto;

		overflow-y:hidden;
		overflow-x:scroll;
	}
}


.places ul{
	margin:0px 20px;
	margin-left:20px;
}
.place_box{
	border:solid 3px black;
	background-color:#eeeeee;
}
.selectplace{
	font-weight:600;
	margin:0;
	background-color:none;
	color:black;
	padding:0px 20px;
	font-size:22px;
	/*border-radius:10px 10px 0 0 ;*/
}
.spring,.summer,.fall,.winter{
	display:inline-block;
	vertical-align:top;
	margin-top:10px;
	background-color:white;
}
.spring{
	border:solid 3px #ff99bb;
	/*background-color:#fff0f5;*/
}
.spring .selectplace{
	color:#ff99bb;
}
.summer{
	border:solid 3px forestgreen;
	/*background-color:honeydew;*/
}
.summer .selectplace{
	color:forestgreen;
}
.fall{
	border:solid 3px orange;
	/*background-color:#faefe1;*/
}
.fall .selectplace{
	color:orange;
}
.winter{
	border:solid 3px cornflowerblue;
	/*background-color:#e6efff;*/
}
.winter .selectplace{
	color:cornflowerblue;
}
.l-spring, .l-summer, .l-fall, .l-winter, .l-area {
	font-size:17px;
	border-radius:5px;
	padding:0.3em 1em;
	margin-left:20px;
	background-color:#ff99bb;
	color:white;
	display:inline-block;
}
.l-summer{
	background-color:forestgreen;
}
.l-fall{
	background-color:orange;
}
.l-winter{
	background-color:cornflowerblue;
}
.l-area{
	background-color:#333333;
}





.places img{
	object-fit:cover;
}
.places{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin:20px;
	margin-left:auto;
	margin-right:auto;
	font-size:30px;
	font-weight:500;
	color:black;
	width:720px;
}
.p1,.p2,.p3,.p4{
	display:inline-block;
	vertical-align:top;
	margin-top:10px;
}
.places img{
	width:260px;
	height:220px;
	margin:20px 20px;
	border-radius:10px;
}

.spring, .summer, .fall, .winter, .place_box{
	overflow:hidden;
	margin:20px;
	margin-bottom:30px;
	width:300px;
	border-radius:10px;
	box-shadow:0 0 5px #cccccc;
	padding:0;
	padding-bottom:20px;
}
@media(max-width:800px) and (min-width:600px){
	.places{
		width:calc(100vw - 40px);
	}
	.places img{
		width:calc(100% - 40px);
		height:calc((((100vw - 40px) * 15 / 17 - 12px) / 2 - 40px) * 11 / 13);
	}
	.spring, .summer, .fall, .winter, .place_box{
		width:calc(((100vw - 40px) * 15 / 17 - 12px) / 2);
		margin:calc((100vw - 40px ) * 2 / 68);
	}

}
@media(max-width:600px){
	.places{
		width:calc(100% - 20px );
	}
	.places img{
		width:calc(100% - 40px);
		height:calc((100vw - 60px - 6px - 40px) * 0.8);
	}
	.spring, .summer, .fall, .winter, .place_box{
		width:calc(100vw - 60px);
		margin:30 0px;
	}
}
.more{
	display:none;
}
input:checked ~ .more{
	display:block;
}