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

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


#sectionA > .wrap {}
#sectionA > .wrap > .menuList {display: flex; flex-direction: column;}
#sectionA > .wrap > .menuList > .item {}
#sectionA > .wrap > .menuList > .item > a {}
#sectionA > .wrap > .menuList > .item > a > .d1 {}
#sectionA > .wrap > .menuList > .item > a > .d1 > .image {position: relative; overflow: hidden;}
#sectionA > .wrap > .menuList > .item > a > .d1 > .image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/-/media/Project/globeride/daiwa_com_dyfc/site/manabu/video/image/d3gplay.svg');
	background-size: contain;
	background-position: center;
	z-index: 1;
}
	#sectionA > .wrap > .menuList > .item > a:hover > .d1 > .image::before {transform: scale(1.1);}
#sectionA > .wrap > .menuList > .item > a > .d2 {}
#sectionA > .wrap > .menuList > .item > a > .d2 > .title {font-weight: bold;}
#sectionA > .wrap > .menuList > .item > a > .d2 > .text {}
#sectionA > .wrap > .menuList > .item > a > .d2 > .button {}




/* modal */
.modaal-wrapper .modaal-content-container {}
.modaal-wrapper .modaal-content-container > .modal-inner {}
.modaal-wrapper .modaal-content-container > .modal-inner > .title {font-weight: bold;}
.modaal-wrapper .modaal-content-container > .modal-inner > .video {}
.modaal-wrapper .modaal-content-container > .modal-inner > .video > iframe {
	width: 100%; 
	aspect-ratio: 1.777778;/* (AspectRatio = 16:9 ≒ 1.777778) */
}
.modaal-wrapper .modaal-content-container > .modal-inner > .text {}




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




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


#sectionA > .wrap > .menuList {gap: 6rem;}
#sectionA > .wrap > .menuList > .item > a > .d2 > .title {margin-top: 2rem; font-size: 1.9rem;}
#sectionA > .wrap > .menuList > .item > a > .d2 > .text {margin-top: 1.5rem; font-size: 1.4rem;}
#sectionA > .wrap > .menuList > .item > a > .d2 > .button {margin-top: 2rem;}




/* modal */
.modaal-wrapper .modaal-content-container {padding: 2rem 1.2rem}
.modaal-wrapper .modaal-content-container > .modal-inner > .title {margin-bottom: 1.5rem;}
.modaal-wrapper .modaal-content-container > .modal-inner > .text {font-size: 1.4rem; margin-top: 1rem;}




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




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


#sectionA > .wrap > .menuList {gap: 8rem;}
#sectionA > .wrap > .menuList > .item > a {
	display: flex;
	gap: 8rem;
}
#sectionA > .wrap > .menuList > .item > a > .d1 {width: 76.4rem;}
#sectionA > .wrap > .menuList > .item > a > .d2 {flex: 1; padding-top: 2rem;}
#sectionA > .wrap > .menuList > .item > a > .d2 > .title {font-size: 2.8rem;}
#sectionA > .wrap > .menuList > .item > a > .d2 > .text {font-size: 1.6rem; margin-top: 3rem;}
#sectionA > .wrap > .menuList > .item > a > .d2 > .button {margin-top: 4rem; width: fit-content;}




/* modal */
.modaal-wrapper .modaal-content-container {padding: 4rem;}
.modaal-wrapper .modaal-content-container > .modal-inner > .title {font-size: 2rem; margin-bottom: 3rem;}
.modaal-wrapper .modaal-content-container > .modal-inner > .text {margin-top: 2rem;}


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




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