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

body.common {
	.topContents {
		margin-bottom: 50px;
		@media (width <= 999px) {
			margin-bottom: 35px;
		}
	}
}


.commonFlow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	@media (width <= 999px) {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	li {
		display: flex;
        flex-direction: column;
        height: 100%;
		padding: 25px 25px 25px 65px;
        margin: 0 !important;
        background: var(--color-gray);
		list-style-type: none !important;        
        font-size: 2.0rem;
        position: relative;        
		::before {
            content: "2";
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 100%;
            background: var(--main-color);
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
		}		
		&:nth-of-type(1){
			::before {
				content: "1";
			}
			span {
				background: #fff;
				border: solid 2px var(--main-color2);
				color: var(--main-color2);
			}
		}
		&:nth-of-type(2){
			::before {
				content: "2";
			}
		}
		&:nth-of-type(3){
			::before {
				content: "3";
			}
		}
		span {
			display: inline-block;
			padding: 6px 15px 4px;
			background: var(--main-color2);
			color: #fff;
			font-size: 1.4rem;
			margin-bottom: 10px;
			align-self: flex-start;
		}
	}
}