// ============================================================
// CSS INDEX
// - variable setting
// - font setting
// - print setting
// - header setting
// ============================================================


// variable setting
// ------------------------------------------------------------

// color
@color : #233061;
@dark-color : #B5C3CA;
@light-color: #f9f9f9;
@font-color : #0A0D1A;
@blue-color : #F6EDF7;
@yellow : #CCA300;

.color {
	color: @color;
}
.dark-color {
	color: @dark-color;
}
.light-color {
	color: @light-color;
}
.font-color {
	color: @font-color;
}
.yellow {
	color: @yellow;
}

// background color
@bg-color-light : #F9F9F9;
@bg-color-dark : #B5C3CA;
.gradient {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5b5d66+0,263264+100&0+0,0.3+100 */
	background: -moz-linear-gradient(-45deg,  rgba(91,93,102,0) 0%, rgba(38,50,100,0.3) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(91,93,102,0) 0%,rgba(38,50,100,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(91,93,102,0) 0%,rgba(38,50,100,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005b5d66', endColorstr='#4d263264',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.gradient-dark {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#263264+0,263264+100&0+0,1+100 */
	background: -moz-linear-gradient(-45deg,  rgba(38,50,100,0) 0%, rgba(38,50,100,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(38,50,100,0) 0%,rgba(38,50,100,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(38,50,100,0) 0%,rgba(38,50,100,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00263264', endColorstr='#263264',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

// border
@border-size : 0.5px;

// responsive
@screen_se: 320px;
@screen_sp: 480px;
@screen_tablet: 768px;
@screen_pc: 769px;
.screen_se(@rules) {
    @media screen and (max-width: @screen_se) { @rules(); }
}
.screen_sp(@rules) {
    @media screen and (max-width: @screen_sp) { @rules(); }
}
.screen_tablet(@rules) {
    @media screen and (max-width: @screen_tablet) { @rules(); }
}
.screen_pc(@rules) {
    @media screen and (min-width: @screen_pc) { @rules(); }
}

// layout setting
// ------------------------------------------------------------
.screen_sp({
	.container {
		// padding-right: 0!important;
		// padding-left: 0!important;
	}
});
section {
	padding: 3rem 0;
	text-align: center;
}
.instructors {
	section {
		padding: 4rem 0;
	}
}
.container {
	.screen_pc({
		max-width: 960px!important;
	});
}


// general setting
// ------------------------------------------------------------
a {
	color: @color;
}
img {
	max-width: 100%;
	height: auto;
}
img[src$=".svg"],
object[src$=".svg"] {
	max-width: 100%;
	width: 100%;
	height: auto;
}
.overlay {
	.gradient();
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
hr {
	width: 70%;
	height: 1px;
	background-color: #ccc;
	margin: 1rem auto;
}
mark {
	background: linear-gradient(transparent 70%, rgba(204,163,0,.2) 50%);
	background-color: transparent!important;
	color: inherit;
	font-weight: bold;
}
.text-link {
	color: @color;
	text-align: 1px;
	margin: 2rem 0;
	display: block;
	i {
		margin-left: .5rem;
	}
}
.pc {
	display: none;
	.screen_pc ({
		display: block;
	});
}
.sp {
	.screen_pc ({
		display: none;
	});
}


// font setting
// ------------------------------------------------------------
@font-face {
	font-family: 'PreciousSoul';
 	src: url('../font/PreciousSoul.eot') format('eot'),
 	url('../font/PreciousSoul.woff') format('woff'),
 	url('../font/PreciousSoul.ttf') format('truetype');
}
body {
	font-size: 14px;
}
body, h1, h2, h3, h4, h5, h6, table, thead, tbody, tr, th, td, dl, dt, dd, ul, ol, li, span, p {
  font-family: 'Noto Sans JP script=all', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif!important;
}
p {
	font-size: 14px;
	color: @font-color;
	.screen_pc ({
		font-size: 16px;
	});
}
.en {
	font-family: 'PreciousSoul', 'Dancing Script', serif!important;
}


// color setting
// ------------------------------------------------------------
.main-color { color: @color; }
.yellow { color: @yellow; }


// print setting
// ------------------------------------------------------------
@media print {
  .container {
    width: auto;
  }
}


// component setting
// ------------------------------------------------------------
// common
.no-margin {
	margin-left: -15px;
	margin-right: -15px;
}
.no-padding {
	padding: 0;
}
.padding {
	padding-right: 1rem;
	padding-left: 1rem;
}
.bg_grey {
	background-color: @bg-color-light;
}
.bg_blue {
	background-color: @color;
}
.required {
    font-size: 12px;
    background: #CCA300;
    color: #fff;
    padding: 2.5px 5px;
    margin-left: .5rem;
    letter-spacing: 1px;
    position: relative;
    top: -1px;
}

// heading
.heading2, .heading2-icon {
	z-index: 3;
	svg {
		border: 1px solid @color;
	    border-radius: 50%;
	    margin-bottom: .5rem;
	}
	h2 {
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 1px;
		color: @color;
		line-height: 1.5rem;
		margin-bottom: 1.5rem;
		.screen_pc ({
			font-size: 16px;
			margin-bottom: 4rem;
		});
		.en {
			font-size: 1rem;
			color: @dark-color;
			line-height: 2rem;
			.screen_pc ({
				font-size: 2rem;
				line-height: 4rem;
			});
		}
	}
}


// more btn
.more-btn {
	.en();
	color: @color;
	font-size: 1rem;
	position: relative;
	transition: all ease .5s;
	.screen_pc ({
		font-size: 2rem;
		display: inline-block;
	});
	&:after {
		content: url('../img/arrow.svg');
		bottom: -10px;
		right: -25px;
		position: absolute;
		.screen_pc ({
			font-size: 2rem;
			display: inline-block;
		});
	}
}
.more-btn-blue {
	.en();
	color: @color;
	font-size: 1rem;
	position: relative;
	transition: all ease .5s;
	&:after {
		content: url('../img/arrow-blue.svg');
		bottom: -10px;
		right: -25px;
		position: absolute;
	}
}

// btn
.more-btn-strong {
	color: #fff;
	border-radius: 54% 46% 19% 81% e('/') 54% 30% 70% 46%;
	padding: 1rem 2rem;
	background-color: @color;
	margin: 2rem auto;
	display: inline-block;
}

// breadcrumbs
.breadcrumbs {
    padding: 5px 1rem;
    text-align: left;
    background-color: @bg-color-light;
   	font-size: 10px;
   	.screen_pc ({
   		font-size: 14px;
   	});
   	ul {
   		padding-left: 0;
   		overflow: hidden;
   		margin-bottom: 0;
	    li {
	    	list-style: none;
	    	margin: 0 .5rem;
	    	display: inline-block;
	    	a {
	    		color: @color;
	    	}
	    }
	    li.breadcrumbs-home {
	    	margin-left: 0;
	    }
	    li.text-truncate {
	    	position: relative;
	    	top: 4px;
	    }
	}
}

// flow
.flow {
	.flow-content {
	    padding: 1rem;
	    box-shadow: 0 0 10px #ccc;
	    margin-top: 2rem;
	    margin-bottom: 2rem!important;
	}
}

// FAQ
.faq {
	.qa-area {
		margin-bottom: 3rem;
		.qa-q {
			color: @color;
			span {
				border-radius: 26% 74% 33% 67% e('/') 33% 23% 77% 67%;
				background-color: @color;
				color: #fff;
				padding: .5rem;
				font-size: 10px;
				margin-right: .5rem;
			}
		}
		.qa-a {
			span {
				border-radius: 26% 74% 33% 67% e('/') 33% 23% 77% 67%;
				background-color: @bg-color-light;
				padding: .5rem;
				font-size: 10px;
				margin-right: .5rem;
			}
		}
	}
}



// template parts setting
// ------------------------------------------------------------
// all-program
.all-program {

	.program-detail {
		position: relative;
		.screen_pc ({
			padding: 0 15px;
		});
		span {
			position: absolute;
			left: -5px;
			top: -5px;
			font-size: 10px;
			background-color: @color;
			padding: 0px 5px;
			color: #fff;
			.screen_pc ({
				position: absolute;
				left: 30px;
				top: 0px;
				font-size: 16px;
				background-color: #233061;
				padding: .5rem 1rem;
				color: #fff;
				transform: rotate(-5deg);
			});
		}
		.program-detail-img {
			img {
				margin-bottom: 10px;
			}
			figcaption {
				line-height: 16px;
				.screen_pc ({
					line-height: 1.5rem;
					margin-bottom: 3rem;
				});
				h3 {
					color: @color;
					font-size: 11px;
					font-weight: bold;
					margin-bottom: 0;
					margin: 0;
					line-height: inherit;
					text-align: center;
					padding: 0;
					border-top: 0;
					border-bottom: 0;
					letter-spacing: 0;
					.screen_pc ({
						font-size: 18px;
					});
				}
				small {
					font-size: 10px;
					color: @font-color;
					line-height: 12px;
					.screen_pc ({
						font-size: 14px;
					});
				}
			}
		}
	}
}

// articles
.articles {
	overflow: hidden;
	.articles-list {
		.row {
			margin-bottom: 1rem;
		}
		h3 {
			font-size: 1.125rem;
			font-weight: bold;
			color: @color;
			line-height: 1.5;
		}
		.cta-btn {
			background-color: @color;
			color: #fff;
		}
	}
	.articles-detail__info {
		text-align: left;
		.articles-detail__info--meta {
			display: flex;
			p {
				margin-bottom: 2.5px;
				font-size: 8px;
			}
			.articles-detail__info--meta__date {
				margin-right: 10px;
			}
		}
		.articles-detail__info--description {
			p {
				font-size: 12px;
				line-height: 1.5;
			}
		}
	}
}
.page-wrap .page-content .articles-detail__info h3 {
	font-size: 14px;
	margin: 0;
	margin-bottom: 0;
	text-align: left;
	font-weight: bold;
	color: @color;
	margin-bottom: 5px;
	line-height: 16px;
}


// studio-info
.studio-info {
	figcaption {
		font-size: 12px;
		font-weight: bold;
		color: @color;
	}
}

// cta
.cta {
	position: relative;
	background-image: url(../img/cta-bg.jpg);
	background-size: cover;
	z-index: 1;
	.screen_pc ({
		padding: 10rem 0;
	});
	.overlay {
		.gradient-dark();
		z-index: -1;
	}
	.cta-tel {
		a {
			display: block;
			color: #fff;
			font-weight: bold;
			font-size: 18px;
			letter-spacing: 1px;
		}
	}
}
.cta-btn {
    padding: 1rem 2rem;
    background-color: #fff;
    border-radius: 50px;
    color: #CCA300;
    margin: 0 auto 1rem;
    display: inline-block;
}

// cta
.recruit {
	position: relative;
	background-image: url(../img/studio_4.jpg);
	background-size: cover;
	z-index: 1;
	p {
		color: #fff;
	}
	.screen_pc ({
		padding: 10rem 0;
	});
	.overlay {
		.gradient-dark();
		z-index: -1;
	}
}


// school
.school {
	img {
		// width: 100px;
		// height: 100px;
		margin-bottom: 1rem;
	}
}


// access
.access {
	.heading2-icon {
		padding: 0 1rem;
	}
}

// reason
.reason {
	img {
		width: 100px;
		margin-bottom: 1rem;
	}
	.reason-title {
		font-size: 16px;
		color: @color;
		font-weight: bold;
		letter-spacing: 1px;
	}
}


// official sns
.official-sns {
	.row {
		margin-top: 2rem;
		a {
		    border-radius: 50%;
		    box-sizing: border-box;
		    line-height: 30px;
		    font-size: 1rem;
		    color: #fff;
		    width: 45px;
		    height: 45px;
		    display: inline-block;
		    padding-top: 7px;
		}
		.official-sns-instagram {
			a {
				background-color: #CF2E92;
			}
		}
		.official-sns-twitter {
			a {
				background-color: #1DA1F2;
			}
		}
		.official-sns-facebook {
			a {
				background-color: #3C5A99;
			}
		}
		.official-sns-youtube {
			a {
				background-color: #DA1725;
			}
		}
	}
}

// header setting
// ------------------------------------------------------------
header {
	background-color: #fff;
    height: 50px;
    box-shadow: 0 0 5px #ccc;
    padding: 5px 15px;
    width: 100%;
	.nav-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nav-logo-area {
			width: 40px;
			.screen_pc ({
				width: 60px;
			});
		}
		.nav-menu {
			.nav-menu-sp {
				.nav-menu-sp-wrap {
					position: relative;
					.nav-menu-sp-title {
						font-size: 8px;
						color: @color;
						position: absolute;
						right: 40px;
						top: 5px;
					}
				}
			}
		}
	}
	.screen_pc ({
		height: 75px;
	});
}
#nav-menu-sp-wrap {
	position: relative;
}
.nav-unshown {
	display:none;
}
#nav-open {
	display: inline-block;
	width: 30px;
	height: 7px;
	vertical-align: middle;
	span {
		position: absolute;
		height: .5px;
		width: 22px;
		background: @color;
		display: block;
		content: '';
		cursor: pointer;
		&:before {
			position: absolute;
			height: .5px;
			width: 22px;
			background: @color;
			display: block;
			content: '';
			cursor: pointer;
			bottom: -6px;
		}
		&:after {
			position: absolute;
			height: .5px;
			width: 11px;
			background: @color;
			display: block;
			content: '';
			cursor: pointer;
			bottom: -12px;
		}
	}
}
#nav-close {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: @color;
	opacity: 0;
	transition: .5s ease-in-out;
}

#nav-menu-sp-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 85%;
	height: 100%;
	background: #fff;
	transition: .5s cubic-bezier(0.895, 0.03, 0.685, 0.22);;
	-webkit-transform: translateX(130%);
	transform: translateX(130%);
	.nav-menu-head {
	    border-bottom: .5px solid @dark-color;
		.nav-menu-sp-close {
		    height: 50px;
		    .nav-close-btn {
			    display: block;
			    height: 50px;
			    width: 50px;
			    background-color: transparent;
			    opacity: 1;
			    position: relative;
			    margin-bottom: 1rem;
			    i {
					position: absolute;
					left: 16px;
					top: 12px;
					font-size: 24px;
					color: @dark-color;
			    }
		    }
		}
	}
	.nav-menu-devide {
		display: flex;
		margin-bottom: .5rem;
		a {
			width: 50%;
			text-align: center;
			font-size: 12px;
			padding: 1rem 0;
			letter-spacing: 1px;
			color: #fff;
		}
		.beginners-btn {
			background-color: @yellow;
			&:before {
			}
		}
		.members-btn {
			background-color: @color;
		}
	}
	.nav-menu-sp {
		ul {
			padding-left: 1rem;
			li {
				list-style: none;
				a {
					color: @color;
					padding: 1rem;
					display: block;
					font-size: 12px;
					letter-spacing: 1px;
				}
				ul {
					padding-left: 1rem;
				}
			}
		}
	}
}
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}
#nav-input:checked ~ #nav-menu-sp-content {
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


// first-view setting
// ------------------------------------------------------------
.first-view {
	margin: 0 -15px 0 -15px;
	color: #fff;
	padding: 0;
	overflow: hidden;
	.first-view-video {
		min-height: 50vh;
		z-index: -2;
		overflow: hidden;
		position: relative;
		.screen_pc ({
			min-height: auto;
		});
		video {
		    height: 50vh;
		    margin-top: 50px;
		    position: absolute;
		    left: -35%;
		    .screen_pc ({
		    	height: 100vh;
		    	position: relative;
		    	left: auto;
		    	margin-top: 30px;
		    	width: 100%;
		    });
		}
	}
	.overlay {
		.gradient-dark();
		z-index: -1;
		height: 50vh;
		.screen_pc ({
			height: 100%;
		});
	}
	.screen_pc({
		// margin-top: 75px;
		height: 100vh;
	});
}
.first-view-wrap {
	.first-view-catch {
	    position: absolute;
	    top: 150px;
	    right: 0;
	    left: 0;
	    margin: auto;
	    height: 100px;
	    z-index: 1;
	    .screen_pc ({
	    	top: 0px;
	    	bottom: 0px;
	   	});
	   	.en {
	   		.screen_pc ({
	   			font-size: 42px;
	   		});
	   	}
		h2 {
			font-size: 14px;
		    margin-top: 1rem;
		    letter-spacing: 2px;
		    &:before {
				width: 50px;
				height: 1px;
				background: #fff;
		    }
		.screen_pc ({
			margin-top: 3rem;
		});
		}
	}
	.scroll-under {
	    position: absolute;
	    left: 0;
	    right: 0;
	    top: 280px;
	    padding-top: 1rem;
	    color: #fff;
	    z-index: 1;
		.screen_se ({
			bottom: 50px;
		});
		.screen_pc ({
			top: auto;
			bottom: 100px;
		});
	}
}


// announce setting
.announce {
	padding: 0;
}
.emergency-announce {
    margin: 1rem 0;
    border: 4px solid @color;
    padding-top: 1rem;
    color: @color;
    font-weight: bold;
}

// announcement setting
// ------------------------------------------------------------

.announcement {
	height: 40px;
	line-height: 40px;
	background-color: @dark-color;
	.screen_pc ({
		background-color: #f9f9f9;
		height: auto;
		padding: .5rem 0 1rem;
	});
}
.announcement-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .announcement-heading {
    	height: 40px;
	    width: 30%;
	    background-color: @bg-color-dark;
	    color: #fff;
	    letter-spacing: 1px;
	    box-sizing: border-box;
	    .screen_pc ({
	    	background-color: transparent;
	    	color: @font-color;
	    });
	    h2 {
	    	font-size: 14px;
	    	font-weight: normal;
	    	padding: 10px 0;
	    	.screen_pc ({
	    		font-size: 16px;
	    	});
	    }
	}
	.announcement-content {
		height: 40px;
	    width: 70%;
	    padding: 0 1rem;
	    line-height: 10px;
	    box-sizing: border-box;
	    background-color: @bg-color-light;
	    text-align: left;
	    .screen_pc ({
	    	height: auto;
	    });
	    p {
	    	font-size: 7px;
	    	margin-bottom: .25rem;
	    	margin-top: .5rem;
	    	.screen_pc ({
	    		font-size: 14px;
	    	});
	    }
	    h3 {
	    	font-size: 10px;
	    	font-weight: bold;
	    	margin-bottom: 0;
	    	.screen_pc ({
	    		font-size: 16px;
	    	});
	    	a {
	    		color: inherit;
	    	}
	    }
	}
}


// studio-description setting
// ------------------------------------------------------------
.studio-description {
	padding: 3rem 0;
	letter-spacing: 1px;
	img {
		max-width: 75%;
		.screen_pc({
			max-width: 30%;
		});
	}
}


// instructor setting
// ------------------------------------------------------------
.instructor {
	position: relative;
	background-image: url(../img/bg-instructor.jpg);
	background-position: center;
	background-size: cover;
	z-index: 1;
	svg {
		border-color: #fff;
	}
	.overlay {
		.gradient-dark();
		z-index: -1;
	}
	p {
		padding: 0 1rem;
	}
	a {
		color: #fff;
	}
}
.instructor_lisence {
	overflow: hidden;
}
.instructor-name-en {
	margin-bottom: 10px;
}
.instructor-sns {
	display: flex;
	justify-content: flex-start;
}
.instructor-sns a {
    width: 30px;
    height: 30px;
    background-color: @dark-color;
    display: block;
    border-radius: 50%;
    margin-right: 1rem;
}
.instructor-sns a i {
    color: #fff;
    position: relative;
    top: 3px;
}


//  page setting
// ------------------------------------------------------------
.page-wrap {
	margin-top: 50px;
	.hero {
		position: relative;
		background-image: url(../img/hero-bg.jpg);
		background-size: cover;
		z-index: -2;
		padding: 3rem 0;
		.screen_pc ({
			background-position-y: 70%;
			padding: 10rem 0;
		});
		.overlay {
			z-index: -1;
			.gradient-dark();
		}
		h1, p {
			z-index: 1;
			color: #fff;
			font-size: 14px;
			text-align: center;
			letter-spacing: 4px;
			font-weight: bold;
			.screen_pc ({
				font-size: 22px;
			});
		}
	}
	.page-content {
		text-align: center;
		.page-content-detail {
			margin-bottom: 5rem;
		}
		h2 {
			font-size: 18px;
			font-weight: bold;
			margin:  2rem;
		}
		h3 {
			font-size: 16px;
			font-weight: bold;
			margin: 1rem;
			line-height: 1.5rem;
			color: @color;
			text-align: center;
			margin-bottom: 2rem;
			letter-spacing: 2px;

			// ブログ用デザイン
			// font-size: 16px;
			// font-weight: bold;
			// margin: 1rem;
			// line-height: 1.5rem;
			// color: @color;
			// text-align: center;
			// border-top: 2px solid;
			// border-bottom: 2px solid;
			// padding: .5rem 0;
			// margin-bottom: 2rem;
			// letter-spacing: 2px;
			.screen_pc ({
				font-size: 18px;
				padding: 1.5rem 0;
			});
			span {
			    padding: .75rem .35rem .5rem;
			    background-color: #233061;
			    border-radius: 75% 25% 57% 43% e('/') 32% 58% 42% 68%;
			    color: #fff;
			    margin-right: 0.5rem;
			    font-size: 12px;
			    position: relative;
			    top: -4px;
			}
		}
		p {
			font-size: 14px;
			text-align: justify;
			line-height: 30px;
			.screen_pc ({
				line-height: 36px;
			});
		}
		li {
			font-size: 14px;
			line-height: 24px;
			text-align: left;
		}
		.voice-wrap {
			padding: 2rem;
    		background: #f9f9f9;
    		img {
    			width: 150px;
    			height: 150px;
    			.screen_pc({
    				width: auto;
    			});
    		}
			h3 {
				padding-top: 0;
    			margin-top: 1rem;
    			.screen_pc({
					text-align: left;
					margin: 0;
    			});
			}
		}
		.page-single {
			h2 {
				position: relative;
				line-height: 1.4;
				padding: 0.25em 1em;
				display: inline-block;
				top: 0;
				margin: 2rem auto;
				&:before, &:after {
					position: absolute;
					top: 0;
					content:'';
					width: 8px;
					height: 100%;
					display: inline-block;
				}
				&:before {
					border-left: solid 1px @color;
					border-top: solid 1px @color;
					border-bottom: solid 1px @color;
					left: 0;
				}
				&:after {
					content: '';
					border-top: solid 1px @color;
					border-right: solid 1px @color;
					border-bottom: solid 1px @color;
					right: 0;
				}
			}
			h3 {
				margin: 1rem auto;
			}
			.author_info {
				h3 {
					margin: 0 0 10px 0;
					border-top: 0;
					padding: 0 0 5px;
					.screen_pc ({
						text-align: left;
						padding-left: 15px;
					})
				}
				p {
					font-size: 12px;
					line-height: 18px;
					.screen_pc ({
						font-size: 14px;
						line-height: 24px;
					})
				}
			}
		}
		.page-img {
			margin: .5rem -15px 1rem;
		}
		// yes no chart
		.yes-no-chart {
			.yesno_q dt span {
			    padding: 1rem 2rem;
			    font-size: 1.5rem;
			    font-weight: bold;
			    background: @color;
			    color: #fff;
			    border-radius: 0;
			    letter-spacing: 2px;
			}
			.yes-no-chart-result {
				font-size: 1.5rem;
				text-align: center;
				margin: 2rem;
				color: @color;
			}
		}
		// instructors
		.instructors {
			.instructor-intro {
				.instructor-intro__detail {
					h2 {
						font-size: 16px;
						letter-spacing: 1px;
						text-align: left;
						margin: 0;
						color: @color;
						position: relative;
						.en {
							font-size: 14px;
							margin-left: 1rem;
							position: relative;
							transform: rotate(10deg);
							position: absolute;
							color: @dark-color;
							right: 0;
							top: -10px;
						}
					}
					.instructors-title {
						font-size: 12px;
						margin-bottom: 0;
					}
					.instructors-intro__description {
						font-size: 10px;
						text-align: left;
						line-height: 12px;
						.screen_pc({
							font-size: 16px;
							line-height: 28px;
						});
					}
					a {
						color: @color;
						float: right;
						font-size: 14px;
					}
				}
			}
		}
		.price {
			.first-price {
			    background: #CCA300;
			    padding: 2rem;
			    p {
					color: #fff;
					text-align: center;
					line-height: 2;
					span {
						font-size: 2rem;
					}
			    }
			}
			.first-price__detail {
				p {
					text-align: center;
				}
			}
			.arrow-bottom {
				margin: 1rem 0;
			}
			table {
				thead {
					th {
						font-size: 12px;
						letter-spacing: 1px;
					}
				}
				tbody {
					th {
						color: @color;
					}
					td {
						font-size: 12px;
						.screen_pc ({
							font-size: 14px;
						});
						span {
							color: @yellow;
							font-size: 16px;
							padding: 0 2.5px;
							.screen_pc ({
								font-size: 18px;
							});
						}
					}
				}
			}
			.price-type {
				.price-type__monthly {
					margin-bottom: 3rem;
					b {
						background-color: #CCA300;
						padding: 1.5px 5px;
						font-size: 10px;
						color: #fff;
					}
				}
			}
			.note {
				p {
					font-size: 10px;
					text-align: center;
					line-height: 1.2;
					margin-bottom: .25rem;
					.screen_pc ({
						font-size: 12px;
					});
				}
			}
		}

		// instructors-in-charge
		.instructors-in-charge {
			p {
				.screen_sp ({
					font-size: 12px;
					line-height: 20px;
					margin-top: 5px;
				});
			}
		}

		// school
		.info-wrap {
			background-color: @blue-color;
			padding: 1.5rem 0 .5rem;
		}
	}
	table {
		width: 100%;
		margin: 1rem auto;
		thead {
			background-color: @color;
			letter-spacing: 2px;
			color: #fff;
		}
		th, td {
		    padding: .5rem;
		    border-bottom: 1px solid #ccc;
		    font-size: 14px;
		    text-align: left;
		    .screen_pc ({
		    	padding: 1rem;
		    });
		}
		th {
			font-weight: bold;
		}
	}
}

// instructor-page setting
// ------------------------------------------------------------
.page-wrap .page-content .instructor-page p {
	line-height: 28px
}

// relaxation setting
.page-wrap .page-content .relaxation h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    line-height: 1.5rem;
    color: #233061;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-align: left;

}
.page-wrap .page-content .relaxation p {
    line-height: 20px;
}
.relax-program {
    margin-bottom: 2rem;
}
.relax-detail-wrap {
	margin-bottom: 3rem;
}
.page-wrap .page-content .relax-detail-wrap h3 {
    text-align: left;
    margin: 0;
}

// aerial-yoga-page setting
// ------------------------------------------------------------ 
.chui {
    background: #ffffff;
    padding: 2rem;
    margin: 1rem 0 3rem 0;
}
.chui-list2 {
    line-height: 25px!important;
    font-size: 14px!important;
    padding-left: 1.5rem;
    text-align: left;
}
.chui-text {
    line-height: 25px!important;
    font-size: 14px!important;
    padding-left: 1.5rem;
    text-align: left;
    margin-top: 1rem;
}

// ashtanga-yoga-page setting
// ------------------------------------------------------------ 
p.ao-waku {
    border: 1.5px solid #233061;
    padding: 1rem 1.5rem;
    margin-top: 1rem;
}

// price-page setting
// ------------------------------------------------------------ 
.price-type__option {
    margin-top: 3rem;
}

// yes no chart
// 　------------------------------------------------------------


// page-single setting
// ------------------------------------------------------------
.page-single {
	padding: 50px 0 0;
	.screen_pc({
		padding: 150px 0;
	});
	.single-header {
		text-align: left;
		margin-bottom: 50px;
		padding-bottom: 25px;
		border-bottom: 1px solid @dark-color;
		h1 {
			font-size: 1.5rem;
			font-weight: bold;
			text-align: left;
			line-height: 30px;
			color: @color;
		}
		i, time, span {
			color: @dark-color;
			font-size: 12px;
		}
	}
	.author_info {
		margin-top: 50px;
		padding: 0 1rem 1rem;
		background-color: @light-color;
		.screen_pc({
			border: 1px solid;
			padding: 10px 50px 50px;
		});
		.author_face {
			img {
				border-radius: 50%;
			}
		}
	}
}

// post setting
// ------------------------------------------------------------
.post-meta {
    margin: 1rem 0;
    .screen_pc ({
    	margin: 3rem 0;
    });
}
.post-meta h1 {
    font-size: 1.5rem;
    text-align: left;
    letter-spacing: 2px;
    font-weight: bold;
    border-bottom: 4px solid @color;
    border-top: 4px solid @color;
    padding: 1rem 0;
    color: @color;
    .screen_pc({
    	padding: 2rem 0;
    });
    &:before {
    	.screen_pc({
			content: 'Event Information';
			display: block;
			font-size: 14px;
			color: #ccc;
			font-weight: 800;
			letter-spacing: 2px;
			margin-bottom: 5px;
			font-family: 'Noto Sans JP', sans-serif;
    	});
    }
}
.post-meta-bottom {
    text-align: left;
    font-size: 14px;
    color: #688693;
}
.post-meta-bottom a {
	color: #688693;
	// text-decoration: underline;
}


// event(single-event.php) setting
// ------------------------------------------------------------
.page-wrap .page-content .event-info-detail h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: .5rem;
    background: @color;
    color: #fff;
    letter-spacing: 4px;
}


