@charset "utf-8";

.h1s1 {
	font-size: max(4.7vw, 60px);
}
.h2s3 {
	font-size: max(4vw, 36px);
	font-weight: 300;
}

section.message .wrap {
	border-top: 1px solid var(--black);
	background: var(--white);
	padding: var(--LRmargin);
}
.grid-container {
	display: grid;
	grid-template-columns: 25% 25% 50%;
	grid-template-areas:"grid1 grid2 grid3";
}
section.message .imgbox {
	grid-area: grid1;
	margin-right: var(--LRmargin);
}
section.message .imgbox  img {
	width: 100%;
	height: auto;
}
section.message .box {
	grid-area: grid2;
	margin-right: var(--LRmargin);
}
section.message .rbox {
	grid-area: grid3;
	padding-left: var(--LRmargin);
	font-size: 17px;
	line-height: 1.75;
	font-weight: 300;
	border-left: 1px solid var(--black);
}
section.message .tie {
  font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: var(--TOPmargin);
}
section.message .h2s3 span {
  padding-left: 0;
}
section.message .pro {
  font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  margin: 2vw 0 16px;
}
section.message ul.list1 {
	list-style-type: none;
	list-style-position: outside;
	margin-top: var(--TOPmargin);
}
section.message ul.list1 li {
	font-size: 16px;
	line-height: 1.3;
	font-weight: 300;
	padding-bottom: 8px;
	margin-bottom: 11px;
}

section#FEATURE.bg {
	/*margin-top: -80px;*/
}
section#FEATURE .col3 {
	display: grid;
	gap: 0px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	background: var(--white);
	border-top: 1px solid var(--black);
	/*border-bottom: 1px solid var(--black);*/
}
section#FEATURE .col3 li:not(:first-child) {
	border-left: 1px solid var(--black);
}
section#FEATURE .col3 li:last-child {
	border-right: 1px solid var(--black);
}
section#FEATURE .col3 li .in{
	padding: var(--LRmargin) var(--LRmargin) var(--LRmargin);
}
section#FEATURE .col3 li img{
	width: 100%;
	height: auto;
}
section#FEATURE .col3 li .in .ti{
	font-size: 15px;
	font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
	font-style: normal;
	line-height: 1.3;
	padding-bottom: 7px;
	margin-bottom: 1.5vw;
	border-bottom: 1px solid var(--black);
	position: relative;
}
section#FEATURE .col3 li .in .ti:after{
	content: url(/music/graduate/comm/navi_img/arrowB.svg);
	display: block;
	position: absolute;
	top: 3px;
	right: 0;
	width: 11px;
	height: 10px;
}
section#FEATURE .col3 li .in .h3s3{
	font-size: clamp( 24px, 2vw, 32px);
	letter-spacing: 0.02em;
	font-weight: 200;
	margin-bottom: 24px;
	line-height: 1.3;
}
section#FEATURE .col3 li .in p {
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
}

section#HALL .hallSwiper {
	overflow: hidden;
	position: relative;
}
section#HALL .swiper-slide img {
	height: auto;
	width: 100%;
	vertical-align: bottom;
}
section#HALL .colWrap {
	/*border: 1px solid var(--black);*/
}
section#HALL .col4d2 {
	width: 50%;
	margin: auto;
	border-left: 1px solid var(--black);
	border-right: 1px solid var(--black);
	background: var(--white);
}
section#HALL .col4d2 li .in{
	padding: var(--LRmargin) var(--LRmargin) var(--LRmargin);
}
section#HALL .col4d2 li .in .ti{
	font-size: 15px;
	font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
	font-style: normal;
	line-height: 1.3;
	padding-bottom: 7px;
	margin-bottom: 1.5vw;
	border-bottom: 1px solid var(--black);
	position: relative;
}
section#HALL .col4d2 li .in .ti:after{
	content: url(/music/graduate/comm/navi_img/arrowB.svg);
	display: block;
	position: absolute;
	top: 3px;
	right: 0;
	width: 11px;
	height: 10px;
}
section#HALL .col4d2 li .in .h3s3{
	font-size: clamp( 24px, 2vw, 32px);
	letter-spacing: 0.02em;
	font-weight: 200;
	margin-bottom: 24px;
}
section#HALL .col4d2 li .in p {
	font-size: 16px;
	line-height: 1.8;
	font-weight: 300;
}
.swiper-button-prev,
.swiper-button-next {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	border: 1px solid var(--white);
	margin: 0 20vw;
	top: unset;
	bottom: 44px;
	z-index: 2;
}
.swiper-hallname {
	bottom: 40px;
	position: absolute;
	width: 25.83vw;
	border-radius: 100vw;
	border: 1px solid var(--black);
	background: var(--white);
	left: 50%;
	transform: translateX(-50%) translateY(-0%);
	margin: 0 auto;
	z-index: 2;
	text-align: center;
	padding: 15px 0;
}
.swiper-hallname::after {
	content: attr(data-hall);
	width: 100%;
	font-size: 14px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
	content: "";
	width: 11px;
	height: 10px;
}
.swiper-button-prev::after {
	background-image: url(/music/graduate/comm/navi_img/arrowLW.svg);
}
.swiper-button-next::after {
	background-image: url(/music/graduate/comm/navi_img/arrowW.svg);
}


