@charset "utf-8";
/* CSS Document */


.page_ttl_wrap {
	background: url("../images/plan/page_ttl_bg.jpg");
	margin-top: 6vh;
}

.page_ttl_inner {
	justify-content: space-between;
	align-items: flex-end;
}

.page_ttl_left {
	.page_ttl {
		font-size: clamp(30px,7vw,70px);
	}
}

.page_ttl_right {
	display: flex;
	align-items: flex-end;
	height: 100%;
	position: relative;
	span {
		display: flex;
	}
	.page_ttl_mark {
		width: 23vh;
		height: 23vh;
		left: -11vw;
		bottom: 30px;
		position: absolute;
		z-index: -1;
		@media screen and (max-width: 768px) {
			right: 0px;
		}
		@media screen and (max-width: 599px) {
			display: none;
		}
	}

	.page_ttl_img {
		height: 27vh;
		@media screen and (max-width: 768px) {
			display: none;
		}
	}
}

.inner_wrap {
	max-width: 900px;
}

.sec_ttl {
	padding-bottom: 10px;
	padding-inline: 0px;
	&::after {
		background: #C6B691;
		width: 200px;
	}
}

.plan_box {
	border: 1px solid #DBDBDB;
	background: #FFF;
	margin-top: 1rem;
	& > dt {
		background: var(--primary-dark);
		color: #FFF471;
		font-size: clamp(18px,2.2vw,22px);
		font-weight: 500;
		text-align: center;
		padding: 4px 10px;
	}
	& > dd {
		padding-block: 1rem;
		display: grid;
		justify-content: center;
	}
}

.plan_price {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	align-items: stretch;
	max-width: 650px;
	width: 100%;
	margin: 0px auto;
	padding-block: 1rem;
	column-gap: 1rem;
	dt {
		border-radius: 5px;
		max-width: 312px;
		width: 100%;
		padding: 10px;
		font-size: clamp(18px,2.6vw,26px);
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.price_main {
		font-size: clamp(50px,6vw,66px);
		font-family: var(--ff-robot);
		font-weight: bold;
		font-feature-settings: 'palt';
		letter-spacing: -1px;
		text-align: right;
		span {
			font-size: clamp(20px,2.7vw,27px);
			font-weight: 500;
		}
		small {
			font-size: clamp(14px,1.6vw,16px);
			font-weight: 500;
		}
	}
	.price_tax {
		text-align: right;
		top: -10px;
		position: relative;
		font-size: clamp(15px,1.8vw,18px);
		span {
			font-size: clamp(18px,2.2vw,22px);
			font-weight: 500;
		}
	}
	&.normal_price {
		dt {
			background: #6F6E6E;
			color: #FFF;
		}
		dd {
			color: #6F6E6E;
		}
	}
	&.service_price {
		dt {
			background: #DB5151;
			color: #FFF;
			span {
				color: #FFF471;
				big {
					font-size: clamp(30px,3.8vw,38px);
					font-weight: bold;
				}
			}
		}
		dd {
			color: #DB5151;
		}
	}
}

.about_plan {
	margin-block: 6vh;
	.sec_ttl > span {
		color: #DB5151;
	}
}

.plan_recommend {
	dd {
		font-size: clamp(28px,3.6vw,38px);
		font-weight: 500;
		text-align: center;
		color: #6F6E6E;
		display: flex;
		span {
			color: #DB5151;
		}
	}
}

.plan_request {
	max-width: 800px;
	width: 90%;
	margin: 6vh auto;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
	gap: 2rem;
	li {
		background: #FFF;
		border-radius: 200px;
		filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.05));
		padding: 2rem;
		aspect-ratio: 1/1;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 28vh;
		height: 28vh;
		margin: 0px auto;
		.request_inner {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			picture {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80px;
				margin-bottom: 1rem;
				img {
					height: 100%;
				}
			}
			.request_ttl {
				display: grid;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				small {
					font-size: clamp(15px,1.7vw,17px);
				}
				span {
					font-size: clamp(18px,2vw,20px);
					color: #DB5151;
				}
			}
		}
	}
}

.plan_request_answer {
	max-width: 600px;
	width: 100%;
	margin: 0px auto;
	li {
		font-size: clamp(16px,2vw,20px);
		font-weight: 500;
		span {
			color: #DB5151;
		}
	}
}

.hikaku_wrap {
	max-width: 1000px;
	width: 100%;
	margin: 6vh auto 0px;
	background: #FFF;
	border: 2px dashed #939393;
	border-radius: 10px;
	padding: 2rem;
}

