@charset "UTF-8";

/***共通項目***/
h2.center_ttl {
	font-size: 2.1rem;
	text-align: center;
}
@media screen and (min-width: 769px){
	h2.center_ttl {
		font-size: 3rem;
	}	
}


/*===============================================================
#mainimg
============================================================== */
#mainimg {
	position: relative;
}
#mainimg .main_ttl {
	position: absolute;
	z-index: 9999;
	line-height: 1.3;
	color: #fff !important;
}
#mainimg .main_ttl span {
	display: block;
}
#mainimg .infobox {
	position: absolute;
	z-index: 9999;
	width: 40%;	
}
#slider {
	width: 100%;
	margin: auto;
}
#slider a img {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#slider a img:hover{
  opacity: 0.8;
}
@media screen and (max-width: 768px)  {
	#mainimg .main_ttl {
		bottom: 5%;
		left: 5%;
		font-size: 2.8rem;
	}
	#mainimg .main_ttl span {
		font-size: 2rem;
	}
	#mainimg .infobox {
		bottom: 2%;
		right: 2%;
		max-width: 200px;
	}
}
@media screen and (min-width: 769px)  {
	#mainimg .main_ttl {
		top: 38%;
		left: 10%;
		font-size: 3.8rem;
	}
	#mainimg .main_ttl span {
		font-size: 2.4rem;
	}
	#mainimg .infobox {
		bottom: 4%;
		right: 2%;
		max-width: 220px;
	}
}
@media screen and (min-width: 1200px)  {
	#mainimg .main_ttl {
		top: 40%;
		font-size: 4rem;
	}
	#mainimg .main_ttl span {
		font-size: 2.6rem;
	}
	#mainimg .infobox {
		max-width: 240px;
	}
}


/*===============================================================
#Information
============================================================== */
#Information {
	width: 90%;
	max-width: 1100px;
	margin: auto;
}
#News h2 {
	border-bottom: dashed 1px #d7c38f;
	padding: 40px 0 5px 0;
	font-size: 1.8rem;
	margin-bottom: 15px;
}
#News .news_frame ul {
	height: 300px;
	overflow-y: scroll;
	padding-right: 10px;
}
#News .news_frame ul::-webkit-scrollbar{
  width: 8px;
}
#News .news_frame ul::-webkit-scrollbar-track{
  background: #d4d4d0;
  border: none;
  border-radius: 8px;
  box-shadow: inset 0 0 2px #cdb984; 
}
#News .news_frame ul::-webkit-scrollbar-thumb{
  background: #cdb984;
  border-radius: 8px;
  box-shadow: none;
}	
#News .news_frame ul li {
	display: flex;
	justify-content: space-between;
	border-bottom: dashed 1px #d7c38f;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
#News .news_frame ul li .img {
	width: 26%;
}
#News .news_frame ul li .txt {
	width: 70%;
	font-size: 1.4rem;
}
#News .news_frame ul li .txt span {
	display: block;
	color: #14b6bd;
}
#News .news_frame ul li .txt strong {
	display: block;
	margin: 5px 0;
}
#News .news_frame ul li .txt a {
	text-decoration: underline;
}
#News .instagram_frame {
	background: #fff;
}
#News .instagram_frame .insta_link {
	text-align: right;
}
#Banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 60px;
}
#Banner div {
	width: 49%;
	margin-bottom: 10px;
}
#Banner div:first-child {
	width: 100%;
}
@media screen and (max-width: 768px){
	#News .instagram_frame {
		margin-top: 20px;
	}
	#News h2 span {
		display: block;
		font-size: 1.3rem;
		font-weight: 400 !important;
	}
}
@media screen and (min-width: 769px){
	#News {
		display: flex;
		justify-content: space-between;
	}
	#News h2 {
		font-size: 2rem;
		padding: 0 0 5px 0;
		margin-bottom: 20px;
	}
	#News h2 span {
		padding-left: 10px;
		font-size: 1.2rem;
		font-weight: 400 !important;
	}
	#News .news_frame {
		width: 60%;
	}
	#News .news_frame ul {
		height: 380px;
		padding-right: 30px;
	}
	#News .news_frame ul li {
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	#News .news_frame ul li .img {
		width: 24%;
	}
	#News .news_frame ul li .txt {
		width: 73%;
	}
	#News .news_frame ul li .txt strong {
		font-size: 1.6rem;
	}
	#News .instagram_frame {
		width: 35%;
		max-width: 400px;
	}
	#Banner {
		width: 80%;
		max-width: 800px;
		margin: 80px auto 50px;
	}
	#pc_Banner {
		width: 80%;
		max-width: 700px;
		margin: 30px auto 0;
		display: flex;
		justify-content: space-between;
	}
	#pc_Banner div {
		width: 48%;
	}
}


