@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");/* --------------------------------------------
RESET
--------------------------------------------- */
#jgrants-container{
	all : revert;
	box-sizing : border-box;
	padding : 0;
	margin : 0;
	word-break : break-all;
	:where( *:not( svg , path , line , rect ) ){
		all : revert;
		box-sizing : border-box;
		padding : 0;
		margin : 0;
		word-break : break-all;
		&::before , &::after{
			content : none;
		}
	}
}
/* --------------------------------------------
SETTINGS
--------------------------------------------- */#jgrants-container{
	--tw-border-spacing-x : 0;
	--tw-border-spacing-y : 0;
	--tw-translate-x : 0;
	--tw-translate-y : 0;
	--tw-rotate : 0;
	--tw-skew-x : 0;
	--tw-skew-y : 0;
	--tw-scale-x : 1;
	--tw-scale-y : 1;
	--tw-scroll-snap-strictness : proximity;
	--tw-ring-offset-width : 0px;
	--tw-ring-offset-color : white;
	--tw-ring-color : rgb( 59 130 246 / .5 );
	--tw-ring-offset-shadow : 0 0 #0000;
	--tw-ring-shadow : 0 0 #0000;
	--tw-shadow : 0 0 #0000;
	--tw-shadow-colored : 0 0 #0000;
}
#jgrants-container{
	font-family : "Noto Sans JP" , -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , sans-serif;
	font-style : normal;
	font-weight : 400;
	font-optical-sizing : auto;
	background : var( --jgrants-background );
	container-type : inline-size;
	@media print , screen and ( width > 640px ){
		max-width : 1102px;
		margin-inline : auto;
	}
}
#jgrants-container{
	.jgrants-card{
		--tw-shadow : 0 calc( 10 * var( --cqw ) ) calc( 15 * var( --cqw ) ) calc( -3 * var( --cqw ) ) rgb( 0 0 0 / .1 ) , 0 calc( 4 * var( --cqw ) ) calc( 6 * var( --cqw ) ) calc( -4 * var( --cqw ) ) rgb( 0 0 0 / .1 );
		--tw-shadow-colored : 0 calc( 10 * var( --cqw ) ) calc( 15 * var( --cqw ) ) calc( -3 * var( --cqw ) ) var( --tw-shadow-color ) , 0 calc( 4 * var( --cqw ) ) calc( 6 * var( --cqw ) ) calc( -4 * var( --cqw ) ) var( --tw-shadow-color );
		--cqw : 100cqw / var( --breakPoint );
		--fz : 100cqw * var( --jgrants-remSize ) / var( --breakPoint );
		border-color : var( --jgrants-primary );
		border-style : solid;
		border-top-width : calc( 4 * var( --cqw ) );
		border-bottom-width : 1px;
		border-left-width : 1px;
		border-right-width : 1px;
		border-radius : var( --jgrants-radius );
		box-shadow : 0 calc( 4 * var( --cqw ) ) calc( 6 * var( --cqw ) ) rgb( 0 0 0 / .1 );
		box-shadow : var( --tw-ring-offset-shadow , 0 0 #0000 ) , var( --tw-ring-shadow , 0 0 #0000 ) , var( --tw-shadow );
		@container (max-width: 640px){
			--breakPoint : 640;
		}
		@container (min-width: 640.1px){
			--breakPoint : 1102;
		}
	}
	.jgrants-header h2 , .step-header h3{
		color : var( --jgrants-text );
	}
	.jgrants-header{
		padding : calc( 24 * var( --cqw ) );
		text-align : center;
		h2{
			margin : 0;
			font-size : calc( 30 * var( --fz ) );
			font-weight : 700;
		}
		p{
			margin-top : calc( 6 * var( --cqw ) );
			font-size : calc( 16 * var( --fz ) );
			color : #6b7280;
		}
	}
	.progress-fill , .btn-primary , .area-btn:hover , .area-btn.selected{
		background-color : var( --jgrants-primary );
	}
	.jgrants-progress{
		padding-inline : calc( 24 * var( --cqw ) );
		margin-bottom : calc( 32 * var( --cqw ) );
	}
	.progress-bar{
		width : 100%;
		height : calc( 16 * var( --cqw ) );
		overflow : hidden;
		background-color : #e5e7eb;
		border-radius : 100vmax;
	}
	.progress-fill{
		height : 100%;
		transition : width .3s ease;
	}
	.progress-text{
		margin-top : calc( 8 * var( --cqw ) );
		font-size : calc( 14 * var( --fz ) );
		color : #6b7280;
		text-align : center;
	}
	#jgrants-form{
		padding-inline : calc( 24 * var( --cqw ) );
	}
	.jgrants-step{
		min-height : calc( 324 * var( --cqw ) );
		padding-block : calc( 24 * var( --cqw ) );
		&:not( .active ){
			display : none;
		}
		&.active{
			display : block;
		}
	}
	.step-header{
		margin-bottom : calc( 32 * var( --cqw ) );
		text-align : center;
		h3{
			display : flex;
			column-gap : calc( 16 * var( --cqw ) );
			align-items : center;
			justify-content : center;
			margin-bottom : calc( 16 * var( --cqw ) );
			font-size : calc( 24 * var( --fz ) );
			font-weight : 700;
			svg{
				width : auto;
				height : calc( 32 * var( --cqw ) );
				color : var( --jgrants-primary );
			}
		}
		p{
			font-size : calc( 16 * var( --fz ) );
			color : hsl( 240 3.8% 46.1% );
		}
	}
	.btn-primary:hover{
		background-color : var( --jgrants-primary );
		filter : brightness( .9 );
	}
	.btn-secondary{
		background-color : var( --jgrants-secondary );
	}
	.checkbox-grid label:hover , .employee-card:hover , .employee-card:has( input:checked ){
		border-color : var( --jgrants-primary );
	}
	.employee-card input[type="radio"]:checked + .card-content{
		color : var( --jgrants-primary );
	}

	/* .jgrants-card *, .step-header p, .progress-text {
    border-radius: var(--jgrants-radius);
  } */
	.category-tabs{
		display : grid;
		grid-template-columns : repeat( 4 , minmax( 0 , 1fr ) );
		padding : calc( 4 * var( --cqw ) );
		margin-bottom : calc( 24 * var( --cqw ) );
		background-color : hsl( 240 4.8% 95.9% );
		border-radius : calc( 6 * var( --cqw ) );
	}
	.tab-btn{
		padding : calc( 6 * var( --cqw ) ) calc( 12 * var( --cqw ) );
		font-size : calc( 12 * var( --fz ) );
		font-weight : 500;
		cursor : pointer;
		border : 0;
		transition-timing-function : cubic-bezier( .4 , 0 , .2 , 1 );
		transition-duration : 150ms;
		transition-property : all;
		&.active , &:hover{
			background : white;
		}
	}
	.category-content{
		display : none;
		&.active{
			display : block;
		}
		&[data-category="business"]{
			label{
				color : rgb( 29 78 216 );
				background-color : rgb( 239 246 255 );
				border-color : rgb( 191 219 254 );
			}
		}
		&[data-category="management"]{
			label{
				color : rgb( 21 128 61 );
				background-color : rgb( 240 253 244 );
				border-color : rgb( 187 247 208 );
			}
		}
		&[data-category="support"]{
			label{
				color : rgb( 126 34 206 );
				background-color : rgb( 250 245 255 );
				border-color : rgb( 233 213 255 );
			}
		}
		&[data-category="social"]{
			label{
				color : rgb( 194 65 12 );
				background-color : rgb( 255 247 237 );
				border-color : rgb( 254 215 170 );
			}
		}
	}
	.checkbox-grid{
		display : grid;
		grid-template-columns : repeat( 2 , minmax( 0 , 1fr ) );
		gap : calc( 12 * var( --cqw ) );
		label{
			display : flex;
			align-items : center;
			padding : calc( 16 * var( --cqw ) );
			font-size : calc( 16 * var( --fz ) );
			cursor : pointer;
			border-style : solid;
			border-width : 1px;
			border-radius : calc( 8 * var( --cqw ) );
			transition-timing-function : cubic-bezier( .4 , 0 , .2 , 1 );
			transition-duration : 150ms;
			transition-property : color , background-color , border-color , text-decoration-color , fill , stroke , -webkit-text-decoration-color;
		}
		label:hover{
			--tw-shadow : 0 1px 2px 0 rgb( 0 0 0 / .05 );
			--tw-shadow-colored : 0 1px 2px 0 var( --tw-shadow-color );
			box-shadow : var( --tw-ring-offset-shadow , 0 0 #0000 ) , var( --tw-ring-shadow , 0 0 #0000 ) , var( --tw-shadow );
		}
		input[type="checkbox"]{
			width : calc( 16 * var( --cqw ) );
			height : calc( 16 * var( --cqw ) );
			margin-right : calc( 12 * var( --cqw ) );
			accent-color : var( --jgrants-primary );
		}
	}
	.industry-grid{
		display : grid;
		gap : calc( 16 * var( --cqw ) );
		@container (max-width: 640px){
			grid-template-columns : 100%;
		}
		@container (min-width: 640.1px) and (max-width : 1101.9px){
			grid-template-columns : repeat( 2 , minmax( 0 , 1fr ) );
		}
		@container (min-width: 1102px){
			grid-template-columns : repeat( 3 , minmax( 0 , 1fr ) );
		}
	}
	.industry-category{
		padding : calc( 16 * var( --cqw ) );
		background : white;
		border : 1px solid hsl( 240 5.9% 90% );
		border-radius : calc( 8 * var( --cqw ) );
		h4{
			display : flex;
			align-items : center;
			justify-content : start;
			margin-bottom : calc( 12 * var( --cqw ) );
			font-size : calc( 14 * var( --fz ) );
			font-weight : 600;
			svg{
				height : calc( 16 * var( --cqw ) );
			}
		}
		label{
			display : flex;
			align-items : center;
			font-size : calc( 12 * var( --fz ) );
			cursor : pointer;
			+ label{
				margin-top : calc( 8 * var( --cqw ) );
			}
		}
		input{
			width : calc( 16 * var( --cqw ) );
			height : calc( 16 * var( --cqw ) );
			margin-right : calc( 16 * var( --cqw ) );
			accent-color : var( --jgrants-primary );
		}
	}
	.employee-grid{
		display : grid;
		grid-template-columns : repeat( 4 , minmax( 0 , 1fr ) );
		gap : calc( 16 * var( --cqw ) );
	}
	.employee-card{
		padding : calc( 16 * var( --cqw ) );
		text-align : center;
		cursor : pointer;
		background : white;
		border : 1px solid hsl( 240 5.9% 90% );
		border-radius : calc( 8 * var( --cqw ) );
		transition-timing-function : cubic-bezier( .4 , 0 , .2 , 1 );
		transition-duration : 150ms;
		transition-property : all;
		&:hover{
			--tw-shadow : 0 4px 6px -1px rgb( 0 0 0 / .1 ) , 0 2px 4px -2px rgb( 0 0 0 / .1 );
			--tw-shadow-colored : 0 4px 6px -1px var( --tw-shadow-color ) , 0 2px 4px -2px var( --tw-shadow-color );
			background-color : hsl( var( 240 4.8% 95.9% ) );
			box-shadow : var( --tw-ring-offset-shadow , 0 0 #0000 ) , var( --tw-ring-shadow , 0 0 #0000 ) , var( --tw-shadow );
		}
		input[type="radio"]{
			display : none;
		}
		input[type="radio"]:checked + .card-content{
			color : var( --jgrants-primary );
		}
		&:has( input:checked ){
			--tw-ring-offset-shadow : var( --tw-ring-inset ) 0 0 0 var( --tw-ring-offset-width ) var( --tw-ring-offset-color );
			--tw-ring-shadow : var( --tw-ring-inset ) 0 0 0 calc( 2px + var( --tw-ring-offset-width ) ) var( --tw-ring-color );
			background : #eff6ff;
			border-color : var( --jgrants-primary );
			box-shadow : var( --tw-ring-offset-shadow ) , var( --tw-ring-shadow ) , var( --tw-shadow , 0 0 #0000 );
		}
		:where( strong , small ){
			display : block;
		}
		strong{
			font-size : calc( 18 * var( --fz ) );
			font-weight : 600;
			line-height : 1.75;
		}
		small{
			margin-top : calc( 4 * var( --cqw ) );
			font-size : calc( 12 * var( --fz ) );
			line-height : calc( 16 / 12 );
		}
	}
	.area-grid{
		display : grid;
		gap : calc( 16 * var( --cqw ) );
		@container (max-width: 640px){
			grid-template-columns : 100%;
		}
		@container (min-width: 640.1px) and (max-width : 1101.9px){
			grid-template-columns : repeat( 2 , minmax( 0 , 1fr ) );
		}
		@container (min-width: 1102px){
			grid-template-columns : repeat( 3 , minmax( 0 , 1fr ) );
		}
	}
	.area-category{
		padding : calc( 16 * var( --cqw ) );
		background-color : white;
		border : solid 1px hsl( 240 5.9% 90% );
		border-radius : calc( 8 * var( --cqw ) );
	}
	.area-category h4{
		margin-bottom : calc( 12 * var( --cqw ) );
		font-size : calc( 14 * var( --fz ) );
		font-weight : 600;
		text-align : center;
	}
	.area-btn{
		display : block;
		width : 100%;
		padding-block : calc( 4 * var( --cqw ) );
		padding-inline : calc( 12 * var( --cqw ) );
		font-size : calc( 12 * var( --fz ) );
		font-weight : 500;
		text-align : left;
		cursor : pointer;
		background : white;
		border : 1px solid hsl( 240 5.9% 90% );
		border-radius : calc( 6 * var( --cqw ) );
		transition-timing-function : cubic-bezier( .4 , 0 , .2 , 1 );
		transition-duration : 150ms;
		transition-property : color , background-color , border-color , fill , stroke , -webkit-text-decoration-color;
		transition-property : color , background-color , border-color , text-decoration-color , fill , stroke;
		transition-property : color , background-color , border-color , text-decoration-color , fill , stroke , -webkit-text-decoration-color;
		&:hover ,
		&.selected{
			color : white;
			background : var( --jgrants-primary );
			border-color : var( --jgrants-primary );
		}
		+ .area-btn{
			margin-top : calc( 8 * var( --cqw ) );
		}
	}
	.jgrants-results{
		text-align : center;
		>h3{
			margin-block : calc( 8 * var( --cqw ) );
			font-size : calc( 24 * var( --fz ) );
			font-weight : 700;
			line-height : calc( 32 / 24 );
		}
		>p{
			font-size : calc( 18 * var( --fz ) );
			line-height : calc( 28 / 18 );
			strong{
				font-size : calc( 20 * var( --fz ) );
				font-weight : 700;
				line-height : calc( 28 / 20 );
			}
		}
	}
	.results-grid{
		display : grid;
		gap : calc( 16 * var( --cqw ) );
		margin-top : calc( 16 * var( --cqw ) );
		+ p{
			margin-top : calc( 40 * var( --cqw ) );
			font-size : calc( 16 * var( --fz ) );
			line-height : calc( 24 / 16 );
		}
	}
	.result-card{
		padding : calc( 24 * var( --cqw ) );
		text-align : left;
		background : white;
		border : 1px solid hsl( 240 5.9% 90% );
		border-radius : calc( 8 * var( --cqw ) );
		transition : all .2s;
	}
	.result-card:hover{
		box-shadow : 0 calc( 4 * var( --cqw ) ) calc( 6 * var( --cqw ) ) rgb( 0 0 0 / .1 );
	}
	.result-title{
		margin-bottom : calc( 6 * var( --cqw ) );
		font-size : calc( 20 * var( --fz ) );
		font-weight : 600;
		line-height : calc( 28 / 20 );
		+ div{
			margin-bottom : calc( 24 * var( --cqw ) );
			strong{
				font-weight : 400;
			}
		}
	}
	.result-info{
		font-size : calc( 16 * var( --fz ) );
		line-height : calc( 24 / 16 );
	}
	#subsidy-dialog{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 1000;
		place-items : center;
		align-content : center;
		width : 100%;
		max-width : 100%;
		height : 100dvh;
		padding : 0;
		margin : 0;
		background-color : transparent;
		border : 0;
		&::backdrop{
			background-color : color-mix( in sRGB , black 80% , transparent );
		}
		#dialog-content{
			position : relative;
			width : 100%;
			max-width : 672px;
			background-color : white;
			border-radius : 8px;
			container-type : inline-size;
		}
		#dialog-close{
			position : absolute;
			top : calc( 16 * 100cqw / 672 );
			right : calc( 16 * 100cqw / 672 );
			font-size : 0;
			background-color : transparent;
			border : 0;
			svg{
				width : auto;
				height : calc( 24 * 100cqw / 672 );
			}
		}
		#dialog-dynamic-content{
			padding-inline : calc( 24 * 100cqw / 672 );
			padding-top : calc( 24 * 100cqw / 672 );
		}
		h3{
			font-size : calc( 20 * 100cqw * var( --jgrants-remSize ) / 672 );
			line-height : calc( 28 / 20 );
		}
		p{
			margin-top : calc( 6 * 100cqw / 672 );
			font-size : alc( 14 * 100cqw * var( --jgrants-remSize ) / 672 );
			line-height : calc( 20 / 14 );
			color : hsl( 240 3.8% 46.1% );
		}
		dl{
			display : grid;
			gap : calc( 16 * 100cqw / 672 );
			margin-top : calc( 16 * 100cqw / 672 );
			@container (max-width: 671.9px){
				grid-template-columns : 1fr;
			}
			@container (min-width: 672px){
				grid-template-columns : repeat( 2 , minmax( 0 , 1fr ) );
			}
		}
		dt{
			font-size : alc( 16 * 100cqw * var( --jgrants-remSize ) / 672 );
			font-weight : 600;
			line-height : calc( 24 / 16 );
		}
		dd{
			margin-top : calc( 8 * 100cqw / 672 );
			font-size : alc( 14 * 100cqw * var( --jgrants-remSize ) / 672 );
			line-height : calc( 20 / 14 );
		}
		#dialog-footer{
			padding-inline : calc( 24 * 100cqw / 672 );
			padding-top : calc( 16 * 100cqw / 672 );
			padding-bottom : calc( 24 * 100cqw / 672 );
			margin-top : calc( 16 * 100cqw / 672 );
			border : solid 1px hsl( 240 5.9% 90% );
			h4{
				font-size : alc( 16 * 100cqw * var( --jgrants-remSize ) / 672 );
				font-weight : 600;
				line-height : calc( 24 / 16 );
			}
			p{
				margin-top : calc( 8 * 100cqw / 672 );
				font-size : alc( 14 * 100cqw * var( --jgrants-remSize ) / 672 );
				line-height : calc( 20 / 14 );
				color : hsl( 240 3.8% 46.1% );
			}
		}
		.buttons{
			display : grid;
			gap : calc( 12 * 100cqw / 672 );
			align-items : center;
			margin-top : calc( 32 * 100cqw / 672 );
			@container (max-width: 671.9px){
				grid-template-columns : 1fr;
			}
			@container (min-width: 672px){
				grid-template-columns : repeat( 2 , minmax( 0 , 1fr ) );
			}
			button{
				display : flex;
				align-items : center;
				justify-content : center;
				width : 100%;
				height : calc( 40 * 100cqw / 672 );
				padding : calc( 8 * 100cqw / 672 ) calc( 16 * 100cqw / 672 );
				font-size : 0;
				font-size : alc( 14 * 100cqw * var( --jgrants-remSize ) / 672 );
				line-height : calc( 20 / 14 );
				background-color : transparent;
				border : 0;
				border-radius : calc( 6 * 100cqw / 672 );
				svg{
					width : auto;
					height : calc( 16 * 100cqw / 672 );
				}
				&:nth-of-type( 1 ){
					color : white;
					background-color : black;
				}
				&:nth-of-type( 2 ){
					background-color : white;
					outline : solid 1px hsl( 240 5.9% 90% );
					outline-offset : -1px;
				}
			}
		}
	}
	#jgrants-contact{
		> h3{
			margin-bottom : calc( 16 * var( --cqw ) );
			font-size : calc( 24 * var( --fz ) );
			font-weight : 700;
			line-height : calc( 32 / 24 );
			text-align : center;
		}
		> p{
			margin-bottom : calc( 24 * var( --cqw ) );
			font-size : calc( 16 * var( --fz ) );
			line-height : calc( 24 / 16 );
			text-align : center;
		}
		> div{
			> h3{
				margin-bottom : calc( 16 * var( --cqw ) );
				font-size : calc( 24 * var( --fz ) );
				font-weight : 700;
				line-height : calc( 32 / 24 );
				text-align : center;
			}
			> p{
				margin-bottom : calc( 24 * var( --cqw ) );
				font-size : calc( 16 * var( --fz ) );
				line-height : calc( 24 / 16 );
				text-align : center;
			}
		}
	}
	.contact-form{
		margin-inline : auto;
		label{
			display : block;
			font-size : calc( 14 * var( --fz ) );
			font-weight : 500;
			+ label{
				margin-top : calc( 24 * var( --cqw ) );
			}
		}
		:where( input , select , textarea ){
			display : block;
			width : 100%;
			padding : calc( 8 * var( --cqw ) ) calc( 12 * var( --cqw ) );
			margin-top : calc( 8 * var( --cqw ) );
			border : 1px solid hsl( 240 5.9% 90% );
			border-radius : calc( 6 * var( --cqw ) );
		}
		:where( input , select , textarea ){
			height : calc( 40 * var( --cqw ) );
		}
		textarea{
			height : calc( 100 * var( --cqw ) );
		}
		@media print , screen and ( width > 640px ){
			width : calc( 512 * var( --cqw ) );
		}
	}
	.consent-section{
		margin-top : calc( 8 * var( --cqw ) );
		.consent-text{
			font-size : calc( 14 * var( --fz ) );
			line-height : calc( 20 / 14 );
		}
		.consent-checkbox{
			display : flex;
			column-gap : calc( 12 * var( --cqw ) );
			align-items : center;
			justify-content : center;
			margin-top : calc( 8 * var( --cqw ) );
			font-size : calc( 14 * var( --fz ) );
			line-height : calc( 20 / 14 );
			input{
				width : calc( 16 * var( --cqw ) );
				height : calc( 16 * var( --cqw ) );
				margin : 0;
				font-size : 0;
			}
		}
	}
	.required{
		color : #dc2626;
	}
	.jgrants-footer{
		display : flex;
		align-items : center;
		justify-content : space-between;
		padding-block : calc( 24 * var( --cqw ) );
		padding-inline : calc( 24 * var( --cqw ) );
		margin-top : calc( 32 * var( --cqw ) );
	}
	#jgrants-form:has( .jgrants-step.active[data-step="1"] ) + .jgrants-footer{
		#next-btn{
			margin-left : auto;
		}
	}
	#contact-btn{
		margin-inline : auto;
	}
	#submit-btn{
		width : calc( 512 * var( --cqw ) );
		margin-inline : auto;
	}
	.btn{
		padding : calc( 8 * var( --cqw ) ) calc( 16 * var( --cqw ) );
		font-size : calc( 14 * var( --fz ) );
		font-weight : 500;
		cursor : pointer;
		border : none;
		border-radius : calc( 6 * var( --cqw ) );
		transition : all .2s;
	}
	.btn-primary{
		color : white;
		background : var( --jgrants-primary );
	}
	.btn-primary:hover{
		background : #1d4ed8;
	}
	.btn-secondary{
		color : white;
		background : #6b7280;
	}
	.btn-secondary:hover{
		background : #4b5563;
	}
	.loading{
		padding : 2rem;
		text-align : center;
	}
	.loading::after{
		display : inline-block;
		width : 20px;
		height : 20px;
		content : "";
		border : 2px solid #d1d5db;
		border-top : 2px solid var( --jgrants-primary );
		border-radius : 50%;
		animation : spin 1s linear infinite;
	}
	@keyframes spin{
		0%{
			transform : rotate( 0deg );
		}
		100%{
			transform : rotate( 360deg );
		}
	}
	@container (max-width: 640px){
		.checkbox-grid{
			grid-template-columns : 1fr;
		}
		.employee-grid{
			grid-template-columns : repeat( 2 , 1fr );
		}
		.category-tabs{
			justify-content : center;
		}
		.tab-btn{
			padding : .375rem .75rem;
			font-size : .75rem;
		}
	}
}