@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/
/***************************************
** 子テーマ用のスタイルを書く
***************************************/
/* ↓↓↓ 必要ならばここにコードを書く ↓↓↓ */
/*-------------------------------------

  1.基本レイアウト

  2.変更不可レイアウト
    2.1 グローバルメニュー
        2.1.1 ロゴの大きさ・幅に関するもの
        2.1.2 ヘッダー
    2.2 モバイルメニュー
        2.2.1 モバイルのメニューバーの設定
        2.2.2 モバイルのグローバルナビ(メニュー)の設定
    2.3 サイドバー
        2.3.1 タイトル
        3.3.2 カテゴリボックス
        3.3.3 SNSフォローボタン
    2.4 フッター
        2.4.1 ロゴ
        2.4.2 フッターメニュー
    2.5 トップページ
        2.5.1 トップページのタイトルの余白を消す
        2.5.2 カルーセル
        2.5.3 「次のページを」非表示
        2.5.4 ページネーション
        2.5.5 記事一覧を横並び
        2.5.6 見出し【h2】
        2.5.7 【 コンテンツ下部 】見出し【h2】
        2.5.8 「もっと見る」ボタン
        2.5.9 特集カテゴリ
        2.5.10 【 コンテンツ下部 】メッセージ
        2.5.11 【 コンテンツ下部 】見逃していませんか？
    2.6 投稿ページ
        2.6.1 目次
        2.6.2 ブログカード
        2.6.3 ボックスカード
        2.6.4 参考文献
        2.6.5 見出し
    2.7 固定ページ
        2.7.1 FAQ

  3.広告
    3.1 共通デザイン
    3.2 リンクテキスト
    3.3［Ｂ枠販売用］レクタリング（234×60）
    3.4［Ｃ枠販売用］レクタリング（125×125）
    3.5 レクタリング（300×600）
    3.6 レクタリング（300×250）
    3.7 かんたんリンク（もしもアフィリエイト）

  4.SNS
    4.1 SNSボタン

  5.レスポンシブデザイン用のメディアクエリ
    5.1 1240px以下
    5.2 1023px以下
    5.3 834px以下
    5.4 480px以下

-------------------------------------*/
/***************************************
** 基本レイアウト
***************************************/
.toggle-wrap label {
  text-align: left;
}

/* リードタイム */
.read-time {
  margin: 10px 0;
}

/***************************************
** ★★★ 変更不可レイアウト ★★★
***************************************/
/*======================================
  2.1 グローバルメニュー
======================================*/
/* 2.1.1 ロゴの大きさ・幅に関するもの
----------------------------------*/
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%;
  height: auto;
  max-width: 210px;
  vertical-align: middle;
  margin: 20px 0;
}

/* 2.1.2 ヘッダー
----------------------------------*/
#header-container {
  background: #fff; /* 削除すると、ヘッダーが黒くなるため2026年2月8日追記 */
  box-shadow: 0 0 10px rgba(30, 30, 30, 0.1);
  margin-bottom: 1px;
}

.site-name-text-link {
  color: #fff;
}

.navi {
  background: none;
}

.navi-in > ul .sub-menu {
  background: #fff;
  box-shadow: 0 0 10px rgba(30, 30, 30, 0.1);
}

.navi-in > ul li {
  width: auto;
}

.navi-in a {
  font-size: 13px; /* ナビ文字大きさ */
  font-weight: bold;
  position: relative;
  color: #000; /* ナビ文字色 */
  padding: 0 20px;
  display: block;
  text-decoration: none;
}

.navi-in a:hover {
  background: none;
  color: #000; /* ナビ文字色 */
}

.navi-in a:before {
  position: absolute;
  left: 0;
  bottom: 6px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #000; /* マウスON時の下線色 */
  transform: scale(0, 1);
  transition: 0.4s;
}

.navi-in a:hover:before {
  transform: scale(1);
}

.navi-in > ul .sub-menu a {
  color: #000; /* サブメニュー文字色 */
  font-size: 12px; /* サブメニュー文字の大きさ */
}