section#COURSE .colWrap{
	padding: var(--LRmargin) var(--LRmargin) 1.25vw;
	background: var(--white);
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
}
section#COURSE .colWrap.c2{
	border-top: none;
	padding: 0 var(--LRmargin) 0;
	border-bottom: none;
}
section#COURSE .h3s3c {
	font-size: 14px;
	font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
	font-style: normal;
	line-height: 1.3;
	font-weight: 500;
	border-bottom: 1px solid var(--black);
	margin-bottom: 2.5vw;
	padding-bottom: 12px;
}
section#COURSE .h3s3c p {
	margin-top: 7px;
	font-size: clamp( 20px, 1.5vw, 24px);
	letter-spacing: 0.02em;
	line-height: 1.3;
	font-weight: 200;
}
section#COURSE .col4 {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2.5vw;
}
section#COURSE .col4 li {
	width: calc(25% - 5.7vw);/*calc(25% - 5.625vw)*/
}
section#COURSE .colWrapBox ul li .in {
	width: 100%;
	height: 100px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
section#COURSE .colWrapBox ul li.PIANO .in{
	background-image: url(../img_top/ph1.webp);
}
section#COURSE .colWrapBox ul li.WIND .in{
	background-image: url(../img_top/ph2.webp);
}
section#COURSE .colWrapBox ul li.STRINGS .in{
	background-image: url(../img_top/ph3.webp);
}
section#COURSE .colWrapBox ul li.GUITAR .in{
	background-image: url(../img_top/ph12.webp);
}
section#COURSE .colWrapBox ul li.PERCUSSION .in{
	background-image: url(../img_top/ph4.webp);
}
section#COURSE .colWrapBox ul li.ORGAN .in{
	background-image: url(../img_top/ph5.webp);
}
section#COURSE .colWrapBox ul li.JAPANESE .in{
	background-image: url(../img_top/ph6.webp);
}
section#COURSE .colWrapBox ul li.JAZZ .in{
	background-image: url(../img_top/ph7.webp);
}
section#COURSE .colWrapBox ul li .in.VOCAL{
	background-image: url(../img_top/ph8.webp);
	width: calc(100% - 2vw);/* top2.css */
}
section#COURSE .colWrapBox ul li .in.DESIGN{
	background-image: url(../img_top/ph9.webp);
}
section#COURSE .colWrapBox ul li .in.COMPOSITION{
	background-image: url(../img_top/ph10.webp);
}
section#COURSE .colWrapBox ul li .in.EDUCATION{
	background-image: url(../img_top/ph11.webp);
}

section#COURSE .col4 li.spa {
	width: 7.5vw;
	position: relative;
}
section#COURSE .col4 li.spa:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	height: 100%;
	width: 1px;
	background: var(--black);
}
section#COURSE .col3c2 .ti, 
section#COURSE .col4 .ti {
	font-size: 14px;
	/*font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;*/
	font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
	font-style: normal;
	line-height: 1.3;
	font-weight: 500;
	margin-bottom: 7px;
}
section#COURSE .col3c2 .h3s3, 
section#COURSE .col4 .h3s3 {
	font-size: clamp( 20px, 1.5vw, 24px);
	letter-spacing: 0.02em;
	line-height: 1.3;
	font-weight: 200;
}
section#COURSE .col3c2 {
	display: flex;
}
section#COURSE .mBox {
	padding: 3.75vw 0 2.5vw;
}

