body,
html {
		width: 100%;
		color: #1f1f1f;
}

.head {
		width: 100%;
		background-color: #F0F0F0;
		text-align: center;
		padding: 100px 0;
		position: relative;
}

.head h1 {
		font-size: 24px;
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0.02em;
}

.head h6 {
		font-size: 60px;
		font-weight: 200;
		line-height: 1;
		margin: 0 auto;
}

.head:after {
		content: "";
		width: 1px;
		height: 100px;
		background-color: #B2B2B2;
		position: absolute;
		bottom: -50px;
		left: 50%;
}

.inner {
		margin: 160px auto;
}

.inner ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
}

.inner li {
		width: 320px;
		height: 320px;
		position: relative;
		overflow: hidden;
		margin-bottom: 20px;
}

.inner li .scale-img {
		width: 100%;
		height: auto;
		transition-duration: 0.5s;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
}

.inner li .scale-img:hover {
		transform: scale(1.1, 1.1);
		cursor: pointer;
}

.inner li .grad {
		position: absolute;
		bottom: -1px;
		left: 0;
		z-index: 2;
}

.inner li p {
		font-size: 14px;
		font-weight: 400;
		color: #fff;
		line-height: 1;
		position: absolute;
		bottom: 65px;
		right: 20px;
		z-index: 3;
}

.inner li h6 {
		font-size: 22px;
		font-weight: 500;
		color: #fff;
		line-height: 1;
		position: absolute;
		bottom: 35px;
		right: 20px;
		z-index: 3;
}

.inner li span {
		font-size: 14px;
		font-weight: 400;
		color: #fff;
		line-height: 1;
		position: absolute;
		bottom: 20px;
		right: 20px;
		z-index: 3;
}

.inner .bottom_nav {
		padding: 50px 0;
		text-align: center;
}

.inner .bottom_nav .nav_ttl {
		font-size: 18px;
		font-weight: 400;
		margin: 0 auto 40px;
		color: #bbb;
}

.inner .bottom_nav ul {
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		margin: 0 auto 40px;
		width: 300px;
}

.inner .bottom_nav li {
		flex-basis: 150px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		color: #bbb;
		margin: 0 25px;
}

.inner .bottom_nav li a {
		text-decoration: none;
		color: #0075C1;
}

.inner .page_bottom_entry {
		width: 480px;
		height: 80px;
		background-color: #0075C1;
		margin: 100px auto 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 500;
		color: #fff;
		letter-spacing: 0.02em;
		border: 1px solid #0075C1;
}

.inner .page_bottom_entry:hover {
		background-color: #fff;
		border: 1px solid #0075C1;
		color: #0075C1;
		padding: 25px 20px;
		text-align: left;
		position: relative;
		transition: all .5s ease;
}

.inner .page_bottom_entry:after {
		content: "";
		background-image: url(../../img/btn_arrow.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 37px;
		height: 7px;
		position: absolute;
		top: calc(50% - 3px);
		right: 20px;
		transition: all .5s ease;
}

.inner .page_bottom_entry:hover:after {
		content: "";
		background-image: url(../../img/btn_arrow_on.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 37px;
		height: 7px;
		position: absolute;
		top: calc(50% - 3px);
		right: -20px;
		transition: all .5s ease;
}

@media (max-width: 780px) {
		.head {
				width: 100%;
				background-color: #F0F0F0;
				text-align: center;
				padding: 12vw 0;
				position: relative;
		}
		.head h1 {
				font-size: 3.07692vw;
				font-weight: 400;
				line-height: 1;
				letter-spacing: 0.02em;
		}
		.head h6 {
				font-size: 10.25641vw;
				font-weight: 200;
				line-height: 1;
				margin: 0 auto;
		}
		.head:after {
				content: "";
				width: 1px;
				height: 12vw;
				background-color: #B2B2B2;
				position: absolute;
				bottom: -6vw;
				left: 50%;
		}
		.inner {
				margin: 12vw auto;
		}
		.inner ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 90vw;
				margin: 0 auto;
		}
		.inner li {
				width: 44vw;
				height: 44vw;
				position: relative;
				overflow: hidden;
				margin-bottom: 2vw;
		}
		.inner li .scale-img {
				width: 100%;
				height: auto;
				transition: unset;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
		}
		.inner li .scale-img:hover {
				transform: unset;
				cursor: pointer;
		}
		.inner li .grad {
				position: absolute;
				bottom: -1px;
				left: 0;
				z-index: 2;
		}
		.inner li p {
				font-size: 2.82051vw;
				font-weight: 400;
				letter-spacing: 0.02em;
				color: #fff;
				line-height: 1;
				position: absolute;
				bottom: 7vw;
				right: 2vw;
				z-index: 3;
				text-align: right;
		}
		.inner li h6 {
				font-size: 4.61538vw;
				font-weight: 500;
				color: #fff;
				line-height: 1;
				position: absolute;
				bottom: 2vw;
				left: 2vw;
				z-index: 3;
		}
		.inner li span {
				font-size: 3.07692vw;
				font-weight: 400;
				letter-spacing: 0.02em;
				color: #fff;
				line-height: 1;
				position: absolute;
				bottom: 3vw;
				right: 2vw;
				z-index: 3;
		}
		.inner .page_bottom_entry {
				display: none;
		}
}