@charset "utf-8";



/*----------------------------- BASE -----------------------------*/


html {
  font-size: 62.5%; /*10px(root)*/
  overflow-y: scroll;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
  border: 1px solid #888;
  box-sizing: border-box;
}
@media screen and (min-width: 480px) {
  img {
    width: calc(480px * 0.8);
    height: auto;
  }
}

iframe {
  width: 100%;
}

a {
  color: rgb(0, 153, 165);
}

body {
  font-size: 1.4rem; /*basic(14px)*/
  font-family:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
    "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  text-align: justify;
  word-break: break-all; /*単語無視*/
  word-wrap: break-word; /*for IE 単語維持*/
  background-image: url(../img/bg.gif);
}

/*----------------------------- HEADER / HEADER.MAIN_TITLE -----------------------------*/


header {
  display: block;
  width: 100vw;
  height: 300px;
  z-index: 10;
  /*position => js*/

  /*default値*/
  position: fixed;
  top: -110px;
  left: 0;

  pointer-events: none;
}
#index header {
  /*position => js*/

  /*default値*/
  position: absolute;
  top: 0;
}
@media screen and (min-width: 600px) {
  header {
    height: calc(100vw / 2);
  }
}
@media screen and (min-width: 768px) {
  header {
    height: 384px; /* 768/2 */
  }
}

header .site_title {
  pointer-events: all;
}

header .logo img {
  border: 0; /*@orverride*/
  top: 10px;
  /*pos hori => js*/
  /*width height => js*/
  /*position => js*/

  /*default値*/
  position: fixed;
  width: 117px;
  height: 45px;
  left: 10px;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
#index header .logo img {
  border: 0; /*@orverride*/
  top: 10px;
  /*pos hori => js*/
  /*width height => js*/
  /*position => js*/

  /*default値*/
  position: absolute;
  width: 208px;
  height: 80px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
@media screen and (min-width: 600px) {
  header .logo img {
    left: 10%;
  }
}
@media screen and (min-width: 960px) {
  header .logo img{
    left: calc((100vw - (960px * 0.8)) / 2);
  }
}

header .header_wrapper_outer_a {
  background: url(../img/header_img_outer_a.png);
}
header .header_wrapper_outer_b {
  background: url(../img/header_img_outer_b.png);
}
header .header_wrapper_outer_c {
  background: url(../img/header_img_outer_c.png);
}
header .header_wrapper_outer_d {
  background: url(../img/header_img_outer_d.png);
}
header .header_wrapper_outer_e {
  background: url(../img/header_img_outer_e.png);
}
header .header_wrapper_outer_f {
  background: url(../img/header_img_outer_f.png);
}
header .header_wrapper_inner {
  background: url(../img/header_img_inner.png);
}
header .header_wrapper_outer_a,
header .header_wrapper_outer_b,
header .header_wrapper_outer_c,
header .header_wrapper_outer_d,
header .header_wrapper_outer_e,
header .header_wrapper_outer_f,
header .header_wrapper_inner {
  position: absolute;
  display: block;
  top: 0;
  width: 100vw;
  height: 100%;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center top;
}




/*----------------------------- HEADER.NAV / HAMBURGUR_MENU -----------------------------*/


nav ul a {
  color: #FFF; /*@orverride*/
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  nav ul a {
    text-decoration: underline;
  }
}

nav #ham-menu-cb {
  display: none;
}

nav #ham-menu-icon {
  display: none;

  font-size: 3rem;
  color: #FFF;
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 1000;
}
@media screen and (min-width: 600px) {
  nav #ham-menu-icon {
    right: 10%;
  }
}
@media screen and (max-width: 767px) {
  nav #ham-menu-icon {
    display: block;
  }
}

