@charset "UTF-8";

  .course-info {
    padding-bottom:3rem;
  }
  .course-info h2{
    font-weight:700;
    color:#000;
    font-size:2.8rem;
    letter-spacing:0.1rem;
    margin-bottom:0.3rem;
  }
  .course-info h5 {
    font-size:0.7rem;
  }
  

  .content h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:700;
    font-size:2.1rem;
    letter-spacing:0.1rem;
    margin-bottom:0.3rem;
  }
  .content h5 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size:0.9rem;
    margin-bottom:2rem;
    font-weight:bold;
    letter-spacing:0.1rem;
  }

  .artist-title h3,
  .artist-title h5 {
    color:#c7161d;
  }

  .artist-title h3 {
    border-bottom:1px solid #c7161d;
    padding-bottom:0.5rem;
    margin-bottom:0.5rem;
  }

  .artist-badge,
  .artist-p-badge,  
  .voice-badge,
  .va-a-badge,
  .staff-badge {
    position:absolute;
    left:1rem;
    bottom:1.6rem;
  }

  .artist-badge h2,
  .artist-p-badge h2,
  .voice-badge h2,
  .va-a-badge h2,
  .staff-badge h2{
    font-weight:700;
    font-size:1.3rem;
    margin-bottom:0.7rem;
    text-align:left;
  }

  .artist-badge h2 small,
  .artist-p-badge h2 small,
  .voice-badge h2 small,
  .va-a-badge h2 small,
  .staff-badge h2 small {
    background-color:red;
    font-size:0.8rem;
    color:#fff;
    font-weight:900;
    line-height:230%;
    padding:0.2rem 0.3rem;
    font-family: 'Montserrat', sans-serif;
  }

  .artist-badge h2 span{
    font-family: 'Montserrat', sans-serif;
    padding:0;
    background-color:transparent;
    color:#fff;
  }

  .artist-p-badge h2 span{
    font-family: 'Montserrat', sans-serif;
    padding:0;
    background-color:transparent;
    color:#fff;
  }

  .voice-badge h2 span,
  .va-a-badge h2 span{
    font-family: 'Montserrat', sans-serif;
    padding:0;
    background-color:transparent;
    color:#fff;
  }

  .staff-badge h2 span{
    font-family: 'Montserrat', sans-serif;
    padding:0;
    background-color:transparent;
    color:#fff;
  }

  .artist-badge h3,
  .artist-p-badge h3,
  .voice-badge h3,
  .va-a-badge h3,
  .staff-badge h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight:700;
    font-size:0.9rem;
    text-align:left;
  }

  .artist-badge h3 span {
    padding:0.1rem 0.5rem;
    color:#fff;
  }

  .artist-p-badge h3 span {
    padding:0.1rem 0.5rem;
    background-color:#000;
    color:#fff;
  }

  .voice-badge h3 span,
  .va-a-badge h3 span {
    padding:0.1rem 0.5rem;
    background-color:#000;
    color:#fff;
  }

  .staff-badge h3 span {
    padding:0.1rem 0.5rem;
    background-color:#000;
    color:#fff;
  }

  .voice_actor-title h3,
  .voice_actor-title h5,
  .va-a-title h3,
  .va-a-title h5 {
    color:#e75297;
  }

  .voice_actor-title h3,
  .va-a-title h3 {
    border-bottom:1px solid #e75297;
    padding-bottom:0.5rem;
    margin-bottom:0.5rem;
  }

  .staff-title h3,
  .staff-title h5 {
    color:#008cd5;
  }

  .staff-title h3 {
    border-bottom:1px solid #008cd5;
    padding-bottom:0.5rem;
    margin-bottom:0.5rem;
  }

  .title-copy {
    font-weight:700;
    margin-bottom:2rem;
    font-size:1.1rem;
  }

  .bread-bg {
    color:#fff;
    padding:0.5rem 0 2rem 0;
    font-size:0.8rem;
  }

  .bread-bg a {
    color:#fff;
  }

  .bread-bg02 {
    padding:0.5rem 0 2rem 0;
    font-size:0.8rem;
  }

  .bread-bg02 a {
    color:#000;
  }

  .h3-introbox {
    background-color:#000;
    padding-bottom:0rem;
  }
  .h3-intro-text {
    color:#fff;
    font-size:0.8rem;
    line-height:180%;
    text-align:center;
    padding:0;
  }

  ul.course {
    padding:0;
    margin-top:1.5rem;
    list-style: none;
  }
  ul.course li {
    padding-left: 20px;
    line-height: 1.6em;
    background-size: 14px auto;
  }

  ul.course-a li:before {
    content:"■ ";
    color:#c7161d;
  }

  ul.course-s li:before {
    content:"■ ";
    color:#008cd5;
  }

  ul.course li span {
    background-color:red;
    color:#fff;
    font-weight:900;
    padding:0rem 0.5rem;
    font-size:0.6rem;
  }


  h3.l-vocal span{
    background-color:#d7121b;
  }

  h3.l-guitar span{
    background-color:#0028d2;
  }

  h3.l-bass span{
    background-color:#009119;
  }

  h3.l-drums span{
    background-color:#9100a0;
  }

  h3.l-ssw span{
    background-color:#00a081;
  }

  h3.l-sound_creator span{
    background-color:#f58369;
  }

  h3.l-artist_general span{
    background-color:#91d31f;
  }

  h3.l-dance_performer span,
  h3.l-dance_performance span{
    background-color:#ff8c00;
  }

  h3.l-vocal_performer span{
    background-color:#eb3155;
  }

  h3.l-actor_artist span{
    background-color:#171c82;
  }

  h3.l-voice_artist span,
  h3.l-va-a span {
    background-color:#e646aa;
  }

  h3.l-pa span{
    background-color:#00a0fa;
  }

  h3.l-sound_designer span,
  h3.l-sd-sr span {
    background-color:#a18914;
  }

  h3.l-lighting span{
    background-color:#f79214;
  }

  h3.l-stage_general span{
    background-color:#0f3864;
  }

  h3.l-staff_general span{
    background-color:#008373;
  }

  h3.l-artist_staff span{
    background-color:#e3007f;
  }

  .course-icon {
    position:relative;
  }

  .course-icon img {
    border-radius: 10px;
  }

  .arrowarrow {
    width:25px;
    position: absolute;
    right:1rem;
    bottom:1rem;
  }

  ul.course-vocal li:before {
    color: #d7121b;
  }

  ul.course-guitar li:before {
    color: #0028d2;
  }

  ul.course-bass li:before {
    color: #009119;
  }

  ul.course-drums li:before {
    color: #9100a0;
  }

  ul.course-ssw li:before {
    color: #00a081;
  }

  ul.course-sound_creator li:before {
    color: #f58369;
  }

  ul.course-pa li:before {
    color: #00a0fa;
  }

  ul.course-artist_staff li:before {
    color: #e3007f;
  }

  ul.course-dance_performance li:before {
    color: #ff8c00;
  }

  ul.course-voice li:before,
  ul.course-va-a li:before   {
    color: #e646aa;
  }


  @media screen and (max-width:599px)  {  

    .title-copy {
      font-size:0.9rem;
    }
    
    .content h3 {
      font-size:1.5rem; 
    }

    .content h3 span {
      font-size:1.4rem;
    }

    .content h5 {
      font-size:0.9rem;
    } 
    
    .course-info {
      background:none;
      padding-bottom:0;
    }

    .content-base {
      margin-top:0px;
    }

    .h3-intro-text {
      text-align:left;
      padding:1rem;
    }
    .h3-introbox {
      padding-bottom:0rem;
    }

    ul.course {
      margin-top:0.7rem;
      list-style: none;
      padding-left:1rem;
      margin-bottom:0.7rem;
    }
    ul.course li {
      padding-left: 0;
      line-height: 1.6em;
      background-size: 0.7rem auto;
      font-size:0.8rem;
    }

    .artist-badge,
  .artist-p-badge,  
  .voice-badge,
  .va-a-badge,
  .staff-badge {
    position:absolute;
    left:0.5rem;
    bottom:0.5rem;
  }

  .artist-badge h2 span,
  .artist-p-badge h2 span,
  .voice-badge h2 span,
  .va-a-badge h2 span,
  .staff-badge h2 span{
    font-size:0.9rem;
  }

  .artist-badge h2,
  .artist-p-badge h2,
  .voice-badge h2,
  .va-a-badge h2,
  .staff-badge h2 {
    margin-bottom:0;
    line-height:80%;
  }

  .artist-badge h3 span,
  .artist-p-badge h3 span,
  .voice-badge h3 span,
  .va-a-badge h3 span  
  .staff-badge h3  span{
    font-size:0.4rem;
  }

  .artist-badge h3 span,
  .artist-p-badge h3 span,
  .voice-badge h3 span,
  .va-a-badge h3 span,
  .staff-badge h3 span {
    padding:0.1rem 0.2rem;
  }

  .arrowarrow {
    width:17px;
    right:0.5rem;
    bottom:0.5rem;
  }
 
  }


