/**********************************************************************/
/******************************* Text ********************************/
/**********************************************************************/

#company
{
	padding-top: max(5vw, 5rem);
	padding-bottom: max(10vw, 10rem);
}

#company div.company_wrapper
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.menu_wrapper
{
	position:sticky;
	top: 5rem;
	padding-right: clamp(3rem, 6vw, 5rem);
}

#page_menu h1
{
	font-size: clamp(1.1rem, 5vw, 1.75rem);
}

#page_menu
{
	margin-top: 1rem;
}

#page_menu > div
{
	display:flex;
	flex-direction: column;
}

#page_menu a.menu
{
	cursor: pointer;
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: center;
	justify-content: space-between;
	font-family: serif, "A1 Mincho", 'YuMin_36pKn-Medium';
	font-weight: 400;
	margin-bottom: .5em;
	font-size: .9rem;
	color:rgb(168, 27, 75);
}

#page_menu a.menu:after
{
	font-family: f-icons;
	font-weight: 400;
	font-size: 1.1em;
	content: "\f198";
	margin-left: 1em;
}

#contents
{
	padding-top: 1.5em;
	width:calc(100% - 10rem);
	display: flex;
	flex-wrap: wrap;
}

#contents section
{
	width: 100%;
	padding-bottom: max(3rem, 5vw);
}

#contents h2
{
	color: rgb(0, 62, 52);
	text-align: center;
	font-size: clamp(1.2rem, 5vw, 1.75rem);
	margin-top: 1em;
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 2px solid rgb(255, 255, 255);
}

#contents h2 + div
{
	transition-delay: .25s;
}

#message > div
{
	display: flex;
	justify-content: space-between;
}

#message .text
{
	width: calc(100% - clamp(100px, 20vw, 250px) - clamp(2rem, 5vw, 5rem));
}

#message .text p + p
{
	margin-top: 1em;
}

#message .text ul
{
	margin: 1em 0;
}

#message .text ul li
{

	list-style: none;
	padding-left: 1.2em;
}

#message .text ul li + li
{
	margin-top: .5em;
}

#message .text ul li:before
{
	content:"";
	display: block;
	position: absolute;
	left: 0;
	top: .3em;
	width: .75em;
	height: .75em;
	border-radius: 50%;
	border: 1px solid;
}

#message .portrait
{
	width: clamp(100px, 20vw, 250px);
}

#message .portrait > figure
{
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow:hidden;
	margin-bottom: 1em;
}

#message .portrait > figure > img
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
}

#message .portrait > p,
#message .portrait > p > span
{
	display: flex;
	flex-direction: column;
}

#message .portrait > p .name
{
	font-size: 1.2em;
}

#about td
{
	padding: 1em 0;
}

#about tr + tr td
{
	border-top: 1px solid rgba(255, 255, 255, .5);
}

#about td + td
{
	padding-left: 2em;
}

#about tr td:nth-of-type(1)
{
	font-family: R-R, GG-R, sans-serif;
	font-size: .9em;
	margin-top: .05em;
	white-space: nowrap;
}

#link figure
{
	width: clamp(150px, 35vw, 500px);
	aspect-ratio: 5 / 3;
	overflow:hidden;
}

#link figure > img
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
}

#link .shop
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#link .shop + .shop
{
	padding-top: clamp(1rem, 2vw, 2rem);
	margin-top: clamp(1rem, 2vw, 2rem);
	border-top: 1px solid rgba(255, 255, 255, .5);
}

#link .shop:nth-of-type(2n)
{
	flex-direction: row-reverse;
}

#link .text
{
	width: calc(100% - clamp(150px, 35vw, 500px));
	padding: 2rem;
	display: flex;
	flex-direction:column;
	align-items: center;
}

#link .text > h3
{
	display: flex;
	flex-direction: column;
	align-items:center;
	border-bottom: 1px solid;
	margin-bottom: 1em;
	padding-bottom: .5em;
}

#link .text > h3 > span
{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}

#link .text > h3 > span > span
{
	margin: 0 .25em;
}

#link .text > h3 > span + span
{
	margin-top: .25em;
}

#link .text p
{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}

#link .text p span
{
	margin: 0 .05em;
}



/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 900px)
{
	#message > div
	{
		flex-direction: column;
	}
	
	#message .portrait
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-bottom: 2rem;
	}
	
	#message .portrait > figure
	{
		width: clamp(200px, 30vw, 250px);
	}
	
	#message .portrait > p,
	#message .portrait > p > span
	{
		justify-content:center;
	}
	
	#message .portrait > p > span
	{
		flex-direction: row;
	}
	
	#message .text
	{
		width: 100%;
	}
}

@media screen and (max-width: 800px) and (min-width: 651px)
{
	#link .shop,
	#link .shop:nth-of-type(2n)
	{
		flex-direction: column;
	}
	#link figure
	{
		width: 100%;
		aspect-ratio: 5 / 3;
	}
	#link .text
	{
		width: 100%;
		padding: 2rem 0;
	}
}

@media screen and (max-width: 650px)
{
	#company > div
	{
		flex-direction: column;
	}
	#contents
	{
		width: 100%;
	}
	
	.menu_wrapper
	{
		position: static;
		width: 100%;
		padding-bottom: 1rem;
		padding-right: 0;
	}
	
	#caterories
	{
		overflow-x: auto;
		overflow-y: hidden;
		width: calc(100% + 1rem);
		margin-left: -.5rem;
		margin-bottom: 0;
	}
	
	#caterories > div
	{
		flex-direction: row;
	}
	#caterories a.menu
	{
		margin: .5rem;
	}
	
	#link figure
	{
		width: clamp(150px, 40vw, 500px);
		aspect-ratio: 1 / 1;
	}
	#link .text
	{
		width: calc(100% - clamp(150px, 40vw, 500px));
	}
}

@media screen and (max-width: 550px)
{
	#link .shop,
	#link .shop:nth-of-type(2n)
	{
		flex-direction: column;
	}
	#link figure
	{
		width: 100%;
		aspect-ratio: 5 / 3;
	}
	#link .text
	{
		width: 100%;
		padding: 2rem 0;
	}
}

@media screen and (max-width: 450px)
{
	#about td
	{
		display: block;
	}
	
	#about tr td:nth-of-type(1)
	{
		white-space: normal;
	}
	
	#about tr td:nth-of-type(1) > br
	{
		display: none;
	}
	
	#about td + td
	{
		padding-left: 0em;
		padding-top: 0;
	}
	
	#about tr + tr td + td
	{
		border-top-width: 0;
	}
}