@charset "UTF-8";

:root {
	--white: #FFF;
	--black: #000;
	--red: #ff0000;
	--brown: #674500;
	--green: #4C5900;
		--aqua: #0F4D4E;
	--gold: #D4A700;
	--dark_gold: #826700;
	--font_nobel: "nobel", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font_nobel_condensed: "nobel-condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font_hiragino: "Hiragino Kaku Gothic Pro", sans-serif;
	--font_roboto: "Roboto", sans-serif;
}

main {
	position: relative;
}

.caravan .bg_container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.caravan .bg {
	position: absolute;
}

.caravan .bg1 {
	background: url(../images/bg1.png) top center / cover no-repeat;
	width: 100%;
	height: 707px;
}

.caravan .bg2 {
	background: url(../images/bg2_a.png) repeat;
	clip-path: polygon(0 22vw, 100% 0, 100% calc(100% - 22vw), 0 100%);
	width: 100%;
	transition: margin 0.2s ease-in-out;
}

.caravan .bg3 {
	background: url(../images/bg3_a.png) repeat;
	width: 100%;
	clip-path: polygon(0 22vw, 100% 0, 100% calc(100% - 22vw), 0 100%);
	margin-top: -190px;
	transition: margin 0.2s ease-in-out;
}
.caravan .bg4 {
	background: url(../images/bg4_a.png) repeat;
	width: 100%;
	clip-path: polygon(0 22vw, 100% 0, 100% calc(100% - 22vw), 0 100%);
	margin-top: -190px;
	transition: margin 0.2s ease-in-out;
}

.caravan .bg_txt1 {
	top: 19%;
	left: 0;
}

.caravan .bg_txt2 {
	top: 43.5%;
	right: 0;
}

.caravan .container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 10;
}

.caravan section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.caravan .title_container {
	/* width: 100%; */
	margin: 100px;
}

.caravan .title p {
	font-family: var(--font_nobel);
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 140%;
	letter-spacing: 0.108rem;
	font-feature-settings: 'palt' on;
}

.caravan .title h1 {
	position: relative;
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	text-align: center;
	letter-spacing: 0.04em;
	display: block;
	margin: 30px 0;
}

.caravan .title h1::before,
.caravan .title h1::after {
	content: '';
	position: absolute;
	display: block;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 478px;
	height: 1px;
	background: var(--gold);
}

.caravan .title h1::before {
	top: -19px;
}

.caravan .title h1::after {
	top: -16px;
}

.caravan .title_container>p {
	font-family: var(--font_hiragino);
	width: 100%;
	margin: 30px 0 0;
}

.caravan section>div {
	width: 100%;
}

.caravan .course {
	margin: 23px 0 0;
}

.caravan h2 {
	display: inline-block;
	font-family: var(--font_nobel);
	font-weight: 400;
	width: 200px;
	line-height: 5.2rem;
}

.caravan .course_a h2 {
	background: var(--brown);
}

.caravan .schedule {
	margin: 80px 0 69px;
}

.caravan .schedule h3 {
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	letter-spacing: 0.04em;
	color: var(--black);
	position: relative;
}

.caravan .schedule h3::before,
.caravan .schedule h3::after {
	content: '';
	position: absolute;
	display: block;
	left: 50%;
	-webkit-transform: translate(-50%, - 50%);
	transform: translate(-50%, -50%);
	width: 30px;
	height: 1px;
	background: var(--gold);
}

.caravan .schedule h3::before {
	top: -27px;
}

.caravan .schedule h3::after {
	top: -22px;
}

.caravan .schedule .schedule_table {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 13px 0;
}

.caravan .schedule .schedule_table table {
	width: 335px;
	text-align: center;
	border-spacing: 3px;
	border-collapse: separate;
}

.caravan .schedule .schedule_table table th {
	font-family: var(--font_hiragino);
	background-color: var(--black);
	color: var(--white);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
	letter-spacing: 0.04em;
	padding: 8px 0;
}

.caravan .schedule .schedule_table table th:nth-of-type(1) {
	width: 57%;
}

.caravan .schedule .schedule_table table td {
	background-color: var(--white);
	color: var(--black);
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
	letter-spacing: 0.04em;
	padding: 8px 0;
}

.caravan .schedule .schedule_table table td:nth-of-type(1) {
	background-color: #ececec;
}

