@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
:root{
	--fontFamily : "Noto Sans JP" , serif;
	  overflow-x: hidden;
}
@font-face{
	font-family : "Bebas Neue";
	font-weight : 400;
	src : url( "../fonts/BebasNeue-Regular.ttf" ) format( "truetype" );
	font-display : auto;
}
.bebas{
	font-family : "Bebas Neue" , sans-serif;
}
.serif{
	font-family : "Noto Serif JP" , serif;
}
@font-face{
	font-family : Outfit;
	font-weight : 1 999;
	src : url( "../fonts/Outfit-VariableFont_wght.ttf" ) format( "truetype" );
	font-display : auto;
}
.outfit{
	font-family : Outfit , sans-serif;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--breakPoint : 750;
		--wrapperSize : 700;
		--gutter : 25;
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--breakPoint : 1240;
		--wrapperSize : 1200;
		--gutter : 20;
	}
}
:root{
	--base : #333;
	--blue : #002f40;
	--blue02 : #0d6fb9;
	--orange : #ee8827;
	--remBase : * .1rem;
	--percentBase : * 100% / var( --wrapperSize );
	--viewportBase : * 100% / var( --breakPoint );
	--transitionBase : .3s ease-in;
	--filterWhite : invert( 100% ) sepia( 100% ) saturate( 2% ) hue-rotate( 58deg ) brightness( 108% ) contrast( 101% );
	--filterOrange : invert( 53% ) sepia( 75% ) saturate( 533% ) hue-rotate( 346deg ) brightness( 99% ) contrast( 89% );
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 768px < width < 1240px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1240px ){
	:root{
		font-size : 10px;
	}
}
body{
	min-width : inherit;
}

