@charset "UTF-8";
html {
  font-size: 10px;
  font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "メイリオ", sans-serif, "Droid Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

body {
  position: relative;
}

.pagetop-auto {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0px;
  z-index: 9999;
}
.pagetop-auto a {
  display: block;
}
.pagetop-auto a:hover {
  filter: alpha(opacity=80);
  opacity: 0.8;
  -moz-opacity: 0.8;
}

.deco {
  padding: 0 0 160px;
}

.ribbon {
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.4em;
  font-weight: bold;
}
.ribbon h2 {
  width: 100%;
  padding: 12px 20px;
  background: #3c5166;
}
@media screen and (min-width: 768px) {
  .ribbon {
    width: 518px;
    font-size: 2rem;
    position: relative;
    z-index: 2;
    padding: 80px 0 0;
    margin: 0 auto 10px;
  }
  .ribbon:before {
    /*左側のリボン端*/
    content: "";
    position: absolute;
    width: 82px;
    bottom: -13px;
    left: -64px;
    z-index: -2;
    border: 24px solid #486077;
    border-left-color: transparent;
  }
  .ribbon:after {
    /*右側のリボン端*/
    content: "";
    position: absolute;
    width: 82px;
    bottom: -13px;
    right: -64px;
    z-index: -2;
    border: 24px solid #486077;
    border-right-color: transparent;
  }
  .ribbon h2 {
    position: relative;
    margin: 0 auto;
  }
  .ribbon h2:before {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 13px transparent;
    border-right: solid 19px #263340;
  }
  .ribbon h2:after {
    position: absolute;
    content: "";
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 13px transparent;
    border-left: solid 19px #263340;
  }
}

.h-en {
  font-family: "Spartan", sans-serif;
  color: #c0b47e;
  font-size: 1.6rem;
  line-height: 1.4em;
  text-align: center;
  font-weight: bold;
  margin: 0 0 40px;
  padding: 12px 0 0;
}
@media screen and (min-width: 768px) {
  .h-en {
    font-size: 2rem;
    padding: 6px 0 0;
    margin: 0 0 60px;
  }
}

.artist {
  display: grid;
  grid-template-areas: "artist-photo artist-name" "artist-text artist-text";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-column-gap: 0px;
  grid-row-gap: 30px;
}
.artist .ie {
  display: none;
}
.artist .photo {
  grid-area: artist-photo;
}
.artist .name {
  grid-area: artist-name;
}
.artist .introduction {
  grid-area: artist-text;
}
@media screen and (min-width: 1024px) {
  .artist {
    grid-template-rows: 1fr auto;
    grid-template-areas: "artist-photo artist-name" "artist-photo artist-text";
  }
}
.artist .photo {
  position: relative;
  width: 100%;
}
.artist .photo img {
  width: 100%;
  height: auto;
}
.artist .photo p {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  color: #ffffff;
  line-height: 1.4em;
  padding: 4px 0 4px 6px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 1.1rem;
}
@media screen and (min-width: 768px) {
  .artist .photo p {
    width: 150px;
  }
}
.artist .name {
  position: relative;
  padding: 0 0 0 15px;
  display: flex;
  align-items: flex-end;
}
.artist .introduction {
  font-size: 1.4rem;
  line-height: 1.6em;
}

.artist > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.artist > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.artist > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.artist > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.nav_header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #741613;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 840px) {
  .nav_header {
    padding: 0 30px;
  }
}
.nav_header .nav_header_right,
.nav_header .nav_header_left {
  display: flex;
  height: 80px;
  align-items: center;
}
.nav_header img {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 10px 0 0;
}
.nav_header h1 {
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1.6em;
  margin: 0 24px 0 0;
}
@media screen and (min-width: 840px) {
  .nav_header h1 {
    font-size: 2em;
  }
}
.nav_header h1 span {
  color: #c0b47e;
}
.nav_header h1 span:before {
  content: "\a";
  white-space: pre;
}
@media screen and (min-width: 840px) {
  .nav_header h1 span:before {
    content: " ";
  }
}
.nav_header .social {
  display: none;
  margin: 0 50px 0 0;
}
.nav_header .social .svg {
  display: block;
  width: 24px;
  height: 24px;
  opacity: 0.6;
  transition-duration: 0.3s;
}
.nav_header .social .svg:hover {
  opacity: 1;
}
.nav_header .social .svg:first-child {
  margin: 0 20px 0 0;
}
@media screen and (min-width: 480px) {
  .nav_header .social {
    display: flex;
  }
}
.nav_header .nav-btn,
.nav_header .nav-btn span {
  height: 100%;
  transition: all 0.3s;
}
.nav_header .nav-btn {
  position: relative;
  width: 24px;
  height: 100%;
  padding: 12px 0;
}
.nav_header .nav-btn span {
  position: absolute;
  display: inline-block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  opacity: 0.6;
}
.nav_header .nav-btn span:nth-of-type(1) {
  top: 31px;
}
.nav_header .nav-btn span:nth-of-type(2) {
  top: 39px;
}
.nav_header .nav-btn span:nth-of-type(3) {
  bottom: 31px;
}
.nav_header .nav-btn.active span:nth-of-type(1) {
  transform: translateY(8px) rotate(-45deg);
}
.nav_header .nav-btn.active span:nth-of-type(2) {
  opacity: 0;
}
.nav_header .nav-btn.active span:nth-of-type(3) {
  transform: translateY(-8px) rotate(45deg);
}