// form setting
// ------------------------------------------------------------
.contact-form {
    text-align: left;
}
.page-wrap .contact-form table tr {
	.screen_sp ({
		display: block;
		padding-bottom: 0;
		margin-bottom: 1rem;
	});
}
.page-wrap .contact-form table th, .page-wrap .contact-form table td {
	border-bottom: 0;
	.screen_sp ({
		display: block;
    	padding-bottom: 0;
	});
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: .75rem;
    border: 1px solid #e0e0e2;
}
.contact-form .cf-submit input {
	width: 300px;
    display: block;
    margin: 0 auto;
    background: @color;
    border-color: transparent;
    color: #fff;
    letter-spacing: 2px;
}
.privacy-text {
    max-height: 200px;
    overflow: scroll;
    background: #f2f2f2;
    padding: 1rem;
    margin-bottom: 2rem;
}
.page-wrap .page-content .privacy-text p, .page-wrap .page-content .privacy-text li, .page-wrap .page-content .privacy-text h4 {
    font-size: 10px;
    line-height: 1.5;
}
.page-wrap .page-content .privacy-text h4 {
	font-weight: bold;
}

// footer setting
// ------------------------------------------------------------
footer {
	overflow: hidden;
	.footer-description {
		text-align: center;
		margin-bottom: 3rem;
		img {
			width: 100px;
		}
		p {
			text-align: justify;
			font-size: 10px;
			color: #fff;
			line-height: 16px;
			padding: 0 1rem;
			.screen_pc ({
				font-size: 14px;
				line-height: 2;
			});
		}
	}
	.footer-manu-items {
		list-style: none;
		padding-left: 1rem;
		li {
			a {
				font-size: 12px;
				color: #fff;
				.screen_pc ({
					font-size: 14px;
					line-height: 3;
				});
			}
		}
		ul {
			padding-left: 1rem;
			list-style: none;
			a {
				font-size: 10px;
			}
		}
	}
	.copyright {
		text-align: center;
		small {
			color: #fff;
			font-size: 10px;
			letter-spacing: 1px;
			a {
				color: #fff;
			}
		}
	}
}