.hikaku_ttl {
	max-width: 640px;
	width: 90%;
	margin: 0px auto;
	background: -moz-linear-gradient(to right,#7982CB,#394B88); 
	background: -webkit-linear-gradient(to right,#7982CB,#394B88); 
	background: linear-gradient(to right,#7982CB,#394B88);
	color: #FFF;
	font-size: clamp(20px,4vw,40px);
	font-weight: 500;
	text-align: center;
	border-radius: 50px;
	padding: 5px 10px;
	position: relative;
	&::before {
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  margin-left: -15px;
	  border: 20px solid transparent;
	  border-top: 20px solid #5865a8;
	}
}

.hikaku_inner {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 1rem;
	max-width: 760px;
	width: 100%;
	margin: 10vh auto 0px;
	p {
		border: 8px solid #EAEAEA;
		padding-bottom: 30px;
	}
	.view {
		position: relative;
		&::before {
			content: '閲覧中のプラン';
			display: inline-block;
			width: auto;
			height: auto;
			font-size: clamp(18px,2.4vw,24px);
			font-weight: 500;
			color: #FFF;
			top: -50px;
			left: -8px;
			position: absolute;
		}
	}
} 
@media screen and (max-width: 599px) {
	.hikaku_inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
		margin-top: 6vh;
	}
	.hikaku_inner p {
		border-width: 4px;
		padding-bottom: 15px;
	}
	.hikaku_inner .view::before {
		font-size: clamp(13px, 3.5vw, 18px);
		top: -32px;
		left: -4px;
	}
}
.include_list {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
	gap: 2rem 1rem;
	li {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		border: 1px solid #B9B9B9;
		border-radius: 5px;
		padding: 10px;
		.include_ttl {
			height: 8vh;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			font-size: clamp(16px,2vw,20px);
			font-weight: 500;
			text-align: center;
			line-height: 120%;
			padding: 5px 0px 0px;
			line-height: 1;
			position: relative;
			small {
				font-size: clamp(14px,1.6vw,16px);
			}
		}
		.include_txt {
			flex-grow: 1;
			padding: 1rem;
			text-align: justify;
			font-size: clamp(14px,1.6vw,16px);
			font-weight: 500;
		}
	}
}
@media screen and (max-width: 599px) {
	.include_list {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem 0.5rem;
	}
	.include_list li {
		padding: 5px;
	}
	.include_list li .include_ttl {
		height: auto;
		min-height: 7vh;
		font-size: clamp(11px, 3vw, 14px);
		small {
			font-size: clamp(9px, 2.5vw, 12px);
		}
	}
}
.include_caution {
	border: 2px dashed var(--primary-dark);
	border-radius: 10px;
	overflow: hidden;
	margin-block: 6vh 0px;
	font-size: clamp(20px,2.4vw,24px);
	font-weight: 500;
	text-align: center;
	dt {
		background: var(--primary-pale2);
		color: var(--primary-dark);
		padding: 16px 1rem;
	}
	dd {
		padding: 2rem 1rem;
		color: #C73A3A;
		.option_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 5px 6vh;
		}
		.pay_detail_btn {
			margin-top: 3vh;
		}
	}
}

.flow_main {
	max-width: 690px;
	width: 90%;
	margin: 3vh auto;
	display: flex;
}

.flow_wrap {
	&:nth-of-type(n+2) {
		margin-top: 3vh;
	}
	dt {
		background: var(--bg-gradient-purple-moz);
		background: var(--bg-gradient-purple-webkit);
		background: var(--bg-gradient-purple);
		color: #FFF;
		font-size: clamp(22px,3vw,30px);
		font-weight: 600;
		padding: 8px 10px;
		text-align: center;
		width: 100%;
	}
}

.flow_inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	padding: 2rem;
	gap: 2rem 4rem;
	background: #F8F8F8;
	@media screen and (max-width: 599px) {
		grid-template-columns: 1fr;
	}
	&:nth-of-type(n+2) {
		margin-top: 1rem;
	}
	.flow_inner_left {
		dt {
			font-size: clamp(22px,3vw,30px);
			font-weight: 500;
			background: none;
			border-bottom: 1px solid #707070;
			text-align: left;
			color: #000;
		}
		dd {
			padding-block: 2rem;
			font-weight: 500;
			line-height: 160%;
		}
	}
}

.flow_inner_list {
	display: grid;
	row-gap: 2px;
	li {
		color: #DB5151;
		display: flex;
		align-items: center;
		column-gap: 2px;
		&::before {
			content: '●';
			font-size: 10px;
		}
		span {
			color: #000;
		}
	}
}

.kasou_box {
	span {
		color: #DB5151;
	}
}

.faq_wrap {
	max-width: 900px;
	width: 100%;
	margin: 6vh auto;
}

.faq_inner {
	background: #F8F8F8;
	padding: 1rem 2rem;
	@media screen and (max-width: 599px) {
		padding: 1rem;
	}
	&:nth-of-type(n+2) {
		margin-top: 1rem;
	}
	& > * {
		padding: 2rem 1rem;
		display: flex;
		column-gap: 1rem;
		position: relative;
		&::before {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: clamp(20px,3vw,31px);
			font-weight: bold;
			top: -3px;
			left: -3px;
			position: relative;
			color: #FFF;
			z-index: 1;
		}
		&::after {
			content: '';
			display: inline-block;
			width: 52px;
			height: 48px;
			border-radius: 50px;
		}
		p {
			font-weight: 500;
			width: 100%;
		}
	}
	dt {
		color: var(--primary-dark);
		font-size: clamp(20px,2.4vw,24px);
		border-bottom: 1px solid #707070;
		&.faq_q {
			align-items: center;
			&::before {
				content: 'Q';
			}
			&::after {
				background: var(--primary-light);
				left: 0px;
				position: absolute;
			}
		}		
	}
	dd {
		line-height: 180%;
		span {
			color: #FC3D3D;
		}
		&.faq_a {
			&::before {
				content: 'A';
			}
			&::after {
				background: #FFF;
			}
		}		
	}
}