@charset "utf-8";

/* ==================================================================
	bunri-u.css
	
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@100..900&display=swap');

.contents main {

font-family: "Noto Sans JP", sans-serif;
color: #000;

/* --------------------------------
	□ 共通
-------------------------------- */
.en {
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.buttonStyle {
	a {
		padding: 22px 84px;
		border-radius: 50px;
		border: 2px solid #000;
		background-color: #fff;
		color: #000;
		font-weight: 700;
		box-shadow: none;
		&:hover {
			color: #fff;
		}
	}
	&.contact a {
		border: 2px solid #E8383D;
		background-color: #E8383D;
		color: #fff;
	}
	&.tel a {
		border: 2px solid #fff;
		background-color: transparent;
		color: #fff;
	}
}

/* --------------------------------
	□ accent
-------------------------------- */
.accent{
	background:url(../../images/lp/bunri-u/accent_bg_pc.jpg) center center no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;

	.copy_area {
		text-align: center;

		.spOnly {
			display: none;
		}

		h2 {
			font-size: 3.12rem;
			position: relative;
			&:after {
				content: "";
				background: url(../../images/lp/bunri-u/accent_badge.svg) 0 0 no-repeat;
				width: 118px;
				height: 118px;
				background-size: cover;
				position: absolute;
				top: -58px;
				right: -77px;
			}

			small {
				font-size: 1.75rem;
				display: block;
				margin-top: 24px;
			}
		}

		.buttonStyle {
			text-align: center;
			margin-top: 24px;
		}

		.tel {
			font-weight: bold;
			dt {
				font-size: 1.75rem;
				a {
					color: #000;
				}
			}
		}
	}
}

@media only screen and
(max-width : 767px) {

	.accent{
		background:#F2F6FA;
		height: auto;
		display: block;
		.copy_area {
			.spOnly {
				display: block;
			}
			h2 {
				font-size: 2rem;
				margin-top: 20px;
				&:after {
					width: 80px;
					height: 80px;
					top: -48px;
					right: 8px;
				}
				small {
					font-size: 1.2rem;
					margin-top: 16px;
				}
			}
			.buttonStyle {
				margin-top: 20px;
			}
			.tel {
				margin-bottom: 40px;
				dt {
					font-size: 1.5rem;
				}
			}
		}
	}
}

/* --------------------------------
	□ property
-------------------------------- */
#property{
	padding: 80px 0;
	background: url(../../images/lp/bunri-u/property_bg.png) 0 0 repeat #fff;
	margin: 0;

	.container {
		position: relative;
		&::before {
			content: url(../../images/lp/bunri-u/student1.svg);
			position: absolute;
			top: -41px;
			right: -41px;
		}
		&::after {
			content: url(../../images/lp/bunri-u/student2.svg);
			position: absolute;
			top: 61px;
			left: -41px;
			visibility: initial;
		}
	}

	h2.title {
		span {
			font-size: 2.37rem;
			background-color:#F3FF50;
			display: inline;
			line-height: 1.7;
		}
	}
	p.text {
		font-size: 1.12rem;
		line-height: 1.8;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40px;
		em {
			color:#E8383D;
		}
	}
	.property_list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;

		dl {
			background-color: #fff;
			border: 3px solid #EBEBEB;
			padding: 32px 40px;
			position: relative;
			&::before {
				content: "";
				background: url(../../images/lp/bunri-u/img_triangle.svg) 0 0 no-repeat;
				width: 25px;
				height: 25px;
				position: absolute;
				top: 0;
				left: 0;
			}
			dt {
				font-size: 1.5rem;
				font-weight: bold;
				padding-bottom: 10px;
				margin-bottom: 24px;
				border-bottom: 4px solid;
				border-image: linear-gradient(to right, #E8383D, #6ECBE6) 1;
			}
			dd.img {
				img {width: 100%;}
			}
			dd.details {
				margin-top: 20px;
				table {
					font-size: 0.93rem;
					th {
						color: #6ECBE6;
					}
					td {
						padding: 2px 1em;
					}
				}
			}
			dd.button {
				.buttonStyle {
					text-align: center;
					margin-top: 20px;
					a {
						padding: 16px 0;
						width: 80%;
						font-size: 1rem;
						text-align: center;
					}

				}
			}
		}
	}
}

@media only screen and
(max-width : 767px) {
	#property{
		padding: 60px 4%;

		.container {
			position: relative;
			&::before {
				content: none;
			}
			&::after {
				content: none;
			}
		}

		h2.title {
			margin-bottom: 16px;
			span {
				font-size: 1.5rem;
			}
		}
		p.text {
			font-size: 1rem;
			text-align: left;
			margin-bottom: 32px;
		}
		.property_list {
			grid-template-columns: 1fr;
			gap: 20px;

			dl {
				padding: 28px 32px;
				position: relative;
				dt {
					font-size: 1.4rem;
				}
				dd.details {
					table {
						th {
							width: 3em;
							vertical-align: top;
						}
					}
				}
				dd.button {
					.buttonStyle {
						text-align: center;
						margin-top: 20px;
						a {
							padding: 12px 0;
						}

					}
				}
			}
		}
	}
}

/* --------------------------------
	□ contact_area
-------------------------------- */
#contact_area{
	padding: 80px 0;
	background: url(../../images/lp/bunri-u/contact_bg.jpg) 0 100% repeat #fff;
	background-size: cover;
	h2.title {
		span {
			color: #fff;
			font-size: 2.5rem;
			letter-spacing: 0.1em;
		}
		small {
			font-size: 1.12rem;
			font-weight: bold;
			color: #fff;
		}
	}
	p.text {
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 1rem;
		margin-bottom: 20px;
	}
	.cv_area {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap:32px;
		.speech {
			color: #fff;
			text-align: center;
			font-size: 1rem;
		}
		.tel_box {
			a {
				font-size: 2rem;
				height: 96px;
				width: 100%;
				padding: 0;
				display: block;
				text-align: center;
				padding-top: 9px;
				.hour {
					font-size: 0.81rem;
					background: none;
					display: block;
					padding: 0;
					font-weight: 400;
				}
			}
		}
		.contact_box {
			a {
				height: 96px;
				width: 100%;
				padding: 0;
				display: block;
				text-align: center;
				padding-top: 32px;
			}
		}

	}
}

@media only screen and
(max-width : 767px) {
	
	#contact_area{
		padding: 60px 0;
		margin: 0;
		.container {
			padding: 0 4%;
		}
		h2.title {
			margin-bottom: 20px;
			span {
				font-size: 2rem;
				margin-bottom: 4px;
			}
			small {
				font-size: 1rem;
			}
		}
		.cv_area {
			grid-template-columns: 1fr;
			gap:20px;
			.tel_box {
				a {
					font-size: 1.6rem;
					height: auto;
					padding: 8px 0 12px;
				}
			}
			.contact_box {
				a {
					height: auto;
					width: 100%;
					padding: 20px 0;
					font-size: 1.2rem;
				}
			}

		}
	}
}


}