.navi-in > ul .sub-menu a:before {
  background: #000; /* サブメニューマウスON時の下線色 */
}

.header-container-in.hlt-top-menu .logo-header {
  max-height: 100%;
}

.header-small {
  opacity: 0.9;
}

.header-small .header-container-in.hlt-top-menu .logo-header img {
  max-width: 130px;
  margin: 10px 0;
}

[id^="toc"]:target {
  padding-top: 85px;
  margin-top: -85px;
}

@media only screen and (max-width: 834px) {
  #header {
    width: 100%;
    height: 70px; /* ヘッダー高さ */
    transition: .5s;
    box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.2);
  }

  #header-in {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.5em;
  }

  #header-in .logo {
    padding: 0;
    text-align: left;
  }

  .header-container-in.hlt-top-menu .logo-header img {
    width: 120px !important; /* ロゴ大きさ */
    vertical-align: middle;
  }

  #header-in .tagline {
    margin: 0;
    font-size: 10px; /* キャッチフレーズ文字サイズ */
    text-align: left;
  }
}

/*======================================
  2.2 モバイルメニュー
======================================*/
/* 2.2.1 モバイルのメニューバーの設定
-----------------------------------*/
.mobile-menu-buttons {
  background: #fff;
}

.mobile-menu-buttons .menu-caption, .mobile-menu-buttons .menu-icon {
  color: #000;
}

.mobile-menu-buttons .menu-button:hover {
  background-color: #fff;
}

/* 2.2.2 モバイルのグローバルナビ(メニュー)の設定
-----------------------------------*/
#navi-menu-content {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

#navi-menu-content ul li {
  margin-right: 2px;
  margin-right: 5px;
  padding: 10px 0;
}

#navi-menu-content a {
  color: #000;
}

#navi-menu-content ul li a {
  color: #000;
}

/*======================================
  2.3 サイドバー
======================================*/
/* 2.3.1 タイトル
-----------------------------------*/
.sidebar h3 {
    color: #333333;                      /* 文字色 */
    background: #ffffff;                 /* 背景色 */
    padding: 0.25em 0.25em;              /* [上下][左右]の余白 */
    border: none ;                       /* 全枠 */
}
.sidebar h3::after {
    content: "";                         /* 語尾付加文字列 */
    display: block;                      /* Block表示 */
    height: 6px;                         /* 高さ */
    background: linear-gradient(to right, #444d53, transparent);  /* 背景 グラデーション*/
}

/* 3.3.2 カテゴリウィジェット
-----------------------------------*/
.widget_categories ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
    font-size: 16px;
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 10px;
}
.widget_categories > ul > li > a:first-child {
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
    display: block;
    float: right;
    background: #ededed;
    padding: 0 1em;
    font-size: 14px;
    margin-top: .2em;
    border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color: #72c7e6;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
    background: #72c7e6;
    color: #fff;
    transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 0 4px 4px 4px;
    display: block;
    border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "・";
    padding: 0;
}

/* 3.3.3 SNSフォローボタン
-----------------------------------*/
.sidebar .sns-follow-buttons a {
    width: 18%; /*ボタンの幅*/
}
.sidebar .sns-follow {
    margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
    border-radius: 50px;
}
.sidebar .instagram-button {
    background-color: #c522b8 !important;
}

/*======================================
  2.4 フッター
======================================*/
/* 2.4.1 ロゴ
-----------------------------------*/
.footer-bottom-logo .logo-image {
  max-width: 50%;
}
.footer-bottom-logo img {
  height: auto;
}

/* 2.4.2 フッターメニュー
-----------------------------------*/
#navi-footer li {
  border: none;
}

/*======================================
  2.5 トップページ
======================================*/
/* 2.5.1 トップページのタイトルの余白を消す
-----------------------------------*/
.home .entry-header {
  margin: -1.0em;
}