/*===============================================================
#About
============================================================== */
#About {
	margin-top: 40px;
	background: url("../images/about_bg01.jpg") no-repeat top center;
}
#About h2 {
	width: 90%;
	max-width: 750px;
	margin: auto;
	padding: 20px 0 10px 0;
}
#About .h2_txt {
	width: 90%;
	max-width: 850px;
	font-size: 1.5rem;
	line-height: 1.7;
	margin: 15px auto;
}
#About .about_block {
	width: 90%;
	max-width: 860px;
	margin: 10px auto;
}
#About .about_block .img {
	margin-top: 20px;
}
#About .about_block .txt {
	font-size: 1.4rem;
	margin-top: 5px;
}
#About .more_list {
	width: 90%;
	max-width: 860px;
	margin: 20px auto;
}
#About .more_list li {
	margin-bottom: 10px;
}
#About .more_list li a {
	display: block;
	position: relative;
	font-size: 1.7rem;
	line-height: 50px;
	color: #fff;
}
#About .more_list li a:hover {
	opacity: 1;
}
#About .more_list li .btn {
	background: #9d8954;
	height: 50px;
	text-align: center;
	transition: all  0.3s ease;
}
#About .more_list li .btn:hover {
	background: #8e897d;
}
#About .more_list li a::after {
	position: absolute;
	top: calc(50% - 8px);
	right: 10px;
	display: inline-block;
	content: "";
	background: url("../images/arrow_w.svg") no-repeat;
	background-size: 10px auto;
	width: 10px;
	height: 15px;
}
@media screen and (min-width: 769px){	
	#About {
		margin-top: 80px;
	}
	#About h2 {
		padding: 50px 0 20px 0;
	}
	#About .h2_txt {
		font-size: 1.6rem;
		line-height: 1.8;
	}
	#About .about_block {
		display: flex;
		justify-content: space-between;
	}
	#About .about_block div {
		width: 48%;
		max-width: 400px;
	}
	#About .about_block .img {
		margin-top: 40px;
	}
	#About .about_block .txt {
		margin-top: 10px;
	}
	#About .more_list {
		margin: 60px auto;
		display: flex;
		justify-content: space-between;
	}
	#About .more_list li {
		width: 32%;
		max-width: 270px;
		margin-bottom: 0;
	}
	#About .more_list li a {
		font-size: 2rem;
		line-height: 60px;
	}
	#About .more_list li .btn {
		height: 60px;
	}
}
@media screen and (min-width: 1200px){	
	#About {
		margin-top: 100px;
	}
	#About h2 {
		padding: 70px 0 25px 0;
	}
}


/*===============================================================
#LessonRecital
============================================================== */
#LessonRecital {
	margin-top: 60px;
}
#LessonRecital .text_wrap {
	width: 90%;
	background-color: #fff;
}
#LessonRecital .text_wrap .inner {
	background: url("../images/crown_left.png") no-repeat , url("../images/crown_right.png") no-repeat ;
	background-position: left 5px top 5px , right 5px bottom 5px;
	background-size: 50px auto;
	padding: 30px 20px;
}
#LessonRecital h2 {
	font-size: 2rem;
	text-align: center;
}
#LessonRecital .h2_txt {
	font-size: 1.5rem;
	padding: 10px 0;
}
@media screen and (max-width: 768px){
#LessonRecital .Lesson {
	background: #eaeaed url("../images/lesson_bg.jpg") top left no-repeat;
	background-size: 110% auto;
	padding: 180px 0 40px 0;
}
#LessonRecital .Recital {
	background: #4d4c4a url("../images/recital_bg.jpg") top center no-repeat;
	background-size: 100% auto;
	padding: 180px 0 40px 0;
}
	#LessonRecital .text_wrap {
		margin: auto;
	}
}
@media screen and (min-width: 769px){
	#LessonRecital {
		margin-top: 100px;
	}
	#LessonRecital .Lesson {
		background: url("../images/lesson_bg.jpg") top center no-repeat;
		background-size: cover;
		background-attachment: fixed;
		padding: 200px 0 120px 0;
	}
	#LessonRecital .Recital {
		background: url("../images/recital_bg.jpg") top center no-repeat;
		background-size: cover;
		background-attachment: fixed;
		padding: 200px 0 120px 0;
	}
	/*Safariブラウザのみ適用*/
	_:lang(x)+_:-webkit-full-screen-document, #LessonRecital .Lesson {
		background-attachment: unset !important;
	}
	_:lang(x)+_:-webkit-full-screen-document, #LessonRecital .Recital {
		background-attachment: unset !important;
	}
	/*end*/
	#LessonRecital .Lesson .text_wrap {
		width: 50%;
		max-width: 580px;
		margin-left: auto;
	}
	#LessonRecital .Recital .text_wrap {
		width: 50%;
		max-width: 580px;
	}
	#LessonRecital .text_wrap .inner {
		background-position: left 10px top 10px , right 10px bottom 10px;
		background-size: 80px auto;
		padding: 60px 50px;
	}
	#LessonRecital h2 {
		font-size: 2.6rem;
		text-align: left;
	}
	#LessonRecital .h2_txt {
		font-size: 1.6rem;
		padding: 15px 0;
	}
}
@media screen and (min-width: 1200px){
	#LessonRecital {
		margin-top: 140px;
	}
}
@media screen and (min-width: 1400px){
	#LessonRecital .Lesson .text_wrap {
		margin-left: 60%;
	}
	#LessonRecital .Recital .text_wrap {
		margin-left: 5%;
	}
}


