@charset "utf-8";
#ttl_main{
	background: #fcf8ef url("../img/ttl_system_bg.jpg") top right no-repeat;
	background-size: cover;
}

.sec_system{
	width: 82.8rem;
	text-align:center;
	margin:0 auto;
}

#ttl_course,#ttl_option{
	width: 100%;
	height: 4.7rem;
	text-align:left;
	margin:3rem auto;
}

	#lst_course{
		display:block;
		width: 100%;
		text-align:left;
		margin:3rem auto;
	}

		#ttl_course img,#ttl_option img{
			height: 100%;
		}
		.img-course{
			width: 100%;
			margin-bottom: 2rem;
		}
		.ttl-sub-course{
			height: 2.6rem;
			margin: 2rem 0;
			font-size: 3rem;
			font-weight:normal;
		}
		.desc-course{
			font-size: 1.5rem;
			line-height: 2.5rem;
			letter-spacing: .2rem;
			margin-bottom: 2rem;
		}
		.price{
			margin-bottom: 8rem;
		}
			.price li{
				display:inline-block;
				padding-right: 2.3rem;
			}

			.price li dl{
				position:relative;
				display: inline-block;
				text-align: left;
				white-space:nowrap;
				margin-right: 1rem;
				padding-bottom: 1rem;


			}
			.price li dl::after{
				position: absolute;
				bottom: 4px;
				left: 0;
				content: '';
				height: 4px;
				opacity:1;
				width: 100%;
				background: -webkit-repeating-linear-gradient(45deg, #f2f3c4, #f2f3c4 2px, #b6c03c 2px, #b6c03c 4px);
				background: repeating-linear-gradient(45deg, #f2f3c4, #f2f3c4 2px, #b6c03c 2px, #b6c03c 4px);
			}
				.price li dl dt, .price li dl dd{
					display:inline-block;
					line-height: 2.5rem;
					vertical-align: baseline;
					color: #543810;
					letter-spacing: .3rem;
				}
				.price li dl dt{
					font-size: 1.5rem;
					width: 5rem;

				}
				.price li dl dd{
					font-size: 2.5rem;
					font-weight: bold;
				}


/* ------------------------------------------------------------
 タブコンテンツ
 ------------------------------------------------------------ */

.tabs:not(.mechanism) #tabWrap {
	padding: 0;
}

.tabs:not(.mechanism) [name="switch"],
.tabs .switch {
	display: none;
}

/* :::::: button :::::: */

.tabs .tabBtn {
	display: table;
	width: 100%;
	margin: 1.5rem auto;
	padding: 0 0 0 1rem;
	text-align:left;
}

.tabs .tabBtn li {
	display: inline-block;
	width: auto;
	border-right: 1px solid #fff;
	background-color: #ccc;
	text-align: center;
	vertical-align: middle;
	border-radius: 50%;
	margin-right: 3rem;
}

.tabs .tabBtn li:last-child {
	border-right: 0;
}

.tabs .tabBtn li::before{
		content: '';
		background-color: #fff;
		display: block;
		position: absolute;
		width: 10rem;
		height: 10rem;
		z-index: -1;
		border-radius: 50%;
		transition: all .2s ease;
		-webkit-transition: all .2s ease;
}

.tabs .tabBtn li:hover::before {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
		box-shadow:
				0 0 0 24px #fff,
				0 0 0 25px #B78946;
}


.tabs .tabBtn li label,
.tabs .tabBtn li a {
	display: block;
	cursor: pointer;
	width: 10rem;
	height: 10rem;
	line-height: 10rem;
	font-size: 2rem;
	color: #fff;
	transition: background-color .3s;
	border-radius: 50%;
}

.tabs .tabBtn li label:hover,
.tabs .tabBtn li a:hover {
	background-color: rgba(255,158,85,.5);
}




.tabs .tabBtn li a {
	text-decoration: none;
}

/* :::::: contents :::::: */

.tabs:not(.mechanism) .tabContents {
	position: relative;
}

.tabs:not(.mechanism) .tabContents section {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	padding: 2rem 0;
	margin-bottom: 10rem;
	background-color: #fff;
}

.tabs #wrapper .tabContents ul {
	overflow: hidden;
}