/* 2.5.2 カルーセル
-----------------------------------*/
/* カルーセル画像高さ */
.carousel-entry-card-thumb {
  height:110px;
}
/* カルーセル背景透明 */
.carousel-in {
  background-color:transparent;
}
/* カルーセル左右矢印の色・大きさ */
.carousel .slick-arrow:before {
  color:#1b325f;
  font-size:28px;
}
/* カルーセル記事タイトル文字 */
.carousel-entry-card-title {
  margin-top:10px;
  font-weight:normal;
  max-height: 5.2em;
}

/* 2.5.3 「次のページを」非表示
-----------------------------------*/
.pagination-next {
  display: none;
}

/* 2.5.4 ページネーション
-----------------------------------*/
.page-numbers {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

/* 2.5.5 記事一覧を横並び（トップページの日本史と世界史）
-----------------------------------*/
.widget-entry-cards.card-large-image .a-wrap {
  width: 32%; /* 本来は、32%だがカードとカードの間に余白が生じるため、32にした */
  height: auto;
  display: inline-flex;
}

@media screen and (max-width: 768px) {
  .widget-entry-cards.card-large-image .a-wrap {
    width: 49%; /* 本来は、50%だがカードとカードの間に余白が生じるため、49にした */
    display: inline-flex;
  }
}

.widget-entry-cards.not-default figure img {
  padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
  font-size: 95%;
  text-align: left;
  padding:.5em;
}

/* 2.5.6 見出し【h2】
-----------------------------------*/
.home #main .widget_custom_html h2 {
  position: relative;
  padding: .5em .75em;
  margin-bottom: 20px;
  background-color: #000000;
  border: none;
  border-radius: 6px;
  color:#FFFF;
}

.home #main .widget_custom_html h2::before {
  border: none;
}

.home #main .widget_custom_html h2::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #000000;
}

/* 2.5.7 【 コンテンツ下部 】見出し【h2】
-----------------------------------*/
h2.widget-content-bottom-title {
  position: relative;
  padding: .5em .75em;
  margin-bottom: 20px;
  background-color: #000000;
  border: none;
  border-radius: 6px;
  color:#FFFF;
}

h2.widget-content-bottom-title::before {
  border: none;
}

h2.widget-content-bottom-title::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #000000;
}

/* 2.5.8 「もっと見る」ボタン
-----------------------------------*/
.home #main .p-button {
  width: 100%;
  margin: 0 auto;
}

.home #main .p-button a {
  display: block;
  margin: 25px 0;
  padding: 0.7em 1em;
  border-radius: 2em;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: #696969;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 1;
}

.home #main .p-button a:hover {
  transform: translateY(3px);
  opacity: 1;
}

/* 2.5.9 特集カテゴリ
-----------------------------------*/
/* 子要素を親要素からはみ出して表示 */
.fluid-box{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ddd;
  padding: 40px;
  margin-top: 100px;
}
.fluid-box-inner{
  margin: 0 auto;
  padding: 25px;
  background-color: #fff;
}

/* 2.5.10 【 コンテンツ下部 】見逃していませんか？
-----------------------------------*/
#custom_html-9 {
  margin-top: 100px;
  margin-bottom: 100px;
}

.info-article {
	background-color: #fff;
	padding: 30px 30px 25px;
}

/* 2.5.11 【 コンテンツ下部 】メッセージ
-----------------------------------*/
/* 子要素を親要素からはみ出して表示 */
.fluid-box-under{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("http://www.rekishikaigi.com/wordpress/wp-content/uploads/TJnLjC6XdCAz.jpg");
  padding: 40px;
  margin-bottom: 100px;
}

.fluid-box-inner-under {
  padding: 50px 0;
  text-align: center;
  font-size: 40px;
}

/*======================================
  2.6 投稿ページ
======================================*/
/* 2.6.1 目次
-----------------------------------*/
/* 目次のデザインカスタマイズ */
.toc-content ol {
  padding: 0 0.5em;
  position: relative;
}
.toc-content ol li {
  line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
  font-family: FontAwesome;
  content: "\f138"; /* アイコンを変える場合はここを変更 */
  position: absolute;
  left : 0.5em;
  color: #444d53; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
  border-bottom: none;
}
.toc-content .toc-list li {
  font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
  font-weight:normal; /* h3以降の文字サイズを普通に */
}

