@charset "UTF-8";

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
@media screen and ( width > 750px ) , print{
	#menuBtn{
		background-color : white;
	}
}

/* --------------------------------------------
ME
--------------------------------------------- */
#me{
	overflow-x : clip;
}
#me h2{
	line-height : 1.3;
	letter-spacing : .1em;
}
#me > p{
	line-height : 2;
}
#me ul{
	position : relative;
}
#me li a{
	display : block;
}
	#me li a:hover{
		opacity:.8 ;	
	}
#me li picture img{
	width : 100%;
}
#me h3{
	display : grid;
	grid-template-columns : auto auto;
	align-items : end;
	justify-content : start;
	letter-spacing : .1em;
}
#me h3::after{
	display : block;
	height : calc( 10.5 var( --remBase ) );
	aspect-ratio : 33/10.5;
	font-size : 0;
	content : "";
	background : url( "../../images/ui/arrow/right02.svg" ) center / contain no-repeat;
}
#me li p{
	line-height : 1.5;
}
#me p span + span::before{
	content : "｜";
}
@media screen and ( width <= 750px ){
	#me{
		padding-top : calc( 28 var( --remBase ) );
		padding-bottom : calc( 68 var( --remBase ) );
	}
	#me h2{
		font-size : 3.2rem;
	}
	#me > p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.4rem;
	}
	#me picture img{
		width : 100%;
		height : auto;
	}
	#me > picture{
		position : relative;
		left : calc( -15 var( --percentBase ) );
		width : calc( 399 var( --percentBase ) );
	}
	#me ul{
		margin-top : calc( -29 var( --remBase ) );
	}
	#me li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#me h3{
		column-gap : calc( 8 var( --percentBase ) );
		margin-block : calc( 12 var( --remBase ) );
		font-size : 2.8rem;
	}
	#me h3::after{
		height : calc( 10.5 var( --remBase ) );
	}
	#me li p{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#me{
		position : relative;
		padding-top : calc( 110 var( --remBase ) );
		padding-bottom : calc( 102 var( --remBase ) );
		margin-top : calc( 35 var( --remBase ) );
	}
	#me::before{
		position : absolute;
		top : 0;
		right : 0;
		z-index : -1;
		display : block;
		height : calc( 704 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color0103 );
	}
	#me > picture{
		position : absolute;
		top : calc( -15 var( --remBase ) );
	}
	#me > picture img{
		height : calc( 454 var( --remBase ) );
	}
	#me > :where( h2 , p , ul ){
		margin-left : calc( 162 var( --percentBase ) );
	}
	#me h2{
		font-size : 4.8rem;
	}
	#me > p{
		width : calc( 760 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
		font-size : 2rem;
	}
	#me ul{
		display : grid;
		grid-template-columns : calc( 598 * 100% / 1558 ) repeat( 2 , calc( 440 * 100% / 1558 ) );
		justify-content : space-between;
		width : calc( 1558 var( --percentBase ) );
		margin-top : calc( 77 var( --remBase ) );
	}
	#me li picture{
		height : calc( 379 var( --remBase ) );
	}
	#me li picture img{
		height : 100%;
		object-fit : cover;
	}
	#me li h3{
		margin-top : calc( 16 var( --remBase ) );
		margin-bottom : calc( 12 var( --remBase ) );
		font-size : 3.6rem;
	}
	#me li:nth-child( 1 ) h3{
		column-gap : calc( 8 * 100% / 598 );
	}
	#me li:nth-child( n+2 ) h3{
		column-gap : calc( 8 * 100% / 440 );
	}
	#me li p{
		font-size : 2rem;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#me::before{
		width : calc( 1843 var( --viewportBase ) );
	}
	#me > picture{
		left : calc( 1016 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#me::before{
		width : calc( 50% + 843px );
	}
	#me > picture{
		left : calc( 50% + 36px );
	}
}

