@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@font-face{
	font-family : "Noto Serif JP";
	font-weight : 400;
	src : url( "../fonts/NotoSerifJP/NotoSerifJP-VariableFont_wght.ttf" ) format( "truetype" );
	font-display : swap;
}
:root{
	--fontFamily : "Noto Serif JP" , serif;
}
@font-face{
	font-family : "Noto Sans JP";
	font-weight : 1 999;
	src : url( "../fonts/NotoSansJP/NotoSansJP-VariableFont_wght.ttf" ) format( "truetype" );
	font-display : swap;
}
.notosans{
	font-family : "Noto Sans JP" , sans-serif;
}
@font-face{
	font-family : Quattrocento;
	font-weight : 400;
	src : url( "../fonts/Quattrocento/Quattrocento-Regular.ttf" ) format( "truetype" );
	font-display : swap;
}
.quattrocento{
	font-family : Quattrocento , serif;
}
@font-face{
	font-family : "Qwitcher Grypen";
	font-weight : 400;
	src : url( "../fonts/QwitcherGrypen/QwitcherGrypen-Regular.ttf" ) format( "truetype" );
	font-display : swap;
}
.qwitcher{
	font-family : "Qwitcher Grypen" , serif;
}
@font-face{
	font-family : Lato;
	font-weight : 400;
	font-optical-sizing : auto;
	src : url( "../fonts/Lato/Lato-Regular.ttf" ) format( "truetype" );
	font-display : swap;
}
.lato{
	font-family : Lato , system-ui;
	font-style : normal;
	font-weight : 400;
}
@font-face{
	font-family : Alata;
	font-weight : 400;
	font-optical-sizing : auto;
	src : url( "../fonts/Alata/Alata-Regular.ttf" ) format( "truetype" );
	font-display : swap;
}
.alata{
	font-family : Alata , sans-serif;
	font-style : normal;
	font-weight : 400;
}
@font-face{
	font-family : ABeeZee;
	font-weight : 400;
	font-optical-sizing : auto;
	src : url( "../fonts/ABeeZee/ABeeZee-Regular.ttf" ) format( "truetype" );
	font-display : swap;
}
.abeezee{
	font-family : ABeeZee , sans-serif;
	font-style : normal;
	font-weight : 400;
}
@font-face{
	font-family : Abel;
	font-weight : 400;
	font-optical-sizing : auto;
	src : url( "../fonts/Abel/Abel-Regular.ttf" ) format( "truetype" );
	font-display : swap;
}
.abel{
	font-family : Abel , sans-serif;
	font-style : normal;
	font-weight : 400;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--breakPoint : 400;
		--wrapperSize : 368;
		--gutter : 16;
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--breakPoint : 1440;
		--wrapperSize : 1400;
		--gutter : 20;
	}
}
:root{
	--base : #444343;
	--color01 : #223d70;
	--color0102 : #d5d9e1;
	--color0103 : #edeef0;
	--color02 : #fb617f;
	--color0202 : #fcafbe;
	--color0203 : #f5e7ee;
	--color03 : #828282;
	--color0302 : #bdbdbd;
	--color0303 : #e0e0e0;
	--color0304 : #98a6a9;
	--color04 : #d8a742;
	--bg01 : #f1f2ed;
	--category01 : #bb6bd9;
	--category02 : #ffbe46;
	--category03 : #04c4d9;
	--category04 : #ffa5af;
	--category05 : #7d9ba6;
	--category06 : #b9959f;
	--remBase : * .1rem;
	--percentBase : * 100% / var( --wrapperSize );
	--viewportBase : * 100% / var( --breakPoint );
	--transitionBase : .3s ease-in;
	--filterWhite : invert( 100% ) sepia( 100% ) saturate( 2% ) hue-rotate( 58deg ) brightness( 108% ) contrast( 101% );
	--filterColor01 : invert( 20% ) sepia( 30% ) saturate( 1812% ) hue-rotate( 188deg ) brightness( 96% ) contrast( 93% );
}

