@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@font-face{
	font-family : "Zen Kaku Gothic New";
	font-style : normal;
	font-weight : 300;
	src : url( "../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Light.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic New";
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic New";
	font-style : normal;
	font-weight : 500;
	src : url( "../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Medium.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic New";
	font-style : normal;
	font-weight : 700;
	src : url( "../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic New";
	font-style : normal;
	font-weight : 900;
	src : url( "../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Black.woff2" ) format( "woff2" );
}
:root{
	--fontFamily : "Zen Kaku Gothic New" , sans-serif;
}
.zen-kaku-gothic-new{
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
@font-face{
	font-family : Alata;
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Alata/Alata-Regular.woff2" ) format( "woff2" );
}
.alata{
	font-family : Alata , serif;
}
@font-face{
	font-family : Inter;
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : url( "../fonts/Inter/Inter-VariableFont_opsz,wght.woff2" ) format( "woff2" );
}
.inter{
	font-family : Inter , serif;
}
@font-face{
	font-family : "Zen Kaku Gothic Antique";
	font-style : normal;
	font-weight : 300;
	src : url( "../fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Light.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic Antique";
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Regular.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic Antique";
	font-style : normal;
	font-weight : 500;
	src : url( "../fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Medium.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic Antique";
	font-style : normal;
	font-weight : 700;
	src : url( "../fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Bold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Zen Kaku Gothic Antique";
	font-style : normal;
	font-weight : 900;
	src : url( "../fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Black.woff2" ) format( "woff2" );
}
.zen-kaku-gothic-antique{
	font-family : "Zen Kaku Gothic Antique";
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : normal;
	font-weight : 300;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-Light.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-Regular.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : normal;
	font-weight : 500;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-Medium.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : normal;
	font-weight : 600;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : normal;
	font-weight : 700;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-Bold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : italic;
	font-weight : 300;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : italic;
	font-weight : 400;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-Italic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : italic;
	font-weight : 500;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : italic;
	font-weight : 600;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.ttf" ) format( "woff2" );
}
@font-face{
	font-family : "Cormorant Garamond";
	font-style : italic;
	font-weight : 700;
	src : url( "../fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.woff2" ) format( "woff2" );
}
.cormorant-garamond{
	font-family : "Cormorant Garamond" , serif;
}
@font-face{
	font-family : "Afacad Flux";
	font-variation-settings : "slnt" 0;
	font-style : normal;
	font-weight : 100 1000;
	font-optical-sizing : auto;
	src : url( "../fonts/Afacad_Flux/AfacadFlux-VariableFont_slnt,wght.woff2" ) format( "woff2" );
}
.afacad{
	font-family : "Afacad Flux" , serif;
}
@font-face{
	font-family : Actor;
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Actor/Actor-Regular.woff2" ) format( "woff2" );
}
.actor{
	font-family : Actor , serif;
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 100;
	src : url( "../fonts/Poppins/Poppins-Thin.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 200;
	src : url( "../fonts/Poppins/Poppins-ExtraLight.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 300;
	src : url( "../fonts/Poppins/Poppins-Light.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Poppins/Poppins-Regular.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 500;
	src : url( "../fonts/Poppins/Poppins-Medium.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 600;
	src : url( "../fonts/Poppins/Poppins-SemiBold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 700;
	src : url( "../fonts/Poppins/Poppins-Bold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 800;
	src : url( "../fonts/Poppins/Poppins-ExtraBold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : normal;
	font-weight : 900;
	src : url( "../fonts/Poppins/Poppins-Black.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 100;
	src : url( "../fonts/Poppins/Poppins-ThinItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 200;
	src : url( "../fonts/Poppins/Poppins-ExtraBoldItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 300;
	src : url( "../fonts/Poppins/Poppins-LightItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 400;
	src : url( "../fonts/Poppins/Poppins-Italic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 500;
	src : url( "../fonts/Poppins/Poppins-MediumItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 600;
	src : url( "../fonts/Poppins/Poppins-SemiBoldItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 700;
	src : url( "../fonts/Poppins/Poppins-BoldItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 800;
	src : url( "../fonts/Poppins/Poppins-ExtraBoldItalic.woff2" ) format( "woff2" );
}
@font-face{
	font-family : Poppins;
	font-style : italic;
	font-weight : 900;
	src : url( "../fonts/Poppins/Poppins-BlackItalic.woff2" ) format( "woff2" );
}
.poppin{
	font-family : Poppins , serif;
}
@font-face{
	font-family : "Shippori Mincho" , serif;
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Shippori_Mincho/ShipporiMincho-Regular.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Shippori Mincho" , serif;
	font-style : normal;
	font-weight : 500;
	src : url( "../fonts/Shippori_Mincho/ShipporiMincho-Medium.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Shippori Mincho" , serif;
	font-style : normal;
	font-weight : 600;
	src : url( "../fonts/Shippori_Mincho/ShipporiMincho-SemiBold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Shippori Mincho" , serif;
	font-style : normal;
	font-weight : 700;
	src : url( "../fonts/Shippori_Mincho/ShipporiMincho-Bold.woff2" ) format( "woff2" );
}
@font-face{
	font-family : "Shippori Mincho" , serif;
	font-style : normal;
	font-weight : 800;
	src : url( "../fonts/Shippori_Mincho/ShipporiMincho-ExtraBold.woff2" ) format( "woff2" );
}
.shippori{
	font-family : "Shippori Mincho" , serif;
}
@font-face{
	font-family : "Roboto Slab";
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : url( "../fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.woff2" ) format( "woff2" );
}
.roboto{
	font-family : "Roboto Slab" , serif;
}
.alex-brush-regular{
	font-family : "Alex Brush";
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Alex_Brush/AlexBrush-Regular.woff2" ) format( "woff2" );
}
.alex{
	font-family : "Alex Brush" , serif;
}

/* --------------------------------------------
COLOR SETTINGS
--------------------------------------------- */
@property --base{
	syntax : "<color>";
	inherits : false;
	initial-value : #242323;
}
@property --green{
	syntax : "<color>";
	inherits : false;
	initial-value : #129b3b;
}
@property --green02{
	syntax : "<color>";
	inherits : false;
	initial-value : #deedc0;
}
@property --green03{
	syntax : "<color>";
	inherits : false;
	initial-value : color-mix( in srgb , #c5e1b2 30% , transparent );
}
@property --green04{
	syntax : "<color>";
	inherits : false;
	initial-value : #eef7e8;
}
@property --orange{
	syntax : "<color>";
	inherits : false;
	initial-value : #ef7a00;
}
@property --orange02{
	syntax : "<color>";
	inherits : false;
	initial-value : #d8a742;
}
@property --orange03{
	syntax : "<color>";
	inherits : false;
	initial-value : #ebd3a0;
}
@property --orange04{
	syntax : "<color>";
	inherits : false;
	initial-value : #f5e9cf;
}
@property --gray{
	syntax : "<color>";
	inherits : false;
	initial-value : #333;
}
@property --filterWhite{
	syntax : "*";
	inherits : false;
	initial-value : invert( 100% ) sepia( 100% ) saturate( 2% ) hue-rotate( 58deg ) brightness( 108% ) contrast( 101% );
}
@property --filterBase{
	syntax : "*";
	inherits : false;
	initial-value : invert( 17% ) sepia( 12% ) saturate( 0% ) hue-rotate( 209deg ) brightness( 96% ) contrast( 89% );
}
@property --filterBlue{
	syntax : "*";
	inherits : false;
	initial-value : invert( 16% ) sepia( 83% ) saturate( 2594% ) hue-rotate( 194deg ) brightness( 97% ) contrast( 101% );
}
@property --filterPerple{
	syntax : "*";
	inherits : false;
	initial-value : invert( 79% ) sepia( 45% ) saturate( 5771% ) hue-rotate( 198deg ) brightness( 101% ) contrast( 97% );
}

/* --------------------------------------------
CATEGORY COLOR
--------------------------------------------- */
.category.orange{
	background-color : #ffbe46;
}
.category.pink{
	background-color : #ffa5af;
}
.category.blue{
	background-color : #04c4d9;
}
.category.perple{
	background-color : #bb6bd9;
}
.category.green{
	background-color : #6fcd67;
}
.category.maroon{
	background-color : #b9959f;
}

/* --------------------------------------------
UNIT SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	@property --breakPoint{
		syntax : "<number>";
		inherits : false;
		initial-value : 400;
	}
	@property --wrapperSize{
		syntax : "<number>";
		inherits : false;
		initial-value : 368;
	}
	@property --gutter{
		syntax : "<number>";
		inherits : false;
		initial-value : 16;
	}
}
@media screen and ( width > 750px ) , print{
	@property --breakPoint{
		syntax : "<number>";
		inherits : false;
		initial-value : 1960 ;
	}
	@property --wrapperSize{
		syntax : "<number>";
		inherits : false;
		initial-value : 1880;
	}
	@property --gutter{
		syntax : "<number>";
		inherits : false;
		initial-value : 40;
	}
}
@property --remBase{
	syntax : "*";
	inherits : false;
	initial-value : * .1rem;
}
:root{
	--percentBase : * 100% / var( --wrapperSize );
	--viewportBase : * 100% / var( --breakPoint );
}

/* --------------------------------------------
TRANSITION
--------------------------------------------- */
@property --transitionBase{
	syntax : "*";
	inherits : false;
	initial-value : .3s ease-in;
}

/* --------------------------------------------
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;
}
:root{
	--csstools-color-scheme--light : initial ! important;
	color-scheme : light ! important;
}
:where( html ){
	block-size : 100%;
	-webkit-text-size-adjust : none;
	tab-size : 2;
}
@media ( prefers-reduced-motion : no-preference ){
	html{
		scroll-behavior : smooth;
	}
}
:where( html:has( dialog[open] ) ){
	overflow : clip;
}
:where( body ){
	overflow-x : clip;
	overflow-y : auto;
	font-family : var( --fontFamily );
	font-weight : 400;
	line-height : 1;
	color : var( --base );
	overflow-wrap : anywhere;
	text-rendering : optimizeSpeed;
	min-block-size : 100%;
	line-break : strict;
}
main{
	overflow-x : clip;
}
:where( svg, video, canvas, audio, iframe, embed, object ){
	display : block;
}
:where( img, svg, video ){
	max-width : inherit;
	font-size : 0;
	vertical-align : top;
	inline-size : auto;
}
: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 ):only-child:has( > img ){
	font-size : 0;
	line-height : 1;
}
:where( ul, ol ){
	list-style : none;
}
:where( a ){
	color : var( --base );
	-webkit-text-decoration : none;
	text-decoration : none;
	text-underline-offset : calc( ( 1lh - 1em ) / 2 );
	touch-action : manipulation;
	cursor : pointer;
	text-decoration-skip-ink : auto;
}
:where( button , [type="button"] , [type="reset"] , [type="submit"] ){
	touch-action : manipulation;
}
:where( button ){
	background-color : transparent;
}
:where( button, input, label[for], select, summary, textarea, [tabindex]:not( [tabindex*="-"] ) ){
	touch-action : manipulation;
	cursor : pointer;
}
: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,dfn ){
	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]:not( :popover-open ) ){
	display : none;
}
:where( summary  ){
	display : block;
	list-style : none;
}
:where( summary::-webkit-details-marker  ){
	display : none;
}

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