@charset "utf-8";


/***
	resetCSS
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}

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

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

a,
button {
	cursor: revert;
}

ol,
ul,
menu,
summary {
	list-style: none;
}

ol {
	counter-reset: revert;
}

img {
	max-inline-size: 100%;
	max-block-size: 100%;
}

table {
	border-collapse: collapse;
}

input,
textarea {
	-webkit-user-select: auto;
	user-select: auto;
}

textarea {
	white-space: revert;
}

meter {
	-webkit-appearance: revert;
	appearance: revert;
}

:where(pre) {
	all: revert;
	box-sizing: border-box;
}

::placeholder {
	color: unset;
}

:where([hidden]) {
	display: none;
}

:where([contenteditable]:not([contenteditable="false"])) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	line-break: after-white-space;
	-webkit-user-select: auto;
	user-select: auto;
}

:where([draggable="true"]) {
	-webkit-user-drag: element;
}

:where(dialog:modal) {
	all: revert;
	box-sizing: border-box;
}

::-webkit-details-marker {
	display: none;
}

/***
	root
***/
:root {
	/*
	--base_color_100: #E6E6FA;
	--base_color_300: #ACACE3;
	--base_color_500: #7474E3;
	--base_color_900: #4B4BA1;
	*/
	--base_color_100: #dbdbdb;
	--base_color_300: #b2b2b2;
	--base_color_500: #898989;
	--base_color_900: #4c4c4c;

	--accent_color_100: #F3EEE5;
	--accent_color_500: #B6965D;

	--size_07: 1.8666666667cqw;
	--size_08: 2.1333333333cqw;
	--size_12: 3.2cqw;
	--size_14: 3.7333333333cqw;
	--size_16: 4.2666666667cqw;
	--size_18: 4.8cqw;
	--size_20: 5.3333333333cqw;
	--size_24: 6.4cqw;
	--size_26: 6.9333333333cqw;
	--size_32: 8.5333333333cqw;
	--size_40: 10.6666666667cqw;
	--size_48: 12.8cqw;
	--size_64: 17.0666666667cqw;
	--size_88: 23.4666666667cqw;
	--size_116: 30.9333333333cqw;
}

/***
	FONT
***/

/* Noto Serif JP 600 */
@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 600;
	src: url('/font/NotoSerifJP-SemiBold.woff2') format('woff2');
	font-display: swap;
}

/* Pinyon Script 400 */
@font-face {
	font-family: 'Pinyon Script';
	font-style: normal;
	font-weight: 400;
	src: url('/font/PinyonScript-Regular.woff2') format('woff2');
	font-display: swap;
}

/***
	TOP PAGE
***/

/** common **/
html {
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	line-height: 1.55;
}

img {
	vertical-align: bottom;
	height: auto;
}

img.logo {
	width: 26.6666666667cqw;
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block-end: auto;
}

h1 {
	margin-block-end: var(--size_08);
}

h2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var(--size_40);
	color: var(--base_color_900);
	margin-block-end: var(--size_40);
	scroll-margin-top: var(--size_64);
}

h2 span {
	font-family: "Pinyon Script", cursive;
	font-weight: 400;
	font-size: var(--size_24);
	color: var(--base_color_300);
}

h3 {
	color: var(--accent_color_500);
	letter-spacing: -0.02em;
}

p {
	color: #404040;
}

@media (hover: hover) {
	a:hover {
		opacity: .7;
	}
}

@media (hover: none) {
	a:active {
		opacity: .7;
	}
}

section {
	padding-block: var(--size_64);
	background-color: var(--base_color_100);
}

@media (min-width: 767.98px) {
	body {
		background-image: url(/images/bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	.container {
		container-type: inline-size;
		max-width: 450px;
		box-shadow: 0px 0px 7px -4px #000000;
		margin: 0 auto;
		background-color: #fff;
	}

	h2 {
		scroll-margin-top: 76.8px;
	}

}

@media (min-width: 979.98px) {
	body {
		position: relative;
	}

	.container {
		margin-left: calc((50vw - 450px) / 2);
		margin-right: auto;
	}
}