@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--plan-b:#5AC3E1;
	--plan-y:#F39700;
	--plan-p:#E95377;
}

@media only screen and (max-width: 768px) {
	
}
@media only screen and (max-width: 460px) {
	
}

.plan-list{
	*{ margin:0; padding:0; box-sizing:border-box; }
	.item{
		display: flex;
		flex-flow: row-reverse;
		background: #FFFFFF;
		border-radius: 8px;
		&:not(:last-child){ margin-bottom: 15px; }
	}
	.text{
		width:calc(100% / 780 * (780 - 324));
		padding:20px 26px;
	}
	.tags{
		justify-content: flex-start;
		span{
			background: var(--color-brown);
			color: #fff;
			font-size: 1.4rem;
			text-align: center;
			min-width: 214px;
		}
	}
	.title{
		font-size: 2.4rem;
		padding: 4px 0 4px 10px;
		border-left: 4px solid var(--color-black);
		font-weight: 500;
		margin: 15px 0;
	}
	.read{
		font-size: 1.4rem;
		line-height: 2.4rem !important;
		margin-bottom:15px;
	}
	.btn-arrow{ max-width:208px; }
	.thum{
		width:calc(100% / 780 * 324);
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

.plan-kv{
	display: flex;
	background: var(--color-beige);
	margin: -25px 0 25px;
	.thum{
		width:calc(100% / 780 * 470);
	}
	.text {
		width:calc(100% / 780 * (780 - 470) - (10px * 2));
		background: #FFF;
		padding: 15px 20px 0;
		border: 1px dashed var(--color-brown);
		margin: 10px;
	}
	.title{
		font-family: var(--font-en);
		font-weight: 700;
		font-size: 4.0rem;
		span{
			display: block;
		}
		span:not(:last-child){
			margin-bottom: 5px;
		}
		span::first-letter{
			color: var(--color-beige);
		}
	}
	.box{
		display: flex;
		flex-flow: column;
		justify-content: center;
		height: calc(100% - 130px);
		.item{
			.sub{
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 1.4rem;
				text-align: center;
				font-weight: 700;
				padding: 5px 10px 6px;
				border-radius: 19px;
				margin-bottom: 10px;
				background: var(--color-black);
				&.b{ background: var(--plan-b); }
				&.y{ background: var(--plan-y); }
				&.p{ background: var(--plan-p); }
			}
			.price{
				display: flex;
				justify-content: center;
				align-items: flex-end;
				gap: 0.25em;
				font-size: 1.4rem;
				line-height: 1.0 !important;
				color: var(--color-brown);
				text-align: center;
				font-weight: 700;
				strong{
					font-family: "Barlow Condensed", sans-serif;
					font-size: 2.8rem;
					line-height: 1.0 !important;
					font-weight: 600;
				}
			}
		}
	}
	.box:has(:nth-child(1)){
		.sub{
			margin-bottom: 20px;
		}
	}
	.box:has(:nth-child(2)){
		gap:20px;
		.sub{
			margin-bottom: 10px;
		}
	}
	.box:has(:nth-child(3)){
		gap:10px;
		.sub{
			margin-bottom: 5px;
		}
	}
}

.plan-top-bnr{
	display: flex;
	flex-flow: column;
	gap:25px;
	margin-bottom: 25px;
	.remake{
		img{
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
			margin-bottom: 40px;
		}
	}
}

.plan-top-brand{
	background: #FFF;
	margin-bottom: 90px;
	.title{
		background: var(--color-brown);
		font-weight: 700;
		font-size: 2.0rem;
		text-align: center;
		color: #FFF;
		padding: 10px;
	}
	.text{
		padding: 13px;
	}
	.list{
		display: grid;
		gap: 5px 16px;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		padding: 10px 30px;
		>*{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.plan-group1{
	padding-bottom: 65px;
}
.plan-group2{
	padding-bottom: 0;
}
.plan-group3{
	*{ padding:0; margin:0; box-sizing:border-box;}
	padding-bottom: 90px;
	.plan-sub{
		margin-bottom: 0;
		transition: all 300ms 0s ease;
		&.on{ margin-bottom: 40px; }
	}
	.plan-sub+.box{
		padding: 0 25px;
		max-height: 0;
		overflow: hidden;
		transition: all 300ms 0s ease;
	}
	.plan-sub.on+.box{
		padding: 15px 25px 0;
		max-height: 300vh;
	}
	.box{
		max-height: none;
		.set{
			background: #FFF;
			padding: 20px 15px;
			border: 1px dashed var(--color-brown);
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20px;
				margin-bottom: 17px;
				&:not(:first-of-type){
					padding-top: 45px;
					border-top: 1px dashed var(--color-brown);
					margin-top: 45px;
				}
				h3{
					font-size: 2.0rem;
					line-height: 3.7rem !important;
					font-weight: 700;
				}
				.point{
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					width: 64px;
					height: 64px;
					border-radius: 50%;
					font-size: 2.4rem;
					line-height: 1.0 !important;
					font-weight: 700;
					text-align: center;
				}
				.price{
					font-size: 2.6rem;
					line-height: 1.0 !important;
					strong{
						font-family: "Barlow Condensed", sans-serif;
						font-size: 5.0rem;
						line-height: 1.0 !important;
						font-weight: 600;
						letter-spacing: 0.05em;
					}
				}
			}
			.list{
				display: flex;
				gap:4px;
				text-align: center;
				color: #FFFFFF;
				margin-bottom: 42px;
				&:has(:nth-child(5))>*{ width: calc((100% - 4px * 4) / 5); }
				&:has(:nth-child(4))>*{ width: calc((100% - 4px * 3) / 4); }
				&:has(:nth-child(3))>*{ width: calc((100% - 4px * 2) / 3); }
				&:has(:nth-child(2))>*{ width: calc((100% - 4px * 1) / 2); }
				.item{
					position: relative;
					border-radius: 4px;
					.t1{
						display: block;
						font-size: 1.4rem;
						line-height: 1.0 !important;
						font-weight: 700;
						margin-top: 6px;
					}
					.t2{
						display: block;
						font-size: 1.4rem;
						line-height: 1.0 !important;
						font-weight: 700;
						padding-top: 6px;
						border-top: 1px dashed #FFFFFF;
						margin: 6px 10px;
						strong{
							font-size: 1.8rem;
							&.en{
								font-size: 2.4rem;
							}
						}
						&.en{
							strong{
								font-size: 2.4rem;
							}
						}
					}
					.t3{
						position: absolute;
						left: 0;
						right: 0;
						bottom: -4px;
						transform: translateY(100%);
						font-size: 0.9rem;
						line-height: 1.0 !important;
						color: var(--color-black);
						text-align: center;
					}
				}
			}
			.info{
				display: flex;
				flex-wrap: wrap;
				gap:8px 12px;
				dl{
					display: flex;
					width: calc((100% - 12px) / 2);
					overflow: hidden;
					border-radius: 4px;
					>*{
						padding: 8px 0;
						font-size: 1.4rem;
						line-height: 1.2 !important;
						font-weight: 700;
						text-align: center;
						&.s{
							font-size: 1.3rem;
						}
						&.ss{
							font-size: 1.2rem;
						}
					}
					dt{
						width: 140px;
						color:#FFFFFF;
					}
					dd{
						width: calc(100% - 140px);
						background: #F5F5F5;
					}
				}
			}
			&.b{
				border-color: var(--plan-b);
				color: var(--plan-b);
				.point{
					font-size: 1.6rem;
					background:var(--plan-b);
				}
				.title:not(:first-of-type){ border-top-color: var(--plan-b); }
				.list>*{ background:var(--plan-b); }
				.info dt{ background:var(--plan-b); }
			}
			&.y{
				border-color: var(--plan-y);
				color: var(--plan-y);
				.point{ background:var(--plan-y); }
				.title:not(:first-of-type){ border-top-color: var(--plan-y); }
				.list>*{ background:var(--plan-y); }
				.info dt{ background:var(--plan-y); }
			}
			&.p{
				border-color: var(--plan-p);
				color: var(--plan-p);
				.point{ background:var(--plan-p); }
				.title:not(:first-of-type){ border-top-color: var(--plan-p); }
				.list>*{ background:var(--plan-p); }
				.info dt{ background:var(--plan-p); }
			}
		}
	}
}

.plan-group4{
	padding-bottom: 120px;
}

.plan-sub{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 68px;
	width: 600px;
	border-radius: 34px;
	margin: 0 auto 40px;
	background: var(--color-black);
	&.b{ background: var(--plan-b); }
	&.y{ background: var(--plan-y); }
	&.p{ background: var(--plan-p); }
	img{
		position: absolute;
		left: -26px;
		top: -26px;
	}
	span{
		font-size: 2.0rem;
		font-weight: 700;
		color: #FFF;
	}
	svg{
		position: absolute;
		right: 23px;
		top: calc((100% - 50px) / 2);
	}
	&:has(svg){
		cursor: pointer;
		transition: all 300ms 0s ease;
		&:hover{
			opacity: 0.6;
		}
	}
}

.plan-read{
	font-size: 1.6rem;
	line-height: 2.6rem !important;
	padding: 0 16px 30px;
}

.plan-set{
	.wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		width: 100%;
	}
	background: #FFF;
	padding: 20px;
	border: 1px dashed var(--color-brown);
	.list{
		display: flex;
		align-items: center;
		width: 360px;
		.item{
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			width: 110px;
			height: 110px;
			background: var(--color-beige);
			border-radius: 4px;
			font-size: 1.4rem;
			line-height: 1.0 !important;
			font-weight: 700;
			position: relative;
			z-index: 1;
			span{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 38px;;
				height: 38px;
				border-radius: 19px;
				position: absolute;
				right: 5px;
				top: -12px;
				background: var(--color-black);
				font-size: 1.2rem;
				line-height: 2.0rem !important;
				color: #FFF;
				font-weight: 600;
				strong{
					font-family: "Barlow Condensed", sans-serif;
					font-size: 2.0rem;
					line-height: 1.0 !important;
					font-weight: 600;
				}
			}
		}
		svg{
			position: relative;
			z-index: 2;
			margin: 0 -9px;
		}
		+.price{
			width: calc(100% -  360px);
		}
	}
	.price{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.25em;
		font-size: 2.6rem;
		line-height: 1.0 !important;
		color: var(--color-brown);
		font-weight: 700;
		margin: auto;
		strong{
			font-family: "Barlow Condensed", sans-serif;
			font-size: 5.0rem;
			line-height: 1.0 !important;
			font-weight: 600;
		}
	}
	
	.title{
		font-size: 2.0rem;
		line-height: 1.2 !important;
		color: var(--color-brown);
		font-weight: 700;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--color-brown);
		margin-bottom: 8px;
	}
	
	.read{
		font-size: 1.6rem;
		line-height: 2.6rem !important;
		&:not(:last-child){
			margin-bottom: 30px;
		}
	}
	
	.box1{
		padding-top: 34px;
		.ttl{
			font-size: 3.3rem;
			line-height: 1.2 !important;
			text-align: center;
			font-weight: 700;
			color: var(--color-pink);
			margin-bottom: 20px;
			svg{
				vertical-align: middle;
				line{
					fill: none;
					stroke: #c46666;
					stroke-linecap: round;
					stroke-width: 2px;
				}
			}
		}
		.read{
			background: var(--color-bg);
			padding: 9px;
			margin-top: 9px;
		}
	}
	
	>*:not(:last-child){
		margin-bottom: 19px;
	}
	&::after{ display:block; content:""; clear:both; }
}

.plan-info{
	border-radius: 8px;
	overflow: hidden;
	margin-top: 15px;
	.title{
		background: var(--color-beige);
		font-size: 1.6rem;
		line-height: 2.0rem !important;
		text-align: center;
		font-weight: 700;
		padding: 15px;
		position: relative;
		cursor: pointer;
		&::before{
			display: block;
			content: "";
			border-width: 7px 7px 0 7px;
			border-style: solid;
			border-color: #000 transparent transparent transparent;
			position: absolute;
			right: 37px;
			top: calc((100% - 7px) / 2);
			transition: all 300ms 0s ease;
		}
		&.on::before{
			transform: rotate(180deg);
		}
	}
	.box{
		background: #FFFFFF;
		padding: 0 25px;
		max-height: 0;
		overflow: hidden;
		transition: all 300ms 0s ease;
		>*+*{
			margin-top: 20px;
		}
	}
	.on+.box{
			padding: 15px 25px;
			max-height: 100vh;

	}
}

.plan-seiyaku{
	margin-bottom: 100px;
	.title{
		background: url("../img/plan/seiyaku_0.png") no-repeat right bottom;
		padding: 80px 240px 25px 20px;
		border-bottom: 2px solid var(--color-brown);
		margin-bottom: 15px;
		h2{
			font-size: 2.4rem;
			line-height: 3.4rem !important;
			font-weight: 700;
			text-align: center;
			color: #FFFFFF;
			padding:7px;
			border-radius: 13px;
			margin-bottom: 5px;
			background: var(--color-brown);
		}
		p{
			font-size: 1.4rem;
			text-align: center;
		}
	}
	.item{
		display: flex;
		flex-flow: row-reverse;
		background: #FFFFFF;
		border: 8px;
		overflow: hidden;
		&:not(:last-child){ margin-bottom: 16px; }
		.thum{
			width: 260px;
		}
		.text{
			width: calc(100% - 260px);
			padding: 6px 10px 20px 20px;
			strong{
				color: var(--color-pink);
				font-weight: inherit;
			}
			h3{
				font-size: 2.0rem;
				line-height: 3.7rem !important;
				font-weight: 700;
				color: var(--color-brown);
				margin-bottom: 9px;
				padding: 11px 0 12px 61px;
				position: relative;
				span{
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					background: url("../img/plan/tokuten_icon.svg") no-repeat center/cover;
					width: 68px;
					height: 59px;
					padding-right: 9px;
					font-size: 14px;
					line-height: 17px !important;
					position: absolute;
					left: -10px;
					top: 0;
				}
			}
			p{
				font-size: 1.4rem;
			}
		}
	}
}

.plan-tokuten{
	margin-bottom: 130px;
	*{ margin:0; padding:0; box-sizing:border-box; }
	.list{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin-bottom: 20px;
		.item{
			width: calc((100% - 20px) / 2);
			background: #FFFFFF;
			hgroup{
				display: flex;
				align-items: center;
				.n{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80px;
					min-height: 80px;
					background: var(--color-pink);
					font-family: "Barlow Condensed", sans-serif;
					font-size: 3.6rem;
					line-height: 1.0 !important;
					letter-spacing: 0.05em;
					font-weight: 700;
					color: #FFFFFF;
					padding: 15px;
				}
				.sub{
					padding: 0 15px;
					width: calc(100% - 80px);
					h3{
						font-size: 1.8rem;
						line-height: 2.4rem !important;
						font-weight: 700;
						color: var(--color-brown);
					}
					p{
						font-size: 1.2rem;
						line-height: 1.6rem !important;
					}
				}
			}
		}
	}
	.more{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		overflow: hidden;
		background: var(--color-beige);
		font-size: 1.6rem;
		line-height: 1.0;
		font-weight: 700;
		position: relative;
		cursor: pointer;
		transition: all 300ms 0s ease;
		&::before{
			display: block;
			content: "";
			border-width: 7px 7px 0 7px;
			border-style: solid;
			border-color: var(--color-brown) transparent transparent transparent;
			position: absolute;
			right: 37px;
			top: calc((100% - 7px) / 2);
		}
		&.on{ height: 0; }
	}
	.list_more{
		max-height: 0;
		margin-bottom: 0;
		overflow: hidden;
		transition: all 300ms 0s ease;
	}
	.on+.list_more{
		max-height: 200vh;s
	}
}

.productlist{
	gap: 0px 11px;
}

.plan-fs{
	margin-top: 200px;
	margin-bottom: 120px;
	.n{
		display: inline-block;
		font-family: var(--font-mincho);
		font-size: 4.6rem;
		line-height: 1.0 !important;
		color: var(--color-brown);
		font-weight: 700;
		position: relative;
		width: 50px;
		height: 50px;
		&::after {
			content: "";
			display: block;
			width: 70px;
			height: 1px;
			background: var(--color-brown);
			position: absolute;
			left: 0;
			bottom: 0;
			transform: rotate(-45deg);
			transform-origin: left bottom;
		}
		span{
			position: absolute;
			left: calc(50% - 0.25em);
			top: -25px;
		}
	}
	.head{
		display: flex;
		flex-flow: row-reverse;
		justify-content: space-between;
		margin-bottom: 45px;
		.thumb{
			width: 320px;
		}
		hgroup{
			width: 360px;
			h2{
				font-size: 4.6rem;
				line-height: 5.8rem !important;
				font-weight: 700;
				color: var(--color-brown);
				margin-bottom: 5px;
				+.read{
					font-size: 2.4rem;
					line-height: 3.7rem !important;
					font-weight: 700;
					margin-bottom: 47px;
				}
			}
			.item{
				display: flex;
				align-items: center;
				background: #FFFFFF;
				border-radius: 8px;
				font-size: 1.7rem;
				line-height: 2.0rem !important;
				font-weight: 700;
				strong{
					color: var(--color-pink);
				}
				+.item{
					margin-top: 26px;
				}
				.n{
					margin-right: 15px;
				}
			}
		}
	}
	.body{
		background: #FFFFFF;
		border-radius: 8px;
		padding: 30px 20px 90px;
		.item{
			&::after{
				display: block;
				content: "";
				clear: both;
				font-size: 0;
				height: 0;
			}
			&:not(:last-child){
				margin-bottom: 50px;
			}
			.thumb{
				&.r{
					float: right;
					margin-left: 20px;
				}
				&.l{
					float: left;
					margin-right: 20px;
				}
			}
			.title{
				font-family: var(--font-mincho);
				font-size: 2.2rem;
				line-height: 3.5rem !important;
				color: var(--color-brown);
				font-weight: 500;
				margin-bottom: 30px;
				.n{
					margin-right: -30px;
				}
			}
			.read{
				font-size: 1.6rem;
				line-height: 2.6rem !important;
				font-weight: 500;
				strong{
					color: var(--color-pink);
					font-weight: 500;
				}
			}
		}
	}
}

.faq{
	margin-bottom: 140px;
	.list{
		background: #FFFFFF;
		border-radius: 8px;
		padding: 25px 20px;
		.item{
			&:not(:last-child){ margin-bottom: 30px; }
			.title{
				background: var(--color-brown);
				font-size: 1.6rem;
				line-height: 2.0rem !important;
				font-weight: 700;
				color: #FFFFFF;
				padding: 9px 35px 9px 25px;
				border-radius: 8px;
				position: relative;
				cursor: pointer;
				transition: all 300ms 0s ease;
				&:hover{
					opacity: 0.6;
				}
				&::before{
					display: block;
					content: "";
					border-width: 7px 7px 0 7px;
					border-style: solid;
					border-color: #FFFFFF transparent transparent transparent;
					position: absolute;
					right: 20px;
					top: calc((100% - 7px) / 2);
					transition: all 300ms 0s ease;
				}
				&.on::before{
					transform: rotate(180deg);
				}
			}
			.box{
				font-size: 1.4rem;
				line-height: 2.6rem !important;
				padding: 0 25px;
				max-height: 0;
				overflow: hidden;
				transition: all 300ms 0s ease;
			}
			.on+.box{
				padding: 15px 25px 0;
				max-height: 100vh;
			}
		}
	}
}

.plan-contact{
	background: var(--color-pink);
	color: #fff;
	font-size: 1.8rem;
	height: 80px;
	width: 500px;
	display: flex;
	justify-content: center;
	gap: 20px;
	align-items: center;
	margin: auto;
	position: relative;
	transition: all 300ms 0s ease;
	&:hover{
		opacity: 0.7;
	}
	&::before{
		content: "";
		display: inline-block;
		width: 36px;
		height: 36px;
		background: url("../common/img/ico/ico-calendar-w.png") no-repeat;
		background-size: contain;
	}
	&::after{
		content: "";
		display: inline-block;
		width: 472px;
		height: 24px;
		background: url("../common/img/ico/link-arrow-w.svg") no-repeat;
		background-position: right bottom;
		position: absolute;
		left: 0;
		bottom: 14px;
	}
}

.plan-table{
	margin: auto;
	thead{
		background: var(--color-beige);
		th{
			font-size: 1.6rem;
			line-height: 1.2 !important;
			font-weight: 700;
			text-align: center;
			padding: 7px 14px;
		}
	}
	tbody{
		font-size: 1.4rem;
		line-height: 1.2 !important;
		tr:nth-child(2n){
			background:#F5F5F5;
		}
		th{
			font-weight: 700;
			text-align: left;
			padding: 7px 14px;
		}
		td{
			font-size: 1.0rem;
			text-align: center;
			color: var(--color-brown);
			font-weight: 700;
			padding: 7px 48px;
			strong{
				font-family: "Barlow Condensed", sans-serif;
				font-size: 1.6rem;
				line-height: 1.0 !important;
				font-weight: 600;
				letter-spacing: 0.05em;
			}
		}
	}
	tr{
		>*{
			vertical-align: middle;
			&[align="center"]{ text-align: center;}
			&:not(:first-child){
				border-left: 1px dotted var(--color-brown);
			}
		}
	}
	caption{
		caption-side: bottom;
		font-size: 1.2rem;
		line-height: 1.0 !important;
		font-weight: 700;
		text-align: right;
		margin-top: 10px;
	}
}

/* end */