@charset "utf-8";
/* CSS Document */
/* ガイド系CSS */

/* 短期ページ
------------------------------------- */

main#page_guideshort .kv-img {
	background: linear-gradient(45deg, #403331 0%, #3e3030 30%, #efefef 30%, #efefef 100%);
}
main#page_yearly .kv-img {
	& img {
		aspect-ratio: 800/250;
		max-width: 800px;
	}
}

.rcmd-plan h3 {
	@media screen and (max-width: 834px) {
    font-size: 18px;
	}
}

/* 台数限定 */
.rcmd-plan em {
	background: linear-gradient(45deg, #df5684 0%, #df5685 30%, #f46091 30%, #f46091 70%, #f45e90 70%, #f45e90 100%);
	border-radius: 2px;
	color: #FFF;
	display: block;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	font-size: 14px;
	padding: 0 5px;
	line-height: 22px;
	height: 22px;
	width: 70px;
	margin-bottom: 5px;
}
.item-wrap .item-title {
	width: 100%;
}
.item-wrap.rcmd-plan > section {
	display: grid;
	grid-template-columns: auto auto 255px;
	grid-template-columns: 100%;
	justify-content: start;
	justify-items: start;
	align-items: start;
}
.item-wrap.rcmd-plan > section :is(h2,h3) {
	display: block;
	text-align: left;
}

.item-wrap.rcmd-plan > section.kuwashikuha {
	background: #EAEDF2;
	padding: 20px;
	margin: 60px auto;
	font-size: 14px;
	text-align: center;
	justify-items: center;
	@media screen and (max-width: 834px) {
		margin: 20px auto;
	}
	& .otoi {
		font-size: var(--common-h2-font-size);
		font-weight: bold;
		font-variation-settings: "wght" 700;
		margin: 20px auto;
	}
}
.item-wrap.rcmd-plan .container > section {
	display: inline-grid;
	grid-template-columns: 305px 1fr;
	width: 100%;
	@media screen and (max-width: 834px) {
		grid-template-columns: 1fr;
	}
}
.item-wrap.rcmd-plan .container > section h3 {
	grid-column: 1/3;
	grid-template-columns: 1fr;
	text-align: left;
	@media screen and (max-width: 834px) {
		grid-column: 1/1;
	}
}
.item-wrap.rcmd-plan .container > section p {
	display: block;
	width: 100%;
}

.rcmd-plan .item-wrap_left {
	border-radius: 3px;
	display: grid;
	grid-template-rows: 200px 50px;
	justify-content: center;
	gap: 10px;
	text-align: center;
	max-width: 320px;
	width: 100%;
	@media screen and (max-width: 834px) {
		grid-template-rows: 150px 50px;
		max-width: 300px;
		margin: auto;
	}
}
.rcmd-plan .item-wrap_left .item-image-wrap {
	background: transparent;
	display: inline-grid;
	grid-template-rows: 1fr;
	justify-content: center;
	align-items: center;
	max-width: 250px;
}
.rcmd-plan .item-wrap_left .estimate_here {
	width: 200px;
	margin: auto;
}
.rcmd-plan .btn-yellow a {
	border-radius: 0;
	font-size: 1.2em;
	height: 45px;
	line-height: 41px;
	letter-spacing: 0;
	padding: 0;
	width: 100%;
	@media screen and (max-width: 834px) {
    min-width: 200px;
	}
}

.rcmd-plan .item_wrapset_left dd span {
	height: 100%;
	align-items: end;
	display: inline-grid;
	&.num {
		font-size: 35px;
		font-weight: 600;
		transform: translateY(1px);
		align-items: center;
	}
	&.yen {
		transform: translateY(0px);
		align-items: end;
		height: 30px;
		width: 70px;
	}
}
.rcmd-plan .item_wrapset_right {
	text-align: right;
}
.rcmd-plan div.price-box {
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: unset;
	grid-auto-flow: unset;
	@media screen and (max-width: 834px) {
		grid-template-columns: 130px 1fr;
		grid-template-rows: repeat(3,1fr);
		grid-auto-flow: column;
	}
}
.rcmd-plan div.price-box div.thead {
	background: #f2f4f7;
	border-bottom: 0;
	font-size: 15px;
	line-height: 17px;
	&::before {
		z-index: 1;
	}
	@media screen and (max-width: 834px) {
		font-size: 13px;
		line-height: 16px;
	}
}
.rcmd-plan div.price-box div.tbody {
	border-bottom: 1px solid #b8c2ce;
	grid-template-columns: auto auto;
	position: relative;
	font-size: 14px;
	align-items: center;
	font-weight: normal;
	&::before {
		background: #b8c2ce;
		content: "";
		display: block;
		margin: auto 0;
		position: absolute;
		top: 0;
		right: -1px;
		bottom: 0;
		left: auto;
		height: 70%;
		width: 1px;
	}
	@media screen and (max-width: 834px) {
		border-bottom: 0;
		&::before {
			content: none;
		}
	}
}
.rcmd-plan div.price-box div:nth-child(3n)::before {
	content: none;
}
.rcmd-plan div.price-box div svg {
	height: 15px;
	width: 15px;
}

.item-wrap_center {
	@media screen and (max-width: 834px) {
		padding: 10px 0;
	}
	& .productName h4 {
		font-size: var(--common-h4-font-size);
	}
}

.rcmd-plan div.price-box div {
	&.tbody:nth-child(2n) {
		font-weight: normal;
		font-variation-settings: "wght" 400;
	}
	@media screen and (max-width: 834px) {
		padding: 5px 0;
		font-size: 13px;
		&:nth-child(3n) {
			border-bottom: 1px solid #b8c2ce;
		}
	}
}

/* マーカー */
.yearly-comparison .marker {
	background: linear-gradient(transparent 50%, #e46107 0%);
	color: #FFF;
	display: inline;
	position: relative;
	margin: 0 7px;
	padding: 0 2px 1px;
	z-index: 0;
	&::before {
		content: none;
	}
}