@charset "UTF-8";

/* --------------------------------------------
NEWS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	body.news #title::before{
		background-image : image-set( url( "../images/news/title_sp.avif" ) type( "image/avif" ) , url( "../images/news/title_sp.webp" ) type( "image/webp" ) );
	}
}
@media print , screen and ( width > 750px ){
	body.news #title::before{
		background-image : image-set( url( "../images/news/title_pc.avif" ) type( "image/avif" ) , url( "../images/news/title_pc.webp" ) type( "image/webp" ) );
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#column01{
		padding-top : calc( ( 53 - 2.2 ) var( --remBase ) );
		padding-bottom : calc( ( 124 - 27 ) var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column01{
		display : grid;
		grid-template-columns : 1fr calc( 740 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		align-items : start;
		padding-top : calc( ( 69 - 1.2 - 12 ) var( --remBase ) );
		padding-bottom : calc( 121 var( --remBase ) );
	}
}
#news li a{
	display : block;
}
#news picture{
	overflow : hidden;
	border-radius : calc( 10 var( --remBase ) );
}
#news picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#news .head{
	display : grid;
	align-items : start;
}
#news :where( time , .category ){
	line-height : 1.2;
}
#news .category{
	color : var( --orange );
}
#news h2{
	font-weight : 700;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#news > ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 321 var( --percentBase ) ) );
		row-gap : calc( ( 58 - 8 ) var( --remBase ) );
		justify-content : space-between;
	}
	#news > ul > li , #news > ul li > a , #news > ul section{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : 0;
	}
	#news picture{
		height : calc( 219 var( --remBase ) );
	}
	#news .head{
		grid-template-columns : calc( 153 * 100% / 321 ) auto;
		padding-top : calc( ( 34 - 2.2 ) var( --remBase ) );
	}
	#news :where( time , .category ){
		font-size : clamp( var( --min ) , 2.2rem , var( --max ) );
	}
	#news h2{
		padding-top : calc( ( 24 - 2.2 - 8 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
		line-height : calc( 40 / 24 );
	}
	#news .link02{
		width : calc( 330 var( --percentBase ) );
		margin-top : calc( ( 59 - 8 ) var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#news{
		grid-row : 1;
		grid-column : 2;
	}
	#news > ul > li + li{
		margin-top : calc( ( 40 - 1.4 ) var( --remBase ) );
	}
	#news section{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 250 * 100% / 740 ) 1fr;
		row-gap : calc( ( 19 - 1.4 ) var( --remBase ) );
		column-gap : calc( 40 * 100% / 740 );
		align-items : start;
	}
	#news picture{
		grid-row : 1/-1;
		grid-column : 1;
		height : calc( 171 var( --remBase ) );
		margin-top : calc( 1.4 var( --remBase ) );
	}
	#news .head{
		grid-template-columns : calc( 100 * 100% / 450 ) auto;
	}
	#news :where( time , .category ){
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#news h2{
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
	}
	#news .link02{
		width : calc( 250 * 100% / 740 );
		margin-top : calc( 84 var( --remBase ) );
	}
}
#sidebarNews a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
	line-height : 1.5;
	letter-spacing : .05em;
}
#sidebarNews a::before{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-color : var( --orange );
	border-radius : 50%;
}
@media screen and ( width <= 750px ){
	#sidebarNews{
		margin-top : calc( ( 132 - 6.5 ) var( --remBase ) );
	}
	#sidebarNews li + li{
		margin-top : calc( 41 var( --remBase ) );
	}
	#sidebarNews a{
		column-gap : calc( 34 var( --percentBase ) );
		font-size : 2.6rem;
		font-weight : 600;
	}
	#sidebarNews a::before{
		height : calc( 16 var( --remBase ) );
		margin-top : calc( 11.5 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#sidebarNews{
		position : sticky;
		top : var( --headerHeight );
		grid-row : 1;
		grid-column : 1;
	}
	#sidebarNews li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sidebarNews a{
		column-gap : calc( 34 * 100% / 244 );
		font-size : 1.6rem;
		font-weight : 300;
	}
	#sidebarNews a::before{
		height : calc( 6 var( --remBase ) );
		margin-top : calc( 9 var( --remBase ) );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
@media screen and ( width <= 750px ){
	body.faq #title::before{
		background-image : image-set( url( "../images/faq/title_sp.avif" ) type( "image/avif" ) , url( "../images/faq/title_sp.webp" ) type( "image/webp" ) );
	}
}
@media print , screen and ( width > 750px ){
	body.faq #title::before{
		background-image : image-set( url( "../images/faq/title_pc.avif" ) type( "image/avif" ) , url( "../images/faq/title_pc.webp" ) type( "image/webp" ) );
	}
}
#faqLinks ul{
	display : grid;
	justify-content : space-between;
}
#faqLinks a{
	justify-items : center;
	width : 100%;
	height : 100%;
	overflow : hidden;
	background-color : white;
	border-radius : calc( 6 var( --remBase ) );
	outline : solid 1px var( --orange );
	outline-offset : -1px;
}
#faqLinks a img{
	grid-row : 1;
	grid-column : 1;
	align-self : center;
	height : calc( var( --height ) var( --remBase ) );
	filter : var( --filterOrange );
}
#faqLinks a span{
	grid-row : 2;
	grid-column : 1;
	align-self : center;
	color : var( --orange );
}
#faqLinks a::after{
	display : block;
	grid-row : 4;
	grid-column : 1;
	align-items : start;
	width : auto;
	height : 100%;
	aspect-ratio : 17/9;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/down01.svg" );
	filter : var( --filterOrange );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#faqLinks{
		margin-top : calc( ( 42 - 2.2 ) var( --remBase ) );
	}
	#faqLinks ul{
		grid-template-columns : repeat( 2 , calc( 323 var( --percentBase ) ) );
		grid-auto-rows : calc( 230 var( --remBase ) );
		row-gap : calc( 19 var( --remBase ) );
	}
	#faqLinks a{
		display : grid;
		grid-template-rows : calc( ( 135 - 2 ) var( --remBase ) ) 1fr calc( ( 16 - 2 ) var( --remBase ) ) calc( 9 var( --remBase ) ) calc( 16 var( --remBase ) );
		width : 100%;
		height : 100%;
	}
	#faqLinks span{
		font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
		line-height : calc( 30 / 26 );
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
	}
}
@media print , screen and ( width > 750px ){
	#faqLinks{
		margin-top : calc( ( 37 - 1.2 ) var( --remBase ) );
	}
	#faqLinks ul{
		grid-template-rows : calc( ( 134 - 2 ) var( --remBase ) ) auto calc( ( 17 - 2 ) var( --remBase ) ) calc( 9 var( --remBase ) ) calc( 16 var( --remBase ) );
		grid-template-columns : repeat( 4 , calc( 220 var( --percentBase ) ) );
	}
	#faqLinks li , #faqLinks a{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 5;
		align-items : start;
	}
	#faqLinks span{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		line-height : 1.25;
		text-align : center;
		text-indent : .2em;
		letter-spacing : .2em;
	}
}
@media ( hover : hover ){
	#faqLinks a:hover::after{
		translate : 0 50%;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faqLinks a:hover::after{
		transition : translate var( --transitionBase );
	}
}
#faqSearch{
	background-color : #fff2dc;
}
#faqSearch .box{
	display : grid;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	overflow : hidden;
	background-color : white;
	border-radius : 100vmax;
	outline : solid 1px var( --orange );
	outline-offset : -1px;
}
#faqSearch :where( input , button ){
	height : 100%;
}
#faqSearch input::placeholder{
	font-weight : 300;
	color : #b7b7b7;
	letter-spacing : .1em;
}
#faqSearch button{
	display : grid;
	place-items : center;
}
@media screen and ( width <= 750px ){
	#faqSearch{
		padding-top : calc( 64 var( --remBase ) );
		padding-bottom : calc( 26 var( --remBase ) );
		margin-top : calc( 34 var( --remBase ) );
	}
	#faqSearch .box{
		grid-template-columns : 1fr calc( 98 * 100% / 600 );
		width : calc( 650 var( --percentBase ) );
		height : calc( 80 var( --remBase ) );
	}
	#faqSearch input{
		padding-left : calc( 52 * 100% / 562 );
		font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
		line-height : 1.25;
	}
	#faqSearch button img{
		height : calc( 32 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faqSearch{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 22 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#faqSearch .box{
		grid-template-columns : 1fr calc( 58 * 100% / 600 );
		width : calc( 600 var( --percentBase ) );
		height : calc( 44 var( --remBase ) );
	}
	#faqSearch input{
		padding-left : calc( 25 * 100% / 542 );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
		line-height : calc( 30 / 14 );
	}
	#faqSearch button img{
		height : calc( 22 var( --remBase ) );
	}
}

/* --------------------------------------------
MENU
--------------------------------------------- */
#titles01 p{
	font-size : clamp( var( --min ) , 3rem , var( --max ) );
	line-height : calc( 64 / 30 );
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
#titles01 h1{
	margin-top : calc( ( 33 - 17 ) var( --remBase ) );
	text-align : center;
}
#titles01 h1 img{
	height : calc( 72 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#titles01{
		padding-top : calc( ( 76 - 2.2 - 17 ) var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#titles01{
		padding-top : calc( ( 77 - 1.2 - 17 ) var( --remBase ) );
	}
}
#menuLinks a{
	position : relative;
	display : grid;
	place-items : center;
	height : 100%;
	overflow : hidden;
	line-height : 1.2;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
	border-radius : 100vmax;
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
#menuLinks a::after{
	position : absolute;
	top : 50%;
	display : block;
	width : auto;
	aspect-ratio : 15/8;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/down01.svg" ) center / contain no-repeat;
	filter : var( --filterBase );
	translate : 0 -50%;
}
@media screen and ( width <= 750px ){
	#menuLinks{
		padding-top : calc( 85 var( --remBase ) );
	}
	#menuLinks ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 323 var( --percentBase ) ) );
		grid-auto-rows : calc( 86 var( --remBase ) );
		row-gap : calc( 33 var( --remBase ) );
		justify-content : space-between;
	}
	#menuLinks a{
		font-size : clamp( var( --min ) , 2.56rem , var( --max ) );
	}
	#menuLinks a::after{
		right : calc( 30 * 100% / 323 );
		height : calc( 11 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#menuLinks{
		padding-top : calc( 72 var( --remBase ) );
	}
	#menuLinks ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 31 var( --remBase ) );
		column-gap : calc( 30 var( --percentBase ) );
		justify-content : center;
	}
	#menuLinks li{
		width : calc( 227 var( --percentBase ) );
		height : calc( 60 var( --remBase ) );
	}
	#menuLinks a{
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	}
	#menuLinks a::after{
		right : calc( 21 * 100% / 227 );
		height : calc( 8 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#menuLinks a:hover{
		color : white;
		background-color : color-mix( in sRGB , var( --orange ) 75% , transparent );
		outline-color : var( --orange );
	}
	#menuLinks a:hover::after{
		filter : var( --filterWhite );
		translate : 0 0;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#menuLinks a{
		transition : background var( --transitionBase ) , color var( --transitionBase ) , outline-color var( --transitionBase );
	}
	#menuLinks a::after{
		transition : filter var( --transitionBase ) , translate var( --transitionBase );
	}
}