/* --------------------------------------------
MAIN
--------------------------------------------- */
@layer reset{
	#main{
		font-family : var( --fontFamily );
		font-feature-settings : "palt" on;
		line-height : 1;
		color : var( --base );
		text-rendering : optimizeSpeed;
		line-break : strict;
	}
	#main :where( * ){
		padding : 0;
		margin : 0;
		word-break : break-all;
	}
	#main :where( * ) , #main *::before , #main *::after{
		box-sizing : border-box;
	}
	#main :where( *:not(fieldset, progress, meter)){
		background-repeat : no-repeat;
		background-origin : border-box;
		border-style : solid;
		border-width : 0;
	}
	#main :where( svg, video, canvas, audio, iframe, embed, object ){
		display : block;
	}
	#main :where( img, svg, video ){
		inline-size : auto;
		font-size : 0;
	}
	#main :where( img ){
		image-rendering : -webkit-optimize-contrast;
	}
	#main :where( svg ){
		fill : currentColor;
		stroke : none;
	}
	#main :where( svg:not( [fill] ) ){
		fill : none;
		stroke : currentColor;
		stroke-linecap : round;
		stroke-linejoin : round;
	}
	#main :where( svg:not( [width] ) ){
		inline-size : 5rem;
	}
	#main :where( input, button, textarea, select , input[type="file"]::-webkit-file-upload-button ){
		font : inherit;
		font-size : inherit;
		color : inherit;
		letter-spacing : inherit;
		outline : none;
	}
	#main :where( textarea ){
		resize : vertical;
		field-sizing : content;
	}
	@supports (resize: block){
		#main textarea{
			resize : vertical;
		}
	}
	#main :where( button ){
		background-color : transparent;
	}
	#main :where( p, h1, h2, h3, h4, h5, h6 ){
		overflow-wrap : break-word;
	}
	#main :where( p, h1, h2, h3, h4, h5, h6 , a ):has( > img:only-child ){
		font-size : 0;
		line-height : 1;
	}
	#main :where( ul, ol ){
		list-style : none;
	}
	#main :where( a ){
		color : var( --body );
		-webkit-text-decoration : none;
		text-decoration : none;
		text-underline-offset : .4em;
		text-decoration-skip-ink : auto;
	}
	#main :where( a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not( [tabindex*="-"] ) ){
		touch-action : manipulation;
		cursor : pointer;
	}
	#main :where( input[type="file"] ){
		cursor : auto;
	}
	#main :where( input[type="file"]::-webkit-file-upload-button,input[type="file"]::file-selector-button ){
		cursor : pointer;
	}
	@media ( prefers-reduced-motion : no-preference ){
		#main :focus-visible{
			transition : outline-offset 145ms cubic-bezier( .25 , 0 , .4 , 1 );
		}
		#main :where( :not( :active ) ):focus-visible{
			transition-duration : .25s;
		}
	}
	#main :where( :not( :active ) ):focus-visible{
		outline-offset : 5px;
	}
	#main :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;
	}
	#main :where( button, button[type], input[type="button"], input[type="submit"], input[type="reset"] )[disabled]{
		cursor : not-allowed;
	}
	#main :where( table ){
		border-collapse : collapse;
	}
	#main :where( picture ){
		display : block;
	}
	#main :where( em ){
		font-style : normal;
	}
	#main :where( dialog ){
		max-width : 100%;
		max-height : 100%;
	}
}
#main{
	float : none;
	width : 100%;
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	margin-inline : auto;
}
@media screen and ( width < 1240px ){
	.container{
		width : 100%;
	}
}
@media print , screen and ( width >= 1240px ){
	.container{
		width : calc( ( var( --wrapperSize ) * 1px ) );
		margin-inline : auto;
	}
}
@media screen and ( width <= 768px ){
	.container-sp{
		width : 100%;
	}
}
@media screen and ( 768px < width < 1240px ){
	.container-pc{
		width : 100%;
	}
}
@media print , screen and ( width >= 1240px ){
	.container-pc{
		width : calc( var( --wrapperSize ) var( --viewportBase ) );
		margin-inline : auto;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width < 1240px ){
	.wrap{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1240px ){
	.wrap{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}
@media screen and ( width <= 768px ){
	.wrap-sp{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 768px < width < 1240px ){
	.wrap-pc{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1240px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media print , screen and ( width > 768px ){
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 768px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 768px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width >= 1240px ){
	.is-tb{
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
@media screen and ( width <= 768px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]::before , [data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( width <= 768px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]::before , [data-both-sp]::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media print , screen and ( width > 768px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]::before , [data-both-pb]::after{
		white-space : pre;
		content : attr( data-both );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
@media screen and ( width <= 768px ){
	br.sp-space{
		content : "";
	}
	br.sp-space::after{
		content : " ";
	}
}
@media print , screen and ( width > 768px ){
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}
@media screen and ( width <= 768px ){
	br.sp-spaceEm{
		content : "";
	}
	br.sp-spaceEm::after{
		content : "　";
	}
}
@media print , screen and ( width > 768px ){
	br.pc-spaceEm{
		content : "";
	}
	br.pc-spaceEm::after{
		content : "　";
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 768px ){
	.lh-up-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 768px ){
	.lh-up-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	width : 100%;
}
@media print , screen and ( width > 768px ){
	#header{
		height : calc( 95 var( --remBase ) );
		margin-inline : auto;
	}
	#header h1{
		font-size : 1rem;
		line-height : 1.4;
	}
	#header #logo{
		padding-top : calc( 8 var( --remBase ) );
	}
	#header #logo img{
		width : auto;
		height : calc( 62 var( --remBase ) );
	}
	#header #headerlink{
		top : calc( 20 var( --remBase ) );
		right : calc( 205 * 100% / 1060 );
	}
	#header #headerlink ul li{
		padding-left : calc( 12 var( --remBase ) );
		margin-left : calc( 12 var( --remBase ) );
		font-size : 1.2rem;
	}
	#header #headercnct{
		top : calc( 26 var( --remBase ) );
	}
	#header #headercnct a{
		display : block;
		width : fit-content;
	}
	#header #headercnct img{
		width : auto;
		height : calc( 55 var( --remBase ) );
	}
}
@media screen and ( 768px < width < 1240px ){
	#header{
		width : calc( 1060 var( --percentBase ) );
	}
}
@media print , screen and ( width >= 1240px ){
	#header{
		width : 1060px;
	}
}