nav ul.left {
  display: flex;
  width: 300px;
  position: fixed;
  right: calc(10% + 238px); /*暫定値*/
  left: auto;
  top: 0;
  height: 55px;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1000;
}
nav ul.right {
  display: flex;
  width: 240px;
  position: fixed;
  right: 10%;
  top: 0;
  height: 55px;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1000;
}
@media screen and (min-width: 960px) {
  nav ul.left {
    right: calc((100vw - (960px * 0.8)) / 2 + 238px); /*暫定値*/
  }
  nav ul.right {
    right: calc((100vw - (960px * 0.8)) / 2);
  }
}
nav ul.left li {
  margin-left: 8%;
}
nav ul.right li {
  margin-right: 8%;
}
nav ul.right li:last-child {
  margin-right: 0;
}
#index nav ul.left {
  display: flex;
  width: calc(50% - 110px - 5%);
  position: absolute;
  right: auto;
  left: 0;
  top: 0;
  height: 90px;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1000;
}
#index nav ul.left li {
  margin-left: 8%;
}
#index nav ul.right {
  display: flex;
  width: calc(50% - 110px - 5%);
  position: absolute;
  right: 0;
  top: 0;
  height: 90px;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 1000;
}
#index nav ul.right li {
  margin-right: 8%;
}
@media screen and (max-width: 767px) {
  nav ul.left,
  nav ul.right,
  #index nav ul.left,
  #index nav ul.right {
    display: inline;
    width: auto;
    height: auto;
    position: relative;
    left: auto;
    right: auto;
  }

  nav ul.left li,
  nav ul.right li,
  #index nav ul.left li,
  #index nav ul.right li {
    margin: 0;
  }

  nav div.ham-menu {
    opacity: 0;
    display: block;
    position: fixed;
    pointer-events: none;
    top: 55px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    z-index: 1000;
  }
}

nav div.ham-menu ul li {
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  font-size: 3rem;
}
nav div.ham-menu ul li.icon {
  font-size: 1.8rem; /*@orverride*/
}
@media screen and (max-width: 767px) {
  nav div.ham-menu ul li,
  #index nav div.ham-menu ul li {
    font-size: 3.5rem;
    margin-bottom: 45px;
  }
  nav div.ham-menu ul li.icon,
  #index nav div.ham-menu ul li.icon {
    font-size: 2.5rem; /*@orverride*/
  }
}

nav #ham-menu-bg {
  opacity: 0;
  pointer-events: none;
  background-color: rgba(50, 123, 135, 0.9);
  display: block;
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

nav #ham-menu-cb:checked ~ .ham-menu {
  opacity: 1.0;
  pointer-events: all;
}

nav #ham-menu-cb:checked ~ #ham-menu-bg {
  opacity: 1;
  z-index: 999;
  pointer-events: all;
}



/*----------------------------- MAIN.ALL_PAGES -----------------------------*/


#main {
  width: 80%;
  margin: 150px auto 100px;
  display: block; /*for IE*/
}
/*@orverride*/
#index #main {
  margin-top: 50px;
}
@media screen and (min-width: 600px){
  #main {
    margin-top: calc(150px + ((100vw - 600px) / 2));
  }
}
@media screen and (min-width: 960px){
  #main {
    width: calc(960px * 0.8);
    margin-top: 330px; /*150-((960-600)/2)*/
  }
}

#main .content_title {
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  font-size: 4rem;
  border-bottom: 1px solid #000;
  margin-bottom: 6px;
}

#main .content_title_description {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 14px;
}

#main .updatedate {
  font-size: 1.2rem;
  color: #888;
  margin-bottom: 17px;
}

#main .sentence {
  line-height: 1.8;
}



/*----------------------------- MAIN.INDEX -----------------------------*/

/*for IE & Edge*/
#index .main_photo p {
  display: block;
  width: 100vw;
  height: calc(520px + 80px);
  margin: 80px auto 0;
  text-align: center;
  overflow: hidden;
   background-color: #FFF;
}
/*for IE & Edge*/
#index .main_photo p img {
  position: absolute;
  top: 80px;
  left: 50%;
  width: auto;
  height: calc(520px + 80px);
  /*min-height: 100%;
  min-width: 100%;*/
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0; /*@orverride*/
}
/*for Othres*/
@supports (object-fit: cover) {
  #index .main_photo p img {
    /* negative */
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    min-width: inherit;

    /* main */
    object-fit: cover;
    object-position: center 25%;
  }
  @media screen and (min-width: 960px){
    /*for IE & Edge*/
    #index .main_photo p img {
      width: 960px;
    }
  }
}

/*
#index .main_photo p {
  display: block;
  width: 100vw;
  height: calc(520px + 80px);
  margin: 80px auto 0;
  text-align: center;
  overflow: hidden;
}

#index .main_photo img {
  border: 0;
  object-fit: cover;
  object-position: center 25%;
  width: 100%;
  height: 100%;
}
*/

#index #main article {
  margin-bottom: 60px;
}
#index #main article:last-child {
  margin-bottom: 0;
}

