:root {
	--content-width: 72vw;
	--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.12);}
.margin-both-space{margin-top: calc(var(--content-width) * 0.12); margin-bottom: calc(var(--content-width) * 0.12);}
.margin-top-space{margin-top: calc(var(--content-width) * 0.12);}
.margin-bottom-space{margin-bottom: calc(var(--content-width) * 0.12);}
.margin-both{margin-top: calc(var(--content-width) * 0.06); margin-bottom: calc(var(--content-width) * 0.06);}
.margin-top{margin-top: calc(var(--content-width) * 0.06);}
.margin-bottom{margin-bottom: calc(var(--content-width) * 0.06);}
.margin-both-inblock{margin-top: calc(var(--content-width) * 0.015); margin-bottom: calc(var(--content-width) * 0.015);}
.margin-top-inblock{margin-top: calc(var(--content-width) * 0.015);}
.margin-bottom-inblock{margin-bottom: calc(var(--content-width) * 0.015);}
.padding-top{padding-top: calc(var(--content-width) * 0.04);}
.padding-bottom{padding-bottom: calc(var(--content-width) * 0.04);}
.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) * 2.2);}
.title{font-size: calc(var(--font-base) * 2.0);}
.subtitle{font-size: calc(var(--font-base) * 1.4);}
.paragraph{font-size: calc(var(--font-base) * 1.0);}
.small-paragraph{font-size: calc(var(--font-base) * 0.8);}
.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) * 0.40);}
.link-image{width: calc(var(--content-width) * 0.36); height: calc(var(--content-width) * 0.27); top: 0;}
#link-lupinus{left: calc(var(--content-width) * 0.09);}
#link-cocokara{left: calc(var(--content-width) * 0.55);}
#name-lupinus{top: calc(var(--content-width) * 0.30); left: calc(var(--content-width) * 0.27);}
#name-cocokara{top: calc(var(--content-width) * 0.30); left: calc(var(--content-width) * 0.73);}

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

.side-menu{display: none;}
.side-menu-btn{display: none;}