@charset "utf-8";
/* CSS Document */

/*
==============================================================================*/


#sectionA > .wrap > .d1 {
	color: var(--color-DYFC-orange);
	font-weight: bold;
}
#sectionA > .wrap > .d2 {
	font-weight: bold;
}




#sectionC > .wrap > .container {display: flex;}
#sectionC > .wrap > .container > .item {flex: 1;}




#sectionD {}
#sectionD > .wrap > .container > .item > a > .image {}




/*============================================================================*/




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width: 767px) {/* // Mobile // */
/*============================================================================*/


	.heroDesign-home #heroArea > .heroImageArea {aspect-ratio: 1.15;/* 828x720px (AspectRatio = 23:20 ≒ 1.15) */}




	#sectionA > .wrap > .d1 {font-size: 1.8rem;}
	#sectionA > .wrap > .d2 {
		margin-top: 2.6rem;
		font-size: 1.6rem;
	}
	#sectionA > .wrap > .d3 {
		margin-top: 2.6rem;
		font-size: 1.4rem;
	}




	#sectionB {}




	#sectionC {}
	#sectionC > .wrap {margin: 0;}
	#sectionC > .wrap > .container {gap: .5rem;}




	#sectionC + .co_horizontalRule {margin-top: 8rem;}




	#sectionD > .wrap > .container {
	}
	#sectionD > .wrap > .container > .item {}
	#sectionD > .wrap > .container > .item + .item {margin-top: 6rem;}
	#sectionD > .wrap > .container > .item > a > .image {}
	#sectionD > .wrap > .container > .item > a > .title {
		margin-top: 1.5rem;
		font-size: 1.9rem;
		font-weight: bold;
	}
	#sectionD > .wrap > .container > .item > a > .body {
	}
	#sectionD > .wrap > .container > .item > a > .body > .text {
		margin-top: 1rem;
		font-size: 1.4rem;
	}
	#sectionD > .wrap > .container > .item > a > .body > .button {
		margin-top: 2rem;
	}





/*============================================================================*/
}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width: 768px) {/* // PC // */
/*============================================================================*/


	.heroDesign-home #heroArea > .heroImageArea {aspect-ratio: 2.666667;/* 1600x600px (AspectRatio = 8:3 ≒ 2.666667) */}




	#sectionA > .wrap > .d1 {
		font-size: 2.8rem;
		text-align: center;
	}
	#sectionA > .wrap > .d2 {
		margin-top: 6rem;
		font-size: 2.4rem;
		text-align: center;
	}
	#sectionA > .wrap > .d3 {
		margin-top: 5rem;
		font-size: 2rem;
		text-align: center;
	}



	#sectionC {}
	#sectionC > .wrap > .container {gap: 2rem;}




	#sectionC + .co_horizontalRule {
		max-width: 150rem;
		margin: 0 auto;
	}




	#sectionD > .wrap {
		padding-top: 11rem;
		padding-left: 5rem;
		padding-right: 5rem;
	}
	#sectionD > .wrap > .container {
		display: flex;
		flex-wrap: wrap;
		gap: 8rem 6rem;
	}
	#sectionD > .wrap > .container > .item {
		width: calc( calc( 100% - 6rem * 1 ) / 2 );
	}
	#sectionD > .wrap > .container > .item > a > .image {}
	#sectionD > .wrap > .container > .item > a > .title {
		margin-top: 2rem;
		font-size: 1.8rem;
		font-weight: bold;
	}
	#sectionD > .wrap > .container > .item > a > .body {
		display: flex;
		gap: 6rem;
		justify-content: space-between;
		margin-top: 2rem;
	}
	#sectionD > .wrap > .container > .item > a > .body > .text {
		font-size: 1.6rem;
	}
	#sectionD > .wrap > .container > .item > a > .body > .button {}



/*============================================================================*/
}




/* - - - - - - - - - - - - - - - - - - -
https://---/---.css
ID = {}
- - - - - - - - - - - - - - - - - - - */