@charset "EUC-JP";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● style_voice.css                                     */
/*    ボラ活レポート専用CSS                               */
/*    ・ページ固有の処理を記述                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    各種import                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    カラー設定                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* カラー定義
 ------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    プロパティ                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    mixin 定義                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 疑似要素

       ::before, ::after で親要素にフィットさせる処理 （ボタンの背景など）
 ------------------------------------ */
/* サイトロゴ

  想定している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 config.site-logo();
    }
------------------------------------------------------------------------ */
/* 基本リンク

  適用例 ）
    .hogehoge{
      @include config.hvr-txt-underline();
    }
------------------------------------------------------------------------ */
/* 基本ページ幅

  適用例 ）
    .hogehoge{
        @include config.page-width-default();
    }
------------------------------------------------------------------------ */
/* スクロールバーをカスタマイズ

  適用例 ）
    .hogehoge{
        @include config.customScrollBar();
    }
------------------------------------------------------------------------ */
/* flex 関連のプロパティをまとめて定義

  適用例 ）
    .hogehoge{
        @include config.flex();
    }
    .hogehoge{
        @include config.flex(center, flex-end);
    }
------------------------------------------------------------------------ */
/* テキストを任意の行数で切る （引数で行数を指定）

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

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

  適用例 ）
    .hogehoge{
        @include config.dotline();
    }
------------------------------------------------------------------------ */
/* lattice パターン

  適用例 ）
    .hogehoge{
        @include config.lattice();
    }
------------------------------------------------------------------------ */
/* エリアのデザインパターン

  適用例 ）
    .hogehoge{
        @include config.decorated_area();
    }
------------------------------------------------------------------------ */
/* レスポンシブ 対応用 ブレイクポイントによる条件分岐
   適用例 ）
   @include config.media-query(under-bp-m) {
      $breakpoint-m よりも小さいウィンドウ幅の処理をここに書く
   }
 ------------------------------------------------------------------------ */
/* 単位を除去して数値のみ返す関数
 ------------------------------------------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    World                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    Header                                        */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    Contents                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
body.Voice #SiteHeaderArea .MainMenuList a[href*="75_voice"] {
  background-image: linear-gradient(to bottom, transparent calc(100% - 5px), rgb(29, 195, 104) calc(100% - 5px));
}

.VoiceParagraph {
  padding: 2.5rem;
  background: #fff;
  border: 1px solid rgb(29, 195, 104);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 2.5rem;
  gap: 2.5rem;
}
.VoiceParagraph + .VoiceParagraph {
  margin-top: 1rem;
}
.VoiceParagraph .ParagraphHeader {
  font-size: 100%;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.VoiceParagraph .ParagraphHeader .Commenter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.VoiceParagraph .ParagraphHeader .Commenter .Icon {
  color: rgb(29, 195, 104);
  font-size: 200%;
  font-weight: 300;
}
.VoiceParagraph .ParagraphContents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.VoiceParagraph .ParagraphContents .VoiceTitle {
  font-size: 125%;
}
.VoiceParagraph .ParagraphContents .DefaultText {
  margin: 0;
  font-size: 87.5%;
}