#index #main .concert .title,
#index #main .latest_blog .title {
  font-weight: bold;
}

#index #main .excerpt {
  display: block;
  overflow: hidden;
  height: 7.2em; /* 1em*行数(4)*line-height */
}

#index #main .concert .view_all_nav,
#index #main .lesson .view_all_nav,
#index #main .latest_blog .view_all_nav {
  margin-bottom: 8px;
}

#index #main .photo .content {
  margin-bottom: 8px;
}



/*----------------------------- MAIN.SLIDER (INDEX) -----------------------------*/


/*for IE & Edge*/
#index #main .slider li {
  position: relative;
  height: 230px;
  display: block;
  overflow: hidden;
}
/*for IE & Edge*/
#index #main .slider img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
/*for Othres*/
@supports (object-fit: cover) {
  #index #main .slider img {
    /* negative */
    position: static;
    top: 0;
    left: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    min-width: inherit;

    /* main */
    border: solid 1px #AAA;
  	box-sizing: border-box;
    width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center 40%;
  	margin-right: 5%;
  }
}

#index #main .slider .slick-slide  {
    margin-left: 4px;
    margin-right: 4px;
}

#index #main .slider .prev {
	position: absolute;
	left: -20px;
	top: 135px;
	cursor: pointer;
	font-size: 2rem;
}

#index #main .slider .next {
	position: absolute;
	right: -20px;
	top: 135px;
	cursor: pointer;
	font-size: 2rem;
}


/*----------------------------- MAIN.ABOUT -----------------------------*/


#about #main article img {
  margin-bottom: 8px;
}

#about #main article .name {
  font-weight: bold;
}



/*----------------------------- MAIN.CONCERT -----------------------------*/


#concert section {
  line-height: 1.8;
  margin-bottom: 60px;
}
#concert section:last-child {
  margin-bottom: 0; /*@orverride*/
}
#concert section .image {
  line-height: 0; /*@orverride*/
}

#concert section h3 {
  font-weight: bold;
  font-size: 1.8rem;
}

#concert .performers {
  margin-bottom: 8px;
}



/*----------------------------- MAIN.LESSON -----------------------------*/


#lesson #main article img {
  margin-bottom: 8px;
}

#lesson #main article h3.name {
  font-weight: bold;
  font-size: 1.8rem;
}

#lesson #main article .contact {
  margin-bottom: 12px;
}

#lesson #main article table.list {
  margin-bottom: 40px;
}

#lesson #main article table.list tr {
  line-height: 2.0;
}
#lesson #main article table.list tr:first-child {
  line-height: 2.5; /*@orverride*/
}

#lesson #main article table.list td:first-child {
  width: 60px;
}

#lesson #main article section.course {
  margin-bottom: 50px;
}
#lesson #main article section.course:last-child {
  margin-bottom: 0; /*@orverride*/
}

#lesson #main article section.course h4.course_title {
  font-size: 1.5rem;
  border-bottom: 1px solid #000;
  margin-bottom: 10px;
}
#lesson #main article section.course:nth-of-type(2) h4.course_title:nth-of-type(1) {
  border-bottom: 0; /*@orverride*/
  margin-bottom: 0; /*@orverride*/
}
#lesson #main article section.course h4.course_title .bold {
  font-weight: bold;
}

#lesson #main article section.course .fee {
  margin: 8px auto;
}



/*----------------------------- MAIN.BLOG -----------------------------*/


#blog main h3 {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.8;
}

#blog main .date,
#blog aside ul li {
  line-height: 1.8;
}

#blog main img {
  margin-top: 8px;
}

/*@orverride*/
#blog main h2 a,
#blog main h3 a {
  color: #000;
  text-decoration: none;
}

#blog .share_buttons {
  display: flex;
}

#blog .share_buttons .fb-share-button {
  margin-right: 5px;
}

#blog ul.page-numbers,
#blog ul.singlepage_prev_next_link {
  display: flex;
  justify-content: space-between;
}

#blog ul.page-numbers li a.page-numbers {
  display: block;
  border: 1px solid #000;
  padding: 4px;
  color: #000;
  text-decoration: none;
}

#blog ul.page-numbers li span {
  display: block;
  padding: 4px;
}

#blog article {
  margin-bottom: 60px;
}

#blog section {
  margin-bottom: 60px;
}
#blog section:last-child {
  margin-bottom: 0; /*@orverride*/
}

