@charset "UTF-8";

/* --------------------------------------------
GOAL
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#about{
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 68 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#about{
		padding-top : calc( 28 var( --remBase ) );
		padding-bottom : calc( 120 var( --remBase ) );
	}
}
#aboutGoal h2{
	width : fit-content;
	font-weight : 700;
	color : var( --TextColor03 );
	background-color : var( --AccentColor01 );
}
#aboutGoal p:nth-of-type( 1 ){
	font-weight : 700;
}
@media screen and ( max-width : 750px ){
	#aboutGoal::after{
		display : block;
		width : 100%;
		height : calc( 234.5 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		content : "";
		background : url( "../images/home/goal/img_pc.webp" ) center bottom / contain no-repeat;
	}
	#aboutGoal :where( h2 , p ){
		margin-inline : calc( 16 var( --percentBase ) );
	}
	#aboutGoal h2{
		padding-block : calc( 9 var( --remBase ) );
		padding-inline : calc( 16 var( --viewportBase ) );
		font-size : 1.6rem;
	}
	#aboutGoal p:nth-of-type( 1 ){
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.3;
	}
	#aboutGoal p:nth-of-type( 2 ){
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#aboutGoal{
		display : grid;
		grid-template-rows : 1fr auto auto auto 1fr;
		grid-template-columns : 1fr calc( 699 var( --percentBase ) );
		column-gap : calc( 24 var( --percentBase ) );
	}
	#aboutGoal::before{
		display : block;
		grid-row : 1/6;
		grid-column : 2;
		align-self : end;
		height : calc( 409 var( --remBase ) );
		content : "";
		background : url( "../images/home/goal/img_pc.webp" ) center / contain no-repeat;
	}
	#aboutGoal h2{
		grid-row : 2;
		grid-column : 1;
		padding-block : calc( 9 var( --remBase ) );
		padding-left : calc( 16 var( --remBase ) );
		padding-right : calc( 40 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
	}
	#aboutGoal p:nth-of-type( 1 ){
		grid-row : 3;
		grid-column : 1;
		padding-top : calc( 8 var( --remBase ) );
		font-size : calc( 34 var( --fontCoef ) );
		line-height : 1.3;
	}
	#aboutGoal p:nth-of-type( 2 ){
		grid-row : 4;
		grid-column : 1;
		padding-top : calc( 16 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 2;
	}
}
#aboutLists li{
	background-color : white;
}
#aboutLists h2{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	font-weight : 700;
	color : var( --TextColor03 );
	background-color : var( --AccentColor02 );
}
#aboutLists h2::before{
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 center;
	background-size : contain;
}
#aboutLists h2::after{
	position : absolute;
	left : 100%;
	display : block;
	height : 100%;
	clip-path : polygon( 0 0 , 100% 0 , 0 100% );
	font-size : 0;
	content : "";
	background-color : var( --AccentColor02 );
}
#aboutLists li:nth-child( 1 ) h2::before{
	background-image : url( "../images/home/list/icon01.svg" );
}
#aboutLists li:nth-child( 2 ) h2::before{
	background-image : url( "../images/home/list/icon02.svg" );
}
@media screen and ( max-width : 750px ){
	#aboutLists{
		padding-block : calc( 24 var( --remBase ) );
		overflow-x : clip;
		background-color : var( --AccentColor01 );
	}
	#aboutLists li{
		padding-block : calc( 16 var( --remBase ) );
	}
	#aboutLists li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#aboutLists h2{
		width : 100%;
		height : calc( 64 var( --remBase ) );
		margin-left : calc( -24 var( --percentBase ) );
		font-size : 2rem;
	}
	#aboutLists h2::after{
		width : calc( 24 var( --percentBase ) );
	}
	#aboutLists li:nth-child( 1 ) h2{
		grid-template-columns : calc( 59 * 100% / 352 ) auto;
		column-gap : calc( 8 * 100% / 352 );
		padding-left : calc( 16 var( --percentBase ) );
	}
	#aboutLists li:nth-child( 1 ) h2::before{
		height : calc( 48 var( --remBase ) );
	}
	#aboutLists li:nth-child( 2 ) h2{
		grid-template-columns : calc( 42 * 100% / 340 ) auto;
		column-gap : calc( 16 * 100% / 340 );
		padding-left : calc( 28 var( --percentBase ) );
	}
	#aboutLists li:nth-child( 2 ) h2::before{
		height : calc( 48 var( --remBase ) );
	}
	#aboutLists p{
		padding-inline : calc( 16 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#aboutLists{
		position : relative;
		display : grid;
		grid-template-columns : minmax( calc( 560 var( --percentBase ) ) , 560px ) minmax( calc( 40 var( --percentBase ) ) , 40px ) minmax( calc( 560 var( --percentBase ) ) , 560px );
		padding-block : calc( 32 var( --remBase ) );
		overflow : hidden;
		background : url( "../images/home/list/bg_pc.jpg" ) center / cover no-repeat;
	}
	#aboutLists::before{
		position : absolute;
		top : 0;
		left : 0;
		display : block;
		width : 100%;
		height : 100%;
		content : "";
		background-color : rgba( var( --AccentColorRGB ) / .9 );
	}
	#aboutLists li{
		position : relative;
		padding-block : calc( 16 var( --remBase ) );
	}
	#aboutLists h2{
		width : calc( 100% - ( 16 * 100% / 560 ) );
		height : calc( 78 var( --remBase ) );
		margin-left : calc( -8 * 100% / 560 );
		font-size : calc( 22 var( --fontCoef ) );
	}
	#aboutLists h2::after{
		width : calc( 16 * 100% / 544 );
	}
	#aboutLists li:nth-child( 1 ){
		grid-row : 1;
		grid-column : 1;
	}
	#aboutLists li:nth-child( 1 ) h2{
		grid-template-columns : calc( 79 * 100% / 508 ) auto;
		column-gap : calc( 24 * 100% / 508 );
		padding-left : calc( 36 * 100% / 544 );
	}
	#aboutLists li:nth-child( 1 ) h2::before{
		height : calc( 64 var( --remBase ) );
	}
	#aboutLists li:nth-child( 2 ){
		grid-row : 1;
		grid-column : 3;
	}
	#aboutLists li:nth-child( 2 ) h2{
		grid-template-columns : calc( 54 * 100% / 512 ) auto;
		column-gap : calc( 16 * 100% / 512 );
		padding-left : calc( 32 * 100% / 544 );
	}
	#aboutLists li:nth-child( 2 ) h2::before{
		height : calc( 63 var( --remBase ) );
	}
	#aboutLists p{
		padding-inline : calc( 24 * 100% / 560 );
		margin-top : calc( 16 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.5;
	}
}
#ablutLink a{
	display : grid;
	align-items : center;
	width : fit-content;
	margin-inline : auto;
	color : var( --TextColor03 );
	background-color : var( --AccentColor01 );
	border-radius : 100vmax;
}
#ablutLink a::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/circle01.svg" ) 0 center / contain no-repeat;
	filter : var( --filterWhite );
}
@media screen and ( max-width : 750px ){
	#ablutLink{
		margin-top : calc( 16 var( --remBase ) );
	}
	#ablutLink a{
		grid-template-columns : calc( 20 * 100% / 300 ) auto;
		column-gap : calc( 4 * 100% / 300 );
		align-items : center;
		justify-content : center;
		width : calc( 300 var( --percentBase ) );
		height : calc( 60 var( --remBase ) );
		font-size : 2rem;
	}
	#ablutLink a::before{
		height : calc( 20 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#ablutLink{
		margin-top : calc( 40 var( --remBase ) );
	}
	#ablutLink a{
		grid-template-columns : calc( 18 var( --fontCoef ) ) auto;
		column-gap : calc( 4 var( --remBase ) );
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 64 var( --remBase ) );
		font-size : calc( 20 var( --fontCoef ) );
	}
	#ablutLink a::before{
		height : calc( 18 var( --fontCoef ) );
	}
}
@media ( hover : hover ){
	#ablutLink a:hover{
		color : var( --TextColor01 );
		background-color : #eee;
	}
	#ablutLink a:hover::before{
		filter : var( --filterAccentColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#ablutLink a{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	#ablutLink a::before{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
SECTIONS
--------------------------------------------- */
#sections h2{
	font-weight : 700;
	text-align : center;
}
#sections h2::after{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --AccentColor01 );
}
@media screen and ( max-width : 750px ){
	#sections{
		padding-bottom : calc( 68 var( --remBase ) );
	}
	#sections > div + div{
		margin-top : calc( 32 var( --remBase ) );
	}
	#sections h2{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	#sections h2::after{
		width : 200px;
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#sections{
		display : grid;
		grid-template-rows : auto auto auto 1fr;
		grid-template-columns : calc( 440 var( --percentBase ) ) calc( 560 var( --percentBase ) ) 1fr;
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		justify-content : start;
		padding-bottom : calc( 120 var( --remBase ) );
		overflow-x : clip;
	}
	#sections > div:nth-of-type( 1 ){
		display : contents;
	}
	#sections > div:nth-of-type( 1 ) > h2{
		grid-row : 1;
		grid-column : 1/4;
		padding-bottom : calc( 32 var( --remBase ) );
		font-size : calc( 34 var( --fontCoef ) );
		line-height : 1.3;
	}
	#sections > div:nth-of-type( 1 ) > h2::after{
		width : calc( 200 var( --fontCoef ) );
		height : calc( 4 var( --fontCoef ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#sections > div:nth-of-type( 1 ) > section{
		grid-column : 2;
		align-self : start;
	}
	#sections #manager{
		grid-row : 2;
	}
	#sections #company{
		grid-row : 3/5;
	}
}
#sections > div:nth-of-type( 2 ){
	grid-row : 2/5;
	grid-column : 1;
}
:where( #manager , #company )::before{
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-size : contain;
}
:where( #manager , #company ) h3{
	position : relative;
	font-weight : 600;
	background-color : var( --BackColor01 );
}
:where( #manager , #company ) h3::before{
	position : absolute;
	top : 50%;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --AccentColor01 );
	translate : 0 -50%;
}
:where( #manager , #company ) li{
	border-bottom : solid 1px var( --BackColor01 );
}
:where( #manager , #company ) li a{
	display : grid;
	align-items : center;
	justify-content : start;
}
:where( #manager , #company ) li a::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/circle01.svg" ) left center / contain no-repeat;
}
:where( #manager , #company ) li a:not( .apply )::before{
	filter : var( --filterAccentColor01 );
}
:where( #manager , #company ) li a.apply::before{
	filter : var( --filterAccentColor02 );
}
:where( #manager , #company ) .links a{
	display : grid;
	place-items : center;
}
:where( #manager , #company ) .links .apply{
	color : var( --TextColor03 );
	background-color : var( --AccentColor02 );
}
:where( #manager , #company ) .links .mypage{
	border-color : var( --AccentColor03-4 );
	border-style : solid;
}
:where( #manager , #company ) .links .mypage::before{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 center;
	background-size : contain;
}
@media screen and ( max-width : 750px ){
	:where( #manager , #company )::before{
		background-position : center top;
	}
	:where( #manager , #company ) h3{
		padding-block : calc( 18 var( --remBase ) );
		padding-inline : calc( 18 var( --viewportBase ) );
		font-size : 2.4rem;
	}
	:where( #manager , #company ) h3::before{
		left : 0;
		width : calc( 8 var( --viewportBase ) );
		height : calc( 100% - ( 28 var( --remBase ) ) );
	}
	:where( #manager , #company ) > p , :where( #manager , #company ) ul{
		padding-inline : calc( 16 var( --viewportBase ) );
	}
	:where( #manager , #company ) > p{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.7;
	}
	:where( #manager , #company ) li a{
		grid-template-columns : calc( 20 * 100% / 352 ) auto;
		column-gap : calc( 12 var( --percentBase ) ) ;
		padding-block : calc( 28 var( --remBase ) );
		padding-inline : calc( 8 var( --percentBase ) ) ;
		font-size : 1.8rem;
		line-height : calc( 28 / 18 );
	}
	:where( #manager , #company ) li a::before{
		height : calc( 20 var( --remBase ) );
	}
	:where( #manager , #company ) .links{
		padding-inline : calc( 50 var( --viewportBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #manager , #company ) .links a{
		width : 100%;
		height : calc( 60 var( --remBase ) );
		font-size : 1.8rem;
		border-radius : calc( 6 var( --remBase ) );
	}
	:where( #manager , #company ) .links a + a{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #manager , #company ) .links .mypage{
		justify-content : center;
		border-width : calc( 2 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	:where( #manager , #company ){
		position : relative;
	}
	:where( #manager , #company )::before{
		position : absolute;
		top : 0;
		left : calc( 576 * 100% / 560 );
		width : calc( 345 * 100% / 560 );
		background-position : right top;
	}
	:where( #manager , #company ) h3{
		padding-block : calc( 18 var( --fontCoef ) );
		padding-left : calc( 16 * 100% / 560 );
		font-size : calc( 24 var( --fontCoef ) );
	}
	:where( #manager , #company ) h3::before{
		left : calc( -6 * 100% / 560 );
		width : calc( 12 * 100% / 560 );
		height : calc( 100% - ( 28 var( --fontCoef ) ) );
	}
	:where( #manager , #company ) > p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
	}
	:where( #manager , #company ) li a{
		grid-template-columns : calc( 20 var( --fontCoef ) ) auto;
		column-gap : calc( 8 * 100% / 560 ) ;
		padding-block : calc( 22 var( --remBase ) );
		padding-inline : calc( 8 * 100% / 560 ) ;
		font-size : calc( 18 var( --fontCoef ) );
		line-height : calc( 28 / 18 );
	}
	:where( #manager , #company ) li a::before{
		height : calc( 20 var( --fontCoef ) );
	}
	:where( #manager , #company ) .links{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 16 * 100% / 560 ) ;
		justify-content : start;
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #manager , #company ) .links a{
		font-size : calc( 16 var( --fontCoef ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	:where( #manager , #company ) .links .apply{
		padding-block : calc( 15 var( --fontCoef ) );
		padding-inline : calc( 16 var( --remBase ) );
	}
	:where( #manager , #company ) .links .mypage{
		padding-inline : calc( 13 var( --remBase ) );
		border-width : 1px;
	}
}
#manager .links .mypage::before{
	background-image : url( "../images/home/manager/icon.svg" );
}
@media screen and ( max-width : 750px ){
	#manager{
		margin-top : calc( 32 var( --remBase ) );
	}
	#manager::before{
		height : calc( 225 var( --remBase ) );
		background-image : url( "../images/home/manager/bg_sp.webp" );
	}
	#manager .links .mypage{
		grid-template-columns : calc( 39 * 100% / 296 ) auto;
		column-gap : calc( 8 * 100% / 296 );
	}
	#manager .links .mypage::before{
		height : calc( 30 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#manager{
		min-height : calc( 519 var( --remBase ) );
	}
	#manager::before{
		height : calc( 519 var( --remBase ) );
		background-image : url( "../images/home/manager/bg_pc.webp" );
	}
	#manager .links .mypage{
		grid-template-columns : calc( 39 var( --fontCoef ) ) auto;
		column-gap : calc( 4 var( --remBase ) );
		padding-block : calc( 8 var( --fontCoef ) );
	}
	#manager .links .mypage::before{
		height : calc( 30 var( --fontCoef ) );
	}
}
#company .links .mypage::before{
	background-image : url( "../images/home/company/icon.svg" );
}
@media screen and ( max-width : 750px ){
	#company{
		margin-top : calc( 40 var( --remBase ) );
	}
	#company::before{
		height : calc( 245 var( --remBase ) );
		background-image : url( "../images/home/company/bg_sp.webp" );
	}
	#company .links .mypage{
		grid-template-columns : calc( 38 * 100% / 296 ) auto;
		column-gap : calc( 8 * 100% / 296 );
	}
	#company .links .mypage::before{
		height : calc( 34 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#company{
		min-height : calc( 429 var( --remBase ) );
		margin-top : calc( 96 var( --remBase ) );
	}
	#company::before{
		height : calc( 429 var( --remBase ) );
		background-image : url( "../images/home/company/bg_pc.webp" );
	}
	#company .links .mypage{
		grid-template-columns : calc( 38 var( --fontCoef ) ) auto;
		column-gap : calc( 6 var( --remBase ) );
		padding-block : calc( 6 var( --fontCoef ) );
	}
	#company .links .mypage::before{
		height : calc( 34 var( --fontCoef ) );
	}
}
:where( #information , #news ) h3{
	border-color : var( --AccentColor01 );
	border-left-style : solid;
}
:where( #information , #news ) li{
	border-bottom : solid 1px var( --AccentColor01-3 );
}
:where( #information , #news ) li a{
	display : block;
	color : black;
}
:where( #information , #news ) .head{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
}
:where( #information , #news ) .category{
	display : block;
	align-items : center;
	justify-content : center;
	width : fit-content;
	color : var( --TextColor03 );
	background-color : var( --bg );
}
:where( #information , #news ) h4{
	font-weight : 400;
}
:where( #information , #news ) > a{
	display : grid;
	align-items : center;
	justify-content : space-between;
	font-family : "Roboto Slab";
	background-color : var( --BackColor01 );
	border-radius : 100vmax;
}
:where( #information , #news ) > a::after{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/base01.svg" ) center / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	:where( #information , #news ) h3{
		padding-block : calc( 6 var( --remBase ) );
		padding-left : calc( 12 var( --percentBase ) );
		font-size : 2.4rem;
		border-left-width : calc( 4 var( --remBase ) );
	}
	:where( #information , #news ) li a{
		padding-block : calc( 16 var( --remBase ) );
	}
	:where( #information , #news ) .head{
		column-gap : calc( 8 var( --percentBase ) );
	}
	:where( #information , #news ) time{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #information , #news ) .category{
		padding-block : calc( 6 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	:where( #information , #news ) h4{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #information , #news ) > a{
		grid-template-columns : auto calc( 24 * 100% / 92 );
		justify-content : space-between;
		width : calc( 140 var( --percentBase ) );
		height : calc( 40 var( --remBase ) );
		padding-left : calc( 32 var( --percentBase ) );
		padding-right : calc( 16 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
	}
	:where( #information , #news ) > a::after{
		height : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	:where( #information , #news ) h3{
		padding-block : calc( 8 var( --fontCoef ) );
		padding-left : calc( 12 * 100% / 440 );
		font-size : calc( 24 var( --fontCoef ) );
		border-left-width : calc( 4 var( --remBase ) );
	}
	:where( #information , #news ) ul{
		margin-top : calc( 4 var( --remBase ) );
	}
	:where( #information , #news ) li a{
		padding-block : calc( 16 var( --remBase ) );
	}
	:where( #information , #news ) .head{
		column-gap : calc( 8 * 100% / 440 );
	}
	:where( #information , #news ) time{
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.5;
	}
	:where( #information , #news ) .category{
		padding-block : calc( 6 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : calc( 14 var( --fontCoef ) );
	}
	:where( #information , #news ) h4{
		margin-top : calc( 8 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.5;
	}
	:where( #information , #news ) > a{
		grid-template-columns : auto calc( 24 var( --fontCoef ) );
		column-gap : calc( 16 var( --remBase ) );
		width : fit-content;
		padding-block : calc( 8 var( --remBase ) );
		padding-left : calc( 32 var( --remBase ) );
		padding-right : calc( 16 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		margin-left : auto;
		font-size : calc( 18 var( --fontCoef ) );
	}
	:where( #information , #news ) > a::after{
		height : calc( 24 var( --fontCoef ) );
	}
}
@media screen and ( max-width : 750px ){
	#news{
		margin-top : calc( 32 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#news{
		margin-top : calc( 20 var( --remBase ) );
	}
}

/* --------------------------------------------
KNOW HOW
--------------------------------------------- */
#knowHow h2{
	font-weight : 400;
	text-align : center;
}
#knowHow h2::after{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --AccentColor01 );
}
#knowHow .slider01 picture{
	width : 100%;
}
#knowHow .slider01 picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#knowHow .splide__slide a{
	display : block;
}
#knowHow h3{
	font-weight : 400;
	color : black;
}
#knowHow .box{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
}
#knowHow .category{
	color : var( --TextColor03 );
	background-color : var( --bg );
}
#knowHow .tags{
	display : flex;
	flex-wrap : wrap;
	border-top : solid 1px var( --AccentColor01-3 );
}
#knowHow .tags li{
	display : grid;
	place-items : center;
	background-color : #fff;
	background-color : var( --BackColor01 );
}
@media screen and ( max-width : 750px ){
	#knowHow{
		padding-bottom : calc( 64 var( --remBase ) );
	}
	#knowHow h2{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	#knowHow h2::after{
		width : calc( 200 var( --viewportBase ) );
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#knowHow .slider01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#knowHow .splide__slide{
		width : calc( 320 var( --viewportBase ) );
		padding-left : calc( 16 var( --viewportBase ) );
	}
	#knowHow picture{
		height : calc( 171 var( --remBase ) );
	}
	#knowHow h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#knowHow .box{
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 8 * 100% / 304 );
		margin-top : calc( 8 var( --remBase ) );
	}
	#knowHow .category{
		padding-block : calc( 6 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	#knowHow time{
		font-size : 1.2rem;
		line-height : 1.5;
	}
	#knowHow .tags{
		column-gap : calc( 8 * 100% / 304 );
		padding-top : calc( 8 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#knowHow .tags li{
		padding-block : calc( 6 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1rem;
		border-radius : calc( 6 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#knowHow{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#knowHow h2{
		font-size : calc( 34 var( --fontCoef ) );
		line-height : 1.3;
	}
	#knowHow h2::after{
		width : calc( 200 var( --viewportBase ) );
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#knowHow .slider01{
		margin-top : calc( 40 var( --remBase ) );
	}
	#knowHow picture{
		height : calc( 180 var( --remBase ) );
	}
	#knowHow h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.5;
	}
	#knowHow .box{
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 8 * 100% / 320 );
		margin-top : calc( 8 var( --remBase ) );
	}
	#knowHow .category{
		padding-block : calc( 6 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : calc( 14 var( --fontCoef ) );
	}
	#knowHow time{
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.5;
	}
	#knowHow .tags{
		column-gap : calc( 8 * 100% / 320 );
		padding-top : calc( 8 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#knowHow .tags li{
		padding-block : calc( 6 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : calc( 12 var( --fontCoef ) );
		border-radius : calc( 6 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#knowHow .splide__slide{
		width : calc( 320 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	#knowHow .splide__slide{
		width : 320px;
	}
}