//変数などの定義

//ブランドカラー
@import 'brand-colors';

//フォント
$default_font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
$navi_font: FontAwesome, $default_font;

//テキスト色
$text_color: $black_color;
$pallid_text_color: #777;
$x_pallid_text_color: #999;
$white: #fff;

//テキストサイズ
$text_size_default: 18px;
$text_size_s: 0.8em;
$text_size_xs: 0.6em;

//ボーダー色
//$basic_border_color: #cccfd2;
$basic_border_color: #ccc;
$transparent_border_color: transparent;

//色
$middle_thickness: #888;
$thin: #ddd;
$x_thin: #eee;
$xx_thin: #f5f6f7;
$xxx_thin: #fafbfc;
//$current_bgc: #eeeff0;
$current_bgc: #eee;

$select_bgc: #d8eaf2;
$transpalent_black_bgc: rgba(51,51,51,0.7);

//要素の丸め
$basic_border_radius: 4px;
$badge_border_radius: 2px;
$middle_border_radius: 8px;

//メインカラム
$main_inner_width: 800px;
$main_border_width: 1px;
$main_border_style: solid ;
$main_border_color: $basic_border_color;
$main_padding_width: 29px;

//メインカラムとサイドバーの余白
$between_main_and_sidebar: 20px;

//サイドバー
$sidebar_inner_width: 336px;
$sidebar_border_width: 1px;
$sidebar_border_style: solid ;
$sidebar_border_color: $basic_border_color;
$sidebar_padding_width: 19px;

$main_outer_width: $main_inner_width + $main_border_width*2 + $main_padding_width*2;
$sidebar_outer_width: $sidebar_inner_width + $sidebar_border_width*2 + $sidebar_padding_width*2;

$site_width: $main_outer_width + $between_main_and_sidebar + $sidebar_outer_width;

//ウィジェットの最大幅
$widget_max_width: 400px;


$emtry_card_thumb_margin_top: 3px;

$thumb_content_margin: 1.6%;

$bct-none: '\f0c8';
$bct-none-text: 'ラベルなし';
$bct-related: '\f15c';
$bct-related-text: '関連記事';
$bct-reference: '\f19d';
$bct-reference-text: '参考記事';
$bct-reference-link: '\f19d';
$bct-reference-link-text: '参考リンク';
$bct-popular: '\f005';
$bct-popular-text: '人気記事';
$bct-pickup: '\f005';
$bct-pickup-text: 'ピックアップ';
$bct-check: '\f00c';
$bct-check-text: 'チェック';
$bct-together: '\f02d';
$bct-together-text: 'あわせて読みたい';
$bct-detail: '\f15c';
$bct-detail-text: '詳細はこちら';
$bct-official: '\f024';
$bct-official-text: '公式サイト';
$bct-dl: '\f019';
$bct-dl-text: 'ダウンロード';

//背景ホバー
$bgc_hover_color: #f5f8fa;
$bgc_hover_anime: all .3s ease-in-out;
@mixin bgc_hover($color: $bgc_hover_color) {
  background-color: $color;
  transition: $bgc_hover_anime;
  color: $text_color;
}

//Font Awesomeアイコンを出力するとき
@mixin fontawesome($unicode:'/f004') {
  // font-family: FontAwesome;
  content: $unicode;
  //padding-right: 4px;
}

.faw::before{
  font-family: FontAwesome;
  padding-right: 4px;
}

//リンクキャンセル
@mixin link_cancel($color: $text_color) {
  color: $color;
  text-decoration: none;
}

//リストキャンセル
@mixin list_cancel {
  padding: 0;
  margin: 0;
  list-style: none;
}

//リストキャンセル
@mixin card_padding {
  padding: 1.6% 2.2% 2%;
}

%list_cancel {
  padding: 0;
  list-style: none;
}

@mixin base_font{
  /* フォントの種類 */
  font-family: $default_font;

  /* フォントのサイズ */
  font-size: $text_size_default;

  /* フォントの色 */
  color: $text_color;

  /* カーニングの設定 */
  //letter-spacing: 1.2px;
  //font-feature-settings: "palt" 1;
  //font-kerning: auto;

  /* 行間の設定 */
  line-height: 1.8;

  margin: 0;

  //word-wrap: break-word;
  overflow-wrap: break-word;
}

///////////////////////////////////////
// エントリーカード
///////////////////////////////////////
%card{
  position: relative;
  height: 100%;
}

%card_thumb{
  float: left;
  margin-top: $emtry_card_thumb_margin_top;
  position: relative;
}

%card_content{
  padding-bottom: 1.2em;
}

%card_title{
  font-size: 18px;
  margin: 0 0 5px 0;
  line-height: 1.2;
  font-weight: bold;
}

%card_snippet{
  font-size: $text_size_s;
  max-height: #{6 * 1.3}em;
  line-height: 1.3;
  overflow: hidden;
}

%card_meta{
  bottom: 0;
  position: absolute;
  right: 0;
  text-align: right;
  line-height: 1;
  // background-color: $white;
  // padding-left: 8px;
  //display: flex;
}

///////////////////////////////////////
// コンテンツ
///////////////////////////////////////
%bottom_margin{
  margin-bottom: 18px;
}


///////////////////////////////////////
// SNS
///////////////////////////////////////
%margin_top_and_bottom_in_content {
  margin: 24px 0;
}

%sns_message{
  text-align: center;
  margin-bottom: 3px;
}

%background_image{
  /* 画像を常に左右の中央に配置 */
  background-position: top center;

  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;

  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: 100% auto;

  &.ba-fixed{
    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;
  }
}