.main_nav {
  display: none;
  position: fixed;
  top: 80px;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: #741613;
  color: #ffffff;
  font-size: 1.6rem;
  padding: 30px 0 0 40px;
}
@media screen and (min-width: 480px) {
  .main_nav {
    width: 320px;
  }
}
.main_nav li {
  position: relative;
  margin: 0 0 20px;
}
.main_nav li:hover {
  text-decoration: underline;
}
.main_nav li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  display: block;
  width: 7px;
  height: 7px;
  border-top: solid 2px;
  border-right: solid 2px;
  transform: rotate(45deg) translateY(-50%);
  color: #c0b47e;
}

.main_nav.active {
  display: block;
}

.informaiton {
  width: 100%;
  height: 44px;
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 480px) {
  .informaiton {
    width: 59px;
    height: 220px;
    top: 110px;
    bottom: auto;
  }
}
.informaiton ul {
  display: flex;
  width: 100%;
  height: 100%;
}
.informaiton ul li {
  border-right: 1px solid #cccccc;
}
.informaiton ul li:nth-child(3) {
  border-right: 1px solid #741613;
}
.informaiton ul .list:last-child {
  border-right: none;
}
.informaiton ul a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 480px) {
  .informaiton ul a {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.informaiton ul .fb,
.informaiton ul .tw,
.informaiton ul .scroll-top {
  width: 44px;
}
@media screen and (min-width: 480px) {
  .informaiton ul .fb,
  .informaiton ul .tw,
  .informaiton ul .scroll-top {
    display: none;
  }
}
.informaiton ul .e-plus,
.informaiton ul .tw,
.informaiton ul .fb {
  background: #eaeaea;
}
.informaiton ul .scroll-top {
  background: #8e1d1a;
}
.informaiton ul .e-plus {
  width: calc(100% - 132px);
  border-top: 3px solid #ee5ba0;
  color: #ee5ba0;
  font-size: 1.5rem;
  transition-duration: 0.2s;
}
@media screen and (min-width: 480px) {
  .informaiton ul .e-plus {
    width: 100%;
    height: 100%;
    border-radius: 10px 0 0 10px;
    padding: 12px 10px;
    border-bottom: 3px solid #ee5ba0;
    border-left: 3px solid #ee5ba0;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 0.14em;
  }
}
.informaiton ul .e-plus img {
  width: 32px;
  height: auto;
}
@media screen and (min-width: 480px) {
  .informaiton ul .e-plus img {
    width: 36px;
    margin: 0 0 4px;
  }
}
@media screen and (min-width: 480px) {
  .informaiton ul .e-plus p {
    writing-mode: vertical-rl;
  }
}
.informaiton ul .e-plus p span {
  display: none;
}
@media screen and (min-width: 480px) {
  .informaiton ul .e-plus p span {
    display: inline-block;
  }
}
@media screen and (min-width: 480px) {
  .informaiton ul .e-plus:hover {
    border-top: 3px solid #ffffff;
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    background: #ee5ba0;
  }
}
.informaiton ul .fb {
  border-top: 3px solid #3779ea;
}
.informaiton ul .fb #Facebook {
  fill: #3779ea;
}
.informaiton ul .tw {
  border-top: 3px solid #1da1f2;
}
.informaiton ul .tw #Twitter {
  fill: #1da1f2;
}
.informaiton ul .scroll-top div:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-top: solid 3px;
  border-right: solid 3px;
  transform: rotate(-45deg) translateX(-25%) translateY(25%);
  color: #fff;
}

main {
  margin: 80px 0 0;
}

.visual-header {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: 125vw;
  background: #8e1d1a linear-gradient(#741613 0%, rgba(96, 46, 2, 0) 50%) fixed 0 80px;
}