/* 2.6.2 ブログカード
-----------------------------------*/
.blogcard-type {
  margin-top: 10px;
  margin-bottom: 10px;
}
.blogcard-wrap {
  margin: 3em auto;
  width: 100%;
}

/* 2.6.3 ボックスカード
-----------------------------------*/
.blank-box {
  margin: 3em auto;
  width: 100%;
}

/* 2.6.5 見出し
-----------------------------------*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
   margin: 2.4em 0 1.5em;/*上、左右、下方向*/
}

/*======================================
  2.7 固定ページ
======================================*/

/*======================================
  2.8 段落マージン修正
======================================*/
/* 2.8.1 ランキング作成(Cocoon標準機能）
 * 段落
-----------------------------------*/
.ranking-items p{
  margin-bottom: 1em;
}

.ranking-items table{
  margin-bottom: 40px;
}

/* 2.8.2 投稿記事下プロフィールボックス
 * 段落
-----------------------------------*/
.author-content p{
  margin-bottom: 1em;
}

/***************************************
** 広　　　　　告
***************************************/
/*======================================
  3.1 共通デザイン
======================================*/
.ads {
  position: relative;
  margin: 60px auto;
  font-size: 0;
}

.ads .title {
  margin: 0 auto 20px;
  font-size: 15px;
  text-align: center;
}

.ads .content {
  position: relative;
  margin: 10px 0;
  padding: 0;
  font-size: 0;
  text-align: center;
}

/*上線*/
.ads .content:before {
  content: '';
  position: absolute;
  left: 50%;
  top: -15px;/*線の上下位置*/
  width: 300px;/*線の長さ*/
  height: 3px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: black;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

/*下線*/
.ads .content:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  width: 300px;/*線の長さ*/
  height: 3px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: black;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

/* 広告サイズ */
@media(mix-width: 800px) {
  .ads-responsive {
    width: 728px;
    height: 90px;
  }
}

@media(mix-width: 800px) {
  .ads-responsive2 {
    width: 970px;
    height: 250px;
  }
}

/* タブレット */
/* @media(max-width: 800px) {
  .ads-responsive, .ads-responsive2 {
    width: 468px;
    height: 60px;
  }
} */

/* スマートフォン */
/* @media(max-width: 500px) {
  .ads-responsive, .ads-responsive2 {
    width: 320px;
    height: 100px;
  }
} */

/*======================================
  3.2 リンクテキスト
======================================*/
.ads-linktext {
  margin: 25px 0;
  font-size: 0;
}

.ads-linktext .content {
  margin: 0;
  padding: 0;
  text-align: center;
}

/*======================================
  3.3 ［Ｂ枠販売用］レクタリング（234×60）
======================================*/
#ads-08 {
  background-color: #f5f5f5;
  font-size: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#ads-08 .content {
  margin: 0;
  padding:  10px;         /* 余白指定 */
  text-align: center;
}

/*======================================
  3.4 ［Ｃ枠販売用］レクタリング（125×125）
======================================*/
#ads-09 {
  display: grid;  /* グリッドコンテナを作る */
  grid-template-columns:1fr 1fr; /* 縦向きのグリッドラインを決める */
  grid-template-rows:1fr 1fr; /* 横向きのグリッドラインを決める */
  background-color: #f5f5f5;
  font-size: 0;
  padding: 10px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#ads-09 .content {
  padding: 10px;         /* 余白指定 */
  margin: 5px;            /* 周りの余白指定 */
  text-align: center;
}

/*======================================
  3.5 レクタリング（300×600）
======================================*/
#ads-07 {
  text-align: center;
}

/*======================================
  3.6 レクタリング（300×250）
======================================*/
#ads-13 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

/*======================================
   3.7 かんたんリンク（もしもアフィリエイト）
======================================*/
/* --------- 外枠 --------- */
div.easyLink-box {
  border:double #CCC !important; /* ２重線 */
  box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}

/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
}

