@charset "utf-8";

/* school
---------------------------------------------------------------------------*/
figure {
  margin: 0;
}

.mainContents {
  width: 100%;
  color: var(--color-text-brown);
  font-feature-settings: 'palt' 1;
}

.contTop {
	padding-bottom: 0;
}

.contTop .eyeCatch {
	margin-bottom: 70px;
}

.contTop .sun {
	left: -49px;
}

.contTop .flagUsagi {
	left: -17px;
	top: 319px;
}

.contTop h1 {
	left: 110px;
	top: 373px;
}

.copyWrap .contR {
  margin-right: 25px;
}

/* .infoCont
------------------------------------*/
.infoCont {
  width: 1024px;
  margin: 0 auto 20px;
}

/* .school-program-list
------------------------------------*/
.school-program-list {
  box-sizing: border-box;
  width: 1030px;
  margin: 0 auto 140px;
  padding: 0 5px 0 0;
}

.school-program-list h2 {
  margin: 0 0 35px -5px;
}

.school-program-list .inner {
  display: flex;
	justify-content: space-between;
}

.school-program-list .list h4,
.school-program-list .school h3 {
  margin-bottom: 18px;
  color: #724C24;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  opacity: 0.9;
}

.school-program-list .inner p {
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-align: justify;
}

.school-program-list .list {
  display: flex;
	align-items: flex-start;
  background: url(../img/school/pic-arrow-bottom-wide@2x.png) no-repeat left bottom 5px / 100% auto;
}

.school-program-list .list > div {
  box-sizing: border-box;
  width: 166px;
}

.school-program-list .list > div a {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 62px 32px 18px 27px;
  color: var(--color-text-brown);
  text-decoration: none;
  opacity: 1 !important;
}

.school-program-list .list h3 {
  position: absolute;
  top: 0;
  left: 0;
}

.school-program-list .list h4 {
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: .15s ease-out;
}