/*===============================================================
#Fees
============================================================== */
#Fees {
	width: 95%;
	max-width: 800px;
	margin: 40px auto;
}
#Fees h3 {
	background: #a88e41;
	font-size: 1.8rem;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	margin-top: 20px;
}
#Fees .admission {
	color: #b01111;
	text-align: center;
	font-size: 2rem;
}
#Fees .admission strong {
	font-size: 3rem;
}
#Fees .h3_txt {
	font-size: 1.5rem;
	margin: 10px 0 5px 0;
}
#Fees table {
	width: 100%;
	margin: 10px auto 40px;
	border-top: solid 1px #d7c38f;
	border-left: solid 1px #d7c38f;
}
#Fees th {
	box-sizing: border-box;
	background: #f5efd6;
	border-right: solid 1px #d7c38f;
	border-bottom: solid 1px #d7c38f;
	text-align: center;
	font-weight: 400;
	font-size: 1.4rem;
	padding: 5px 0;
}
#Fees td {
	box-sizing: border-box;
	border-right: solid 1px #d7c38f;
	border-bottom: solid 1px #d7c38f;
	text-align: center;
	font-size: 1.4rem;
	padding: 3px 5px;
}
#Fees td:nth-child(1) {
	white-space: nowrap;
}
#Fees td h4 {
	font-size: 1.4rem;
	margin-top: 15px;
}
#Fees td strong {
	display: block;
	font-size: 1.6rem;
	margin: 5px 0;
}
#Fees td p {
	font-size: 1.3rem;
}
#Fees .charge {
	text-align: left;
	vertical-align: top;
	padding: 0 10px 10px 10px;
}
#Fees .fontL {
	font-size: 2rem;
}
#Fees .price {
	font-size: 2rem;
	color: #b01111;
	padding-left: 10px;
}
#Fees .target {
	display: block;
	font-size: 1.2rem;
}
.fees_table, .fees_table td {
	width: auto !important;
	border: none !important;
	background: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}
@media screen and (max-width: 768px){
	.basic th:nth-child(1), .basic td:nth-child(1), .elegance th:nth-child(1), .elegance td:nth-child(1) {
		width: 42%;
	}
	.basic th:nth-child(2), .basic td:nth-child(2), .elegance th:nth-child(2), .elegance td:nth-child(2) {
		width: 58%;
	}
}
@media screen and (min-width: 769px){
#Fees {
	margin: 70px auto;
}
#Fees h3 {
	margin-top: 40px;
}
#Fees .admission {
	font-size: 2.2rem;
}
#Fees .h3_txt {
	font-size: 1.6rem;
	margin: 20px 0;
	text-align: center;
}
#Fees table {
	margin: 10px auto 60px;
}
#Fees th:nth-child(1), #Fees td:nth-child(1), #Fees th:nth-child(2), #Fees td:nth-child(2) {
	width: 25%;
	white-space: nowrap;
}
#Fees th:nth-child(3), #Fees td:nth-child(3) {
	width: 50%;
}
#Fees th {
	font-size: 1.6rem;
}
#Fees td {
	font-size: 1.5rem;
}
#Fees td h4 {
	font-size: 1.5rem;
	margin-top: 20px;
}
#Fees td strong {
	font-size: 2rem;
}
#Fees .charge {
	padding: 0 20px 20px 20px;
}
#Fees .mr {
	text-align: left;
	font-size: 1.6rem;
	padding-left: 20px;
}
#Fees .fontL {
	font-size: 2.4rem;
}
#Fees .price {
	font-size: 2.4rem;
}
}


