@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

.pagination-next {
  display: none;
}
/*本文カラーリスト表示用*/
.nomadBox_deco160 {
  border: 1px solid #55A8DC;
  background: #EFF9FF;
  margin: 35px 0 15px 0;
  position: relative;
}
.nomadBox_deco160 h4 {
  margin: 0;
  padding: 10px;
  font-size: 18px;
  color: #fff;
  background: #55A8DC;
  font-weight: bold;
  width: 80%;
  margin: auto;
  margin-top: -20px;
  text-align: center;
}
.nomadBox_deco160 h4:before {
  font-family: "Font Awesome 5 Free";
  content: '\f058';
  font-size: 15px;
  font-weight: 600;
  padding-right: 5px;
  padding-left: 5px;
}
.nomadBox_deco160 p {
  padding: 20px;
  line-height: 1.5em;
  margin: 0;
}
/*本文の視聴サイト表示用*/
.nomadBox_deco16 {
  border: 1px solid #7B86C6;
  background: #F5F7FF;
  margin: 35px 0 15px 0;
  position: relative;
}
.nomadBox_deco16 h4 {
  margin: 0;
  padding: 10px;
  font-size: 18px;
  color: #fff;
  background: #7B86C6;
  font-weight: bold;
  width: 80%;
  margin: auto;
  margin-top: -20px;
  text-align: center;
}
.nomadBox_deco16 h4:before {
  font-family: "Font Awesome 5 Free";
  content: '\f058';
  font-size: 15px;
  font-weight: 600;
  padding-right: 5px;
  padding-left: 5px;
}
.nomadBox_deco16 p {
  padding: 20px;
  line-height: 1.5em;
  margin: 0;
	text-align:center;
}
/*自炊サイト用の枠*/
.sub_jis1 {
  border: 1px solid #89c997;
  margin: 15px 0;
}
.sub_jis1 h4 {
	text-align:center;
  margin: 0;
  padding: 10px;
  font-size: 18px;
  color: #2e3740;
  background: #89c997;
  font-weight: bold;
  border:none;
}
.sub_jis1 h4:before {

  font-size: 15px;
  font-weight: 600;
  padding-right: 5px;
  padding-left: 5px;
}
.sub_jis1 p {
  padding: 20px;
  line-height: 1.5em;
  margin: 0;
}
/*アニメ漫画サイト用の枠*/
.sub_ani2 {
  border: 1px solid #ffb6c1;
  margin: 15px 0;
}
.sub_ani2 h4 {
	text-align:center;
  margin: 0;
  padding: 10px;
  font-size: 18px;
  color: #2e3740;
  background: #ffb6c1;
  font-weight: bold;
  border:none;
}
.sub_ani2 h4:before {

  font-size: 15px;
  font-weight: 600;
  padding-right: 5px;
  padding-left: 5px;
}
.sub_ani2 p {
  padding: 20px;
  line-height: 1.5em;
  margin: 0;
}
/*FX用の枠*/
.sub_fx1{border: 1px solid #cab8aa;
  margin: 15px 0;
}
.sub_fx1 h4 {
	text-align:center;
  margin: 0;
  padding: 10px;
  font-size: 18px;
  color: #2e3740;
  background: #cab8aa;
  font-weight: bold;
  border:none;
}
.sub_fx1 h4:before {

  font-size: 15px;
  font-weight: 600;
  padding-right: 5px;
  padding-left: 5px;
}
.sub_fx1 p {
  padding: 20px;
  line-height: 1.5em;
  margin: 0;
}
/* CTA */
.cta-box {
    background-color: #f3fafe; /* 背景色 */
    color: inherit;
}
.sidebar .cta-button .btn-l, .sidebar .cta-button .ranking-item-link-buttons a, .ranking-item-link-buttons .sidebar .cta-button a {
	color: #fff; /* ボタンの文字色 */
    background: #f58694; /* 背景色 */
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); /* ボタンの影 */
}

/************************************
** スマホで見やすい比較表
************************************/
.comparison-table-wrap{
  width:100%;
  margin: 0 auto 2em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.comparison-table-title{
  background : #7b86c6;
  text-align: center;
   color: #fff;
   font-weight: bold;
   padding: 1em;
   letter-spacing: 1px;
  margin: 0;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.comparison-table{
  margin:0;
  padding:0.3em 1em;
}
.comparison-table table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
  width:50%;
}
.comparison-table table thead th{
  background : #d1d1d1;
  border:none;
  color:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.8em 0.5em;
  line-height: 1.5;
  border-radius: 3px;

}
.comparison-table table tbody th{
background:#000;
  text-align: center;
  color:#fff;
  border:none;
  border-radius:30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.4em 1em;
  line-height: 2.5;
}
.comparison-table table tbody th.th-hul{
background:#000;
  color:#2fba27;
}
.comparison-table table tbody th.th-ama{
background:#ff9924;
color:#000;
}
.comparison-table table tbody th.th-une{
background:#1a232f;
}
.comparison-table table tbody th.th-skp{
background:#0099fc;
}
.comparison-table table tbody th.th-dmm{
background:#000;
}
.comparison-table table tbody th.th-oth{
background:#c4a5f8;
}
.comparison-table table tbody td ul.tdul-left{
text-align:left;
}

.comparison-table table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  border-radius:3px;
  border:none;
  padding:1.2em;
  color: #555;
  line-height: 1.8;
text-align:center;
  vertical-align:top;
}
.comparison-table table tbody td p{
  margin:0;
  padding:0;
  margin-bottom:1em;
text-align:center;
}
.comparison-table table tbody td .td-h{
  text-align:center;
  font-weight:bold;
  color:#7b86c6;
font-size:20px;
  margin-bottom:7px;
}
@media screen and (max-width: 768px){
  .comparison-table{
    padding:7px;
  }
  .comparison-table table{
    border-spacing:3px 10px;
  }
  .comparison-table table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
  }
}

}