/* --------------------------------------------
FRUITS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	body.fruits #title::before , body[class*="fruits-"] #title::before{
		background-image : image-set( url( "../images/fruits/title_sp.avif" ) type( "image/avif" ) , url( "../images/fruits/title_sp.webp" ) type( "image/webp" ) );
	}
}
@media print , screen and ( width > 750px ){
	body.fruits #title::before , body[class*="fruits-"] #title::before{
		background-image : image-set( url( "../images/fruits/title_pc.avif" ) type( "image/avif" ) , url( "../images/fruits/title_pc.webp" ) type( "image/webp" ) );
	}
}
#fruitsLink{
	background-color : #fcfaf2;
}
#fruitsLink ul{
	display : grid;
	justify-content : space-between;
}
#fruitsLink a{
	position : relative;
	display : grid;
	place-items : center;
	height : 100%;
	overflow : hidden;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
	outline : solid 1px var( --orange );
	outline-offset : -1px;
}
#fruitsLink a::after{
	position : absolute;
	top : 50%;
	display : block;
	width : auto;
	aspect-ratio : 10/6;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/down01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
	translate : 0 -50%;
}
#fruitsLink a:not( [aria-current] ){
	color : var( --orange );
	background-color : white;
}
#fruitsLink a:not( [aria-current] )::after{
	filter : var( --filterOrange );
}
#fruitsLink a[aria-current]{
	color : white;
	background-color : var( --orange );
}
#fruitsLink a[aria-current]::after{
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#fruitsLink{
		padding-block : calc( 60 var( --remBase ) );
		margin-top : calc( ( 55 - 2.2 ) var( --remBase ) );
	}
	#fruitsLink ul{
		grid-template-columns : repeat( 3 , calc( 220 var( --percentBase ) ) );
		grid-auto-rows : calc( 60 var( --remBase ) );
		row-gap : calc( 10 var( --remBase ) );
	}
	#fruitsLink a{
		font-size : 2.6rem;
		line-height : calc( 45 / 26 );
		border-radius : calc( 6 var( --remBase ) );
	}
	#fruitsLink a::after{
		right : calc( 15 * 100% / 220 );
		height : calc( 6 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#fruitsLink{
		padding-top : calc( 38 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		margin-top : calc( ( 72 - 1.2 ) var( --remBase ) );
	}
	#fruitsLink ul{
		grid-template-columns : repeat( 4 , calc( 220 var( --percentBase ) ) );
		grid-auto-rows : calc( 50 var( --remBase ) );
		row-gap : calc( 20 var( --remBase ) );
	}
	#fruitsLink a{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		line-height : 1.5;
		border-radius : calc( 6 var( --remBase ) );
	}
	#fruitsLink a::after{
		right : calc( 14 * 100% / 220 );
		height : calc( 6 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#fruitsLink a:hover{
		color : white;
		background-color : var( --orange );
	}
	#fruitsLink a:hover::after{
		filter : var( --filterWhite );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#fruitsLink a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
	#fruitsLink a::after{
		transition : filter var( --transitionBase );
	}
}
#fruits ul{
	display : grid;
	justify-content : space-between;
}
#fruits li , #fruits a , #fruits section{
	display : grid;
	grid-template-rows : subgrid;
	grid-row : span 3;
}
#fruits picture{
	grid-row : 1;
	width : 100%;
	height : auto;
	aspect-ratio : 1;
	outline : solid 1px #e0e0e0;
	outline-offset : -1px;
}
#fruits picture img{
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#fruits h2{
	grid-row : 2;
	font-weight : 400;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
#fruits .description{
	grid-row : 3;
	letter-spacing : .05em;
}
@media screen and ( width <= 750px ){
	#fruits{
		padding-top : calc( 66 var( --remBase ) );
		padding-bottom : calc( ( 123 - 12 ) var( --remBase ) );
	}
	#fruits ul{
		grid-template-columns : repeat( 2 , calc( 319 var( --percentBase ) ) );
	}
	#fruits li:nth-child( n + 3 ){
		margin-top : calc( ( 80 - 12 ) var( --remBase ) );
	}
	#fruits h2{
		padding-top : calc( ( 43 - 13 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 3rem , var( --max ) );
		line-height : calc( 56 / 30 );
	}
	#fruits .description{
		padding-top : calc( ( 33 - 13 - 12 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
		line-height : calc( 50 / 26 );
	}
}
@media print , screen and ( width > 750px ){
	#fruits{
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( ( 121 - 6 ) var( --remBase ) );
	}
	#fruits ul{
		grid-template-columns : repeat( 6 , calc( 148 var( --percentBase ) ) );
	}
	#fruits li:nth-child( n + 7 ){
		margin-top : calc( ( 51 - 6 ) var( --remBase ) );
	}
	#fruits h2{
		padding-top : calc( ( 20 - 4 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : calc( 26 / 18 );
	}
	#fruits .description{
		padding-top : calc( ( 23 - 4 - 6 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
		line-height : calc( 26 / 14 );
	}
}

/* --------------------------------------------
PRODUCT
--------------------------------------------- */
#productsLink{
	background-color : #fcfaf2;
}
#productsLink ul{
	display : grid;
	justify-content : space-between;
}
#productsLink :where( a , select ){
	position : relative;
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	overflow : hidden;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
	outline : solid 1px var( --orange );
	outline-offset : -1px;
}
#productsLink a:not( [aria-current] ){
	color : var( --orange );
	background-color : white;
}
#productsLink a:not( [aria-current] )::after{
	filter : var( --filterOrange );
}
#productsLink a[aria-current]{
	color : white;
	background-color : var( --orange );
}
#productsLink a[aria-current]::after{
	filter : var( --filterWhite );
}
#productsLink select{
	text-align : center;
}
#productsLink select:not( .is-current ){
	color : var( --orange );
	background-color : white;
	background-image : url( "../images/ui/arrow/down01_orange.svg" );
}
#productsLink select:not( .is-current )::after{
	filter : var( --filterOrange );
}
#productsLink select.is-current{
	color : white;
	background-color : var( --orange );
	background-image : url( "../images/ui/arrow/down01_white.svg" );
}
#productsLink select.is-current::after{
	filter : var( --filterWhite );
}
#productsLink select option{
	color : var( --base );
	background-color : white;
}
@media screen and ( width <= 750px ){
	#productsLink{
		padding-top : calc( 60 var( --remBase ) );
		padding-bottom : calc( 76 var( --remBase ) );
		margin-top : calc( ( 37 - 2.2 ) var( --remBase ) );
	}
	#productsLink ul{
		grid-template-columns : repeat( 3 , calc( 220 var( --percentBase ) ) );
		grid-auto-rows : calc( 60 var( --remBase ) );
		row-gap : calc( 10 var( --remBase ) );
	}
	#productsLink :where( a , select ){
		font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#productsLink select{
		background-position : right calc( 15 var( --remBase ) ) top 50%;
		background-size : auto calc( 6 var( --remBase ) );
	}
	#productsLink li:has( .lumiereduciel ){
		grid-column : span 2;
	}
	#productsLink li:has( .lumiereduciel ) a::after{
		right : calc( 15 * 100% / 455 );
	}
}
@media print , screen and ( width > 750px ){
	#productsLink{
		padding-top : calc( 38 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		margin-top : calc( ( 27 - 1.2 ) var( --remBase ) );
	}
	#productsLink ul{
		grid-template-columns : repeat( 5 , calc( 184 var( --percentBase ) ) );
		grid-auto-rows : calc( 50 var( --remBase ) );
		row-gap : calc( 20 var( --remBase ) );
	}
	#productsLink :where( a , select ){
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#productsLink select{
		background-position : right calc( 18 var( --remBase ) ) top 50%;
		background-size : auto calc( 6 var( --remBase ) );
	}
	#productsLink .lumiereduciel{
		font-size : clamp( var( --min ) , 1.3rem , var( --max ) );
		text-indent : 0;
		letter-spacing : 0;
	}
}
@media ( hover : hover ){
	#productsLink a:hover{
		color : white;
		background-color : var( --orange );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#productsLink a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
	#productsLink select{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
#productsLinkChiid{
	border-block : solid 1px var( --orange );
}
#productsLinkChiid ul{
	display : flex;
	flex-wrap : wrap;
}
#productsLinkChiid a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
}
#productsLinkChiid a::before{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-color : var( --orange );
	border-radius : 50%;
}
@media screen and ( width <= 750px ){
	#productsLinkChiid{
		padding-top : calc( ( 50 - 17 ) var( --remBase ) );
		padding-bottom : calc( ( 62 - 17 ) var( --remBase ) );
	}
	#productsLinkChiid ul{
		column-gap : calc( 52 var( --percentBase ) );
	}
	#productsLinkChiid a{
		column-gap : calc( 14 var( --remBase ) );
		font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
		line-height : calc( 60 / 26 );
	}
	#productsLinkChiid a::before{
		height : calc( 13 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#productsLinkChiid{
		padding-block : calc( ( 32 - 14.5 ) var( --remBase ) );
	}
	#productsLinkChiid ul{
		column-gap : calc( 60 var( --percentBase ) );
	}
	#productsLinkChiid a{
		column-gap : calc( 12 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		line-height : calc( 45 / 16 );
	}
	#productsLinkChiid a::before{
		height : calc( 6 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#productsLinkChiid a:hover{
		color : var( --orange );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#productsLinkChiid a{
		transition : color var( --transitionBase );
	}
}