@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption,
tbody, tfoot, thead, table, label, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  outline: 0;
  vertical-align: baseline;
  list-style: none;
  font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'Meiryo UI',YuGothic,'Yu Gothic','Yu Gothic UI',sans-serif;
  font-weight: 300; }

* {
  box-sizing: border-box; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

html {
  /*font-size: 62.5%;*/ }

header {
  margin-bottom: 0; }

img {
  max-width: 100%; }

a {
  color: inherit;
  text-decoration: none; }
  a:hover {
    color: inherit;
    text-decoration: none; }

input,
textarea,
select {
  font-size: 10px !important; }

input {
  /* Google Chrome, Safari, Opera 15+, Android, iOS */
  /* Firefox 18- */
  /* Firefox 19+ */
  /* IE 10+ */ }
  input:placeholder-shown {
    color: #ddd;
    font-size: 14px; }
  input::-webkit-input-placeholder {
    color: #ddd;
    font-size: 14px; }
  input:-moz-placeholder {
    color: #ddd;
    font-size: 14px;
    opacity: 1; }
  input::-moz-placeholder {
    color: #ddd;
    font-size: 14px;
    opacity: 1; }
  input:-ms-input-placeholder {
    color: #ddd;
    font-size: 14px; }

textarea:placeholder-shown {
  color: #a8a8a8;
  /* Google Chrome, Safari, Opera 15+, Android, iOS */ }
textarea::-webkit-input-placeholder {
  color: #a8a8a8;
  /* Firefox 18- */ }
textarea:-moz-placeholder {
  color: #a8a8a8;
  opacity: 1;
  /* Firefox 19+ */ }
textarea::-moz-placeholder {
  color: #a8a8a8;
  opacity: 1;
  /* IE 10+ */ }
textarea:-ms-input-placeholder {
  color: #a8a8a8; }

/*bootstrap.min.jsの上書き*/
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
  background-color: #56b8b8;
  border: 1px solid #56b8b8; }

.usrimg_c {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  border-radius: 50%; }

.usrimg_s {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; }

.area-header {
  color: #333;
  font-size: 14px; }
  .area-header__inner {
    max-width: 1232px;
    height: 58px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .area-header__text {
    color: #333;
    padding-right: 15px; }

.headermenu {
  color: #333;
  display: flex;
  align-items: center; }
  .headermenu__item a {
    padding: 18px;
    display: inline-block; }
    .headermenu__item a:hover {
      color: #56b8b8; }

.headlogo {
  border-top: 1px solid #ddd; }
  .headlogo__inner {
    max-width: 1300px;
    height: 100px;
    margin: 0 auto;
    padding: 0 50px;
    display: flex;
    align-items: center; }
  .headlogo img {
    width: 243px;
    display: block; }

.area-thumblist {
  padding: 6rem 15px; }
  .area-thumblist.bg_f7f7f7 {
    background-color: #f7f7f7; }
  .area-thumblist__h {
    margin-bottom: 6rem;
    color: #333;
    font-size: 2.4rem;
    line-height: 1;
    text-align: center; }

.headlabel {
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd; }
  .headlabel__inner {
    max-width: 1300px;
    min-height: 100px;
    margin: 0 auto;
    padding: 1rem 5rem;
    display: flex;
    align-items: center; }
  .headlabel__logo {
    margin-right: 20px;
    height: 64px; }
    .headlabel__logo img {
      max-width: unset;
      height: 100%; }
  .headlabel__title {
    margin-right: 30px;
    color: #56b8b8;
    font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'Meiryo UI',YuGothic,'Yu Gothic','Yu Gothic UI',sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 1;
    white-space: nowrap; }
  .headlabel__caption {
    color: #333;
    font-size: 14px; }

.thumblist {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; }
  .thumblist__item {
    width: calc((100% - 60px) / 3);
    margin: 0 30px 36px 0; }
    .thumblist__item:nth-of-type(3n) {
      margin-right: 0; }
  .thumblist__thumb {
    margin-bottom: 14px;
    position: relative;
    background-position: center center;
    background-size: contain; }
    .thumblist__thumb::before {
      content: "";
      padding-top: 60%;
      display: block; }
  .thumblist__text {
    color: #333;
    font-size: 14px;
    line-height: 1.3; }

.area-content {
  padding: 38px 50px 0; }

.search-box {
  margin-bottom: 28px; }
  .search-box__inner {
    max-width: 1200px;
    margin: 0 auto; }
    .search-box form {
      display: flex; }
    .search-box input {
      width: 343px;
      height: 36px;
      margin-right: 20px;
      padding: 0 12px;
      border: 1px solid #ddd;
      border-radius: 2px;
      display: flex;
      align-items: center; }
    .search-box button {
      height: 36px;
      padding: 0 22px;
      background-color: #56b8b8;
      border: none;
      border-radius: 2px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      white-space: nowrap; }
      .search-box button > span {
        padding-left: 24px;
        background: url('/images/castlist/icon_search_white.png') no-repeat left center/16px auto;
        display: inline-block; }

.search-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 21px;
  border: 1px solid #ddd; }
  .search-detail__h {
    margin-bottom: 26px;
    padding-left: 24px;
    background: url('/images/castlist/icon_search_green.png') no-repeat left center/16px auto;
    color: #56b8b8;
    font-size: 14px; }

.search-options {
  display: flex; }
  .search-options__col {
    margin: 0 55px 14px 0; }
    .search-options__col:last-child {
      margin-right: 0; }
  .search-options__h {
    margin-bottom: 12px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    line-height: 1; }

.input-range {
  display: flex;
  align-items: center; }
  .input-range input {
    width: 98px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 2px;
    display: flex;
    align-items: center; }
  .input-range__tilda {
    padding: 0 5px;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-align: center; }

.checkbox {
  padding-top: 8px;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px; }
  .checkbox__item {
    margin: 0 18px 16px 0; }
    .checkbox__item:last-child {margin: 0;}
  .checkbox input {
    display: none; }
  .checkbox label {
    min-height: 22px;
    padding-left: 34px;
    background: url('/images/castlist/icon_checkbox.png') no-repeat left center;
    display: flex;
    align-items: center; }
    .checkbox label:hover {
      background-image: url('/images/castlist/icon_checkbox_hover.png'); }
  .checkbox input:checked + label {
    background-image: url('/images/castlist/icon_checkbox_checked.png'); }

.search-btn {
  max-width: 352px;
  margin: 0 auto 10px;
  padding: 10px;
  background-color: #56b8b8;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  line-height: 1;
  text-align: center; }
  .search-btn:hover {
    color: #fff; }
  .search-btn > span {
    padding-left: 24px;
    background: url('/images/castlist/icon_search_white.png') no-repeat left center/16px auto;
    display: inline-block;
    line-height: 22px; }

.search-detailfooter {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 13px 23px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  color: #4a4a4a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px; }
  .search-detailfooter__num {
    display: flex;
    align-items: center; }
    .search-detailfooter__num__title {
      margin-right: 16px; }
  .search-detailfooter__reset {
    min-height: 18px;
    padding-left: 2.4rem;
    background: url('/images/castlist/icon_search_close.png') no-repeat left center/16px auto; }

.area-search-result {
  max-width: 1200px;
  margin: 0 auto; }

.search-result-head {
  padding: 1rem 0;
  display: flex;
  justify-content: space-between; }

.search-result-num {
  margin-bottom: 14px;
  color: #333;
  font-size: 14px;
  line-height: 1; }
  .search-result-num__num {
    color: #56b8b8;
    display: inline-block;
    font-size: 27px; }
  .search-result-num__unit {
    margin: 0 6px;
    color: #56b8b8;
    display: inline-block;
    font-size: 14px; }

.search-result-pd {
  width: 330px;
  position: relative; }
  .search-result-pd::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 0; bottom: 0; right: .5rem;
    width: 20px;
    background: url('/images/castlist/arrow_drop_down.png') no-repeat center/.8rem auto; }
  .search-result-pd select {
    width: 100%;
    height: 33px;
    padding: 0 2rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    display: flex;
    align-items: center;
    font-size: 14px !important; }

.search-result-cast {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap; }
  .search-result-cast__item {
    width: 25%;
    padding: 3rem;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    color: #333;
    text-align: center; }
    .search-result-cast__thumb {
      margin-bottom: 2.6rem;
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      position: relative; }
      .search-result-cast__thumb::before {
        content: "";
        padding-top: 100%;
        display: block; }
    .search-result-cast__name {
      margin-bottom: 15px;
      font-size: 14px;
      font-weight: bold; }
    .search-result-cast__text {
      height: 60px;
      margin-bottom: 23px;
      font-size: 14px;
      text-align: left;
      overflow: hidden;
      position: relative; }
      .search-result-cast__text::before {
          content: "";
          position: absolute;
          bottom: 0; left: 0; right: 0;
          height: 20px;
          background: linear-gradient(to bottom, rgba(255,255,255,0),#fff); }
    .search-result-cast__detail {
      font-size: 14px; }
    .search-result-cast__birth {margin-bottom: 12px;}
    .search-result-cast__height {margin-bottom: 12px;}
    .search-result-cast__area {margin-bottom: 12px;}

@media screen and (min-width: 992px) {
  .mx991 {display: none !important; }
}
@media screen and (max-width: 991px) {
  .mn992 {display: none !important; }

  .area-header__inner {
    padding-right: 70px;
    position: relative; }
    
  .headlabel__inner {
    height: auto;
    padding: 2rem 5.5%;
    flex-wrap: wrap; }
  .headlabel__title {
    margin: 0 0 20px;
    white-space: pre-wrap; }

  .headermenu_sp {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 70px;
    background: url('/images/castlist/icon_headermenu_sp.png') no-repeat center/28px auto;
    border-left: 1px solid #ddd; }
  
  .area-thumblist {
    padding: 38px 5.5% 10px; }
    .area-thumblist__h {
      margin-bottom: 38px; }

  .thumblist {
    justify-content: space-between; }
    .thumblist__item {
      width: 47.5%;
      margin: 0 0 25px; }

  .search-options {
    flex-wrap: wrap; }
    .search-options__h {
      font-size: 16px; }
    .search-options__col {
      margin-bottom: 30px; }

  .checkbox {
    font-size: 14px; }

  .search-detail__h {
    font-size: 16px; }

  .search-result-head {
    flex-wrap: wrap; }
  .search-result-pd {
    width: 100%; }
  .search-result-head__left {
    margin-bottom: 20px; }

  .search-result-cast__item {
    width: calc(100% / 3); }

}

@media screen and (max-width: 767px) {
  .search-detail {
    padding: 20px 40px; }

  .search-result-cast__item {
    width: 50%; }

}

@media screen and (max-width: 640px) {
  .area-content {
    padding-left: 15px;
    padding-right: 15px; }

  .headlogo__inner,
  .headlabel__inner {
    padding-left: 15px;
    padding-right: 15px; }

  .search-detail {
    padding-left: 21px;
    padding-right: 21px; }

  .search-result-cast__item {
    padding: 15px; }

}


@media screen and (max-width: 340px) {
  .search-box form {
    flex-wrap: wrap; }
  .search-box input {
    width: 100%;
    margin: 0 0 16px; }
  .search-box button {
    width: 100%; }

  .checkbox {
    padding-left: 0; }
}