@charset "utf-8";

*,*::before,*::after{
	box-sizing:border-box;
}

body{
	--textColor:#222b22;
	--linkColor:#1a4e1a;
	--borderColor:#648a64;
	--strongColor:#1a631a;
	--emColor:#63431a;

	--margin:60px;
	--bigMargin:90px;
	--smallMargin:30px;

	--navigationWidth:230px;
	--creditHeight:30px;

	color:var(--textColor);
	background-color:#b2c2b2;

	font-family:sans-serif;
	font-size:16px;
	line-height:175%;
	margin:0;
	padding:0;
}
@media (max-width:768px){
	body{
		--margin:40px;
		--bigMargin:60px;
		--smallMargin:20px;
		--creditHeight:50px;
	}
}

strong{
	font-weight:bold;
	font-style:normal;
	color:var(--strongColor);
}

em{
	font-weight:bold;
	font-style:normal;
	color:var(--emColor);
}

hr{
	width:100%;
	height:1px;
	border:none;
	background:var(--borderColor);
}

a,a:link,a:visited,a:hover,a:active{
	color:var(--linkColor);
	text-decoration:underline;
	text-underline-offset:0.15em;
}
@media (min-width:769px){
	a:hover{
		text-decoration:none;
	}
}


h1{font-size:150%;margin:0;}
h2{font-size:120%;margin:0 0 0.5em 0;}
h3{font-size:110%;margin:0 0 0.5em 0;}


img{
	max-width:100%;
	height:auto;
}

.big{
	font-size:135%;
}

table{
	border:none;
}

@media (min-width:769px){
	.forMobile{display:none!important}
}
@media (max-width:768px){
	.forWide{display:none!important}
}

.layout{
	margin:0 auto;
	width:90%;
	max-width:1400px;
	display:grid;
	grid-template-columns:var(--navigationWidth) 1fr;
	grid-template-rows:1fr;
	column-gap:var(--margin);
	row-gap:var(--margin);
}

.credit{
	grid-column:1 / span 2;
	font-size:80%;
	display:flex;
	justify-content:right;
	align-items:center;
}

.navigation{
	width:var(--navigationWidth);
	min-height:100%;
	padding:15px;
}
*:where(.navigationContent>*):not(:first-child),
*:where(.topNavigation>*):not(:first-child){
	margin-top:var(--smallMargin);
}
.navigationContent{
	padding-top:var(--margin);
}
.navigation a,
.topNavigation a{
	display:block;
	text-decoration:none;
}
@media (min-width:769px){
	.navigation a:hover,
	.topNavigation a:hover{
		text-decoration:underline;
	}
}
.navigation a+a,
.topNavigation a+a{
	margin-top:0.3em;
}

.navigationGroupTitle{
	font-weight:bold;
	margin-bottom:0.3em;
}
.navigationGroup a{
	padding-left:10px;
}
.navigationGroup a.lv2{
	padding-left:25px;
}
.navigationButton{
	display:none;
}

@media (max-width:768px){
	.layout{
		display:block;
	}
	main{
		min-height:calc(100svh - var(--margin) - var(--creditHeight));
	}
	.credit{
		margin-top:var(--margin);
		display:block;
		line-height:1.35;
		text-align:right;
		height:var(--creditHeight);
	}
	.navigation{
		position:fixed;
		right:-100svw;
		top:0;
		width:100svw;
		height:100lvh;
		padding:0;
		background:rgba(0,0.15,0,0.85);
		backdrop-filter:blur(3px);
		z-index:100;
		transition:right 0.4s ease-out;
	}
	.navigation.active{
		right:0;
	}
	.navigationViewport{
		width:100%;
		height:100svh;
		overflow-y:scroll;
	}
	.navigationContent{
		padding:var(--margin) 10vw;
	}
	.navigationContent .navigationGroupTitle,
	.navigationContent a{
		color:white;
	}
	.navigationButton{
		display:flex;
		justify-content:center;
		align-items:center;
		position:fixed;
		right:0;
		top:0;
		width:50px;
		height:50px;
		padding:0;
		background:rgba(0,0,0,0.2);
		appearance:none;
		border:none;
		outline:none;
		z-index:110;
	}
	.navigationButton svg{
		width:50%;
		height:50%;
		color:white;
	}
	.navigationButton svg:nth-child(1){display:block}
	.navigationButton svg:nth-child(2){display:none}
	body:has(.navigation.active) .navigationButton svg:nth-child(1){display:none}
	body:has(.navigation.active) .navigationButton svg:nth-child(2){display:block}
}

.content{
	padding-top:var(--bigMargin);
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	gap:var(--margin);
	align-items:center;
}

.textContent{
	width:100%;
	max-width:640px;
	margin:0 auto;
}

.arrowNav{
	width:100%;
	display:flex;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
}
.arrowNavPrev,
.arrowNavNext{
	padding:0 1em;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:100%;
	font-weight:bold;
	text-decoration:none !important;
	border:1px solid var(--borderColor);
}
.arrowNav .disabled{
	display:none;
}
@media (min-width:769px){
	.arrowNavPrev:hover,
	.arrowNavNext:hover{
		background:#1a631a;
		color:white;
	}
}
@media (max-width:768px){
	.arrowNav{
		flex-direction:column;
	}
	.arrowNavPrev{
		order:1;
		height:30px;
	}
	.arrowNavNext{
		order:0;
		height:50px;
	}
}