/* --------------------------------------------
SECTIONS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#sections{
		padding-bottom : calc( 30 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#sections{
		display : grid;
		grid-template-rows : auto calc( 45 var( --remBase ) ) auto  auto;
		grid-template-columns : calc( 1240 var( --percentBase ) ) calc( 600 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 80 var( --remBase ) );
	}
}
#feature h2{
	line-height : 1.3;
	color : var( --color0102 );
	letter-spacing : .1em;
}
#feature > ul > li > a{
	position : relative;
	width : 100%;
	height : 100%;
	color : var( --color01 );
	background-color : white;
}
#feature > ul > li > a::before{
	position : absolute;
	display : block;
	width : 100%;
	width : auto;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#feature > ul > li:nth-child( 1 ) > a::before{
	aspect-ratio : 109/125;
	background-image : url( "../../images/group/home/feature/icon04.svg" );
}
#feature > ul > li:nth-child( 2 ) > a::before{
	aspect-ratio : 109/125;
	background-image : url( "../../images/group/home/feature/icon02.svg" );
}
#feature > ul > li:nth-child( 3 ) > a::before{
	aspect-ratio : 89/160;
	background-image : url( "../../images/group/home/feature/icon03.svg" );
}
@media screen and ( width <= 750px ){
	#feature{
		padding-top : calc( 53 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
		background-color : var( --color0103 );
	}
	#feature h2{
		font-size : 3.2rem;
	}
	#feature > ul{
		margin-top : calc( 19 var( --remBase ) );
	}
	#feature > ul > li{
		height : calc( 142 var( --remBase ) );
	}
	#feature > ul > li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#feature > ul > li > a{
		display : grid;
		align-items : center;
		justify-content : start;
		padding-left : calc( 159 var( --percentBase ) );
		font-size : 2rem;
		font-weight : 500;
		line-height : 1.3;
	}
	#feature > ul > li > a::before{
		top : 50%;
		translate : 0 -50%;
	}
	#feature > ul > li:nth-child( 1 ) > a::before{
		left : calc( 32 var( --percentBase ) );
		height : calc( 107 var( --remBase ) );
	}
	#feature > ul > li:nth-child( 2 ) > a::before{
		left : calc( 32 var( --percentBase ) );
		height : calc( 107 var( --remBase ) );
	}
	#feature > ul > li:nth-child( 3 ) > a::before{
		left : calc( 43 var( --percentBase ) );
		height : calc( 111 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#feature{
		grid-row : 1;
		grid-column : 1;
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 60 var( --remBase ) );
		padding-left : calc( 160 * 100% / 1240 );
		padding-right : calc( 40 * 100% / 1240 );
		border-image-source : linear-gradient( var( --color0103 ) , var( --color0103 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 0 0 100vw;
	}
	#feature h2{
		font-size : 4.8rem;
	}
	#feature > ul{
		display : grid;
		grid-template-rows : calc( 340 var( --remBase ) );
		grid-template-columns : repeat( 3 , calc( 340 * 100% / 1040 ) );
		justify-content : space-between;
		margin-top : calc( 28 var( --remBase ) );
	}
	#feature > ul > li{
		width : 100%;
		height : 100%;
	}
	#feature > ul > li > a{
		display : block;
		padding-top : calc( 253 var( --remBase ) );
		font-size : 2.4rem;
		font-weight : 700;
		line-height : 1.5;
		text-align : center;
	}
	#feature > ul > li > a::before{
		left : 50%;
		translate : -50% 0;
	}
	#feature > ul > li:nth-child( 1 ) > a::before{
		top : calc( 88 var( --remBase ) );
		height : calc( 125 var( --remBase ) );
	}
	#feature > ul > li:nth-child( 2 ) > a::before{
		top : calc( 88 var( --remBase ) );
		height : calc( 125 var( --remBase ) );
	}
	#feature > ul > li:nth-child( 3 ) > a::before{
		top : calc( 64 var( --remBase ) );
		height : calc( 160 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#feature > ul > li > a:hover{
		color : white;
		background-color : var( --color01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#feature > ul > li > a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
#about h2{
	line-height : 1.3;
	color : white;
	letter-spacing : .1em;
}
#about ul{
	display : grid;
	justify-content : space-between;
}
#about li{
	width : 100%;
	height : 100%;
}
#about a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	line-height : 1.5;
	color : var( --color01 );
	text-align : center;
	background-color : white;
	border : solid 1px white;
}
#about a::before{
	position : absolute;
	left : 50%;
	display : block;
	width : 100%;
	width : auto;
	font-size : 0;
	content : "";
	filter : var( --filterColor01 );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
	translate : -50% 0;
}
#about li:nth-child( 1 ) a::before{
	aspect-ratio : 94/90;
	background-image : url( "../../images/group/home/about/icon01.svg" );
}
#about li:nth-child( 2 ) a::before{
	aspect-ratio : 73/97;
	background-image : url( "../../images/group/home/about/icon02.svg" );
}
#about li:nth-child( 3 ) a::before{
	aspect-ratio : 98/93;
	background-image : url( "../../images/group/home/about/icon04.svg" );
}
#about li:nth-child( 4 ) a::before{
	aspect-ratio : 98/93;
	background-image : url( "../../images/group/home/about/icon03.svg" );
}
@media screen and ( width <= 750px ){
	#about{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 25 var( --remBase ) );
		margin-top : calc( 56 var( --remBase ) );
		background-color : var( --color01 );
	}
	#about h2{
		font-size : 3.2rem;
	}
	#about ul{
		grid-template-rows : calc( 148 var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 184 var( --percentBase ) ) );
		margin-top : calc( 20 var( --remBase ) );
	}
	#about a{
		padding-top : calc( 107 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		font-weight : 500;
	}
	#about li:nth-child( 1 ) a::before{
		top : calc( 25 var( --remBase ) - 1px );
		height : calc( 66.5 var( --remBase ) );
	}
	#about li:nth-child( 2 ) a::before{
		top : calc( 23 var( --remBase ) - 1px );
		height : calc( 70 var( --remBase ) );
	}
	#about li:nth-child( 3 ) a::before{
		top : calc( 26 var( --remBase ) - 1px );
		height : calc( 66.43 var( --remBase ) );
	}
	#about li:nth-child( 4 ) a::before{
		top : calc( 26 var( --remBase ) - 1px );
		height : calc( 66.43 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#about{
		grid-row : 3 / -1;
		grid-column : 1;
		padding-top : calc( 53 var( --remBase ) );
		padding-bottom : calc( 76 var( --remBase ) );
		padding-left : calc( 160 * 100% / 1240 );
		padding-right : calc( 40 * 100% / 1240 );
		border-image-source : linear-gradient( var( --color01 ) , var( --color01 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 0 0 100vw;
	}
	#about h2{
		font-size : 4.8rem;
	}
	#about ul{
		grid-template-rows : calc( 216 var( --remBase ) );
		grid-template-columns : repeat(4  , calc( 260 * 100% / 1040 ) );
		margin-top : calc( 28 var( --remBase ) );
	}
	#about a{
		padding-top : calc( 149 var( --remBase ) - 1px );
		font-size : 2rem;
		font-weight : 700;
	}
	#about li:nth-child( 1 ) a::before{
		top : calc( 52 var( --remBase ) - 1px );
		height : calc( 90 var( --remBase ) );
	}
	#about li:nth-child( 2 ) a::before{
		top : calc( 44 var( --remBase ) - 1px );
		height : calc( 97 var( --remBase ) );
	}
	#about li:nth-child( 3 ) a::before{
		top : calc( 53 var( --remBase ) - 1px );
		height : calc( 93 var( --remBase ) );
	}
	#about li:nth-child( 4 ) a::before{
		top : calc( 53 var( --remBase ) - 1px );
		height : calc( 93 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#about a:hover{
		color : white;
		background-color : var( --color01 );
	}
	#about a:hover::before{
		filter : var( --filterWhite );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#about a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
	#about a::before{
		transition : filter var( --transitionBase );
	}
}
#blog{
	position : relative;
	border-image-source : linear-gradient( var( --color01 ) , var( --color01 ) );
	border-image-source : repeating-linear-gradient( 45deg , #d98da3 , #d98da3 1.4142px , var( --color01 ) 1.4142px , var( --color01 ) 4px );
}
#blog::before{
	position : absolute;
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-image : url( "../../images/group/home/blog/icon.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#blog h2{
	font-weight : 500;
	color : white;
}
#blog p{
	line-height : 1.5;
	color : white;
}
#blog ul{
	background-color : white;
}
#blog li:not( :last-child ){
	border-bottom : solid 1px #d9d9d9;
}
#blog a{
	display : grid;
	align-items : center;
	padding-block : calc( 8 var( --remBase ) );
}
#blog h3{
	font-family : "Noto Sans JP" , sans-serif;
	line-height : 1.7;
}
#blog picture{
	width : 100%;
	height : calc( 90 var( --remBase ) );
}
#blog picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
@media screen and ( width <= 750px ){
	#blog{
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		margin-top : calc( 64 var( --remBase ) );
		background : repeating-linear-gradient( 45deg , #f3acc0 , #f3acc0 1.4142px , var( --color01 ) 1.4142px , var( --color01 ) 9.4142px );
	}
	#blog::before{
		top : calc( -44 var( --remBase ) );
		right : 0;
		right : calc( 6.53 var( --viewportBase ) );
		width : calc( 152.47 var( --viewportBase ) );
		height : calc( 188.83 var( --remBase ) );
	}
	#blog h2{
		font-size : 4.2rem;
	}
	#blog p{
		margin-top : calc( 14 var( --remBase ) );
		font-size : 1.8rem;
	}
	#blog ul{
		padding-inline : calc( 16 var( --percentBase ) );
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 14 var( --remBase ) );
	}
	#blog a{
		grid-template-columns : 1fr calc( 120 * 100% / 352 );
		column-gap : calc( 16 * 100% / 352 );
		padding-left : calc( 16 * 100% / 368 );
	}
	#blog h3{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#blog{
		grid-row : 1/4;
		grid-column : 2;
		padding-inline : calc( 16 * 100% / 600 );
		padding-top : calc( 49 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		background : repeating-linear-gradient( 45deg , #f3acc0 , #f3acc0 1.4142px , var( --color01 ) 1.4142px , var( --color01 ) 9.4142px );
	}
	#blog::before{
		top : calc( -28 var( --remBase ) );
		right : 0;
		width : calc( 218 * 100% / 600 );
		height : calc( 270 var( --remBase ) );
	}
	#blog h2{
		font-size : 4.2rem;
	}
	#blog p{
		width : calc( 332 * 100% / 568 );
		margin-top : calc( 18 var( --remBase ) );
		font-size : 2rem;
	}
	#blog ul{
		padding-inline : calc( 16 * 100% / 568 );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 8 var( --remBase ) );
		margin-top : calc( 31 var( --remBase ) );
	}
	#blog a{
		grid-template-columns : 1fr calc( 120 * 100% / 536 );
		column-gap : calc( 16 * 100% / 536 );
		padding-left : calc( 16 * 100% / 552 );
	}
	#blog h3{
		font-size : 2rem;
	}
}
#dialog[open]{
	position : fixed;
	display : grid;
	grid-template-columns : 1fr;
	align-items : center;
	width : 100%;
	height : 100dvh;
	animation : fadeIn .3s ease-out 0s forwards;
	background: rgba(0,0,0,.7);
}
#dialog.is-closing{
	animation : fadeOut .3s ease-out 0s forwards;
}
#dialog{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 15;
	overflow-y : auto;
}
#dialog::backdrop{
	background-color : color-mix( in sRGB , white 70% , transparent );
}
#dialog .dialogContent{
	width : 100%;
	background-color : white;
}
#dialog .splide__list{
	align-items : flex-start ! important;
}
#dialog .splide__slide:not( .is-active ){
	height : 0 ! important;
}
#dialog hgroup p{
	display : grid;
	grid-template-rows : calc( 47 var( --remBase ) );
	align-items : center;
	justify-content : start;
}
#dialog hgroup p span{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	font-size : 2.4rem;
	font-weight : 600;
	line-height : 1.3;
	color : white;
}
#dialog hgroup p span:nth-of-type( 1 ){
	background-color : var( --color01 );
}
#dialog hgroup p span:nth-of-type( 2 ){
	background-color : var( --color0102 );
}
#dialog hgroup h3{
	font-weight : 500;
	line-height : 1.3;
	letter-spacing : .1em;
}
#dialog .head > p{
	line-height : 2;
}
#dialog .splide__arrows{
	display : grid;
	grid-template-rows : calc( 40 var( --remBase ) );
	align-items : center;
	justify-content : center;
}
#dialog .splide__arrows button{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : 100%;
	height : 100%;
}
#dialog .splide__arrows button img{
	height : calc( 14 var( --remBase ) );
}
#dialog .splide__arrows button[disabled]{
	display : none;
}
#dialog .splide__arrows .splide__arrow--prev{
	grid-column : 1;
}
#dialog .splide__arrows .close{
	grid-column : 2;
	font-weight : 500;
	background-color : white;
	border : solid 1px #c4c4c4;
}
#dialog .splide__arrows .splide__arrow--next{
	grid-column : 3;
}
#dialog .splide__arrow{
	background-color : var( --color01 );
}
#dialog .splide__arrow img{
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#dialog{
		padding-inline : calc( 16 var( --viewportBase ) );
	}
	#dialog .dialogContent{
		padding-inline : calc( 16 var( --percentBase ) );
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#dialog hgroup p{
		grid-template-columns : calc( 168 * 100% / 336 ) calc( 47 * 100% / 336 ) ;
	}
	#dialog hgroup h3{
		margin-top : calc( 11 var( --remBase ) );
		font-size : 3.2rem;
	}
	#dialog .head > p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#dialog picture , #dialog ul ul{
		display : none;
	}
	#dialog .splide__arrows{
		grid-template-columns : calc( 40 * 100% / 336 ) calc( 120 * 100% / 336 ) calc( 40 * 100% / 336 );
		column-gap : calc( 16 * 100% / 336 );
		margin-top : calc( 37 var( --remBase ) );
	}
	#dialog .close{
		font-size : 1.4rem;
		line-height : 1.7;
	}
}
@media screen and ( width > 750px ) , print{
	#dialog .dialogContent{
		padding-inline : calc( 40 * 100% / 1320 );
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#dialog .head{
		display : grid;
		grid-template-rows : auto calc( 16 var( --remBase ) ) auto 1fr;
		align-items : start;
		justify-content : start;
		justify-content : space-between;
	}
	#dialog hgroup{
		grid-row : 1;
		grid-column : 1;
	}
	#dialog hgroup h3{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 4.8rem;
	}
	#dialog .head > p{
		grid-row : 3;
		grid-column : 1;
		font-size : 2rem;
	}
	#dialog .head > picture{
		grid-row : 1/-1;
		grid-column : 2;
		width : 100%;
		height : calc( 367 var( --remBase ) );
	}
	#dialog .head > picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#dialog .splide__arrows{
		grid-template-columns : calc( 40 * 100% / 1240 ) calc( 120 * 100% / 1240 ) calc( 40 * 100% / 1240 );
		column-gap : calc( 16 * 100% / 1240 );
	}
	#dialog .close{
		font-size : 1.8rem;
		line-height : 1.3;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#dialog{
		padding-inline : calc( 320 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#dialog{
		padding-inline : calc( ( 100% - 1320px ) / 2 );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #feature01 , #feature02 ) .head{
		grid-template-columns : calc( 760 * 100% / 1240 ) calc( 440 * 100% / 1240 );
	}
	:where( #feature01 , #feature02 ) hgroup p{
		grid-template-columns : calc( 168 * 100% / 760 ) calc( 47 * 100% / 760 ) ;
	}
}
@media screen and ( width > 750px ) , print{
	#feature03{
		width : 100%;
		overflow : hidden;
	}
	#feature03 .head{
		grid-template-columns : calc( 640 * 100% / 1240 ) calc( 600 * 100% / 1240 );
	}
	#feature03 hgroup p{
		grid-template-columns : calc( 168 * 100% / 640 ) calc( 47 * 100% / 640 ) ;
	}
	#feature03 hgroup h3{
		white-space : nowrap;
	}
	#feature03 > ul{
		margin-top : calc( 26 var( --remBase ) );
	}
	#feature03 > ul > li{
		position : relative;
	}
	#feature03 > ul > li > picture{
		position : absolute;
	}
	#feature03 h4{
		display : grid;
		grid-template-columns : calc( 74 * 100% / 1240 ) auto auto;
		align-items : center;
		justify-content : start;
		font-family : "Noto Sans JP" , sans-serif;
		font-size : 2.4rem;
		font-weight : 600;
		line-height : 1.3;
	}
	#feature03 h4::before{
		display : block;
		width : 100%;
		height : calc( 94 var( --remBase ) );
		aspect-ratio : 52/94;
		font-size : 0;
		content : "";
		background-image : url( "../../images/group/home/feature/icon03.svg" );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	#feature03 h4 span{
		font-size : 1.8rem;
		font-weight : 400;
		line-height : 1.3;
	}
	#feature03 dl{
		margin-top : calc( 28 var( --remBase ) );
	}
	#feature03 dl > div{
		display : grid;
		grid-template-columns : calc( 157 * 100% / 1240 ) calc( 640 * 100% / 1240 );
		align-items : center;
		justify-content : start;
	}
	#feature03 dl > div + div{
		margin-top : calc( 28 var( --remBase ) );
	}
	#feature03 dl > div dt{
		grid-row : 1;
		grid-column : 1;
		font-size : 2rem;
		font-weight : 400;
		line-height : 1.3;
	}
	#feature03 dl > div dd:nth-of-type( 1 ){
		grid-row : 2;
		grid-column : 1;
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#feature03 dl > div dd:nth-of-type( 1 ) ul{
		display : inline;
		font-size : 0;
	}
	#feature03 dl > div dd:nth-of-type( 1 ) li{
		display : inline;
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#feature03 dl > div dd:nth-of-type( 1 ) li + li::before{
		content : "、";
	}
	#feature03 dl > div:nth-of-type( 1 ) dd:nth-of-type( 2 ){
		display : grid;
		grid-row : 1/3;
		grid-column : 2;
		align-items : center;
		justify-content : start;
		height : calc( 48 var( --remBase ) );
		padding-inline : calc( 33 * 100% / 640 );
		font-size : 2rem;
		font-weight : 600;
		line-height : 1.3;
		background-color : #f5e9cf;
	}
	#feature03 dl > div:nth-of-type( 2 ) dd:nth-of-type( 2 ){
		display : grid;
		grid-template-columns : calc( 134 * 100% / 640 ) 1fr;
		column-gap : calc( 6 * 100% / 640 );
		align-items : start;
	}
	#feature03 dl > div:nth-of-type( 2 ) dd:nth-of-type( 2 ) strong{
		display : grid;
		place-items : center;
		height : calc( 48 var( --remBase ) );
		font-size : 2rem;
		font-weight : 600;
		line-height : 1.3;
		color : white;
		background-color : var( --color01 );
	}
	#feature03 dl > div:nth-of-type( 2 ) dd:nth-of-type( 2 ) p{
		display : block;
		padding-top : calc( 30 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.3;
		color : #d8a742;
		text-align : center;
		content : "";
		background : url( "../../images/group/home/feature/arrow.svg" ) left calc( 16 var( --remBase ) ) / 100% auto no-repeat;
	}
	#feature03 > ul > li + li{
		margin-top : calc( 34 var( --remBase ) );
	}
	#feature03 > ul > li picture{
		position : absolute;
		right : 0;
	}
	#feature03 > ul > li:nth-child( 1 ) picture{
		top : calc( 79 var( --remBase ) );
	}
	#feature03 > ul > li:nth-child( 1 ) picture img{
		height : calc( 229 var( --remBase ) );
	}
	#feature03 > ul > li:nth-child( 2 ) picture{
		top : calc( 104 var( --remBase ) );
	}
	#feature03 > ul > li:nth-child( 2 ) picture img{
		height : calc( 128 var( --remBase ) );
	}
}
@keyframes fadeIn{
	from{
		opacity : 0;
	}
	to{
		opacity : 1;
	}
}
@keyframes fadeOut{
	from{
		opacity : 1;
	}
	to{
		opacity : 0;
	}
}