/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
    background: #f6a306 !important; /* 背景色 */
    border: 2px solid #f6a306 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-rakuten {
    background: #cf4944 !important; /* 背景色 */
    border: 2px solid #cf4944 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-yahoo {
    background: #51a7e8 !important; /* 背景色 */
    border: 2px solid #51a7e8 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}

/* --- PC以外の時の設定 --- */
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img,
  div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
    max-height: 180px !important; /* 商品画像の大きさを調整 */
  }
}

/***************************************
** SNS
***************************************/
/*======================================
  4.1 SNSボタン
======================================*/
/*------------------------------------
  　　　　SNSシェアボタン
--------------------------------------*/
.button-caption { display: none; }


/***************************************
** 集客用CSS
***************************************/
/*======================================
  4.1 参考文献
======================================*/
.reference {
  position: relative;
  margin:4em 0 2em;
  padding: 0.5em 1em;
  border: solid 3px #C0C0C0;
  font-size: 17px;
}
.reference .box-title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  background: #C0C0C0;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.reference dl {
  margin: 0;
  padding: 0;
}

/*======================================
  4.1 CVボタン
======================================*/
.p-cv-btn-wrap *{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box;
}
.p-cv-btn-wrap{
  background:#f7f7f7;
  padding:3.5em 1.5em 1.5em !important;
  margin: 0 0 2em !important;
  font-size:16px;
  line-height:1.8;
  position:relative; /* 配置に関するもの(ここを基準に) */
}
.p-cv-btn-wrap-title {
	background: #fdc44f; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}

.p-cv-btn-wrap p,.p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
  max-width:500px;
  margin: 1em auto !important;
  border:none;
}
.p-cv-btn-wrap p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}
.p-cv-btn-wrap ul li{
  font-weight:500;
  list-style:none;
  position:relative;
  padding-left:4em !important;
}
.p-cv-btn-wrap ul li:before{
  font-family: "FontAwesome";
  content: "\f00c" !important;
  font-weight:600;
  color:#1d89b5;
  position:absolute;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.p-cv-btn a{
  color:#fff;
  text-decoration:none !important;
  background:#90c231;
  border-bottom: solid 4px #61841f;
  padding: 0.5em 1em !important;
  border-radius: 7px;
  margin: 0.3em auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.p-cv-btn:hover{
  opacity:0.9;
}
.p-cv-btn a:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.p-cv-btn .p-cv-em{
  line-height: 1.3;
  text-align:center;
  font-weight:600;
  display:block;
  color:#90c231;
  background:#fff;
  padding: 5px 10px !important;
  margin: 2px 10px 0px 0 !important;
  border-radius: 30px;
  min-width: 55px;
  max-width: 80%;
}
.p-cv-btn .p-cv-text{
  font-weight: 600;
  color:#fff;
  letter-spacing: 1px;
  border-left: 1px solid #fff;
  line-height: 25px;
  margin: 0.6em auto 0.6em 0 !important;
  padding: 0 0.6em 0 1em !important;
}
.p-cv-btn i,.p-cv-btn svg{
  color:#fff;
  min-width:22px;
}
.p-cv-url-wrap{
  font-size: 0.8em !important;
  max-width: 350px;
  margin: 0 auto 0.5em !important;
  display: block;
}
.p-cv-url-wrap a{
  color: #1a0dab !important;
  text-decoration:underline !important;
}
.p-cv-btn-wrap .p-cv-note{
  font-size:0.9em;
  border: 1px solid #90c231;
  margin-top:0.5em !important;
  padding:0.5em 1em !important;
}
.sidebar .p-cv-btn-wrap{
  background:#fff;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}

.p-cv-btn-wrap-affiliate {
	text-align: center;
}

/*320px以下*/
@media screen and (max-width: 320px){
  .p-cv-btn-wrap{
    padding:1em !important;
  }
}


/***************************************
** レスポンシブデザイン用のメディアクエリ
***************************************/
/* 1240px以下 */
@media screen and (max-width: 1240px) {
  /*必要ならばここにコードを書く*/
}

/* 1023px以下 */
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
  /* モバイルでヘッダーコンテント削除 */
  .header-container {
    display: none;
  }
}

/* 834px以下 */
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}