.star {
  position: fixed;
  width: 100%;
  top: 80px;
  left: 0;
  pointer-events: none;
  z-index: 1;
}
.star .pc {
  display: none;
}
.star .sp {
  display: block;
}
@media screen and (min-width: 480px) {
  .star .pc {
    display: block;
  }
  .star .sp {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .star {
    z-index: 3;
  }
}
.star img {
  width: 100%;
  height: auto;
}

.main_logo {
  position: relative;
  width: 286px;
  padding: 50px 0 65.8px;
  margin: 0 auto;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .main_logo {
    width: 44.68%;
  }
}
.main_logo img {
  width: 100%;
  height: auto;
}

.contents {
  position: relative;
  width: 100%;
  z-index: 2;
  background: transparent;
  color: #3c5166;
}
.contents nav,
.contents section {
  background: #ffffff;
}
.contents .contents-top {
  width: 100%;
}
.contents .contents-top img {
  width: 100%;
  height: auto;
}

.contents-nav {
  width: 100%;
  padding: 30px 20px 80px;
  color: #8e1d1a;
  font-size: 1.6rem;
  line-height: 1.6em;
}
.contents-nav ul {
  width: 100%;
  text-align: center;
}
.contents-nav ul li {
  border-top: 1px solid #ccc;
  padding: 10px 0;
}
.contents-nav ul li:last-child {
  border-bottom: 1px solid #ccc;
}
.contents-nav ul li:hover {
  color: #dc1e1a;
}
@media screen and (min-width: 640px) {
  .contents-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .contents-nav ul li {
    border-top: none;
    border-right: 1px solid #ccc;
    padding: 0 26px;
    margin: 0 0 10px;
  }
  .contents-nav ul li:nth-child(6) {
    border-right: none;
    padding: 0 25px;
  }
  .contents-nav ul li:last-child {
    border-bottom: none;
    border-right: none;
  }
  .contents-nav span {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .contents-nav ul {
    max-width: 588px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1281px) {
  .contents-nav ul {
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .contents-nav ul li:nth-child(6) {
    border-right: 1px solid #ccc;
    padding: 0 25px;
  }
}

.table-wrap {
  width: 100%;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  .table-wrap {
    max-width: 588px;
    padding: 0;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .table-wrap {
    max-width: 784px;
  }
}
.table-wrap table {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .table-wrap table {
    table-layout: fixed;
  }
}
.table-wrap tr {
  border-top: 1px solid #c0b47e;
  font-size: 1.4rem;
  line-height: 1.4em;
}
@media screen and (min-width: 768px) {
  .table-wrap tr {
    font-size: 1.6rem;
    line-height: 1.6em;
  }
}
.table-wrap tr:last-child {
  border-bottom: 1px solid #c0b47e;
}
.table-wrap th {
  display: block;
  width: 100%;
  padding: 16px 0 6px;
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .table-wrap th {
    position: relative;
    width: 180px;
    padding: 16px 0 16px 20px;
    display: inline-block;
  }
  .table-wrap th span:after {
    content: "\a";
    white-space: pre;
  }
}
.table-wrap th:after {
  content: "：";
}
@media screen and (min-width: 768px) {
  .table-wrap th:after {
    position: absolute;
    top: 16px;
    right: 0;
  }
}
.table-wrap td {
  display: block;
  width: 100%;
  padding: 0 0 16px;
}
@media screen and (min-width: 768px) {
  .table-wrap td {
    display: inline-block;
    padding: 16px 20px 16px 0;
    max-width: 392px;
  }
}
@media screen and (min-width: 1024px) {
  .table-wrap td {
    max-width: 588px;
  }
}
.table-wrap td span {
  margin: 0 0 0 1em;
  text-indent: -1em;
  display: block;
}
.table-wrap p {
  text-align: right;
  font-size: 1.6rem;
  margin: 60px 16px 0 0;
}

.greetings {
  width: 100%;
  padding: 0 20px 100px;
}
.greetings-img {
  text-align: center;
}
.greetings h2 {
  padding: 12px 0 30px;
  text-align: center;
  font-size: 1.8rem;
}
.greetings .text {
  margin: 0 0 10px;
}
@media screen and (min-width: 768px) {
  .greetings .text {
    max-width: 588px;
    margin: 0 auto 10px;
  }
}
@media screen and (min-width: 1024px) {
  .greetings .text {
    max-width: 784px;
  }
}
.greetings .text p {
  text-indent: 1em;
  font-size: 1.4rem;
  line-height: 1.6em;
}
@media screen and (min-width: 768px) {
  .greetings .text p {
    font-size: 1.6rem;
    line-height: 1.8em;
  }
}
.greetings .president {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .greetings .president {
    width: 588px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .greetings .president {
    width: 784px;
  }
}
.greetings .president .president-inner {
  display: flex;
  justify-content: space-between;
  padding: 30px 0 0;
}
@media screen and (min-width: 768px) {
  .greetings .president .president-inner {
    max-width: 361px;
    margin: 0 0 0 auto;
  }
}
.greetings .president .prof {
  width: 60%;
}
.greetings .president .prof .ja {
  line-height: 1.6em;
  font-size: 1.6rem;
  margin: 0 0 10px;
}
.greetings .president .prof .ja span {
  margin: 0 14px 0 0;
  font-size: 1.4rem;
}
.greetings .president .prof .en {
  font-size: 1.2rem;
  line-height: 1.6em;
}
.greetings .president .prof .en span:before {
  content: "\a";
  white-space: pre;
}
@media screen and (min-width: 768px) {
  .greetings .president .prof .en span:before {
    content: none;
  }
}
.greetings .president .image {
  width: 36%;
}
@media screen and (min-width: 768px) {
  .greetings .president .image {
    width: 120px;
  }
}
.greetings .president .image img {
  width: 100%;
  height: auto;
}

.overview {
  width: 100%;
}
.overview h3 {
  font-size: 1.8rem;
  line-height: 1.4em;
  text-align: center;
  margin: 0 0 20px;
}
@media screen and (min-width: 768px) {
  .overview h3 {
    font-size: 2em;
    font-weight: bold;
    margin: 0 0 30px;
  }
}

.artist-profile {
  width: 100%;
}
.artist-profile a:hover {
  color: #3283d1;
}
.artist-profile .conductor {
  background: url(../images/charicon_artist01_bg.jpg) no-repeat;
  width: 100%;
  background-position: center;
  background-size: cover;
}
.artist-profile .oek {
  background: url(../images/charicon_artist02_bg.jpg) no-repeat;
  width: 100%;
  background-position: center;
  background-size: cover;
}
.artist-profile .artists .bg {
  background: url(../images/charicon_artist03_bg.jpg) no-repeat;
  width: 100%;
  background-position: center;
  background-size: cover;
}
.artist-profile .h-en {
  margin: 0 0 80px;
}
.artist-profile .flow {
  position: relative;
  bottom: 30px;
}
.artist-profile .artist {
  padding: 0 20px;
}
.artist-profile .artist .name p:nth-of-type(1) {
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1.4em;
  margin: 0 0 10px;
}
@media screen and (min-width: 768px) {
  .artist-profile .artist .name p:nth-of-type(1) {
    font-size: 1.6rem;
  }
}
.artist-profile .artist .name p:nth-of-type(2) {
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1.4em;
  margin: 0 0 6px;
}
@media screen and (min-width: 768px) {
  .artist-profile .artist .name p:nth-of-type(2) {
    font-size: 2rem;
  }
}
.artist-profile .artist .name p:nth-of-type(3) {
  font-family: "Spartan", sans-serif;
  color: #c0b47e;
  font-size: 1.2rem;
  line-height: 1.4em;
}
@media screen and (min-width: 768px) {
  .artist-profile .artist .name p:nth-of-type(3) {
    font-size: 1.6rem;
  }
}
.artist-profile .conductor .artist .name p:nth-of-type(1) {
  color: #ffffff;
}
.artist-profile .conductor .artist .name p:nth-of-type(2) {
  color: #ffffff;
}
.artist-profile .conductor .artist .name p:nth-of-type(3) {
  color: #c0b47e;
}
@media screen and (min-width: 1024px) {
  .artist-profile .conductor .artist .name {
    padding: 0 0 0 32px;
  }
  .artist-profile .conductor .artist .name p {
    padding: 0;
  }
}
.artist-profile .conductor .artist .introduction p {
  color: #ffffff;
}
@media screen and (min-width: 1024px) {
  .artist-profile .conductor .artist .introduction p {
    padding: 0 0 0 32px;
  }
}
.artist-profile .conductor {
  margin: 0 0 70px;
}
@media screen and (min-width: 768px) {
  .artist-profile .conductor {
    margin: 0 0 110px;
  }
}
@media screen and (min-width: 768px) {
  .artist-profile .conductor .artist {
    max-width: 588px;
    margin: 0 auto 70px;
    padding: 0 0 20px;
  }
}
@media screen and (min-width: 1024px) {
  .artist-profile .conductor .artist {
    max-width: 784px;
  }
}
.artist-profile .orchestra {
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  .artist-profile .orchestra {
    max-width: 588px;
    margin: 0 auto;
    padding: 0;
  }
}
@media screen and (min-width: 1024px) {
  .artist-profile .orchestra {
    max-width: 784px;
  }
}
.artist-profile .orchestra .oek_img {
  width: 100%;
  height: auto;
}
.artist-profile .orchestra .oek_logo {
  width: 220px;
  height: auto;
}
.artist-profile .orchestra p {
  margin: 34px 0 10px;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1.6em;
}
.artist-profile .oek_introduction {
  padding: 0 20px;
  font-size: 1.4rem;
  line-height: 1.6em;
  margin: 20px 0 60px;
}
@media screen and (min-width: 768px) {
  .artist-profile .oek_introduction {
    max-width: 588px;
    margin: 20px auto 60px;
    padding: 0;
  }
}
@media screen and (min-width: 1024px) {
  .artist-profile .oek_introduction {
    max-width: 784px;
    margin: 30px auto 100px;
  }
}
.artist-profile .homepage {
  margin: 20px 0 0;
}
.artist-profile .homepage p:first-child {
  font-size: 1.4rem;
  line-height: 1.6em;
  font-weight: bold;
}
.artist-profile .homepage p:last-child {
  font-family: "Spartan", sans-serif;
  text-decoration: underline;
}
@media screen and (min-width: 1024px) {
  .artist-profile .artist-flex {
    display: flex;
    justify-content: space-between;
    width: 944px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1081px) {
  .artist-profile .artist-flex {
    width: 988px;
  }
}
.artist-profile .artists {
  width: 100%;
  height: auto;
}
.artist-profile .artists .bg {
  position: absolute;
  height: 37.5vw;
  max-height: 249px;
  top: -20px;
}
@media screen and (min-width: 768px) {
  .artist-profile .artists .bg {
    max-height: 249px;
    top: -50px;
  }
}
@media screen and (min-width: 1024px) {
  .artist-profile .artists .bg {
    max-height: 415px;
  }
}
.artist-profile .artists .artist {
  margin: 0 0 40px;
}
@media screen and (min-width: 768px) {
  .artist-profile .artists .artist {
    max-width: 588px;
    margin: 0 auto 40px;
    padding: 0;
  }
}
@media screen and (min-width: 1024px) {
  .artist-profile .artists .artist {
    display: block;
    width: 296px;
    margin: 0;
  }
  .artist-profile .artists .artist .photo {
    margin: 0 0 28px;
  }
  .artist-profile .artists .artist .name {
    margin: 0 0 30px;
    padding: 0;
  }
}
.artist-profile .artists .artist .name p:nth-of-type(1) {
  color: #3c5166;
}
.artist-profile .artists .artist .name p:nth-of-type(2) {
  color: #3c5166;
}
@media screen and (min-width: 768px) {
  .artist-profile .artists .artist .name p:nth-of-type(2) {
    font-weight: bold;
  }
}
.artist-profile .artists .artist .name p:nth-of-type(3) {
  color: #8e1d1a;
}
.artist-profile .artists .artist:last-child {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .artist-profile .artists .artist:last-child {
    max-width: 588px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .artist-profile .artists .artist:last-child {
    max-width: initial;
    margin: 0;
  }
}
.artist-profile .artists-wrap {
  position: relative;
  display: block;
  margin: 20px 0 0;
}
@media screen and (min-width: 768px) {
  .artist-profile .artists-wrap {
    margin: 130px 0 0;
  }
}
@media all and (-ms-high-contrast: none) and (min-width: 1025px) {
  .artist-profile .conductor .artist {
    display: flex;
    width: 100%;
  }
  .artist-profile .conductor .artist > .introduction,
  .artist-profile .conductor .artist > .name {
    display: none;
  }
  .artist-profile .conductor .artist .photo {
    width: 50%;
    height: 500px;
    position: relative;
  }
  .artist-profile .conductor .artist .photo p {
    bottom: -23px;
  }
  .artist-profile .conductor .artist .ie {
    width: 50%;
    display: flex;
    align-items: flex-end;
  }
  .artist-profile .conductor .artist .ie .name {
    align-items: stretch;
    margin: 0 0 30px;
  }
}

@media screen and (min-width: 768px) {
  .program .ribbon {
    margin: 0 auto -9px;
  }
  .program .h-en {
    padding: 19px 0 0;
  }
}
.program h3 {
  font-size: 1.8rem;
  line-height: 1.4em;
  text-align: center;
  margin: 0 0 20px;
}
@media screen and (min-width: 768px) {
  .program h3 {
    font-size: 2em;
    font-weight: bold;
    margin: 0 0 30px;
  }
}
.program .program-wrap {
  background: #e6e6e6 !important;
  padding: 0 0 30px;
}
@media screen and (min-width: 768px) {
  .program .program-wrap {
    padding: 0 0 80px;
  }
}
.program .program-wrap .table-wrap:last-child {
  margin: 60px auto 0;
}

.program-note .text {
  padding: 0 20px;
  font-size: 1.4rem;
  line-height: 1.6em;
  margin: 0 0 10px;
}
@media screen and (min-width: 768px) {
  .program-note .text {
    max-width: 588px;
    margin: 0 auto 10px;
  }
}
@media screen and (min-width: 1024px) {
  .program-note .text {
    max-width: 784px;
  }
}
.program-note .text p {
  margin: 0 0 20px;
}
.program-note .text p:last-child {
  margin: 0;
}
.program-note .name {
  width: 46%;
  margin: 0 0 0 auto;
  padding: 30px 20px 50px 0;
}
@media screen and (min-width: 768px) {
  .program-note .name {
    width: 588px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .program-note .name {
    width: 784px;
  }
}
.program-note .name p:nth-of-type(1) {
  font-size: 1.4rem;
  line-height: 1.4em;
  margin: 0 0 10px;
}
@media screen and (min-width: 768px) {
  .program-note .name p:nth-of-type(1) {
    font-size: 1.6rem;
  }
}
.program-note .name p:nth-of-type(2) {
  font-size: 1.6rem;
  line-height: 1.4em;
  font-weight: bold;
  margin: 0 0 6px;
}
@media screen and (min-width: 768px) {
  .program-note .name p:nth-of-type(2) {
    font-size: 2rem;
  }
}
.program-note .name p:nth-of-type(3) {
  font-family: "Spartan", sans-serif;
  color: #8e1d1a;
  font-size: 1.2rem;
  line-height: 1.4em;
}
@media screen and (min-width: 768px) {
  .program-note .name p:nth-of-type(3) {
    font-size: 1.6rem;
  }
}
.program-note .name-inner {
  width: 144px;
  margin: 0 0 0 auto;
}
.program-note .note {
  padding: 0 20px 40px;
}
@media screen and (min-width: 768px) {
  .program-note .note {
    max-width: 588px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .program-note .note {
    max-width: 784px;
  }
}
.program-note .note .note-title {
  position: relative;
}
.program-note .note .note-title h3 {
  font-size: 1.6rem;
  line-height: 1.6em;
  font-weight: bold;
  border-bottom: 3px solid #3c5166;
  padding: 0 0 8px;
}
@media screen and (min-width: 768px) {
  .program-note .note .note-title h3 {
    font-size: 1.8em;
    font-weight: bold;
  }
}
.program-note .note .note-title h3 span:before {
  content: "\a";
  white-space: pre;
}
@media screen and (min-width: 1024px) {
  .program-note .note .note-title h3 span:before {
    content: none;
  }
}
.program-note .note .note-title .tip {
  position: absolute;
  bottom: 14px;
  right: 16px;
}
.program-note .note .note-title .tip:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: solid 3px;
  border-right: solid 3px;
  color: #3c5166;
  transform: rotate(135deg) translateX(-25%) translateY(25%);
  transition-duration: 0.2s;
}
.program-note .note .note-title .active.tip:after {
  transform: rotate(-45deg) translateX(-25%) translateY(25%);
}
.program-note .note .note-title:hover h3 {
  color: #3283d1;
  text-decoration: underline;
}
.program-note .note .text {
  background: #f5f5f5;
  padding: 20px;
  display: none;
}
@media screen and (min-width: 768px) {
  .program-note .note .text {
    padding: 30px;
  }
}
.program-note .note .text p {
  margin: 0 0 10px;
}
.program-note .note .text p:last-child {
  margin: 0;
}
.program-note .note .text .movement,
.program-note .note .text .movement:last-child {
  margin: 0 0 10px 4.5em;
  text-indent: -4.5em;
}
.program-note .note .text .movement:last-child {
  margin: 0 0 0 4.5em;
}
.program-note .note:last-child {
  padding: 0 20px;
}

.history .bg {
  background: url(../images/charicon_history_bg.jpg) no-repeat;
  width: 100%;
  background-position: center;
  background-size: cover;
  padding: 0 0 10px;
}
@media screen and (min-width: 1024px) {
  .history .bg {
    padding: 80px 0 100px;
  }
}
.history h2 span:before,
.history .h-en span:before {
  content: "\a";
  white-space: pre;
}
@media screen and (min-width: 768px) {
  .history h2 span:before,
  .history .h-en span:before {
    content: none;
  }
}
@media screen and (min-width: 768px) {
  .history .h-en {
    margin: 0;
    padding: 19px 0 40px;
    background: #ffffff;
    margin: 0 auto;
    width: calc(100% - 40px);
  }
}
@media screen and (min-width: 1024px) {
  .history .h-en {
    max-width: 944px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .history .ribbon {
    margin: 0 auto -9px;
  }
}
.history .chronology {
  width: calc(100% - 40px);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 0 0 20px;
}
@media screen and (min-width: 768px) {
  .history .chronology {
    padding: 0 0 80px;
  }
}
@media screen and (min-width: 1024px) {
  .history .chronology {
    max-width: 944px;
  }
}
.history .chronology .chronology-item {
  border-top: 1px solid #c0b47e;
  padding: 16px 14px;
}
@media screen and (min-width: 768px) {
  .history .chronology .chronology-item {
    max-width: 588px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .history .chronology .chronology-item {
    max-width: 784px;
    display: flex;
  }
}
.history .chronology .chronology-item .year {
  color: #c0b47e;
  font-family: "Spartan", sans-serif;
  font-size: 2.4rem;
  line-height: 1.8em;
  margin: 0 0 10px;
}
@media screen and (min-width: 1024px) {
  .history .chronology .chronology-item .year {
    margin: 0 77px 10px 0;
  }
}
.history .chronology .chronology-item .event {
  font-size: 1.4rem;
  line-height: 1.6em;
  margin: 0 0 20px;
}
@media screen and (min-width: 768px) {
  .history .chronology .chronology-item .event {
    font-size: 1.6rem;
  }
}
.history .chronology .chronology-item .img-area {
  display: flex;
  flex-wrap: wrap;
}
.history .chronology .chronology-item .img-area .vertical {
  width: 105px;
}
.history .chronology .chronology-item .img-area .side {
  width: 210px;
}
.history .chronology .chronology-item .img-area .item {
  margin: 0 0 10px;
}
@media screen and (min-width: 768px) {
  .history .chronology .chronology-item .img-area .item:first-child {
    margin: 0 20px 0 0;
  }
}
.history .chronology .chronology-item .img-area .item:last-child {
  margin: 0;
}
.history .chronology .chronology-item .img-area img {
  width: auto;
  height: 148px;
}
.history .chronology .chronology-item .img-area p {
  font-size: 1.4rem;
  line-height: 1.4em;
  margin: 6px 0 0;
}
@media screen and (min-width: 1024px) {
  .history .chronology .chronology-item .img-area p {
    line-height: 1.6em;
  }
}
.history .chronology .chronology-item:last-child {
  border-bottom: 1px solid #c0b47e;
}
.history .chronology .chronology-item:last-child .event {
  margin: 0;
}

.charity .text,
.howto .text {
  padding: 0 20px;
  margin: 0 0 30px;
}
@media screen and (min-width: 768px) {
  .charity .text,
  .howto .text {
    padding: 0;
    max-width: 588px;
    margin: 0 auto 60px;
  }
}
@media screen and (min-width: 1024px) {
  .charity .text,
  .howto .text {
    max-width: 784px;
  }
}
.charity .text p,
.howto .text p {
  margin: 0 0 10px;
  font-size: 1.4rem;
  line-height: 1.6em;
}
.charity .text .link,
.howto .text .link {
  color: #8e1d1a;
  text-decoration: underline;
  line-height: 1.6em;
}
.charity .text .link:hover,
.howto .text .link:hover {
  color: #dc1e1a;
}
.charity .text p:last-child,
.howto .text p:last-child {
  margin: 0;
}
.charity aside,
.charity .contact,
.howto aside,
.howto .contact {
  width: 93.75%;
  border: 1px solid #c0b47e;
  margin: 0 auto;
  padding: 10px;
}
@media screen and (min-width: 480px) {
  .charity aside,
  .charity .contact,
  .howto aside,
  .howto .contact {
    padding: 20px;
  }
}
@media screen and (min-width: 768px) {
  .charity aside,
  .charity .contact,
  .howto aside,
  .howto .contact {
    max-width: 588px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .charity aside,
  .charity .contact,
  .howto aside,
  .howto .contact {
    max-width: 784px;
  }
}
.charity aside h3,
.charity .contact h3,
.howto aside h3,
.howto .contact h3 {
  font-size: 1.6rem;
  line-height: 1.4em;
  font-weight: bold;
  margin: 0 0 20px;
}
@media screen and (min-width: 768px) {
  .charity aside h3,
  .charity .contact h3,
  .howto aside h3,
  .howto .contact h3 {
    font-size: 2em;
    margin: 0 0 30px;
  }
}
.charity aside .comment,
.charity .contact .comment,
.howto aside .comment,
.howto .contact .comment {
  font-size: 1.4rem;
  line-height: 1.6em;
  margin: 0 0 10px;
}
.charity aside .comment a:hover,
.charity .contact .comment a:hover,
.howto aside .comment a:hover,
.howto .contact .comment a:hover {
  color: #3283d1;
}
.charity aside a,
.charity .contact a,
.howto aside a,
.howto .contact a {
  font-family: "Spartan", sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
}
.charity aside .charity-photo,
.charity .contact .charity-photo,
.howto aside .charity-photo,
.howto .contact .charity-photo {
  text-align: right;
  font-size: 1.4rem;
  line-height: 1.6em;
  margin: 0 0 20px;
}
@media screen and (min-width: 1024px) {
  .charity aside .flex,
  .charity .contact .flex,
  .howto aside .flex,
  .howto .contact .flex {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1024px) {
  .charity aside .charity-txt,
  .charity .contact .charity-txt,
  .howto aside .charity-txt,
  .howto .contact .charity-txt {
    width: 356px;
  }
}
.charity aside .charity-img,
.charity .contact .charity-img,
.howto aside .charity-img,
.howto .contact .charity-img {
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 1024px) {
  .charity aside .charity-img,
  .charity .contact .charity-img,
  .howto aside .charity-img,
  .howto .contact .charity-img {
    width: 356px;
  }
}
.charity aside .charity-img div,
.charity .contact .charity-img div,
.howto aside .charity-img div,
.howto .contact .charity-img div {
  width: 49.4%;
}
@media screen and (min-width: 1024px) {
  .charity aside .charity-img div,
  .charity .contact .charity-img div,
  .howto aside .charity-img div,
  .howto .contact .charity-img div {
    width: 173px;
  }
}
.charity aside .charity-img div img,
.charity .contact .charity-img div img,
.howto aside .charity-img div img,
.howto .contact .charity-img div img {
  width: 100%;
  height: auto;
}
.charity aside .charity-img div p,
.charity .contact .charity-img div p,
.howto aside .charity-img div p,
.howto .contact .charity-img div p {
  font-size: 1.4rem;
  line-height: 1.4em;
  margin: 6px 0 0;
}

.howto .gp {
  display: flex;
  padding: 0 20px;
  margin: 22px 0 30px;
  font-size: 1.4rem;
  line-height: 1.6em;
}
@media screen and (min-width: 768px) {
  .howto .gp {
    padding: 0;
    max-width: 588px;
    margin: 60px auto;
  }
}
@media screen and (min-width: 1024px) {
  .howto .gp {
    max-width: 784px;
  }
}
.howto .gp .gp_img {
  margin: 0 20px 0 0;
}
.howto .gp .gp_img img {
  width: 60px;
  height: auto;
}
@media screen and (min-width: 480px) {
  .howto .gp .gp_txt span:before {
    content: "\a";
    white-space: pre;
  }
}

footer {
  position: relative;
  width: 100%;
  z-index: 2;
}
footer .fotter-top {
  background: #ffffff;
}
footer .fotter-top img {
  width: 100%;
  height: auto;
}
footer .sponsor {
  width: 100%;
  background: #e6e4d8;
  padding: 18px 0 28px;
  color: #64583b;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.7em;
}
@media screen and (min-width: 1024px) {
  footer .sponsor {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1024px) {
  footer .sponsor .inner {
    display: flex;
    justify-content: center;
  }
}
footer .sponsor .list {
  margin: 0 0 20px;
}
@media screen and (min-width: 1024px) {
  footer .sponsor .list {
    margin: 0 1em 0 0;
    display: flex;
  }
}
footer .sponsor .list p:first-child {
  font-weight: bold;
}
@media screen and (min-width: 1024px) {
  footer .sponsor .list p:first-child {
    font-weight: normal;
  }
}
@media screen and (min-width: 1024px) {
  footer .sponsor .list p:first-child:after {
    content: "／";
  }
}
@media screen and (min-width: 1024px) {
  footer .sponsor .list p:nth-child(2):after,
  footer .sponsor .list p:nth-child(3):after,
  footer .sponsor .list p:nth-child(4):after {
    content: "、";
  }
}
@media screen and (min-width: 1024px) {
  footer .sponsor .list p:last-child:after {
    content: none;
  }
}
footer .sponsor .list:last-child {
  margin: 0;
}
footer .siteinfo {
  width: 100%;
  background: #000;
  padding: 0;
  border-top: 4px solid #c0b47e;
}
@media screen and (min-width: 1024px) {
  footer .siteinfo {
    padding: 40px 0 0;
  }
}
footer .siteinfo .inner {
  display: block;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  footer .siteinfo .inner {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 30px;
  }
}
footer .siteinfo .inner .logo {
  padding: 20px 0;
}
@media screen and (min-width: 1024px) {
  footer .siteinfo .inner .logo {
    padding: 0;
    margin: 0;
  }
}
footer .siteinfo .inner .siteinfo-link ul {
  display: block;
}
@media screen and (min-width: 1024px) {
  footer .siteinfo .inner .siteinfo-link ul {
    display: flex;
  }
}
footer .siteinfo .inner .siteinfo-link ul li {
  color: #fff;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid #999;
  font-size: 1.4rem;
}
@media screen and (min-width: 1024px) {
  footer .siteinfo .inner .siteinfo-link ul li {
    margin: 0;
    border-top: none;
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 1024px) {
  footer .siteinfo .inner .siteinfo-link ul li:after {
    content: "　／　";
  }
}
footer .siteinfo .inner .siteinfo-link ul li:last-child {
  margin: 0;
}
@media screen and (min-width: 1024px) {
  footer .siteinfo .inner .siteinfo-link ul li:last-child {
    border: 0;
  }
}
@media screen and (min-width: 1024px) {
  footer .siteinfo .inner .siteinfo-link ul li:last-child:after {
    content: none;
  }
}
footer .copyright {
  width: 100%;
  background: #000;
  color: #cccccc;
  text-align: center;
  font-size: 1.2rem;
  padding: 19px 0 61px;
  border-top: 1px solid #999;
  font-family: "Spartan", sans-serif;
}
@media screen and (min-width: 1024px) {
  footer .copyright {
    border: 0;
    text-align: right;
  }
  footer .copyright p {
    width: 944px;
    margin: 0 auto;
  }
}