/* --------------------------------------------
REGULATE
--------------------------------------------- */
*{
	padding : 0;
	margin : 0;
	word-break : break-all;
}
* ,
::before ,
::after{
	box-sizing : border-box;
}
*:not(fieldset, progress, meter){
	background-repeat : no-repeat;
	background-origin : border-box;
	border-style : solid;
	border-width : 0;
}
:where( html ){
	--csstools-color-scheme--light : initial;
	block-size : 100%;
	-webkit-text-size-adjust : none;
	color-scheme : dark light;
	tab-size : 2;
}
@media ( prefers-color-scheme : dark ){
	:where( html ){
		--csstools-color-scheme--light :   ;
	}
}
:where( html:has( dialog:modal[open] ) ){
	overflow : clip;
}
@media ( prefers-reduced-motion : no-preference ){
	html{
		scroll-behavior : smooth;
	}
}
:where( body ){
	overflow-x : clip;
	overflow-y : auto;
	font-family : var( --fontFamily );
	font-weight : 400;
	line-height : 1;

	/* font-feature-settings: "palt" on; */
	color : var( --base );
	overflow-wrap : anywhere;
	text-rendering : optimizeSpeed;
	min-block-size : 100%;
	line-break : strict;
}
:where( svg, video, canvas, audio, iframe, embed, object ){
	display : block;
}
:where( img, svg, video ){
	inline-size : auto;
	font-size : 0;
	vertical-align : top;
}
:where( img ){
	image-rendering : -webkit-optimize-contrast;
}
:where( svg ){
	fill : currentColor;
	stroke : none;
}
:where( svg:not( [fill] ) ){
	fill : none;
	stroke : currentColor;
	stroke-linecap : round;
	stroke-linejoin : round;
}
:where( svg:not( [width] ) ){
	inline-size : 5rem;
}
:where( input, button, textarea, select , input[type="file"]::-webkit-file-upload-button ){
	font : inherit;
	font-size : inherit;
	color : inherit;
	letter-spacing : inherit;
	outline : none;
}
:where( p, h1, h2, h3, h4, h5, h6 ){
	overflow-wrap : break-word;
}
:where( p, h1, h2, h3, h4, h5, h6 , a ):has( > img:only-child ){
	font-size : 0;
	line-height : 1;
}
:where( ul, ol ){
	list-style : none;
}
:where( a ){
	color : var( --body );
	-webkit-text-decoration : none;
	text-decoration : none;
	text-underline-offset : .4em;
	touch-action : manipulation;
	cursor : pointer;
	text-decoration-skip-ink : auto;
}
:where( button ){
	background-color : transparent;
}
:where( button, input, label[for], select, summary, textarea, [tabindex]:not( [tabindex*="-"] ) ){
	touch-action : manipulation;
	cursor : pointer;
}
:where( input[type="file"] ){
	cursor : auto;
}
:where( input[type="file"]::-webkit-file-upload-button,input[type="file"]::file-selector-button ){
	cursor : pointer;
}
:where( textarea ){
	resize : vertical;
}
:where( :disabled ){
	cursor : not-allowed;
}
:where( label:has( > input:disabled ), label:has( + input:disabled ) ){
	cursor : not-allowed;
}
:where( button, button[type], input[type="button"], input[type="submit"], input[type="reset"],input[type="file"]::-webkit-file-upload-button,input[type="file"]::file-selector-button ){
	-webkit-tap-highlight-color : transparent;
	-webkit-touch-callout : none;
	user-select : none;
}
:where( table ){
	border-collapse : collapse;
}
:where( picture ){
	display : block;
}
:where( em ){
	font-style : normal;
}
:where( dialog, [popover] ){
	inset : unset;
	max-width : unset;
	max-width : 100%;
	max-height : unset;
	max-height : 100%;
	color : inherit;
	background : none;
	border : none;
}
:where( dialog:not( [open], [popover] ), [popover]:not( :popover-open ) ){
	display : none ! important;
}

/* --------------------------------------------
PRINT
--------------------------------------------- */
body{
	width : 100%;
	overflow-x : hidden;
}
@page{
	margin : .5cm;
	margin-top : .4cm;
}
.no-print{
	display : none;
}