/*===============================================================
#Voice
============================================================== */
#Voice {
	background: #f7f7ef;
	padding: 40px 0;
}
#Voice ul {
	width: 90%;
	max-width: 1100px;
	margin: 10px auto;
}
#Voice ul li {
	margin: 10px 0 20px 0;
}
#Voice ul.student {
	margin: 10px auto 20px;
}
#Voice h3 {
  position: relative;
  display: inline-block;
  padding: 5px 0;
  background: #a88e41;
	width: 100%;
	font-size: 1.5rem;
	line-height: 1.4;
	color: #fff;
	text-align: center;
}
#Voice h3::before {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 6px);
  border: 6px solid transparent;
  border-top: 8px solid #a88e41;
}
#Voice .parents h3 {
  background: #696460;
}
#Voice .parents h3::before {
  border-top: 8px solid #696460;
}
#Voice p {
  font-size: 1.4rem;
	line-height: 1.5;
	margin-top: 15px;
}
#Voice p.name {
	font-size: 1.3rem;
	border-top: dashed 1px #a88e41;
	margin-top: 10px;
	padding-top: 10px;
}
#Voice .btn_seemore {
	margin-top: 20px;
}
@media screen and (min-width: 481px){
	#Voice ul {
		width: 95%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#Voice ul li {
		width: 48%;
	}
}
@media screen and (min-width: 961px){
	#Voice {
		padding: 70px 0 80px 0;
	}
	#Voice ul li {
		width: 32%;
		max-width: 340px;
		margin: 20px 0 30px 0;
	}
	#Voice ul.student {
		margin: 10px auto 50px;
	}
	#Voice h3 {
		padding: 10px 0;
		font-size: 1.6rem;
	}
	#Voice h3::before {
		left: calc(50% - 8px);
		border: 8px solid transparent;
		border-top: 10px solid #a88e41;
	}
	#Voice .parents h3::before {
		border-top: 10px solid #696460;
	}
	#Voice p {
		font-size: 1.5rem;
		line-height: 1.6;
		margin-top: 20px;
	}
	#Voice p.name {
		font-size: 1.4rem;
		margin-top: 15px;
		padding-top: 15px;
	}
}


/*===============================================================
#Access
============================================================== */
#Access {
	width: 90%;
	max-width: 900px;
	margin: 40px auto;
}
#Access .access_wrap {
	margin: 20px auto;	
}
#Access .access_wrap .img {
	display: flex;
	justify-content: space-between;
}
#Access .access_wrap .img p {
	width: 49%;
}
#Access .access_wrap .access h3 {
	font-size: 1.8rem;
	margin: 10px 0;
}
#Access .access_wrap .access p {
	font-size: 1.5rem;
	line-height: 1.8;
}
#Access .access_wrap .map {
	margin: 10px 0;
}
#Access .access_wrap .etc {
	font-size: 1.4rem;
	line-height: 1.7;
}
#Access .access_wrap .etc li {
	margin-bottom: 10px;
	line-height: 1.4;
}
#Access .access_wrap .etc li span {
	font-weight: 400 !important;
}
#Access .access_wrap .etc li p {
	margin-left: 15px;
}
#Access .access_wrap .etc .btn_seemore {
	margin-top: 20px;
}
@media screen and (min-width: 769px){
#Access {
	margin: 70px auto 100px;
}
#Access .access_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px auto;	
}
#Access .access_wrap .img, #Access .access_wrap .map {
	width: 48%;
	max-width: 410px;
}
#Access .access_wrap .access, #Access .access_wrap .etc {
	width: 48%;
}
#Access .access_wrap .access h3 {
	font-size: 2.4rem;
	margin: 15px 0;
}
#Access .access_wrap .access p {
	font-size: 1.8rem;
}
#Access .access_wrap .map {
	margin: 10px 0;
}
#Access .access_wrap .etc {
	font-size: 1.5rem;
}
#Access .access_wrap .etc .btn_seemore {
	margin-top: 30px;
}
}