.caravan .demo_cars h3 {
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	letter-spacing: 0.04em;
	color: var(--black);
	position: relative;
}

.caravan .demo_cars h3::before,
.caravan .demo_cars h3::after {
	content: '';
	position: absolute;
	display: block;
	left: 50%;
	-webkit-transform: translate(-50%, - 50%);
	transform: translate(-50%, -50%);
	width: 30px;
	height: 1px;
	background: var(--gold);
}

.caravan .demo_cars h3::before {
	top: -27px;
}

.caravan .demo_cars h3::after {
	top: -22px;
}

.demo_car {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 666px;
	margin-bottom: 32px;
}

.demo_car:nth-of-type(1) {
	margin-top: 32px;
}

.demo_car>div:nth-of-type(1) {
	width: 48%;
}

.demo_car>div:nth-of-type(2) {
	width: 52%;
	text-align: left;
	padding: 0 0 0 30px;
}

.demo_car h4 {
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	letter-spacing: 0.04em;
	color: #4C5900;
	margin-bottom: 8px;
	display: inline-block;
}
.course_a .demo_car h4{
	color: var(--brown);
}
.course_b .demo_car h4{
	color: #4C5900;
}
.course_c .demo_car h4{
	color: var(--aqua);
}

.demo_car p {
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 175%;
	letter-spacing: 0.04em;
	color: var(--black);

}

.caravan .course_b {
	margin: 212px 0 0;
}
.caravan .course_c {
	margin: 212px 0 0;
}

.caravan .course_b h2 {
	background: var(--green);
}
.caravan .course_c h2 {
	background: var(--aqua);
	color: var(--white);
}
.caravan .outro {
	margin-top: 291px;
}

.caravan .outro p {
	width: 100%;
}

.caravan .outro p.caption {
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 175%;
	text-align: center;
	letter-spacing: 0.04em;
	color: var(--white);
}

.caravan .outro p.note {
	font-family: var(--font_hiragino);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
	letter-spacing: 0.04em;
	color: var(--white);
	margin: 54px 0 0;
	position: relative;
}

.caravan .outro p.note:before,
.caravan .outro p.note:after {
	content: '';
	position: absolute;
	display: block;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 669px;
	height: 1px;
	background: var(--gold);
}

.caravan .outro p.note:before {
	top: -12px;
}

.caravan .outro p.note:after {
	top: 35px;
}

.caravan .outro .btn {
	margin: 91px 0 0;
}

#footer {
	z-index: 100;
	position: relative;
	margin-top: 131px;
}
.br_middle{display: none;}
@media (max-width:1010px){
	.br_middle{display: block;}
}
@media (max-width: 768px) {
	.br_middle {
			display: none;
		}
	.caravan .bg_txt1 {
			top: 13.5%;
			width: 28%;
		}
				.caravan .bg_txt2 {
					top: 50.2%;
					width: 28%;}

.caravan .title_container {
	margin: 100px 20px 66px;
}

	.caravan .title p {

		font-size: 15px;

	}

	.caravan .title h1 {
		font-size: 24px;
		margin: 37px 0;
	}

	.caravan .title h1::before,
	.caravan .title h1::after {
		width: 305px;
	}

	.caravan .title_container>p {
		margin: 24px 0 0;
		text-align: left;
		max-width: 600px;
	}

	.demo_car {
		max-width: 704px;
		width: 85%;
		margin: 0 auto;
	}

	.demo_car>div:nth-of-type(1) {
		width: unset;
	}

	.demo_car>div {
		width: 100%;
	}

	.demo_car>div:nth-of-type(2) {
		width: 100%;
		text-align: left;
		padding: 15px 0 0 0;
		margin-bottom: 6%;
	}
		.caravan .course_a {
			margin-bottom: 25px;
		}
.caravan .course_b,
.caravan .course_c {
	margin: 204px 0 0;
}
	.caravan .outro {
		margin-top: 175px;
	}

	.caravan .outro p.caption {
		margin: 0 20px;
	}

	.caravan .outro p.note {
		margin: 49px 0;
	}

	.caravan .outro p.note:before,
	.caravan .outro p.note:after {
		width: 90%
	}

	.caravan .outro p.note:after {
		top: 3.68rem;
	}

	.caravan .outro .btn {
		margin: 45px 0 0;
	}
}