/**********************************************************************/
/******************************* 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.5rem);
	margin-top: 1em;
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

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

#plans h3
{
	color: white;
	text-align:center;
	margin: 2em 0;
	padding: 1em 0;
	background-color: rgb(0, 62, 52);
	border-radius: .5em;
}

#plans .plans + .plans h3
{
	margin-top: max(3rem, 5vw);
}

#plans .tile
{
	display: flex;
}

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

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

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

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

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

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

#plans .textWrapper > h4
{
	font-size: clamp(1.1rem, 2vw, 1.2rem);
	border-bottom: 1px solid;
	margin-bottom: 1em;
	padding-bottom: .5em;
}

#plans .textWrapper p.price
{
	display: flex;
	flex-direction:column;
	align-items: center;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	margin-top: .5em;
}

#plans .textWrapper p:nth-of-type(1)
{
	font-family: R-R, GG-R, sans-serif;
}

#plans .textWrapper p.price span:nth-of-type(2)
{
	font-size: max(.8rem, .5em);
}



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


@media screen and (max-width: 800px) and (min-width: 651px)
{
	#plans .shop,
	#plans .shop:nth-of-type(2n)
	{
		flex-direction: column;
	}
	#plans figure
	{
		width: 100%;
	}
	#plans .textWrapper
	{
		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;
	}
	
	#plans figure
	{
		width: clamp(150px, 40vw, 500px);
	}
	#plans .textWrapper
	{
		width: calc(100% - clamp(150px, 40vw, 500px));
	}
}

@media screen and (max-width: 550px)
{
	#plans .tile,
	#plans .tile:nth-of-type(2n)
	{
		flex-direction: column;
	}
	#plans figure
	{
		width: 100%;
	}
	#plans .textWrapper
	{
		width: 100%;
		padding: 2rem 0;
	}
}