// fullCalendar
.fc-fhyoga {
	background-color: #3f51b5!important;
	border-color: #3f51b5!important;
}
.fc-hotyoga {
	background-color: #f5501e!important;
	border-color: #f5501e!important;
}
.fc-hathayoga {
	background-color: #e67c72!important;
	border-color: #e67c72!important;
}
.fc-core-training {
	background-color: #d50101!important;
	border-color: #d50101!important;
}
.fc-relaxyoga {
	background-color: #32b778!important;
	border-color: #32b778!important;
}
.fc-resetyoga {
	background-color: #049be5!important;
	border-color: #049be5!important;
}
.fc-ashtangayoga {
	background-color: #7986cb!important;
	border-color: #7986cb!important;
}
.fc-aerialyoga {
	background-color: #f7be28!important;
	border-color: #f7be28!important;
}
.fc-day-header span {
    font-size: 10px;
    text-align: center;
    display: block;
}
.fc-widget-header table:first-child {
    margin: 0;
}
.page-wrap table th.fc-day-header {
    padding: 2px;
}
.fc-center h2 {
	margin: 1.25rem 1rem 0 1rem!important;
}
.fc-scroller {
    height: 300px!important;
		.screen_pc ({
			height: 588px!important;
		});
}
// school setting
// ------------------------------------------------------------
.voice-photo {
    height: auto!important;
    text-align: center;
    margin: 0 auto;
}
@media screen and (max-width:575px){
    .page-wrap .page-content .voice-wrap img {
        width: auto;
        padding: 1rem;
    }
}
p.voice-subtittle {
    font-weight: bold;
    letter-spacing: 1.4px;
}
span.voice-shikaku {
    background-color: #CCA300;
    padding: 5px;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0px;
    margin-left: 5px;
}
@media screen and (max-width:430px){
    span.voice-shikaku {
        font-size: 10px;
        margin-left: 0px;
    }
}
h3.voice-tittle {
    padding: 10px 0!important;
}
@media screen and (max-width:768px){
.page-wrap .page-content .voice-wrap h3 {
    margin-bottom: 0;
    margin-left: 0;
    text-align: left;
}
.page-wrap .page-content .voice-wrap {
    padding: 1rem;
}}
hr.voice-line {
    border: 1px solid #233061;
    width: 100%;
    margin-top: unset;
}
.voice-comment-area {
    background-color: #fff;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-top: .4rem;
}
p.voice-comment {
    letter-spacing: 1.4px;
    color: #0A0D1A;
    line-height: 30px!important;
    margin-bottom: 0;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 840px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

// monthly-fee setting
// ------------------------------------------------------------
@media screen and (min-width:841px){
    .t-center {
        text-align: center!important;
    }
}
.enrollment-guidance {
    background-color: #CCA300;
    padding: 2rem;
    p {
        color: #fff;
        text-align: center!important;
        span {
           font-size: 20px; 
        }
    }
}
ul.nav.nav-tabs p {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: .3rem;
    letter-spacing: 1px;
    color: #233061;
}
@media screen and (max-width:450px){
    .enrollment-guidance {
        padding: 2rem .5rem;
    }
}
@media screen and (max-width:840px){
    table.month-application {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}
#monthly-type h3.table-tittle,
#monthly-membership h3.table-tittle {
    font-size: 16px;
    margin-bottom: 1rem;
}
table.month-application th.top {
    background-color: #fff;
    color: #233061;
}
table.month-application th.left {
    background-color: #233061;
    color: #fff;
    text-align: center;
}
.note {
    span {
        color: #CCA300;
    }
}
.terms-block,
.membership-block {
    margin: 5rem auto 0;
    padding: .3rem 3rem 2rem;
    background-color: #f9f9f9;
    span.color {
        color: #CCA300;
    }
}
@media screen and (max-width:575px){
    .terms-block,
    .membership-block {
        padding: 1rem .8rem 2rem;
        margin: 3rem auto 0;
    }
}
.terms-block li,
.membership-block li {
    line-height: 30px!important;
}
p.embership-table-tittle {
    color: #233061;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 16px!important;
    margin-top: 3rem;
    text-align: center!important;
}
@media screen and (max-width:767px){
    .month-application td {
        width: 100%;
    }
}
#monthly-fee-link a {
    text-decoration: none;
    background-color: #233061;
    padding: .6rem 1.5rem;
    color: #fff;
    border-radius: 50px;
    border: 2px solid #233061;
}
#monthly-fee-link a:hover {
    background-color: #fff;
    color: #233061;
}
section#monthly-type ul.nav.nav-tabs {
    margin: 3rem auto;
    max-width: 800px;
    border-bottom: unset;
}
section#monthly-type .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #233061!important;
    color: #fff!important;
}
section#monthly-type .page-wrap .page-content li,
a.nav-link {
    background-color: #f9f9f9;
    color: #233061;
}
section#monthly-type li.nav-item {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
div.month-tab-content {
    max-width: 450px;
    margin: 0 auto;
    padding: 0 1rem;
}
div.month-tab-content p span {
    font-size: 18px;
    font-weight: 600;
    color: #233061;
}
span.month-day {
    font-size: 18px!important;
    color: #000!important;
    font-weight: unset!important;
}
@media screen and (max-width:575px){
    div.month-tab-content {
        padding: 0;
    }
}
@media screen and (max-width:845px){
    section#monthly-type .nav-tabs .nav-link {
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
    }
    section#monthly-type li.nav-item {
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        border: 1px solid #233061;
        margin: 2px;
    }
}