@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
:root{
	--fontFamily : "Hiragino Sans" , "ヒラギノ角ゴシック" , "Yu Gothic" , yugothic , verdana , meiryo , "M+ 1p" , sans-serif;
}

/* --------------------------------------------
UNIT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--breakPoint : 345;
		--wrapperSize : 308.2;
		--gutter : 18.4;
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--breakPoint : 1040;
		--wrapperSize : 920;
		--gutter : 60;
	}
}
:root{
	--remBase : .1rem;
	--percentBase : 100% / var( --wrapperSize );
	--viewportBase : 100% / var( --breakPoint );
}

/* --------------------------------------------
OLD DESIGN TO NEW BREAKPOINTS DESIGN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--oldBreakPoint : 750;
		--oldRemBase : .1rem * var( --breakPoint ) / var( --oldBreakPoint );
		--oldViewportBase : var( --viewportBase ) * var( --breakPoint ) / var( --oldBreakPoint );
		--oldPercentBase : 100% / var( --wrapperSize ) * .4928571428571429;
	}
}

/* --------------------------------------------
COLOR
--------------------------------------------- */
@property --base{
	syntax : "<color>";
	inherits : false;
	initial-value : #231815;
}
@property --red{
	syntax : "<color>";
	inherits : false;
	initial-value : #d82b22;
}
@property --blue{
	syntax : "<color>";
	inherits : false;
	initial-value : #3770c5;
}
@property --aqua{
	syntax : "<color>";
	inherits : false;
	initial-value : #11a3ba;
}
@property --green{
	syntax : "<color>";
	inherits : false;
	initial-value : #5eab59;
}
@property --pink{
	syntax : "<color>";
	inherits : false;
	initial-value : #ff6c88;
}
@property --yellow{
	syntax : "<color>";
	inherits : false;
	initial-value : #ffbe20;
}

/* --------------------------------------------
FILTER COLOR
--------------------------------------------- */
@property --filterWhite{
	syntax : "*";
	inherits : false;
	initial-value : brightness( 0 ) invert( 1 );
}
@property --filterBase{
	syntax : "*";
	inherits : false;
	initial-value : invert( 6% ) sepia( 20% ) saturate( 1152% ) hue-rotate( 326deg ) brightness( 101% ) contrast( 91% );
}
@property --filterRed{
	syntax : "*";
	inherits : false;
	initial-value : invert( 20% ) sepia( 79% ) saturate( 4359% ) hue-rotate( 353deg ) brightness( 90% ) contrast( 86% );
}
@property --filterBlue{
	syntax : "*";
	inherits : false;
	initial-value : invert( 56% ) sepia( 68% ) saturate( 3322% ) hue-rotate( 195deg ) brightness( 88% ) contrast( 98% );
}
@property --filterAqua{
	syntax : "*";
	inherits : false;
	initial-value : invert( 49% ) sepia( 42% ) saturate( 4618% ) hue-rotate( 157deg ) brightness( 98% ) contrast( 87% );
}

/* --------------------------------------------
TRANSITION
--------------------------------------------- */
@property --ease-in-out{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .4 , 0 , .2 , 1 );
}
@property --ease-in{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .4 , 0 , 1 , 1 );
}
@property --ease-out{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( 0 , 0 , .2 , 1 );
}
@property --ease-accordion{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .25 , 1 , .5 , 1 );
}
@property --ease-fade{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .39 , .575 , .565 , 1 );
}
@property --ease-slide{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .25 , .46 , .45 , .94 );
}
@property --ease-textColor{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .25 , .46 , .45 , .94 );
}
@property --ease-bounce{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .68 , -.55 , .265 , 1.55 );
}
@property --ease-auto{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .77 , 0 , .175 , 1 );
}
:root{
	--transitionBase : 1s var( --easeOutExpo );
	--transitionBounds : 1s var( --transitionBoundsTiming );
}

/* --------------------------------------------
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{
	color-scheme : light ! important;
}
:where( html ){
	block-size : 100%;
	-webkit-text-size-adjust : none;
	tab-size : 2;
	scrollbar-gutter : stable;
}
@media ( prefers-reduced-motion : no-preference ){
	html{
		scroll-behavior : smooth;
	}
}
:where( html:has( dialog[open] ) ){
	overflow : clip;
}
body{
	overflow-x : clip;
	overflow-y : auto;
	font-family : var( --fontFamily );
	font-weight : 400;
	font-optical-sizing : auto;
	line-height : 1;
	color : var( --base );
	overflow-wrap : anywhere;
	text-rendering : optimizeLegibility;
	min-block-size : 100%;
	line-break : strict;

	/* font-feature-settings: "palt" on; */
	scrollbar-gutter : stable;
}
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( fieldset , legend ){
	all : unset;
	display : block;
}
: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( input[type="number"] ){
	&::-webkit-outer-spin-button ,
	&::-webkit-inner-spin-button{
		-webkit-appearance : none;
		margin : 0;
	}
}
:where( p, h1, h2, h3, h4, h5, h6 ){
	overflow-wrap : break-word;
}
:where( p, h1, h2, h3, h4, h5, h6 , a , span ){
	&:has( > img:only-child ){
		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( select ){
	appearance : none;
}
:where( table ){
	border-collapse : collapse;
}
:where( picture ){
	display : block;
	font-size : 0;
}
: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;
	}
}
@view-transition{
	navigation : auto;
}