section#COURSE .mBox.EDUCATION {
	padding: 3.75vw 0 3.75vw 2vw;/* top2.css */
}
section#COURSE .flex {
	display: flex;
	/*justify-content: space-between;*/
}
section#COURSE a {
	pointer-events: none;
}
section#COURSE .flex a {
	display: block;
	width: calc(50% - 3.75vw);
}

section#COURSE .flex span {
	display: block;
	width: 7.5vw;
	position: relative;
}
section#COURSE .flex span:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	height: 100%;
	width: 1px;
	background: var(--black);
}
section#COURSE .col3c2 li.spa {
	width: 1.875vw;
}
section#COURSE .col3c2 .s {
	width: calc(25% - 3.75vw);
}
section#COURSE .col3c2 .m {
	width: calc(50% + 3.75vw);
	padding: 0 var(--LRmargin);
	border-left: 1px solid var(--black);
	border-right: 1px solid var(--black);
}
section#COURSE .des{
	padding: 0 0 2vw;
	background: var(--white);
	font-size: 16px;
	font-weight: 300;
}
section .des{
	font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
}
section#COURSE .colWrap .des{
	line-height: 1.8;
}
section#COURSE .colWrap.c2 .des{
	line-height: 1.5;
	padding: 0 0 0;
}
section#COURSE .colWrap.c2 .des.EDUCATION{
	padding: 2.5vw 0 0;
}
section#COURSE .colWrap.c2 .des.VOCAL{
	width: calc(100% - 2vw);
}

section.ADM_EXAM .colWrap {
	border-top: 1px solid var(--black);
}
section.ADM_EXAM .col4d2 {
	width: 50%;
	margin: auto;
	border-left: 1px solid var(--black);
	border-right: 1px solid var(--black);
	background: var(--white);
}
section.ADM_EXAM .col4d2 li .in{
	padding: var(--LRmargin) var(--LRmargin) var(--LRmargin);
}
section.ADM_EXAM .col4d2 li .in p {
	font-size: 16px;
	line-height: 1.8;
	font-weight: 300;
}

.but_more {
	font-family: "Hiragino Sans GB","Hiragino Sans GB W3",STXihei,"Microsoft YaHei","微软雅黑",SimSun,sans-serif !important;
	font-weight: 500;
	font-size: 14px;
	border-radius: 100vh;
	border: 1px solid var(--black);
	padding: 12px;
	display: block;
	width: 100%;
	text-align: center;
	max-width: 600px;
	margin: 3vw auto 0;
}
section#SNS .but_more{
	max-width: 50%;
	margin: 50px auto 0px;
}
.but_more.not {
	margin: 0vw auto 0;
}
.but_more span {
  display: inline-block;
  padding-left: 10px;
}
.but_more:hover {
	background: var(--black);
	color: var(--white) !important;
	transition: all 0.6s;
}

section#SNS .wrap {
  background: var(--white);
  border-top: 1px solid var(--black);
  padding: var(--LRmargin);
}