.gallery{
	--cols:1;
	--gap:15px;
	display:flex;
	justify-content:center;
	gap:var(--gap);
	flex-wrap:wrap;
	align-items:flex-start;
}
.gallery img{
	display:block;
	height:auto;
}
.galleryNote{
	width:100%;
	text-align:center;
}
@media (min-width:769px){
	.gallery:has(div:where(.gallery>div:last-child:nth-child(2))){--cols:2;}
	.gallery:has(div:where(.gallery>div:last-child:nth-child(3))){--cols:3;}
	.gallery>div{
		max-width:calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
	}
	.gallery>div img{
		display:block;
		margin:0 auto;
	}
}











.topTitle{
	text-align:center;
}
.topTitle img{
	width:60px;
}
.topTitle h1{
	font-size:160%;
	font-weight:bold;
	margin:0.3em 0 0 0;
}
.topSubtitle{
	margin-top:0.5em;
}
.topKeyview{
	width:100%;
	text-align:center;
}
.topKeyview img{
	width:350px;
	display:block;
	margin:0 auto;
}
.topKeyview.english img{
	width:600px;
}
.topMessage{
	margin-top:var(--smallMargin);
}

.aboutLink,
.topicsLink{
	font-size:110%;
}

.topicsTopMessage{
	font-size:150%;
	font-weight:bold;
	display:block;
	text-align:center;
	margin-bottom:1em;
}
.topicsImage{
	margin:0;
	width:100%;
}
.topicsImage img{
	display:block;
	margin:0 auto 0.5em auto;
}
.topicsImage figcaption{
	font-size:80%;
	text-align:center;
}

.topicsTable td:nth-child(2){
	padding-left:1em;
	text-align:right;
}

.selfie{
	width:200px;
}

.profiles > tr:not(:first-child) > th,
.profiles > tr:not(:first-child) > td,
.profiles > tbody > tr:not(:first-child) > th,
.profiles > tbody > tr:not(:first-child) > td{
	padding-top:var(--smallMargin);
}
.profiles th{
	text-align:left;
	vertical-align:top;
	padding-right:1em;
	white-space:nowrap;
}

.history th{
	font-weight:normal;
}
@media (max-width:768px){
	.history tr,
	.history th,
	.histroy td{
		display:block;
	}
	.history tr:not(:first-child){
		margin-top:0.5em;
	}
}

.englishNav{
	width:100%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:0.65em;
}

.scientificName{
	font-style:italic;
	text-align:center;
}
.scientificName:blank{display:none}
.scientificName:empty{display:none}


.nutritionalMechanics{
	border:1px solid var(--borderColor);
	border-collapse:collapse;
}
.nutritionalMechanics tr,
.nutritionalMechanics th,
.nutritionalMechanics td{
	border:1px solid var(--borderColor);
}
.nutritionalMechanics th,
.nutritionalMechanics td{
	padding:0.5em;
}
.nutritionalMechanics td:nth-child(1){
	white-space:nowrap;
}
.nutritionalMechanics td:nth-child(2),
.nutritionalMechanics td:nth-child(3){
	width:50%;
}
@media (max-width:768px){
	.nutritionalMechanics th,
	.nutritionalMechanics td{
		padding:0.15em;
	}
}

.haiku{
	margin:var(--smallMargin) auto;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	font-size:135%;
	font-weight:bold;
	font-style:italic;
	width:15em;
	max-width:100%;
}
.haiku span{
	width:15em;
	max-width:100%;
	text-align:center;
}
.haiku span:nth-child(1){
	text-align:left;
}
.haiku span:nth-child(3){
	text-align:right;
}
.haikuAuthor{
	text-align:right;
	font-size:70%;
	font-weight:normal;
	width:100%;
}

.blooms{
	margin:var(--smallMargin) auto;
	max-width:100%;
}
.blooms th,.blooms td{
	padding:0 0.5em;
	vertical-align:text-top;
}
.blooms th{
	text-align:left;
}
.blooms th:nth-child(1),.blooms td:nth-child(1),
.blooms th:nth-child(2),.blooms td:nth-child(2){
	white-space:nowrap;
}

.galleryWithComments,
.bambooFlowers{
	margin-top:var(--smallMargin);
	width:100%;
	display:flex;
	align-items:center;
	gap:var(--smallMargin);
}
@media (max-width:768px){
	.galleryWithComments,
	.bambooFlowers{
		flex-direction:column;
	}
}
.galleryWithComments figure,
.bambooFlowers figure{
	width:100%;
	margin:0;
}
.galleryWithComments img,
.bambooFlowers img{
	width:100%;
	max-width:100%;
	display:block;
}
.galleryWithComments figcaption,
.bambooFlowers figcaption{
	text-align:center;
}


.bambooSeeds{
	width:100%;
	max-width:calc(600px + var(--smallMargin));
	display:flex;
	justify-content:left;
	flex-wrap:wrap;
	margin:var(--smallMargin) auto 0 auto;
	gap:var(--smallMargin);
}
.bambooSeeds figure{
	width:calc(50% - var(--smallMargin) * 0.5);
	margin:0;
}
.bambooSeeds img{
	width:100%;
	max-width:100%;
	display:block;
}
.bambooSeeds figcaption{
	text-align:center;
}


.topTitle{
	font-weight:bold;
	text-align:center;
}
.topNews,
.topMenu{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.topNews .textContent,
.topNavigation{
	margin-top:var(--smallMargin);
	background:rgba(0,64,16,0.1);
	padding:var(--smallMargin);
}

@media (min-width:769px){
	.topMenu{display:none}
}