///////////////////////////////////////
// プロフィールボックス
///////////////////////////////////////
@mixin author_box_nallow{
  .author-box{
    font-size: 0.9em;
    line-height: 1.3;

    .author-thumb{
      // float: none;
      // width: auto;
      // text-align: center;
      width: 24%;
    }

    .author-content{
      // float: none;
      // margin: 0;
      margin-left: 26%;
    }

  }


}

///////////////////////////////////////
// Facebookボックス
///////////////////////////////////////
@mixin fb_like_box($max_width: 640px){
  .fb-like-box{
    max-width: $max_width;
    //display: block;
    flex-direction: column;
    // >div,
    // >figure{
    //   width: 100%;
    //   max-width: none;
    // }
  }
}

///////////////////////////////////////
// CTAボックス
///////////////////////////////////////
@mixin cta_box_nallow{
  .cta-box{
    font-size: 0.8em;
  }
  .cta-heading{
    font-size: 20px;
    padding: 8px;
  }

  .cta-left-and-right,
  .cta-right-and-left {
    .cta-content{
      display: block;
      //flex-direction: column;

      div{
        width: 100%;
      }
    }
  }

  .cta-message{
    margin-top: 1em;
  }

  .cta-button{
    .btn-l{
      padding: 1em;
      font-size: 16px;
    }
  }
}

///////////////////////////////////////
// シェア数
///////////////////////////////////////
@mixin service_count {
  // font-family: Arial, sans-serif;
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 12px;
  line-height: 1;
}

///////////////////////////////////////
// 投稿カテゴリ
///////////////////////////////////////
%entry_category{
  padding: 2px;
  //margin-right: 8px;
  display: inline;
  font-size: 0.7em;
}

///////////////////////////////////////
// ブログカード（狭い）
///////////////////////////////////////
@mixin blog_card_834{
  .blogcard-wrap{
    width: 100%;
  }

  .blogcard-thumbnail{
    width: 120px;
  }

  .blogcard-title{
    font-size: 0.9em;
    margin-bottom: 0;
  }

  .blogcard-snippet{
    font-size: 12px;
  }

  .blogcard-content{
    margin-left: 130px;
    margin-right: 0;
    max-height: 120px;
    min-height: 70px;
    font-size: 0.9em;
    line-height: 1.2;
  }

  .blogcard-footer{
    font-size: 14px;
  }

  .ib-right,
  .eb-right{
    .blogcard-content{
      margin-right: 31.6%;
      margin-left: 0;
    }
  }
}

///////////////////////////////////////////
// タグクラウド
///////////////////////////////////////////
@mixin tagcloud_a {
  border: 1px solid $x_thin;
  border-radius: 2px;
  color: #555;
  padding: 3px 8px;
  text-decoration: none;
  font-size: 12px;
  margin: 2px;
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  transition: $bgc_hover_anime;

  &:hover {
    @include bgc_hover;
  }

  .tag-caption{
    word-break: break-all;
  }

  .tag-link-count{
    margin-left: 8px;
  }
}

///////////////////////////////////////
// フォーム共通
///////////////////////////////////////
$form_padding: 11px;
%form_common {
  padding: $form_padding;
  border: 1px solid $basic_border_color;
  border-radius: $basic_border_radius;
  font-size: $text_size_default;
  width: 100%;
}

///////////////////////////////////////////
// おすすめカード（狭いエリア）
///////////////////////////////////////////
@mixin recommended_nallow{
  .recommended{
    .navi-entry-cards{
      flex-wrap: wrap;
      a{
        width: 50%;
      }
    }
    &.rcs-card-margin{
      a{
        margin: 1%;
        width: 48%;
        &:last-child{
          margin-right: 1%;
        }
      }
    }
  }
}

///////////////////////////////////////////
// タブボックス
///////////////////////////////////////////
@mixin tabbox_label{
  background-color: $grey_color;
  font-family: Aharoni, "Arial Black", Impact, Arial, sans-serif;
  position: absolute;
  font-size: 13px;
  top: -1.8em;
  line-height: 1.8;
  color: $white;      left: -3px;
  border-radius: 6px 6px 0 0;
  padding: 0 1em 0 .8em;
}

$bb-check: "\f00c";
$bb-check-text: "CHECK";
$bb-comment: "\f075";
$bb-comment-text: "COMMENT";
$bb-point: "\f0eb";
$bb-point-text: "POINT";
$bb-tips: "\f19d";
$bb-tips-text: "TIPS";
$bb-hint: "\f0f3";
$bb-hint-text: "HINT";
$bb-pickup: "\f005";
$bb-pickup-text: "PICKUP";
$bb-bookmark: "\f02e";
$bb-bookmark-text: "BOOKMARK";
$bb-memo: "\f249";
$bb-memo-text: "MEMO";
$bb-download: "\f019";
$bb-download-text: "DOWNLOAD";
$bb-break: "\f0f4";
$bb-break-text: "BREAK";
$bb-amazon: "\f270";
$bb-amazon-text: "AMAZON";
$bb-ok: "\f10c";
$bb-ok-text: "OK";
$bb-ng: "\f00d";
$bb-ng-text: "NG";
$bb-good: "\f164";
$bb-good-text: "GOOD";
$bb-bad: "\f165";
$bb-bad-text: "BAD";
$bb-profile: "\f007";
$bb-profile-text: "PROFILE";

// //インデックスの末尾を左に揃える
// .a-wrap,
// .box-menu{
//   &:last-child{
//     margin-right: auto;
//   }
// }