@charset "utf-8";
.index_header {
	width: 260px;
	height: auto;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%,0%);
	z-index: 2;
}

#index {
	width: 100%;
	height: 100vh;
}
	.index__inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: calc((1176 / 1366) * 100%);
		height: 100%;
		padding: calc((64 / 768) * 100vh) 0;
		margin: 0 auto;
	}
		.index__item {
			display: block;
			width: calc((570 / 1176) * 100%);
			height: 100%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
			position: relative;
		}
		.index__item._hontei {
			background-image: url('../image/index/index-hontei.webp');
		}
		.index__item._bettei {
			background-image: url('../image/index/index-bettei.webp');
		}
			.index__item::after {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background-color: var(--color--black);
				opacity: 0.3;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		@media (any-hover: hover) {
			.index__item::after {
				transition: .8s;
			}
			.index__item:hover::after {
				opacity: 0;
			}
		}
			.index__item__ttl {
				padding-bottom: calc((18 / 1366) * 100vw);
				font-size: calc((40 / 1366) * 100vw);
				font-weight: 700;
				line-height: 1.5;
				letter-spacing: 0em;
				text-align: center;
				color: var(--color--white);
				white-space: nowrap;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				z-index: 2;
			}
		@media (any-hover: hover) {
			.index__item__ttl {
				transition: .8s;
				filter: drop-shadow(0 0 6px rgba(0,0,0,0));
			}
			.index__item:hover .index__item__ttl {
				filter: drop-shadow(0 0 6px rgba(0,0,0,0.4))
			}
		}
				.index__item__ttl::after {
					content: '';
					display: block;
					width: calc((48 / 1366) * 100vw);
					height: calc((3 / 1366) * 100vw);
					background-color: var(--color--white);
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%,0%);
				}
			.index__item__info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				width: 220px;
				height: 110px;
				border-radius: 35px 0 0 0;
				padding: 0 0 0 40px;
				background-color: var(--color--white);
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 2;
			}
				.index__item__info__name {
					display: flex;
					justify-content: center;
					align-items: center;
					width: auto;
					height: auto;
					margin-bottom: 8px;
					font-size: 24px;
					font-weight: 500;
					line-height: 1.46;
					letter-spacing: 0em;
					color: var(--color--black);
				}
					.index__item__info__name::after {
						content: '';
						display: block;
						width: 25px;
						height: 25px;
						margin-left: 12px;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}
					._hontei .index__item__info__name::after {
						background-image: url('../image/index/index-arrow_blue.webp');
					}
					._bettei .index__item__info__name::after {
						background-image: url('../image/index/index-arrow_orange.webp');
					}
				@media (any-hover: hover) {
					.index__item .index__item__info__name::after {
						position: relative;
						left: 0;
						transition: .3s;
					}
					.index__item:hover .index__item__info__name::after {
						left: 5px;
					}
				}
				.index__item__info__users {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: auto;
					height: auto;
					font-size: 14px;
					font-weight: 700;
					line-height: 1.43;
					letter-spacing: 0em;
				}
					.index__item__info__users::before {
						content: '';
						display: block;
						width: 8px;
						height: 15px;
						margin-right: 7px;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}
					._hontei .index__item__info__users::before {
						background-image: url('../image/index/index-icon_user_blue.webp');
					}
					._bettei .index__item__info__users::before {
						background-image: url('../image/index/index-icon_user_orange.webp');
					}
					.index__item__info__users dt {
						margin-right: 15px;
					}
					._hontei .index__item__info__users dt {
						color: var(--color--darkblue);
					}
					._bettei .index__item__info__users dt {
						color: var(--color--blown);
					}
					.index__item__info__users dd {
						font-size: 15px;
						color: var(--color--black);
					}

/* PC ================================================== */
@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#l_wrapper {
	padding-top: 113px;
}
.index_header {
	width: 184px;
}

#index {
	height: calc(100vh - 113px);
}
	.index__inner {
		flex-direction: column;
		justify-content: space-between;
		width: calc((315 / 375) * 100%);
		padding: 0 0 calc((((375 - 315) / 2) / 375) * 100vw);
	}
		.index__item {
			display: block;
			width: 100%;
			height: calc((100% / 2) - 9px);
		}
			.index__item__ttl {
				padding-bottom: calc((18 / 375) * 100vw);
				font-size: calc((28 / 375) * 100vw);
			}
			._bettei .index__item__ttl {
				top: 42%;
			}
				.index__item__ttl::after {
					width: calc((40 / 375) * 100vw);
					height: calc((3 / 375) * 100vw);
				}
			.index__item__info {
				width: auto;
				height: 81px;
				padding: 0 18px 0 22px;
			}
				.index__item__info__name {
					margin-bottom: 4.4px;
					font-size: 20px;
					line-height: 1.45;
				}
					.index__item__info__name::after {
						width: 22px;
						height: 22px;
					}
					.index__item__info__users::before {
						width: 7.16px;
						height: 13.31px;
						margin-right: 4px;
					}
					.index__item__info__users dt {
						margin-right: 8px;
					}
					.index__item__info__users dd {
						font-size: 14px;
					}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}