@charset 'utf-8';
/* =========================================================
 /artist/index.css
========================================================= */
/* ---------------------------------------------------------
 #contents
--------------------------------------------------------- */
#contents-hdr {
  background: url(/assets/images/artist/bg-page-ttl.png) center center;
  height: 100px;
  margin-bottom: 60px;
  }

  /* ----- .page-ttl ----- */
  .page-ttl { text-align: center; }

#contents-body .inner {
  display: flex;
  justify-content: space-between;
  }


/* #sidebar
--------------------------------------------------------- */
#sidebar { width: 260px; }

/* ----- .search-box ----- */
.search-box {
  margin-bottom: 20px;
  }
  #side-search { position: relative; }
    #side-search input[type="text"] {
      font-size: 14px;
      width: 100%;
      padding: 11px 40px 11px 15px;
      border: 1px solid #ccc;
      border-radius: 20px;
      }
    #side-search input[type="image"] {
      box-sizing: content-box;
      padding: 13px;
      position: absolute;
      top: 0;
      right: 0;
      }



/* #main
--------------------------------------------------------- */
#main { width: calc(100% - 300px); }
/* ----- .artists ----- */
.artists {
  padding: 0;
  margin-bottom: 60px;
  }
  .artists .section-hdr { margin-bottom: 0; }
    .artists .section-ttl {
      text-align: left;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      position: relative;
      }
    .artists .section-ttl::after {
      content: "";
      display: block;
      width: 100px;
      height: 1px;
      background: #aa0019;
      position: absolute;
      left: 0;
      bottom: -1px;
      }
    .artist-list {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      }
      .artist {
        width: 164px;
        margin: 30px 0 0 20px;
        }
      .artist:nth-child(5n+1) { margin-left: 0; }
        .artist .thumb-wrap { margin: 0 0 10px; }
          .artist .thumb-wrap a {
            display: block;
            position: relative;
            }
          .artist .thumb-wrap a::before,
          .artist .thumb-wrap a::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transition: all 0.3s;
            }
          .artist .thumb-wrap a::before {
            border-top: 3px solid #aa0019;
            border-bottom: 3px solid #aa0019;
            transform: scale(0, 1);
            }
          .artist .thumb-wrap a::after {
            border-left: 3px solid #aa0019;
            border-right: 3px solid #aa0019;
            transform: scale(1, 0);
            }
          .artist .thumb-wrap a:hover { opacity: 1; }
          .artist .thumb-wrap a:hover::before,
          .artist .thumb-wrap a:hover::after { transform: scale(1, 1); }
        /* .artist-name */
        .artist p.artist-name { margin-bottom: 0; }
        .artist p.artist-name a { text-decoration: underline; }
        .artist p.artist-name .en {
          font-size: 12px;
          font-style: italic;
          display: block;
          }




/* =========================================================
@meida min-width 750px
========================================================= */
@media screen and (min-width: 750px) {
/* accordion
--------------------------------------------------------- */
.accordion-wrap { display: block; }
.accordion-btn { display: none; }


/* #sidebar
--------------------------------------------------------- */
/* ----- .artists-nav ----- */
/* .side-ttl */
.side-ttl { display: none; }
/* .artists-list */

/* .artists-list */
#sidebar .artists-list {
  display: block;
  border-top: 1px dashed #ddd;
  }
  #sidebar .artists-item {
    width: 100%;
    margin-bottom: 0;
    border-bottom: 1px dashed #ddd;
    }
    #sidebar .artists-item a {
      background: #fff url(/assets/images/common/icon-arrow-right-red.png) 10px center no-repeat;
      font-size: 16px;
      padding-left: 30px;
      }
    #sidebar .artists-item a:hover {
      background-color: #fcebee;
      color: #333;
      text-decoration: none;
      opacity: 1;
      }
    #sidebar .artists-item a::before,
    #sidebar .artists-item a::after {
      display: none;
      }
      #sidebar .artists-item span {}

}




/* =========================================================
@meida 750px
========================================================= */
@media screen and (max-width: 750px) {
/* ---------------------------------------------------------
 #contents
--------------------------------------------------------- */
#contents-hdr {
  background: url(/assets/images/artist/bg-page-ttl@2x.png) center center;
  background-size: 375px 100px;
  margin-bottom: 0;
  }

  /* ----- .page-ttl ----- */
  #contents-hdr .page-ttl img {
    width: auto;
    height: 100px;
    }

#contents-body .inner { display: block; }


/* #sidebar
--------------------------------------------------------- */
#sidebar {
  width: auto;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5000;
  }

/* ----- .search-box ----- */
.search-box {
  background: #f4f4f4;
  margin-bottom: 0;
  padding: 20px 30px;
  }
  #side-search { position: relative; }
    #side-search input[type="text"] {
      font-size: 16px;
      padding: 10px 40px 10px 15px;
      border: 1px solid #ccc;
      border-radius: 20px;
      }
    #side-search input[type="image"] {
      box-sizing: content-box;
      padding: 13px;
      position: absolute;
      top: 0;
      right: 0;
      }

/* ----- .artists-nav ----- */
.artists-nav { background: #fff; }
/* .side-ttl */
.side-ttl {
  font-size: 19px;
  text-align: center;
  padding: 11px 0;
  display: block;
  }
/* .artists-list */
#sidebar .artists-list { padding: 0 10px; }
#sidebar .artists-item a { height: 45px; }
#sidebar .artists-item:last-child { width: 48.63013%; }
#sidebar .artists-item:last-child span { width: 68%; }



/* #main
--------------------------------------------------------- */
#main {
  width: auto;
  padding-top: 202px;
  }

/* ----- .artists ----- */
.artists { margin-bottom: 40px; }
  .artists .section-hdr { margin-bottom: -13px; }
    .artists .section-ttl {
      padding-bottom: 15px;
      }
      #contents .artists .section-ttl img {
        width: 203px;
        height: 40px;
      }
    .artists .section-ttl::after {
      width: 50px;
      left: 50%;
      transform: translateX(-50%);
      }
      .artist {
        width: 48.455%;
        margin: 28px 0 0 2.8169%;
        }
      .artist:nth-child(5n+1) { margin-left: 2.8169%; }
      .artist:nth-child(2n+1) { margin-left: 0; }
        .artist .thumb-wrap { margin: 0 0 5px; }
          .artist .thumb-wrap a::before,
          .artist .thumb-wrap a::after { display: none; }

}