:root {
	--vw: 100vw;
	--content-width: 92vw;
	--content-left: calc(50% - var(--content-width) / 2);
	--font-base: calc(var(--content-width) * 0.02);
}

body{
	margin: 0; padding: 0;
	letter-spacing: 0;
	background-image: url(img/background.png);
	background-size: cover;
	background-attachment: fixed;
	background-clip: content-box;
	background-position: center;
}

div{margin:0; padding: 0;}
p{margin:0; padding: 0;}
span{display: inline-block;}
a{color: inherit; text-decoration: none;}
button {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	outline: none;
	border-radius: 0;
}

.area{
	display: block;
	position: relative;
	width: 100%;
	left: 0;
	overflow: hidden;
}
.area-content{
	display: block;
	position: relative;
	height: 100%;
	width: var(--content-width);
	left: var(--content-left);
}
.block-fixed{display: block; position: fixed;}
.block-relative{display: block; position: relative;}
.block-absolute{display: block; position: absolute;}
.image{display: block; position: absolute; object-fit: cover; user-select: none;}
.image-fixed{ display: block; position: fixed; object-fit: cover; user-select: none;}
.image-full{display: block; position: relative; object-fit: contain; user-select: none;}

.filled{width: 100%; height: 100%; top:0; left:0;}
.centered{left: 50%; transform: translate(-50%,0); text-align: center;}
.no-margin{margin: 0;}
.margin-bottom-area{margin-bottom: calc(var(--content-width) * 0.18);}
.margin-both-space{margin-top: calc(var(--content-width) * 0.18); margin-bottom: calc(var(--content-width) * 0.18);}
.margin-top-space{margin-top: calc(var(--content-width) * 0.18);}
.margin-bottom-space{margin-bottom: calc(var(--content-width) * 0.18);}
.margin-both{margin-top: calc(var(--content-width) * 0.09); margin-bottom: calc(var(--content-width) * 0.09);}
.margin-top{margin-top: calc(var(--content-width) * 0.09);}
.margin-bottom{margin-bottom: calc(var(--content-width) * 0.09);}
.margin-both-inblock{margin-top: calc(var(--content-width) * 0.025); margin-bottom: calc(var(--content-width) * 0.025);}
.margin-top-inblock{margin-top: calc(var(--content-width) * 0.025);}
.margin-bottom-inblock{margin-bottom: calc(var(--content-width) * 0.025);}
.padding-top{padding-top: calc(var(--content-width) * 0.06);}
.padding-bottom{padding-bottom: calc(var(--content-width) * 0.06);}
.cozy{line-height: 1.8;}

.sans{
	font-size: var(--font-base);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.serif{
	font-size: var(--font-base);
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
}
.cardo{
	font-family: "Cardo", serif;
	font-weight: 400;
	font-style: normal;
}
.cardo-bold{
	font-family: "Cardo", serif;
	font-weight: 700;
	font-style: normal
}
.kaisei{
	font-family: "Kaisei Opti", serif;
	font-weight: 400;
	font-style: normal;
}
.main-title{font-size: calc(var(--font-base) * 3.6);}
.title{font-size: calc(var(--font-base) * 3.2);}
.subtitle{font-size: calc(var(--font-base) * 2.2);}
.paragraph{font-size: calc(var(--font-base) * 1.5);}
.small-paragraph{font-size: calc(var(--font-base) * 1.1);}
.black{color: black;}
.brown{color: rgb(65, 46, 13);}
.gray{color: dimgray;}
.white{color: white;}
.golden{color: goldenrod;}
.seagreen{color: rgb(88, 190, 182);}
.skyblue{color: steelblue;}
.blue{color: royalblue;}
.violet{color:rgb(184, 140, 201)}

.main{display: none;}

#link-area{height: calc(var(--content-width) * 1.40);}
.link-image{width: calc(var(--content-width) * 0.72); height: calc(var(--content-width) * 0.54); left: calc(var(--content-width) * 0.14);}
#link-lupinus{top: 0;}
#link-cocokara{top: calc(var(--content-width) * 0.70);}
#name-lupinus{top: calc(var(--content-width) * 0.57); white-space: nowrap;}
#name-cocokara{top: calc(var(--content-width) * 1.27); white-space: nowrap;}

#footer-area{background-color: rgba(255,255,255,0.6);}

.side-open .overlay {
	transform: translate3d(-60%, 0, 0);
}

.overlay {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	transition: all .5s ease;
	z-index: 23;
}
.side-open .overlay {
	visibility: visible;
	cursor: pointer;
	background: rgba(0,0,0,.2);
	transition: all .5s ease;
}

.side-menu{
	position: fixed;
	top: 0;
	right: -60%;
	width: 60%;
	height: 100%;
	text-align: left;
	background: rgb(78, 165, 180);
	z-index: 21;
	transition: all .5s ease;
}
.side-open .side-menu{
	right: 0;
	transition: all .5s ease;
}


.side-menu-ul{
	position: absolute;
	width: 100%;
	height: 90%;
	top: 5%;
	overflow-x: hidden;
	overflow-y: scroll;
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.side-menu-ul::-webkit-scrollbar{
	display: none;
}
.side-menu-ul li{
	display: block; position: relative;
	height: 14%;
	padding: 0 calc(var(--font-base) * 2.4);
}
.side-menu-ul li p{display: block; position: absolute; top: 50%; transform: translate(0,-50%); padding: 0 calc(var(--font-base) * 2.4);}
.side-menu-ul li p.category{padding: 0 0;}
.side-menu-ul .decorated-link{color: white;}

.side-menu-btn {
	position: fixed;
	top: calc(var(--font-base) * 1);
	right: calc(var(--font-base) * 1);
	width: calc(var(--font-base) * 5);
	height: calc(var(--font-base) * 5);
	padding: 0;
	cursor: pointer;
	z-index: 24;
	background: rgba(255, 255, 255, 0.9);
}
.side-open .side-menu-btn{
	background: none;
}

.ellipsis-v {
	position: relative;
	display: block;
	cursor: pointer;
	width: 50%;
	left: 25%;
	height: 50%;
	top: 25%;
}

.ellipsis-v .point {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 4px;
	margin: auto;
	background: #333;
	transition: all .3s;
}

.ellipsis-v .point.top {
	top: 0;
}

.ellipsis-v .point.mid {
	top: 0;
	bottom: 0;
}

.ellipsis-v .point.bot {
	bottom: 0;
}

.side-open .side-menu-btn:hover .top,
.side-open .top {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left top;
	transform: rotate(45deg);
}

.side-open .mid {
	opacity: 0;
}

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left bottom;
	transform: rotate(-45deg);
	}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
	background: #ccc;
}