.school-program-list .list > div:nth-of-type(1) a:hover h4 { color: #F0B6B7; } 
.school-program-list .list > div:nth-of-type(2) a:hover h4 { color: #8CD4CE; } 
.school-program-list .list > div:nth-of-type(3) a:hover h4 { color: #8CD1A3; } 
.school-program-list .list > div:nth-of-type(4) a:hover h4 { color: #E5CE8A; } 
.school-program-list .list > div:nth-of-type(5) a:hover h4 { color: #99B1CF; } 

.school-program-list .school {
  box-sizing: border-box;
  background: url(../img/school/pic-school@2x.png) no-repeat left bottom / 100% auto;
  width: 173px;
  min-height: 189px;
  padding: 66px 25px 0;
  transform: translateY(-4px);
}

.school-program-list .school h3 {
  text-decoration: underline;
  text-decoration-color: #F7EAB5;
  text-decoration-thickness: 4px;
  text-underline-offset: 0;
}

/* .school-program
------------------------------------*/
.school-program-wrap {
  margin-top: -60px;
  padding-top: 60px;
}

.school-program {
  position: relative;
  box-sizing: border-box;
  width: 1030px;
  margin: 0 auto;
  padding: 13px 0 0 107px;
  z-index: 1;
}

.school-program.program1:after {
	display: block;
	content: '';
	position: absolute;
  top: 278px;
  left: 78px;
  background: url(../img/school/bg-program-line.svg) no-repeat left top;
	width: 946px;
	height: 3002px;
  z-index: -1;
}

.school-program h2 {
  position: absolute;
  top: 0;
  left: 0;
}

.school-program h3 {
  margin-bottom: 30px;
}

.school-program h4 {
  margin-bottom: 23px;
}

.school-program p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: 0.08em;
}

.school-program .btn-link-arrow {
  margin: 20px 0 0;
}

/* .program1
------------------------------------*/
.school-program.program1 {
  margin-bottom: 140px;
}

.school-program.program1 .img1 {
  position: absolute;
  top: 15px;
  right: 0;
}

.school-program.program1 .dl {
  position: absolute;
  bottom: 0;
  right: 50px;
  width: 330px;
}

.school-program.program1 .dl dl {
  display: flex;
  border-bottom: 1px solid var(--color-border-brown);
  padding: 12px 6px 5px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.school-program.program1 .dl dt {
  box-sizing: border-box;
  margin-right: 23px;
  color: var(--color-text-pink);
  font-weight: bold;
}

.school-program.program1 .img2 {
  display: flex;
	justify-content: space-between;
  width: 492px;
  margin: 75px 0 0 -5px;
}

.school-program.program1 .btn-link-arrow a i {
  background-image: url(../img/school/ico-arrow-pink.svg);
}

/* .program2
------------------------------------*/
.school-program.program2 {
  margin-bottom: 132px;
}

.school-program.program2 .img1 img:nth-of-type(1) { position: absolute; top: 2px; right: 238px; }
.school-program.program2 .img1 img:nth-of-type(2) { position: absolute; top: 112px; right: 0; }

/* .program3
------------------------------------*/
.school-program.program3 {
  margin-bottom: 145px;
  padding: 23px 0 0 605px;
}

.school-program.program3 .img1 img:nth-of-type(1) { position: absolute; top: 0; left: 0; }
.school-program.program3 .img1 img:nth-of-type(2) { position: absolute; top: 23px; left: 351px; }
.school-program.program3 .img1 img:nth-of-type(3) { position: absolute; top: 202px; left: 326px; }

.school-program.program3 h2 {
  top: 8px;
  left: inherit;
  right: 34px;
}

.school-program.program3 p {
  line-height: 2;
}

.school-program.program3 .btn-link-arrow a i {
  background-image: url(../img/school/ico-arrow-green.svg);
}

/* .program4
------------------------------------*/
.school-program.program4 {
  margin-bottom: 167px;
}

.school-program.program4 .img1 {
  position: absolute;
  top: 0;
  right: 0;
}

.school-program.program4 p {
  line-height: 2;
}

/* .program5
------------------------------------*/
.school-program.program5 {
  margin-bottom: 230px;
  padding: 0 0 0 30px;
}

.school-program.program5 .img1 {
  position: absolute;
  top: 0;
  left: 0;
}

.school-program.program5 h2 {
  top: -14px;
  left: inherit;
  right: 34px;
}

.school-program.program5 .txt1 {
  margin: 0 0 100px 520px;
}

.school-program.program5 .txt1 p {
  line-height: 2;
}

.school-program.program5 .img2 {
  display: flex;
	justify-content: space-between;
  position: absolute;
  bottom: -6px;
  right: 69px;
  width: 527px;
}

.school-program.program5 .btn-link-arrow a i {
  background-image: url(../img/school/ico-arrow-blue.svg);
}

/* .school-recital
------------------------------------*/
.school-recital {
  position: relative;
  box-sizing: border-box;
  background-color: #FFFAD4;
  width: 1080px;
  margin: 0 auto 110px;
  padding: 65px 0 65px;
  text-align: center;
  z-index: 1;
}

.school-recital .flag { position: absolute; top: -1px; }
.school-recital .flag.left { left: -1px; }
.school-recital .flag.right { right: -1px; transform: scaleX(-1); }

.school-recital h2 {
  margin-bottom: 26px;
  text-align: center;
}

.school-recital h2 em {
  display: block;
  margin-bottom: 34px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

.school-recital p {
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: 0.1em;
}

.school-recital-movie {
  position: relative;
  width: 850px;
  margin: 85px auto 0;
  z-index: 1;
}

.school-recital-movie:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: -20px;
  background-color: #222222;
	width: calc(100% + 40px);
	height: 100%;
  z-index: -1;
}

.school-recital-movie .head {
  position: absolute;
  top: -44px;
  left: -37px;
  z-index: 3;
}

.school-recital-movie .side {
  position: absolute;
  top: -24px;
  z-index: 2;
  transition: .4s var(--easeInQuart);
  pointer-events: none;
}

.school-recital-movie .side.left { left: -22px; transform-origin: left center; }
.school-recital-movie .side.right { right: -22px; transform-origin: right center; }
.school-recital-movie .side.right img { transform: scaleX(-1); }

.school-recital-movie.play .side { transform: scaleX(0.1); opacity: 0; }
/*.school-recital-movie.play .side.left { left: -8px; }
.school-recital-movie.play .side.right { right: -8px; }*/

.school-recital-movie:after {
	display: block;
	content: '';
	position: absolute;
  bottom: -5px;
	left: -42px;
  background-color: #BDA369;
  border-radius: 10px;
	width: calc(100% + 84px);
	height: 10px;
  z-index: 3;
}

.school-recital-movie .movie {
  position: relative;
}

.school-recital-movie .movie video {
  width: 850px;
  height: 478px;
}

.school-recital-movie .movie .btn-movie-school-recital {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.4);
  border: none;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: .15s ease-out;
  cursor: pointer;
}

.school-recital-movie .movie .btn-movie-school-recital:hover {
  opacity: 0.8;
}

.school-recital-movie .pic-bird {
  position: absolute;
  bottom: -35px;
  right: 100px;
  z-index: 4;
  transform-origin: right bottom;
}

.school-recital-movie .pic-usagi {
  position: absolute;
  bottom: -35px;
  right: 22px;
  z-index: 4;
  transform-origin: right bottom;
}

/* .school-contact
------------------------------------*/
.school-contact {
  position: relative;
  width: 1140px;
  margin: 0 auto;
  padding: 63px 0 0;
  text-align: center;
}

.school-contact h2 {
  margin-bottom: 40px;
}

.school-contact p {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 2.45;
  letter-spacing: 0.1em;
}

.school-contact .btn-set {
  margin-top: 40px;
}

.school-contact .btn-set .btn-link-color a {
  min-width: 190px;
}

.school-contact figure img {
  display: block;
  position: absolute;
}

.school-contact figure .img1 { top: 0; left: 54px; }
.school-contact figure .img2 { bottom: 0px; left: 0; }
.school-contact figure .img3 { top: 16px; right: 0; }
.school-contact figure .img4 { bottom: 0px; right: 46px; }