/* MD 1280-1439 */
@media screen and (max-width: 1439px){
	section#FEATURE .col3 li .in .h3s3{font-size: clamp( 22px, 2vw, 32px);}
	section#FEATURE .col3 li .in p {font-size: 16px;}
}
/*TB 768-1023*/
@media screen and (max-width: 1023px){
	.grid-container {
		grid-template-columns: 50% 50%;
		grid-template-areas:
			"grid1 grid2"
			"grid3 grid3";
	}
	section.message .box {margin-right: 0;}
	section.message .rbox {margin-top: 5vw;padding-left: 0;border-left: none;}
	section#FEATURE .col3 li .in .h3s3{font-size: clamp( 20px, 1.5vw, 24px);}
	section#FEATURE .col3 li .in p {font-size: 15px;}
	section#HALL .col4d2 li .in .h3s3 {font-size: clamp( 20px, 1.5vw, 24px);}
	section#HALL .col4d2 li .in p {font-size: 15px;}
	.swiper-button-prev, .swiper-button-next {height: 30px;width: 30px; bottom: 49px;}
	.swiper-hallname {width: 38.75vw;}

	section#COURSE .colWrapBox{display: flex;border-top: 1px solid var(--black);}
	section#COURSE .colWrapBox .colWrap{width: 50%;border-top: none;padding: var(--LRmargin) var(--LRmargin) 2vw;}
	section#COURSE .colWrapBox .colWrap.c2{border-left: 1px solid var(--black);padding: 0;}

	section#COURSE .col4 {display: block;margin-bottom: 0;}
	section#COURSE .col4 li {width: 100%;}
	section#COURSE .col4 li:not(.last) {margin-bottom: 2.5vw;}

	section#COURSE .mBox {padding: 0;}
	section#COURSE .col3c2 {display: block;}
	section#COURSE .col3c2 li {padding: var(--LRmargin);}
	section#COURSE .col3c2 li.spa {display: none;}
	section#COURSE .col3c2 .s {width: 100%;}
	section#COURSE .col3c2 .m {width: 100%;border-left: none; border-right: none;border-bottom: 1px solid var(--black);border-top: 1px solid var(--black);padding: var(--LRmargin);}
	section#COURSE .flex {display: block;}
	section#COURSE .flex a {width: 100%;}

	section#COURSE .flex span {margin-top: 2.5vw;}
	section#COURSE .flex span:after {content: none;}
	section#COURSE .des{padding: 2.5vw 0 2.5vw;}
	section#COURSE .colWrap.c2 .des{padding: 2.5vw 0 0;}
	section#COURSE .mBox.EDUCATION {padding: 0;}
	section#COURSE .colWrapBox ul li .in.VOCAL {width: 100%;}
	section#COURSE .colWrap.c2 .des.VOCAL {width: 100%;}

	section.ADM_EXAM .col4d2 li .in p {font-size: 15px;}
}
@media screen and (max-width: 900px){
	.swiper-hallname {padding: 12px 0;}
}
/*SP 320-767*/
@media screen and (max-width: 767px){
	section.message .wrap {padding: 7.5vw var(--LRmargin) 7.5vw;}
	.grid-container {
		grid-template-columns: 100%;
		grid-template-areas:
			"grid3" "grid1"  "grid2";
	}
	section.message .imgbox {margin-right: 0; margin-bottom: 7.5vw;margin-top: 15vw;}
	section.message .rbox {margin-top: 0;}
	section.message .rbox .des {font-size: 16px;}
	
	section#FEATURE .col3 {display: block;}
	section#FEATURE .col3 li:not(:first-child) {border-left: none;}
	section#FEATURE .col3 li:last-child {border-right: none;}
	.h2s3 span {font-size: clamp( 24px, 2vw, 32px); padding-left: 0; display: block; padding-top: 8px;}
	section#FEATURE .col3 li .in .h3s3 {font-size: clamp( 22px, 6vw, 32px);}
	section#HALL .col4d2 {width: 100%; margin: auto; border-left: none; border-right: none;}
	.swiper-hallname {width: 40vw;padding: 10px 0;}
	.swiper-button-prev, .swiper-button-next {bottom: 45px;}

	section#COURSE .colWrapBox {display: block;}
	section#COURSE .colWrapBox .colWrap {width: 100%;}
	section#COURSE .col4 li.last {margin-bottom: 2.5vw;}
	section#COURSE .colWrapBox .colWrap.c2{border-left: none;}
	section#COURSE .colWrapBox ul li .in {height: 160px;}
	section#COURSE .colWrapBox ul li .in.VOCAL{width: 100%;}/* top2.css */
	section#COURSE .mBox.EDUCATION {padding: 3.75vw 0;}/* top2.css */

	section.ADM_EXAM .col4d2 {width: 100%; margin: auto; border-left: none; border-right: none;}
	.but_more {margin: 6vw auto 0;}
	section#SNS .but_more {max-width: 100%;margin: 50px auto 0px;}
	footer #f1 div.in a.logo img {width: 250px;}
}
@media screen and (max-width: 600px){
	.swiper-hallname {width: 52vw; bottom: 20px;padding: 7px 0;}
	.swiper-button-prev, .swiper-button-next {margin: 0 10vw;bottom: 24px;}
}
@media screen and (max-width: 460px){
	.swiper-hallname {width: 52vw; bottom: 17px;padding: 7px 0;}
	.swiper-button-prev, .swiper-button-next {margin: 0 10vw;bottom: 19px;}
}