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

section.course-section {

	div.card-container {
		display: grid;
		grid-template-columns: 735px 355px;
		gap: 25px;
		@media (width <= 999px) {
			grid-template-columns: 100%;
		}
		div.course-card {
			padding: 35px;			
			border: solid 1px #eee;
			border-top: 3px solid var(--main-color);
			@media (width <= 999px) {
				padding: 25px;	
			}
			div.course-title {
				font-weight: 700;
				margin-bottom: 15px;   			
				color: var(--main-color2);
				span {
					display: block;
					color: var(--main-color);
					font-size: 2.4rem;
					@media (width <= 999px) {
						font-size: 2.0rem;
					}
				}
			} /* div.course-title */		
			ul.course-list {
				li {
					display: flex;
					margin-bottom: 10px;
					list-style-type: none;
					&:last-child {
						margin-bottom: 0;
					}
					&::before {
						content: "\f058";
						font-family: var(--fa);						
						font-weight: 900;
						color: var(--main-color2);
						margin-right: 10px;						
					}
				}
			} /* ul.course-list */			
			div.course-button {
				a {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 200px;
					height: 50px;					
					color: #fff;
					text-decoration: none;
					background: var(--main-color);
					font-weight: 700;
					&::after {
						content: "\f054";
						font-family: var(--fa);						
						font-weight: 900;
						margin-left: 10px;
					}
					&:hover {
						opacity: 0.8;
					}
				}
			} /* div.course-button */			
    } /* div.course-card */		
		
	div.info-content {		
		border: solid 1px #eee;
		border-top: 3px solid var(--main-color2);
		a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			height: 100%;
			padding: 35px 75px 35px 35px;
			text-decoration: none;
			position: relative;
			color: #333;
			@media (width <= 999px) {
				padding: 25px 50px 25px 25px;
			}
			&:hover {
				background: var( --color-gray);
				text-decoration: underline;
			}
			&::after {
				content: "\f054";
				font-family: var(--fa);						
				font-weight: 900;
				position: absolute;
				top: 50%;
				right: 35px;
				transform: translateY(-50%);
				color: var(--main-color2);
				@media (width <= 999px) {
					right: 20px;
				}
			}			
			div.info-title {
				color: var(--main-color2);
				font-size: 2.4rem;	
				font-weight: 700;
				margin-bottom: 15px;
				@media (width <= 999px) {
					font-size: 2.0rem;
				}
			}			
		} 
	} /* div.info-content */		
		
  } /* div.card-container */
} /* section.course-section */