@charset "UTF-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● style_blog_performer.css                            */
/*    パフォーマーブログ専用CSS                           */
/*    ・ブログ固有の処理を記述                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    各種import                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    カラー設定                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* カラー定義
   初期値は default のみだが、
   任意の文字列をキーとして使って色を定義すれば、
   サイト内で複数のカラー定義を持てる
 ------------------------------------ */
/* 引数でキーを指定して
   上記のマップで定義したカラーを返すfunction

   $contents-type: "second-color";
   のように $contents-type のキー値を変えておけば
   getBaseColor($contents-type);
   を使用した際に、別カラーをセットできる仕組み

   $base-color-map: (
     default:       rgb(81,72,63)
     second-color:  rgb(81,72,63)
   );

 ------------------------------------ */
/* カラー定義
 ------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    プロパティ                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    継承用（試作）                                */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 仮）疑似要素

       ::before, ::after で要素付加するときに書きがちな処理
 ------------------------------------ */
/* 画像の伸縮表示
     img要素に対して適用する。imgの幅と高さも定義すること
     上記「アスペクト比を保った表示ボックス」と併用推奨
 ------------------------------------ */
._img_contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

._img_cover {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

/* 仮）ノイズを付加
 ------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    mixin 定義                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* サイトロゴ

   想定しているHTML構造 ※見出しレベル h1～h6 は任意
   <h1 class="SiteLogo">
     <a href="">
       <img src="<?php $this->BcBaser->themeUrl(); ?>img/common/logo/site_logo.svg" alt="" />
     </a>
   </h1>

   適用例 ）
    .SiteLogo{
        @include site-logo();
    } 
 ------------------------------------------------------------------------ */
/* 基本ページ幅

   適用例 ）
    .hogehoge{
        @include page-width-default();
    } 
 ------------------------------------------------------------------------ */
/* アスペクト比を保った表示ボックス
   ※ 旧ブラウザを無視するなら  aspect-ratio: ●/●; で済むが
      非対応ブラウザにも適用したい場合の処理
      ・横幅は基本100％で扱う。100%幅以外にしたい場合はこの要素よりも親要素で適用させる

   想定しているHTML構造
     <p class="Image">
       <img src="XXXX">
     </p>
   などで、.Image に適用させ、img に object-fit でフィット方法を併記して使う


   適用例 ）
    .Image{
        @include aspect-ratio(); //デフォルトのアスペクト比を使う場合
    }     
    .Image{
        @include aspect-ratio(6 / 19); //個別にアスペクト比を指定して使う場合
    } 
 ------------------------------------------------------------------------ */
/* flex 関連のプロパティをまとめて定義

   適用例 ）
    .hogehoge{
        @include flex();
    }  
    .hogehoge{
        @include flex(center, flex-end);
    }  
 ------------------------------------------------------------------------ */
/* clearfix

   適用例 ）
    .hogehoge{
        @include clearfix();
    }  
 ------------------------------------------------------------------------ */
/* dotline

   適用例 ）
    .hogehoge{
        @include dotline();
    }  
 ------------------------------------------------------------------------ */
/* レスポンシブ 対応用 ブレイクポイントによる条件分岐 
   適用例 ）
   @include media-query(under-bp-m) {
      $breakpoint-m よりも小さいウィンドウ幅の処理をここに書く
   }     
 ------------------------------------------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    World                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* --------------------------------------------------- */
/* エリアの固有設定                                    */
/* --------------------------------------------------- */
/* 補足情報
--------------------------------------------------- */
.MoreInfoArea {
  padding: 12.5rem 0;
}
@media screen and (min-width: 768px), print {
  .MoreInfoArea .ButtonList li .DefaultButton {
    width: 30em;
  }
}

/* パフォーマー詳細
--------------------------------------------------- */
.PerformerDetailArea {
  background-color: #f8f8f2;
  border-bottom: 2px solid #eeeee2;
}

/* --------------------------------------------------- */
/* Block 固有設定                                      */
/* --------------------------------------------------- */
/* インデックス上部の紹介部
--------------------------------------------------- */
@media screen and (min-width: 768px), print {
  .AboutBlock .BlockHeader .Heading .Main {
    height: 6em;
    line-height: 1.25;
  }
}

/* パフォーマー表示
--------------------------------------------------- */
.PerformerBlock.List .BlockContents .TagList {
  margin-bottom: 5rem;
}
.PerformerBlock.List .BlockContents .ButtonList {
  margin-bottom: 5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.PerformerBlock.List .BlockContents .ButtonList .ResetButton {
  padding: 1rem 1.5rem;
}
.PerformerBlock.List .BlockContents .ButtonList .ResetButton .Label {
  padding-right: 0;
}
@media screen and (min-width: 768px), print {
  .PerformerBlock.List .BlockContents .SearchFormTable {
    position: relative;
    top: -1.75rem;
  }
}
.PerformerBlock.List .BlockContents .SearchFormTable tr:not(:last-child) {
  background-image: linear-gradient(to right, currentColor, currentColor 6px, transparent 6px, transparent 10px); /* 幅2の線を作る */
  background-size: 10px 1px; /* グラデーションの幅・高さを指定 */
  background-position: left bottom; /* 背景の開始位置を指定 */
  background-repeat: repeat-x; /* 横向きにのみ繰り返す */
}
.PerformerBlock.List .BlockContents .SearchFormTable tr th, .PerformerBlock.List .BlockContents .SearchFormTable tr td {
  padding-left: 0;
  padding-right: 0;
}
.PerformerBlock.List .BlockContents .SearchFormTable tr th {
  width: 15%;
}
@media screen and (max-width: 767px) {
  .PerformerBlock.List .BlockContents .SearchFormTable tr th {
    padding-top: 1em !important;
    padding-bottom: 0.5em !important;
  }
}
.PerformerBlock.List .BlockContents .SearchFormTable tr td {
  width: 85%;
}
.PerformerBlock.List .BlockContents .SearchFormTable tr td .TagList {
  margin-bottom: 0;
}
.PerformerBlock.List .BlockContents .SearchFormTable tr td .TagList li a {
  color: #252525;
  margin: 0;
}
.PerformerBlock.List .BlockContents .SearchFormTable tr td .TagList li a::after {
  display: none;
}
.PerformerBlock.List .BlockContents .SearchFormTable tr td .TagList li.Active a {
  color: white;
}
.PerformerBlock.List .BlockFooter {
  display: block;
  -webkit-box-pack: initial;
      -ms-flex-pack: initial;
          justify-content: initial;
  margin-top: 5rem;
}
.PerformerBlock .TagList li[data-tagid="0"] {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.PerformerBlock .TagList li[data-tagid="1"] {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.PerformerBlock .TagList li[data-tagid="2"] {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.PerformerBlock .TagList li[data-tagid="3"] {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}
.PerformerBlock .TagList li[data-tagid="8"] {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}
.PerformerBlock .TagList li[data-tagid="9"] {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}
.PerformerBlock .TagList li[data-tagid="10"] {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}
.PerformerBlock .TagList li[data-tagid="11"] {
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}
.PerformerBlock .TagList li[data-tagid="12"] {
  -webkit-box-ordinal-group: 10;
      -ms-flex-order: 9;
          order: 9;
}
.PerformerBlock .TagList li[data-tagid="4"] {
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}
.PerformerBlock .TagList li[data-tagid="5"] {
  -webkit-box-ordinal-group: 12;
      -ms-flex-order: 11;
          order: 11;
}
.PerformerBlock .TagList li[data-tagid="6"] {
  -webkit-box-ordinal-group: 13;
      -ms-flex-order: 12;
          order: 12;
}
.PerformerBlock .TagList li[data-tagid="7"] {
  -webkit-box-ordinal-group: 14;
      -ms-flex-order: 13;
          order: 13;
}