@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
#intro {
  position: relative; }
  @media only screen and (min-width: 1024px) {
  #intro {
flex-wrap: nowrap;
align-items: flex-start;
}
}
  #intro .w-left-movie {
    width: 100%;
    height: calc(100vh - 64px);
    overflow: hidden;
    background-position: center;
    background-size: cover;
    position: relative; }
    #intro .w-left-movie .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    #intro .w-left-movie video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none; }
  #intro .wrapper {
    display: none; }
    @media only screen and (min-width: 1024px) {
      #intro .wrapper {
        display: -webkit-flex;
        display: flex;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
      flex-shrink: 0; } }
    #intro .wrapper .w-center-logo {
      position: relative;
      width: 30%;
      max-width: 300px;
      height: calc(100vh - 64px); }
      #intro .wrapper .w-center-logo .wewalktogether {
        position: absolute;
        top: 50%;
        left: 0%;
        -webkit-transform: translate(0%, -50%);
        transform: translate(0%, -50%); }
  #intro .w-right-news {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 70%;
    padding: 10px 40px 0 0;
    position: relative;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-content: flex-end;
    align-content: flex-end; }
    @media only screen and (min-width: 769px) and (max-width: 1024px) {
      #intro .w-right-news {
        padding: 0 24px 0 0; } }
    #intro .w-right-news .container {
      /*flex: 1;*/
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: flex-end;
      align-items: flex-end;
      /*-webkit-align-items: center;*/
      /*align-items: center;*/ }
      #intro .w-right-news .container ul {
        width: 100%;
        padding: 0px; }
        #intro .w-right-news .container ul li {
          width: 50%;
          margin: 0 0 24px;
          font-family: serif;
          font-size: 20px;
          font-size: 1.18rem; }
          @media only screen and (min-width: 769px) and (max-width: 1024px) {
            #intro .w-right-news .container ul li {
              font-size: 16px;
              font-size: 1rem; } }
          #intro .w-right-news .container ul li:last-child {
            margin: 0; }
          .art #intro .w-right-news .container ul li {
            width: 40%; }
            .art #intro .w-right-news .container ul li:nth-child(2n) {
              width: 60%; }
          #intro .w-right-news .container ul li a {
            display: inline-block;
            /*padding-bottom: 4px;*/
            position: relative; }
            #intro .w-right-news .container ul li a::after {
              background-color: #333;
              bottom: 0;
              content: '';
              display: block;
              height: 1px;
              left: 0;
              position: absolute;
              transition: .5s all;
              width: 0; }
            #intro .w-right-news .container ul li a:hover::after {
              width: 100%; }
    #intro .w-right-news .general {
      width: 100%;
      margin: 40px 0 0;
      -webkit-align-self: flex-end;
      align-self: flex-end;
      padding-bottom: 8px; }
      #intro .w-right-news .general h2.h-title-02 {
        text-align: left; }
      #intro .w-right-news .general .each_news {
        -webkit-flex-direction: row;
        flex-direction: row; }
        #intro .w-right-news .general .each_news li {
          width: calc(100% / 3 - 20px); }
          #intro .w-right-news .general .each_news li figcaption {
            margin: 8px 0 0 0; }
            #intro .w-right-news .general .each_news li figcaption h1 {
              margin: .3em 0 0 0; }
      #intro .w-right-news .general > p {
        margin: 16px 0 0; }
  #intro .top-img {
    position: relative;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: calc(100vh - 94px); }
    @media only screen and (min-width: 1024px) {
      #intro .top-img {
        width: calc(100% - 520px); } }
    .music#piano #intro .top-img {
      background-image: url(../images/department/music/piano/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#piano #intro .top-img {
          background-image: url(../images/department/music/piano/main.jpg); } }
    .music#vocal #intro .top-img {
      background-image: url(../images/department/music/vocal/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#vocal #intro .top-img {
          background-image: url(../images/department/music/vocal/main.jpg); } }
    .music#orchestral #intro .top-img {
      background-image: url(../images/department/music/orchestral/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#orchestral #intro .top-img {
          background-image: url(../images/department/music/orchestral/main.jpg); } }
    .music#integrated #intro .top-img {
      background-image: url(../images/department/music/integrated/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#integrated #intro .top-img {
          background-image: url(../images/department/music/integrated/main.jpg); } }
    .music#electronicorgan #intro .top-img {
      background-image: url(../images/department/music/electronicorgan/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#electronicorgan #intro .top-img {
          background-image: url(../images/department/music/electronicorgan/main.jpg); } }
    .music#composition #intro .top-img {
      background-image: url(../images/department/music/composition/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#composition #intro .top-img {
          background-image: url(../images/department/music/composition/main.jpg); } }
    .music#therapy #intro .top-img {
      background-image: url(../images/department/music/therapy/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#therapy #intro .top-img {
          background-image: url(../images/department/music/therapy/main.jpg); } }
    .society#seminar #intro .top-img {
      background-image: url(../images/department/society/seminar/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .society#seminar #intro .top-img {
          background-image: url(../images/department/society/seminar/main.jpg); } }
    .nursery#major #intro .top-img {
      background-image: url(../images/department/nursery/major/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#major #intro .top-img {
          background-image: url(../images/department/nursery/major/main.jpg); } }
    .art#oilpainting #intro .top-img {
      background-image: url(../images/department/art/oilpainting/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#oilpainting #intro .top-img {
          background-image: url(../images/department/art/oilpainting/main.jpg); } }
    .art#jpnpainting #intro .top-img {
      background-image: url(../images/department/art/jpnpainting/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#jpnpainting #intro .top-img {
          background-image: url(../images/department/art/jpnpainting/main.jpg); } }
    .art#printmaking #intro .top-img {
      background-image: url(../images/department/art/printmaking/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#printmaking #intro .top-img {
          background-image: url(../images/department/art/printmaking/main.jpg); } }
    .art#sculpture #intro .top-img {
      background-image: url(../images/department/art/sculpture/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#sculpture #intro .top-img {
          background-image: url(../images/department/art/sculpture/main.jpg); } }
    .art#media #intro .top-img {
      background-image: url(../images/department/art/media/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#media #intro .top-img {
          background-image: url(../images/department/art/media/main.jpg); } }
    .art#graphics #intro .top-img {
      background-image: url(../images/department/art/graphics/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#graphics #intro .top-img {
          background-image: url(../images/department/art/graphics/main.jpg); } }
    .art#infoscience #intro .top-img {
      background-image: url(../images/department/art/infoscience/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#infoscience #intro .top-img {
          background-image: url(../images/department/art/infoscience/main.jpg); } }
    .art#fashion #intro .top-img {
      background-image: url(../images/department/art/fashion/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#fashion #intro .top-img {
          background-image: url(../images/department/art/fashion/main.jpg); } }
  #intro .inner {
    position: relative;
    margin: 0 auto; }
    @media only screen and (min-width: 1024px) {
      #intro .inner {
        margin: 0 auto;
        max-width: 800px;
        width: 520px;
        padding: 0 60px; } }
    #intro .inner h1 {
      margin: 0;
      position: absolute;
      bottom: calc(100% + 40px);
      left: -8px;
      z-index: 33; }
      @media only screen and (min-width: 1024px) {
        #intro .inner h1 {
          position: relative;
          bottom: inherit;
          left: inherit; } }
      #intro .inner h1 span {
        color: #FFF;
        padding: 0px 20px;
        text-shadow: 0 0 10px #000;
        display: block; }
        @media only screen and (min-width: 1024px) {
          #intro .inner h1 span {
            text-shadow: none;
            text-indent: -.1em;
            color: #000;
            padding: 10px 0;
            font-size: 40px;
            font-size: 2.5rem;
            line-height: 1.5; } }
        @media only screen and (min-width: 769px) and (max-width: 1024px) {
          #intro .inner h1 span {
            font-size: 32px;
            font-size: 2rem; } }
      #intro .inner h1.fashion span {
        font-size: 24px;
        font-size: 1.5rem; }
    #intro .inner h2 {
      font-size: 20px;
      font-size: 1.25rem;
      padding: 20px 0 0 12px; }
      @media only screen and (min-width: 1024px) {
        #intro .inner h2 {
          padding: 24px 0 0; } }
    #intro .inner div p {
      padding: 0 12px;
      margin: 16px 0 0;
      line-height: 2;
      font-family: serif;
      font-size: 14px;
      font-size: 0.875rem; }
      @media only screen and (min-width: 1024px) {
        #intro .inner div p {
          padding: 0;
          margin: 8px 0 0;
          font-size: 14px;
          font-size: 0.875rem; } }
  #intro .head-img {
    position: relative;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: calc(80vh - 64px); }
    #intro .head-img h1 {
      position: absolute;
      top: 50%;
      left: 8px;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%); }
    .about#president #intro .head-img {
      background-image: url(../images/about/president/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .about#president #intro .head-img {
          background-image: url(../images/about/president/main.jpg);
          height: calc(75vh - 64px); } }
    .about#facilities #intro .head-img {
      background-image: url(../images/about/facilities/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .about#facilities #intro .head-img {
          background-image: url(../images/about/facilities/main.jpg);
          height: calc(75vh - 64px); } }
    .about#policy #intro .head-img {
      background-image: url(../images/about/policy/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .about#policy #intro .head-img {
          background-image: url(../images/about/policy/main.jpg);
          height: calc(75vh - 64px); } }
    .about#regulations #intro .head-img {
      background-image: url(../images/about/regulations/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .about#regulations #intro .head-img {
          background-image: url(../images/about/regulations/main.jpg);
          height: calc(75vh - 64px); } }
    .music#facilities #intro .head-img {
      background-image: url(../images/department/music/facilities/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#facilities #intro .head-img {
          background-image: url(../images/department/music/facilities/main.jpg);
          height: calc(75vh - 64px); } }
    .music#international #intro .head-img {
      background-image: url(../images/department/music/international/main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#international #intro .head-img {
          background-image: url(../images/department/music/international/main.jpg);
          height: calc(75vh - 64px); } }
    .music#specialclass #intro .head-img {
      background-image: url(../images/department/music/specialclass/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#specialclass #intro .head-img {
          background-image: url(../images/department/music/specialclass/main.jpg);
          height: calc(75vh - 64px); } }
    .music#career #intro .head-img {
      background-image: url(../images/department/music/career/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#career #intro .head-img {
          background-image: url(../images/department/music/career/main.jpg);
          height: calc(75vh - 64px); } }
    .music#teachers #intro .head-img {
      background-image: url(../images/department/music/teachers/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#teachers #intro .head-img {
          background-image: url(../images/department/music/teachers/main.jpg);
          height: calc(75vh - 64px); } }
    .music#graduates #intro .head-img {
      background-image: url(../images/department/music/graduates/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .music#graduates #intro .head-img {
          background-image: url(../images/department/music/graduates/main.jpg);
          height: calc(75vh - 64px); } }
    .art#graduates #intro .head-img {
      background-image: url(../images/department/art/graduates/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#graduates #intro .head-img {
          background-image: url(../images/department/art/graduates/main.jpg);
          height: calc(75vh - 64px); } }
    .art#facilities #intro .head-img {
      background-image: url(../images/department/art/facilities/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#facilities #intro .head-img {
          background-image: url(../images/department/art/facilities/main.jpg);
          height: calc(75vh - 64px); } }
    .art#career #intro .head-img {
      background-image: url(../images/department/art/career/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#career #intro .head-img {
          background-image: url(../images/department/art/career/main.jpg);
          height: calc(75vh - 64px); } }
    .art#teachers #intro .head-img {
      background-image: url(../images/department/art/teachers/sp_main.jpg); }
      @media only screen and (min-width: 1025px) {
        .art#teachers #intro .head-img {
          background-image: url(../images/department/art/teachers/main.jpg);
          height: calc(75vh - 64px); } }
    .art#gallery #intro .head-img {
      background-image: url(../images/department/art/gallery/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .art#gallery #intro .head-img {
          background-image: url(../images/department/art/gallery/main.jpg);
          height: calc(75vh - 64px); } }
    .society#facilities #intro .head-img {
      background-image: url(https://placehold.jp/640x500.png?text=img); }
    .society#career #intro .head-img {
      background-image: url(../images/department/society/career/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .society#career #intro .head-img {
          background-image: url(../images/department/society/career/main.jpg);
          height: calc(75vh - 64px); } }
    .society#teachers #intro .head-img {
      background-image: url(../images/department/society/teachers/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .society#teachers #intro .head-img {
          background-image: url(../images/department/society/teachers/main.jpg);
          height: calc(75vh - 64px); } }
    .society#graduates #intro .head-img {
      background-image: url(../images/department/society/graduates/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .society#graduates #intro .head-img {
          background-image: url(../images/department/society/graduates/main.jpg);
          height: calc(75vh - 64px); } }
    .nursery#facilities #intro .head-img {
      background-image: url(../images/department/nursery/facilities/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#facilities #intro .head-img {
          background-image: url(../images/department/nursery/facilities/main.jpg);
          height: calc(75vh - 64px); } }
    .nursery#career #intro .head-img {
      background-image: url(../images/department/nursery/career/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#career #intro .head-img {
          background-image: url(../images/department/nursery/career/main.jpg);
          height: calc(75vh - 64px); } }
    .nursery#teachers #intro .head-img {
      background-image: url(../images/department/nursery/teachers/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#teachers #intro .head-img {
          background-image: url(../images/department/nursery/teachers/main.jpg);
          height: calc(75vh - 64px); } }
    .nursery#graduates #intro .head-img {
      background-image: url(../images/department/nursery/graduates/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#graduates #intro .head-img {
          background-image: url(../images/department/nursery/graduates/main.jpg);
          height: calc(75vh - 64px); } }
    .nursery#practice #intro .head-img {
      background-image: url(../images/department/nursery/practice/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#practice #intro .head-img {
          background-image: url(../images/department/nursery/practice/main.jpg);
          height: calc(75vh - 64px); } }
    .nursery#event_circle #intro .head-img {
      background-image: url(../images/department/nursery/event_circle/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#event_circle #intro .head-img {
          background-image: url(../images/department/nursery/event_circle/main.jpg);
          height: calc(75vh - 64px); } }
    .nursery#training #intro .head-img {
      background-image: url(../images/department/nursery/training/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .nursery#training #intro .head-img {
          background-image: url(../images/department/nursery/training/main.jpg);
          height: calc(75vh - 64px); } }
    .campuslife#club #intro .head-img {
      background-image: url(../images/campuslife/club/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .campuslife#club #intro .head-img {
          background-image: url(../images/campuslife/club/main.jpg);
          height: calc(75vh - 64px); } }
    .campuslife#support #intro .head-img {
      background-image: url(../images/campuslife/support/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .campuslife#support #intro .head-img {
          background-image: url(../images/campuslife/support/main.jpg);
          height: calc(75vh - 64px); } }
    .campuslife#cafeteria #intro .head-img {
      background-image: url(../images/campuslife/cafeteria/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .campuslife#cafeteria #intro .head-img {
          background-image: url(../images/campuslife/cafeteria/main.jpg);
          height: calc(75vh - 64px); } }
    .campuslife#living #intro .head-img {
      background-image: url(../images/campuslife/living/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .campuslife#living #intro .head-img {
          background-image: url(../images/campuslife/living/main.jpg);
          height: calc(75vh - 64px); } }
    .campuslife#housing #intro .head-img {
      background-image: url(../images/campuslife/housing/sp_main.jpg); }
      @media only screen and (min-width: 1024px) {
        .campuslife#housing #intro .head-img {
          background-image: url(../images/campuslife/housing/main.jpg);
          height: calc(75vh - 64px); } }
  #intro .inner-mid {
    width: calc(100% - 16px);
    margin: -60px auto 0;
    padding: 0 16px;
    position: relative;
    background-color: #FFF; }
    @media only screen and (min-width: 1024px) {
      #intro .inner-mid {
        width: 960px;
        margin: -80px auto 0;
        z-index: 20; } }
    #intro .inner-mid h1 {
      position: relative;
      padding: 16px 0 10px;
      text-align: left;
      /*&::after {
      	content: "";
      	width: 50px;
      	height: 2px;
      	position: absolute;
      	left: 0;
      	bottom: 0;
      	-webkit-transform: translate(0);
      			transform: translate(0);
      	bottom: 0;
      	background-color: #E95504;
      }*/ }
      @media only screen and (min-width: 1024px) {
        #intro .inner-mid h1 {
          width: 800px;
          margin: auto;
          padding: 30px 0 10px; } }
    #intro .inner-mid h2 {
      margin: 40px auto 20px;
      line-height: 1.8; }
      @media only screen and (min-width: 1024px) {
        #intro .inner-mid h2 {
          width: 800px;
          margin: 60px auto 20px; } }
    #intro .inner-mid p {
      line-height: 2;
      font-size: 16px;
      font-size: 1rem; }
      @media only screen and (min-width: 1024px) {
        #intro .inner-mid p {
          width: 800px;
          margin: auto; } }
      #intro .inner-mid p:nth-child(2) {
        margin: 60px auto 0; }
  #intro .head-side {
    width: 100%;
    height: 190px;
    margin: 15px auto 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }
    @media only screen and (min-width: 1024px) {
      #intro .head-side {
        height: 430px;
        margin: 0 0 0 auto; } }
  #intro a.type_border {
    margin: 10px 0px 5px; }
    @media only screen and (min-width: 1024px) {
      #intro a.type_border {
        margin: 0 0 5px; } }
  #intro h1.side-title {
    margin: 20px auto 0; }
    @media only screen and (min-width: 1024px) {
      #intro h1.side-title {
        margin: 40px auto 0; } }
  #intro .head-txt {
    width: 100%;
    padding: 70px 8px 20px;
    text-align: center; }
    @media only screen and (min-width: 1024px) {
      #intro .head-txt {
        padding: 60px 0 20px; } }
    #intro .head-txt .h-title-01 {
      position: relative; }
      #intro .head-txt .h-title-01::after {
        content: "";
        width: 50px;
        height: 2px;
        position: absolute;
        left: 50%;
        bottom: -10px;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        background-color: #666666; }
  @media only screen and (min-width: 1024px) {
    .music#piano #intro, .music#vocal #intro, .music#orchestral #intro, .music#integrated #intro, .music#electronicorgan #intro, .music#composition #intro, .music#therapy #intro, .art#oilpainting #intro, .art#jpnpainting #intro, .art#printmaking #intro, .art#sculpture #intro, .art#media #intro, .art#graphics #intro, .art#infoscience #intro, .art#fashion #intro, .society#seminar #intro, .nursery#major #intro {
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center; } }