/* --------------------------------------------
GLOBAL NAVIGATION
--------------------------------------------- */
@media print , screen and ( width > 768px ){
	#gnav{
		min-width : inherit;
		border-bottom-width : calc( 4 var( --remBase ) );
	}
	#gnav ul{
		flex-wrap : nowrap;
		margin-inline : auto;
	}
	#gnav ul > li{
		flex-grow : 1;
	}
	#gnav ul li > a , #gnav ul li > p{
		width : 100%;
		padding-inline : 0;
		font-size : 1.4rem;
		line-height : calc( 40 / 14 );
		text-align : center;
		letter-spacing : .08em;
	}
}
@media screen and ( 768px < width < 1240px ){
	#gnav ul{
		width : calc( 1060 var( --percentBase ) );
	}
}
@media print , screen and ( width >= 1240px ){
	#gnav ul{
		width : 1060px;
	}
}
@media print , screen and ( width > 768px ){
	#gnav_field{
		padding-block : calc( 40 var( --remBase ) );
	}
	#gnav_field .gnavbox{
		width : calc( 1060 / 6 * 100% / 1060 );
		padding-inline : calc( 15 * 100% / 1060 );
		padding-bottom : calc( 150 var( --remBase ) );
	}
	#gnav_field .gnavbox .gnavttl{
		font-size : 1.6rem;
	}
	#gnav_field .gnavbox figure{
		margin-block : calc( 12 var( --remBase ) );
	}
	#gnav_field .gnavbox .gnavtxt{
		font-size : 1.4rem;
	}
	#gnav_field .gnavbox dl{
		bottom : calc( 50 var( --remBase ) );
		left : calc( 15 * 100% / ( 1060 / 6 ) );
		right : calc( 15 * 100% / ( 1060 / 6 ) );
		padding-top : calc( 10 var( --remBase ) );
	}
	#gnav_field .gnavbox dl dt{
		margin-bottom : calc( 7 var( --remBase ) );
		font-size : 1.4rem;
	}
	#gnav_field .gnavbox dl dd p{
		width : calc( 50% - ( 3.5 * 100% / ( 1060 / 6 - 30 ) ) );
		padding-inline : calc( 3 * 100% / ( 1060 / 6 - 30 ) );
		padding-top : calc( 5 var( --remBase ) );
		padding-bottom : calc( 3 var( --remBase ) );
		font-size : 1.3rem;
	}
	#gnav_field .gnavbox dl dd p span{
		font-size : 2rem;
	}
	#gnav_field .gnavbox a{
		left : calc( 15 * 100% / ( 1060 / 6 ) );
		right : calc( 15 * 100% / ( 1060 / 6 ) );
		font-size : 1.4rem;
		line-height : calc( 40 / 14 );
		border-radius : calc( 5 var( --remBase ) );
	}
}
@media screen and ( 768px < width < 1240px ){
	#gnav_field .gnavwrapper{
		width : calc( 1060 var( --percentBase ) );
	}
}
@media print , screen and ( width >= 1240px ){
	#gnav_field .gnavwrapper{
		width : 1060px;
	}
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	display : grid;
}
#mv img{
	width : auto;
}
#mv > ul , #mv > hgroup{
	font-size : 0;
}
#mv > hgroup h2{
	position : relative;
}
#mv > hgroup h2::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/home/mv/bg.avif" ) type( "image/avif" ) , url( "../images/home/mv/bg.webp" ) type( "image/webp" ) ) 0 0 / contain no-repeat;
}
#mv h3{
	display : grid;
	place-items : center;
	font-weight : 700;
	color : white;
	text-align : center;
	text-indent : .02em;
	letter-spacing : .02em;
	background-color : black;
}
#mv .box{
	position : relative;
	display : grid;
}
#mv .box p{
	font-weight : 700;
	color : black;
	letter-spacing : .02em;
	background-color : color-mix( in sRGB , white 90% , transparent );
	border-right-color : black;
	border-right-style : solid;
	border-block-style : solid;
	border-block-color : black;
}
#mv .box p span{
	font-weight : 400;
	color : #595959;
	letter-spacing : .02em;
}
#mv a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : space-between;
	color : white;
	letter-spacing : .1em;
	background-color : #ffb400;
	border : solid 1px #ffb400;
}
#mv a::after{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/right01_black.svg" ) right center / contain no-repeat;
	filter : var( --filterWhite );
}
@media screen and ( width <= 768px ){
	#mv{
		padding-top : calc( 30 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#mv > ul{
		display : grid;
		grid-template-rows : calc( 97 var( --remBase ) );
		grid-template-columns : auto auto;
		column-gap : calc( 31 var( --percentBase ) );
		justify-content : space-between;
		justify-content : center;
	}
	#mv > ul li , #mv > ul img{
		height : 100%;
	}
	#mv > hgroup{
		margin-top : calc( 29 var( --remBase ) );
	}
	#mv > hgroup p img{
		height : calc( 78 var( --remBase ) );
	}
	#mv > hgroup h2{
		margin-top : calc( 22 var( --remBase ) );
	}
	#mv > hgroup h2 img{
		width : 100%;
		height : auto;
	}
	#mv > hgroup h2::after{
		top : calc( 59 var( --remBase ) );
		left : calc( 2 var( --percentBase ) );
		width : calc( 671 var( --percentBase ) );
		height : calc( 219 var( --remBase ) );
	}
	#mv .box{
		grid-template-rows : repeat( 2 , calc( 80 var( --remBase ) ) );
		grid-template-columns : calc( 102 var( --percentBase ) ) calc( 183 var( --percentBase ) ) calc( 269 var( --percentBase ) ) calc( 116 var( --percentBase ) );
		row-gap : calc( 22 var( --remBase ) );
		margin-top : calc( 140 var( --remBase ) );
	}
	#mv .box h3{
		grid-row : 1;
		grid-column : 1/3;
		font-size : 2.2rem;
		line-height : calc( 31.71 / 22 );
	}
	#mv .box p{
		display : grid;
		grid-template-rows : auto auto 1fr;
		grid-row : 1;
		grid-column : 3/5;
		grid-auto-rows : column;
		row-gap : calc( 4 var( --remBase ) );
		align-items : start;
		justify-content : center;
		padding-top : calc( 20 var( --remBase ) );
		padding-left : calc( 1 * 100% / 385 );
		font-size : 2.4rem;
		border-right-width : calc( 2 var( --remBase ) );
		border-block-width : calc( 2 var( --remBase ) );
	}
	#mv .box p span{
		display : block;
		font-size : 1.51rem;
		text-align : right;
	}
	#mv a{
		grid-row : 2;
		grid-column : 2/4;
		height : 100%;
		padding-left : calc( 44 * 100% / 450 );
		padding-right : calc( 33 * 100% / 450 );
		font-size : 3.2rem;
		font-weight : 500;
	}
	#mv a::after{
		height : calc( 30 var( --remBase ) );
		aspect-ratio : 19 / 30;
	}
}
@media print , screen and ( width > 768px ){
	#mv{
		grid-template-rows : auto calc( 116 var( --remBase ) ) calc( 50 var( --remBase ) ) 1fr;
		grid-template-columns : calc( 76 var( --percentBase ) ) auto 1fr calc( 444 var( --percentBase ) ) calc( 79 var( --percentBase ) );
		align-items : start;
		padding-top : calc( 30 var( --remBase ) );
		padding-bottom : calc( 69 var( --remBase ) );
	}
	#mv > hgroup{
		grid-row : 1;
		grid-column : 2/5;
	}
	#mv > hgroup p{
		padding-left : calc( 3 * 100% / 1045 );
	}
	#mv > hgroup p img{
		height : calc( 64 var( --remBase ) );
	}
	#mv > hgroup h2{
		margin-top : calc( 12 var( --remBase ) );
	}
	#mv > hgroup h2 img{
		height : calc( 145 var( --remBase ) );
	}
	#mv > hgroup h2::after{
		top : calc( 99 var( --remBase ) );
		left : calc( 15 * 100% / 1045 );
		width : calc( 1034 * 100% / 1045 );
		height : calc( 335 var( --remBase ) );
	}
	#mv > ul{
		display : grid;
		grid-template-columns : auto auto;
		grid-row : 1;
		grid-column : 4;
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 1 var( --remBase ) );
	}
	#mv > ul img{
		height : calc( 64 var( --remBase ) );
	}
	#mv > h2{
		grid-row : 3;
		grid-column : 2/5;
		height : 100%;
	}
	#mv > h2 img{
		height : 100%;
	}
	#mv .box{
		grid-template-columns : calc( 255 * 100% / 1045 ) calc( 431 * 100% / 1045 ) calc( 28 * 100% / 1045 ) calc( 250 * 100% / 1045 );
		grid-row : 3;
		grid-column : 2/5;
		align-items : center;
		justify-content : center;
	}
	#mv .box :where( h3 , p ){
		height : calc( 48 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.05;
	}
	#mv .box h3{
		grid-column : 1;
		font-size : 2rem;
		line-height : 1.05;
	}
	#mv .box p{
		display : grid;
		grid-template-columns : auto auto;
		grid-column : 2;
		align-content : center;
		align-items : baseline;
		justify-content : start;
		padding-left : calc( 18 * 100% / 431 );
		border-right-width : 1px;
		border-block-width : 1px;
	}
	#mv .box p span{
		font-size : 1rem;
		line-height : 2.1;
	}
	#mv .box a{
		grid-column : 4;
		column-gap : calc( 28 * 100% / 248 );
		height : 100%;
		padding-left : calc( 20 * 100% / 250 );
		padding-right : calc( 18 * 100% / 250 );
		font-size : 2rem;
		font-weight : 700;
	}
	#mv .box a::after{
		height : calc( 16 var( --remBase ) );
		aspect-ratio : 10/16;
	}
}
@media ( hover : hover ){
	#mv a:hover{
		color : #ffb400;
		background-color : color-mix( in sRGB , white 90% , transparent );
	}
	#mv a:hover::after{
		filter : invert( 78% ) sepia( 62% ) saturate( 3429% ) hue-rotate( 360deg ) brightness( 103% ) contrast( 104% );
		translate : 50% 0;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#mv a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
	#mv a::after{
		transition : filter var( --transitionBase ) , translate var( --transitionBase );
	}
}
#homeVoices{
	background-color : var( --blue02 );
}
#homeVoices .splide__slide a{
	position : relative;
	display : grid;
	width : 100%;
	height : 100%;
	background-color : white;
}
#homeVoices .splide__slide a::after{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/right03_black.svg" ) center / contain no-repeat;
	filter : invert( 43% ) sepia( 56% ) saturate( 689% ) hue-rotate( 163deg ) brightness( 91% ) contrast( 89% );
}
#homeVoices picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#homeVoices .splide__slide a:has( picture ) p{
	display : -webkit-box;
	overflow : hidden;
	font-weight : 700;
	color : var( --base );
	-webkit-box-orient : vertical;
	-webkit-line-clamp : 2;
}
#homeVoices .splide__slide a:not( :has( picture ) ) p:first-of-type{
	display : grid;
	place-items : center;
	font-weight : 700;
	color : var( --base );
	text-align : center;
	text-indent : .04em;
	letter-spacing : .04em;
	background-color : #e3edf4;
}
#homeVoices .splide__slide a:not( :has( picture ) ) p:nth-of-type( 2 ){
	display : -webkit-box;
	overflow : hidden;
	font-weight : 700;
	color : var( --base );
	-webkit-box-orient : vertical;
	-webkit-line-clamp : 2;
}
#homeVoices h2 span{
	display : inline;
	font-weight : 400;
}
#homeVoices h2 span:first-of-type{
	color : var( --blue02 );
}
#homeVoices h2 span:nth-of-type( 2 ){
	color : #666;
}
#homeVoices .splide__arrow{
	position : absolute;
	z-index : 2;
	font-size : 0;
}
#homeVoices .splide__arrow img{
	width : auto;
	aspect-ratio : 1/1;
}
@media screen and ( width <= 768px ){
	#homeVoices{
		padding-block : calc( 40 var( --remBase ) );
	}
	#homeVoices .splide__slide{
		width : calc( 600 var( --viewportBase ) );
	}
	#homeVoices .splide__slide a{
		grid-template-rows : calc( 120 var( --remBase ) ) auto;
		grid-template-columns : calc( 210 * 100% / 510 ) 1fr;
		row-gap : calc( ( 25 - 6.01 ) var( --remBase ) );
		column-gap : calc( 23 * 100% / 510 );
		padding-top : calc( 30 var( --remBase ) );
		padding-left : calc( 30 * 100% / 600 );
		padding-right : calc( 60 * 100% / 600 );
		border-radius : calc( 6 var( --remBase ) );
	}
	#homeVoices .splide__slide a::after{
		bottom : calc( 20 var( --remBase ) );
		right : calc( 20 * 100% / 600 );
		height : calc( 32 var( --remBase ) );
	}
	#homeVoices .splide__slide a:has( picture ) picture{
		grid-row : 1;
		grid-column : 1;
	}
	#homeVoices .splide__slide a:has( picture ) p{
		grid-row : 2;
		grid-column : 1/3;
		height : 2lh;
		font-size : 2.804rem;
		line-height : calc( 40.06 / 28.04 );
	}
	#homeVoices .splide__slide a:not( :has( picture ) ) p:first-of-type{
		grid-row : 1;
		grid-column : 1;
		font-size : 2.4rem;
		line-height : calc( 32 / 24 );
	}
	#homeVoices .splide__slide a:not( :has( picture ) ) p:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 1/3;
		height : 2lh;
		font-size : 2.804rem;
		line-height : calc( 40.06 / 28.04 );
	}
	#homeVoices h2{
		display : grid;
		grid-row : 1;
		grid-column : 2;
		align-content : space-between;
		justify-content : start;
	}
	#homeVoices h2 span{
		font-size : 2.404rem;
		line-height : calc( 42.06 / 24.04 );
	}
	#homeVoices h2 span:first-of-type{
		position : relative;
		top : calc( ( 1em - 1lh ) / 2 );
	}
	#homeVoices .splide__arrow{
		top : calc( 155 var( --remBase ) );
	}
	#homeVoices .splide__arrow img{
		height : calc( 60 var( --remBase ) );
	}
	#homeVoices .splide__arrow--prev{
		left : calc( 24 var( --viewportBase ) );
	}
	#homeVoices .splide__arrow--next{
		right : calc( 24 var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#homeVoices{
		padding-block : 20px;
	}
	#homeVoices .splide__slide{
		width : 400px;
	}
	#homeVoices .splide__slide a{
		grid-template-rows : auto auto;
		grid-template-columns : 105px 1fr;
		row-gap : calc( 12px - 4.5px - 3px );
		column-gap : 10px;
		width : 400px;
		padding-top : calc( 14px - 4.5px );
		padding-bottom : calc( 19px - 3px );
		padding-left : 15px;
		padding-right : 25px;
		border-radius : 6px;
	}
	#homeVoices .splide__slide a::after{
		bottom : 10px;
		right : 10px;
		height : 16px;
	}
	#homeVoices .splide__slide a:has( picture ) picture{
		grid-row : 1/3;
		grid-column : 1;
		align-self : center;
		height : 60px;
	}
	#homeVoices .splide__slide a:has( picture ) p{
		grid-row : 2;
		grid-column : 2;
		font-size : 14px;
		line-height : calc( 20 / 14 );
	}
	#homeVoices .splide__slide a:not( :has( picture ) ) p:first-of-type{
		grid-row : 1/3;
		grid-column : 1;
		align-self : center;
		height : 60px;
		font-size : 12px;
		line-height : calc( 16 / 12 );
	}
	#homeVoices .splide__slide a:not( :has( picture ) ) p:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 2;
		font-size : 14px;
		line-height : calc( 20 / 14 );
	}
	#homeVoices h2{
		display : -webkit-box;
		grid-row : 1;
		grid-column : 2;
		overflow : hidden;
		font-size : 12px;
		-webkit-box-orient : vertical;
		-webkit-line-clamp : 1;
	}
	#homeVoices h2 span{
		line-height : calc( 16 / 12 );
	}
	#homeVoices h2 span:nth-of-type( 1 )::after{
		content : " | ";
	}
	#homeVoices .splide__arrow{
		top : 52px;
	}
	#homeVoices .splide__arrow img{
		height : 30px;
	}
}
@media screen and ( 768px < width < 1400px ){
	#homeVoices{
		position : relative;
		left : 50%;
		width : 1400px;
		padding-inline : 80px;
		translate : -50%;
	}
	#homeVoices::before , #homeVoices::after{
		position : absolute;
		top : 0;
		z-index : 1;
		display : block;
		width : 100px;
		height : 100%;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-size : contain;
	}
	#homeVoices::before{
		left : calc( ( 100% - 100vw ) / 2 );
		background-image : image-set( url( "../images/home/voices/left.avif" ) type( "image/avif" ) , url( "../images/home/voices/left.webp" ) type( "image/webp" ) );
		background-position : left center;
	}
	#homeVoices::after{
		right : calc( ( 100% - 100vw ) / 2 );
		background-image : image-set( url( "../images/home/voices/right.avif" ) type( "image/avif" ) , url( "../images/home/voices/right.webp" ) type( "image/webp" ) );
		background-position : right center;
	}
	#homeVoices .splide__arrow--prev{
		left : calc( ( 100% - 100vw ) / 2 + 20px );
	}
	#homeVoices .splide__arrow--next{
		right : calc( ( 100% - 100vw ) / 2 + 20px );
	}
}
@media screen and ( width >= 1400px ){
	#homeVoices{
		padding-inline : calc( ( 100% - 1240px ) / 2 );
	}
	#homeVoices .splide__arrow--prev{
		left : calc( 50% - 670px );
	}
	#homeVoices .splide__arrow--next{
		right : calc( 50% - 670px );
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
#breadcrumbs ol{
	display : flex;
	flex-wrap : wrap;
}
#breadcrumbs ol > li:not( :last-child )::after{
	white-space : pre;
	content : " > ";
}
#breadcrumbs ol a , #breadcrumbs ol li:not( :last-child )::after , #breadcrumbs ol li:last-child{
	letter-spacing : .1em;
}
#breadcrumbs ol a{
	color : var( --blue );
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-decoration-color : transparent;
}
@media screen and ( width <= 768px ){
	#breadcrumbs{
		padding-top : calc( 10 var( --remBase ) );
		padding-bottom : calc( 14 var( --remBase ) );
	}
	#breadcrumbs a , #breadcrumbs li:not( :last-child )::after , #breadcrumbs li:last-child{
		font-size : 1.6rem;
		line-height : 1.4;
	}
}
@media print , screen and ( width > 768px ){
	#breadcrumbs{
		padding-top : calc( 10 var( --remBase ) );
		padding-bottom : calc( 30 var( --remBase ) );
	}
	#breadcrumbs a , #breadcrumbs li:not( :last-child )::after , #breadcrumbs li:last-child{
		font-size : 1.4rem;
		line-height : 1.5;
	}
}
@media ( hover : hover ){
	#breadcrumbs a:hover{
		text-decoration-color : currentColor;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#breadcrumbs a{
		transition : text-decoration var( --transitionBase );
	}
}