#blog aside h4 {
  font-weight: bold;
  line-height: 1.8;
}

#blog aside ul {
  margin-bottom: 10px;
}



/*----------------------------- MAIN.PHOTO -----------------------------*/


#photo #main ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#photo #main li {
  width: 46%;
  margin-bottom: 9%;
}
@media screen and (min-width: 600px){
  #photo #main li {
    width: 29%;
    margin-bottom: 7%;
  }

  #photo #main li:nth-child(3n+2):last-child {
    margin-right: 35.5%;
  }
}
@media screen and (min-width: 768px){
  #photo #main li {
    width: 21%;
    margin-bottom: 6%;
  }

  #photo #main li:nth-child(3n+2):last-child {
    margin-right: 0;
  }

  #photo #main li:nth-child(4n+2):last-child {
    margin-right: 52.8%;
  }

  #photo #main li:nth-child(4n+3):last-child {
    margin-right: 26.4%;
  }
}

/*for IE & Edge*/
#photo #main li {
  position: relative;
  height: 20vh;
  display: block;
  overflow: hidden;
}
/*for IE & Edge*/
#photo #main li img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;

  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
/*for Othres*/
@supports (object-fit: cover) {
  #photo #main li img {
    /* negative */
    position: static;
    top: 0;
    left: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    min-width: inherit;

    /* main */
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: auto;

    border: solid 1px #AAA;
    box-sizing: border-box;
  }
}



/*----------------------------- FOOTER -----------------------------*/


footer {
  position: relative;
  display: block;
  width: 100vw;
  height: 220px;
}

footer nav {
  display: flex;
  width: 100vw;
  height: 180px;
  padding: 20px 10% 0;
  box-sizing: border-box;
}
@media screen and (min-width: 960px) {
  footer nav {
    width: calc(960px * 0.8);
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
  }
}

 /*@orverride*/
footer nav ul a {
  text-decoration: underline;
}

footer nav ul.left_column {
  margin-right: 30px;
}

footer nav li {
  font-size: 1.6rem;
  font-weight: bold; /*iphone効かないかも？*/
  margin-bottom: 24px;
}

footer nav li:last-child {
  margin-bottom: 0;
}

footer small {
  position: absolute;
  display: block;
  height: 20px;
  width: 100%;
  font-size: 1rem;
  color: #FFF;
  bottom: 3px;
  text-align: center;
}

footer .footer_wrapper_outer_a {
  background: url(../img/footer_img_outer_a.png);
}
footer .footer_wrapper_outer_b {
  background: url(../img/footer_img_outer_b.png);
}
footer .footer_wrapper_outer_c {
  background: url(../img/footer_img_outer_c.png);
}
footer .footer_wrapper_outer_d {
  background: url(../img/footer_img_outer_d.png);
}
footer .footer_wrapper_outer_e {
  background: url(../img/footer_img_outer_e.png);
}
footer .footer_wrapper_outer_f {
  background: url(../img/footer_img_outer_f.png);
}
footer .footer_wrapper_inner {
  background: url(../img/footer_img_inner.png);
}
footer .footer_wrapper_outer_a,
footer .footer_wrapper_outer_b,
footer .footer_wrapper_outer_c,
footer .footer_wrapper_outer_d,
footer .footer_wrapper_outer_e,
footer .footer_wrapper_outer_f,
footer .footer_wrapper_inner {
  position: absolute;
  top: 0;
  display: block;
  width: 100vw;
  height: 220px;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center top;
}
@media screen and (min-width: 600px){
  footer .footer_wrapper_outer_a,
  footer .footer_wrapper_outer_b,
  footer .footer_wrapper_outer_c,
  footer .footer_wrapper_outer_d,
  footer .footer_wrapper_outer_e,
  footer .footer_wrapper_outer_f,
  footer .footer_wrapper_inner {
    background-size: auto calc(100% + (100vw/2 - 300px));
  }
}
@media screen and (min-width: 768px){
  footer .footer_wrapper_outer_a,
  footer .footer_wrapper_outer_b,
  footer .footer_wrapper_outer_c,
  footer .footer_wrapper_outer_d,
  footer .footer_wrapper_outer_e,
  footer .footer_wrapper_outer_f,
  footer .footer_wrapper_inner {
    background-size: auto calc(100% + (768px/2 - 300px));
  }
}



/*----------------------------- EOF -----------------------------*/