@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@font-face{
	font-family : "Noto Sans JP";
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : local( "Noto Sans JP" ) , local( "NotoSansJP" ) , local( "NotoSansJP-Regular" ) , url( "../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2" ) format( "woff2" );
	font-display : swap;
}
:root{
	--fontFamily : "Noto Sans JP" , sans-serif;
}
@font-face{
	font-family : Roboto;
	font-variation-settings : "wdth" 100;
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : url( "../fonts/roboto/Roboto-VariableFont_wdth,wght.woff2" ) format( "woff2" );
	font-display : swap;
}
.roboto{
	font-family : Roboto , sans-serif;
}
@font-face{
	font-family : Jost;
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : url( "../fonts/Jost/Jost-VariableFont_wght.woff2" ) format( "woff2" );
	font-display : swap;
}
.jost{
	font-family : Jost , sans-serif;
}

/* --------------------------------------------
UNIT
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--breakPoint : 480;
		--contentWidth : 456;
		--gutter : 12;
		--remBase : 100vw / 480;
		--viewportBase : 100% / var( --breakPoint );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--breakPoint : 1320;
		--contentWidth : 1280;
		--gutter : 20;
		--remBase : min( 1px , 100vw / 1320 );
		--viewportBase : min( 1px , 100% / var( --breakPoint ) );
	}
}
:root{
	--contentBase : 100% / var( --contentWidth );
}

/* --------------------------------------------
COLOR
--------------------------------------------- */
@property --base{
	syntax : "<color>";
	inherits : false;
	initial-value : #333;
}
@property --blue{
	syntax : "<color>";
	inherits : false;
	initial-value : #0f97de;
}
@property --blue02{
	syntax : "<color>";
	inherits : false;
	initial-value : #1d69a4;
}
@property --blue03{
	syntax : "<color>";
	inherits : false;
	initial-value : #4289a8;
}
@property --blue04{
	syntax : "<color>";
	inherits : false;
	initial-value : #108bd7;
}
@property --green{
	syntax : "<color>";
	inherits : false;
	initial-value : #2a8e17;
}
@property --orange{
	syntax : "<color>";
	inherits : false;
	initial-value : #f6931a;
}

/* --------------------------------------------
FILTER COLOR
--------------------------------------------- */
@property --filterWhite{
	syntax : "*";
	inherits : false;
	initial-value : invert( 99% ) sepia( 28% ) saturate( 2% ) hue-rotate( 3deg ) brightness( 108% ) contrast( 100% );
}
@property --filterBase{
	syntax : "*";
	inherits : false;
	initial-value : invert( 13% ) sepia( 48% ) saturate( 0% ) hue-rotate( 252deg ) brightness( 91% ) contrast( 80% );
}
@property --filterGreen{
	syntax : "*";
	inherits : false;
	initial-value : invert( 32% ) sepia( 57% ) saturate( 4703% ) hue-rotate( 82deg ) brightness( 104% ) contrast( 82% );
}

/* --------------------------------------------
TRANSITION
--------------------------------------------- */
:root{
	--hoverDuration : .3s;
	--hoverTimingFunction : linear;
	--transitionBase : var( --hoverDuration ) var( --hoverTimingFunction )
;
}

/* --------------------------------------------
REGULATE
--------------------------------------------- */
*{
	padding : 0;
	margin : 0;
}
* , *::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;
}
: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;
	}
}
:is( body:has( dialog[open] ) ){
	overflow : clip;
}
body{
	overflow-x : clip;
	overflow-y : auto;
	font-family : var( --fontFamily );
	font-weight : 400;
	font-feature-settings : "palt" on;
	font-optical-sizing : auto;
	line-height : 1;
	color : var( --base );
	word-break : normal;
	overflow-wrap : anywhere;
	text-rendering : optimizeLegibility;
	min-block-size : 100%;
	scrollbar-gutter : stable;
	line-break : strict;
}
main{
	overflow-x : clip;
}
:where( p , h1 , h2 , h3 , h4 , h5 , h6 ){
	overflow-wrap : break-word;
}
:where( ul, ol ){
	list-style : none;
}
:where( a ){
	color : var( --base );
	text-decoration : none;
	text-underline-offset : calc( ( 1lh - 1em ) / 2 );
	touch-action : manipulation;
	cursor : pointer;
	text-decoration-skip-ink : auto;
}
:where( picture ){
	display : block;
	font-size : 0;
}
:where( img ){
	image-rendering : -webkit-optimize-contrast;
}
:where( p , h1 , h2 , h3 , h4 , h5 , h6 , a , span ){
	&:has( > img:only-child ){
		font-size : 0;
		line-height : 1;
	}
}
:where( svg , video , canvas , audio , iframe , embed , object ){
	display : block;
}
:where( svg ){
	fill : currentColor;
	stroke : none;
}
:where( svg:not( [fill] ) ){
	fill : none;
	stroke : currentColor;
	stroke-linecap : round;
	stroke-linejoin : round;
}
:where( img , svg , video ){
	max-width : inherit;
	font-size : 0;
	vertical-align : top;
	inline-size : auto;
}
:where( button ){
	font : inherit;
	font-size : inherit;
	color : inherit;
	letter-spacing : inherit;
	touch-action : manipulation;
	cursor : pointer;
	background-color : transparent;
	&:focus , &:focus-visible{
		outline : none;
	}
}
: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;
	}
}
:where( table ){
	border-collapse : collapse;
}
:where( em ,dfn ){
	font-style : normal;
}

/* @mixin regulateForms; */
/* --------------------------------------------
VIEW TRANSITION
--------------------------------------------- */
@view-transition{
	navigation : auto;
}

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