@charset "utf-8";

@import url("../../style/variables.css");/*変数定義*/
	
:root{

}

#season_nav{
	ul{
		display:flex;
		justify-content: start;
		flex-wrap:wrap;
		gap:10px;
		li{
			--color_season:#379315;
			a{
				
				display:block;
				color:var(--color_season);
				font-size: 1.1rem;
				font-weight: 500;
				border:2px solid var(--color_season);
				border-radius: 10px;
				padding:.5em .7em;
			}
			&:nth-of-type(1){
				--color_season:#ff6060;
			}
			&:nth-of-type(2){
				--color_season:#ff0f15;
			}
			&:nth-of-type(3){
				--color_season:#ac3513;
			}
			&:nth-of-type(4){
				--color_season:#26478a;
			}
		}
	}
}

.season_box{
	--color_season:#379315;
	.section_title{
		color:var(--color_season);
		&::before{
			content:"■";
			margin:0 .3em 0 0;
			color:var(--color_season);
		}
	}
	.flower_list{
		scroll-margin-top: 100px;
		h3{
			padding-top:80px;
		}
		ul{
			display:flex;
			justify-content: start;
			flex-wrap:wrap;
			gap:.3em 10px;
			li{
				a{
					display:block;
					padding:.5em .5em;
					border:2px solid var(--color_season);
					font-weight: 600;
					border-radius: 10px;
					font-size: 1.1rem;
					color:var(--color_season);
					&:hover{
						background:var(--color_season);
						color:white;
					}
				}
			}
		}
		&:has(p){
			p{
				text-align: left;
			}
			ul{
				margin-top:20px;
			}
		}
		
	}
	.flowr_box{
		section{
			display:grid;
			grid-template-columns: repeat(2,1fr);
			gap:20px;
			padding-top:50px;
			margin-top:50px;
			border-top:2px dotted rgb(var(--subColor));
			scroll-margin-top: 60px;
			> div{
				&:nth-of-type(1){
					figure{
						img{
							border-radius: 10px;
						}
						figcaption{
							margin:.5em auto 0 auto;
							font-size: 1.1rem;
							font-weight: 600;
						}
					}
					dl{
						margin:20px auto 0 auto;
						font-size: .9rem;
						display:grid;
						grid-template-columns: 5em 1fr;
						dt{
							letter-spacing: 1em;
							padding-left:1em;
						}
						dd{
							text-align: left;
						}
					}
				}
				&:nth-of-type(2){
					p{
						text-align: left;
					}
					div{
						display:grid;
						grid-template-columns: repeat(2,1fr);
						gap:10px;
						margin:20px auto 0 auto;
						a{
							aspect-ratio: 3 / 2;
        			position:relative;
        			overflow: hidden;
							display:block;
							border-radius: 10px;
							img{
          			min-width:100%;
								min-height:100%;
								object-fit: cover;
								position: absolute;
								top: 50%;
								transform: translate(-50%, -50%);
        			}
						}
					}
				}
			}
		}
	}
	@container (max-width: 650px) {
		.flowr_box{
			section{
				display:block;
				> div{
					&:nth-of-type(2){
						margin-top:20px;
					}
				}
			}
		}
	}
}

#spring{
	--color_season:#ff6060;
}
#summer{
	--color_season:#ff0f15;
}
#autumn{
	--color_season:#ac3513;
}
#winter{
	--color_season:#26478a;
}