@charset "utf-8";
/* CSS Document */
.point {
	position: relative;
	z-index: 1;
}

#bg_cerry_front {
	z-index: 0;
}

img {
	max-width: 100%;
}

.t-right {
	text-align: right;
}

.common-mv {
	background: url(../images/point_mv.webp) center center / cover;
}

.common-mv .mv-text {
	margin: 0 auto;
}

.common-mv .mv-text img {
	margin: 0 auto;
}

.common-mv p {
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin: 0;
	color: #fff;
	font-size: 0.625em;
}

.wrap {
	max-width: 1020px;
	margin: 89px auto 0;
	padding: 0 20px;
}

.box {
	position: relative;
	width: 71.43%;
	max-width: 700px;
	margin: 0 auto;
	padding: 16px 34px 17px 58px;
	border: 1.69px solid #a98320;
	background-color: #f7f3e9;
}

.box .column-text {
	position: absolute;
	top: -17px;
	left: -1px;
	height: 16px;
}

.box .title,
.box .column-rank,
.box .box-annotation {
	padding: 0 42px 0 26px;
}

.box .title {
	margin: 13px auto 0;
	color: #a98320;
	font-size: 0.875em;
}

.box .column-title img {
	width: 93.205%;
	max-width: 592px;
}

.box .column-rank {
	margin: 1px auto 0;
}

.box .box-annotation {
	margin: 0 auto;
	font-size: 0.625em;
}

.item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 75px;
	padding-bottom: 75px;
	border-bottom: 1px solid #999;
}

.item.reverse {
	flex-direction: row-reverse;
}

.box + .item {
	margin: 123px auto 75px;
}

.item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.item .image {
	flex: 0 0 450px;
}

.item .image p {
	margin: 0 auto;
	font-size: 0.875em;
}

.annotation-area {
	width: 100%;
	max-width: 1020px;
	margin: 100px auto 0;
	padding: 0 20px;
}

.annotation-area p + p {
	margin-top: 0;
}

.buttons {
	margin-top: 65px;
}

/*===============================
            MEDIA
================================*/
@media only screen and (max-width: 1000px) {
	.point .annotation-area {
		margin: 25px auto 0;
	}

	.point .annotation-area p + p {
		margin: 2px 0 0;
	}

	.point .buttons {
		padding: 0 0 50px;
	}
}

@media only screen and (max-width: 768px) {
	h2 {
		padding: 0;
	}

	.common-mv {
		display: flex;
		align-items: flex-end;
		background: url(../images/point_mv_sp.jpg) center center / cover;
		height: 150px;
	}

	.common-mv p {
		right: 5px;
		bottom: 5px;
		text-align: right;
		line-height: 1.25;
	}

	.common-mv .mv-text img {
		height: 150px;
	}

	.wrap {
		margin: 32px 0 0;
	}

	.box {
		width: 97%;
		padding: 15px 14px;
	}

	.box .title,
	.box .column-rank,
	.box .box-annotation {
		padding: 0 9px;
	}

	.box .title {
		margin: 5px auto 0;
		font-size: 0.685em;
	}

	.box .column-rank {
		margin: 5px auto 0;
	}

	.box .column-title img {
		width: 100%;
	}

	.box .box-annotation {
		width: 111%;
		margin: 5px auto 0;
		transform: scale(0.9);
		transform-origin: 0 50%;
	}

	.item {
		display: block;
		margin-bottom: 26px;
		padding-bottom: 18px;
	}

	.box + .item {
		margin: 31px auto 26px;
	}

	.item .image {
		width: calc(100% - 40px);
		max-width: 430px;
		margin: 20px auto 0;
	}

	.item .text {
		width: calc(100% - 40px);
		max-width: 430px;
		margin: 0 auto;
	}

	.item .image p {
		/* height: 15px; */
	}

	.annotation-area {
		margin: 25px auto 0;
	}

	.buttons {
		padding: 0 0 50px;
	}
}