@charset "utf-8";


/* circlelist */
.circlelist {
    display: flex;
    max-width: 1222px;
    margin: 0 auto;
    translate: 16px 0;
    @media (width <= 800px) {
        flex-direction: column;
        gap: 30px 0;
        max-width: 301px;
        translate: 0 0;
    }
    li {
        position: relative;
        left: -16px;
        width: 100%;
		text-align: center;
        margin: 0 -16px 0 0;
        padding: 0;
        @media (width <= 800px) {
            left: auto;
            margin: 0;
        }
        &:last-child {
            margin-right: 0;
        }
		.cl-main {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			aspect-ratio: 1 / 1;
			color: var(--green01);
			font-weight: 700;
			border-radius: 50%;
			background-color: var(--yellowgreen02);
			padding: 0;
			@media (width <= 800px) {
				min-height: 301px;
			}
			.cl-img {
				display: block;
				margin: 0 50px;
				@media (width <= 800px) {
					margin: 0;
				}
			}
			.cl-title {
				display: block;
				font-size: 28px;
				@media (width <= 800px) {
					font-size: 18px;
				}
			}
			.cl-number {
				display: flex;
				justify-content: center;
				align-items: baseline;
				font-size: 70px;
				line-height: 1;
				@media (width <= 800px) {
					font-size: 48px;
				}
				.tani {
					font-size: 36px;
					@media (width <= 800px) {
						font-size: 25px;
					}
					&.nin {
						font-size: 26px;
						@media (width <= 800px) {
							font-size: 19px;
						}
					}
				}
			}
		}
    }
}


/* arrow-double */
.arrow-double {
	position: relative;
	width: 45px;
	height: 45px;
	margin: 0 auto 45px;
	@media (width <= 800px) {
		width: 16px;
		height: 22px;
		margin-bottom: 20px;
	}
	&::before,
	&::after {
		position: absolute;
		left: 50%;
		translate: -50% 0;
		width: 32px;
		height: 20px;
		content: "";
		background: url(../img/arrow_d.svg);
		background-position: left top;
		background-repeat: no-repeat;
		background-size: cover;
		pointer-events: none;
		@media (width <= 800px) {
			width: 16px;
			height: 10px;
		}
	}
	&::before {
		top: 0;
	}
	&::after {
		bottom: 0;
	}
}