.lst_option {
	display:block;
	width: 80rem;
	margin:0;
	text-align:left;
}
	.lst_option li{
		width:17rem;
		display:inline-block;
		text-align:center;
		padding:1.6rem 1rem;
		font-size:1.8rem;
		margin:.6rem;
		color:#B78946;
		background-color:#fff;
		border:1px solid #B78946;
		border-radius: .3rem;
	}


/* :::::: slide :::::: */

.tabs.slide .tabContents {
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
}

.tabs.slide .tabContents section {
	opacity: 0;/* 0.1; */
}

/* horizontal */

.tabs.slide.H #wrapper {
	overflow: hidden;
}

.tabs.slide.H .tabContents {
	width: 500%;
}

.tabs.slide.H .tabContents section {
	float: left;
	width: 20%;
}

/* :::::: mechanism :::::: */

.tabs.mechanism .tabContents section,
.tabs.contents .tabContents section {
	opacity: 0;/* 0.1; */
}

.tabs.mechanism .tabContents section {
	text-align: center;
}

.tabs .tabContents section {
	transition: opacity 0.3s;
}

.tabs #tab-1:checked ~ .tabBtn li [for="tab-1"],
.tabs #tab-2:checked ~ .tabBtn li [for="tab-2"],
.tabs #tab-3:checked ~ .tabBtn li [for="tab-3"],
.tabs.target .tabBtn li [href="#tab-1"],
.tabs #tab-1:target ~ .tabBtn li [href="#tab-1"],
.tabs #tab-2:target ~ .tabBtn li [href="#tab-2"],
.tabs #tab-3:target ~ .tabBtn li [href="#tab-3"] {
	background-color: #b5bf3c;
}
.tabs.target .switch:target ~ .tabBtn li [href="#tab-1"] {
	background-color: lightSeaGreen;
}

.tabs #tab-1:checked ~ .tabContents section:nth-child(1),
.tabs #tab-2:checked ~ .tabContents section:nth-child(2),
.tabs #tab-3:checked ~ .tabContents section:nth-child(3),
.tabs.target .tabContents section:nth-child(1),
.tabs #tab-1:target ~ .tabContents section:nth-child(1),
.tabs #tab-2:target ~ .tabContents section:nth-child(2),
.tabs #tab-3:target ~ .tabContents section:nth-child(3) {
	opacity: 1;
	background-color: #fff;
}
.tabs.target .switch:target ~ .tabContents section:nth-child(1) {
	opacity: 0;/* 0.1; */
	background-color: transparent;
}

.tabs.z #tab-1:checked ~ .tabContents section:nth-child(1),
.tabs.z #tab-2:checked ~ .tabContents section:nth-child(2),
.tabs.z #tab-3:checked ~ .tabContents section:nth-child(3){
	z-index: 1;
}

.tabs.slide.H #tab-1:checked ~ .tabContents { -webkit-transform: translateX(0); transform: translateX(0); }
.tabs.slide.H #tab-2:checked ~ .tabContents { -webkit-transform: translateX(-20%); transform: translateX(-20%); }
.tabs.slide.H #tab-3:checked ~ .tabContents { -webkit-transform: translateX(-40%); transform: translateX(-40%); }

.tabs.slide.V #tab-1:checked ~ .tabContents { -webkit-transform: translateY(0); transform: translateY(0); }
.tabs.slide.V #tab-2:checked ~ .tabContents { -webkit-transform: translateY(-20%); transform: translateY(-20%); }
.tabs.slide.V #tab-3:checked ~ .tabContents { -webkit-transform: translateY(-40%); transform: translateY(-40%); }