@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.eye-catch-wrap{
	justify-content:center;
}
html body div[id*="DLsite_blog_parts_00"] div.DLsite_bp_body{
	background:none !important;
}
.tagcloud a{
	color:#CCCCCC;
	border-color:#414141;
}

/*ヘッダーデザイン*/
.site-name-text{
	font-size:unset;
}
.site-name-text-link{
	padding:0;
}
.logo-image{
	padding:0;
	font-size:unset;
}

/*いいね*/
.wpulike{
	text-align: right;
}
.wpulike::before {
	display: block;
	content: "匿名でいいねする";
}

/*広告判別用ラベル*/
.pr-label-l {
	color:#ffffff;
	background-color:#585858;
}

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

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

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

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

/******************************
 登場時のアニメーション
******************************/
@keyframes slide-in{
  0%{
    bottom: -600px; /*画面外*/
    visibility: hidden;
  }
  100%{
    bottom: 0; /*画面下部*/
    visibility: visible;
  }
}

/******************************
 追従バナー
******************************/
.float-banner{
  display: inline-block; /*中身の高さで変動*/
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /*画面幅*/
  background: #fafafa;
  text-align: center;
  animation: slide-in 3s ease forwards;/*登場*/
  animation-delay: 0s; /*登場の遅延時間*/
  transition: 1s ease-in-out; /*スライド時の動き*/
  padding:1em 0em;
  z-index: 11;
}

/* バナー下の枠線 */
.float-banner:after{
  content: "";
  position: absolute;
  bottom: 100%;
  left: 70px; /*ボタン分の幅を左に確保*/
  width: calc(100% - 70px);
  height: 5px;
  background: #fafafa;
  box-shadow: 0px -2px 4px -1px rgba(0,0,0,20%), 0px 1px 2px -1px rgba(0,0,0,15%);
}

/* スライドボタンをクリック */
#slide:checked ~ .float-banner{
  transform: translateY(100%); /*画面外(下)へ*/
}

/**************************************
 アンカー広告　表示・非表示を切り替えるスライドボタン　ここから
***************************************/
.slide-btn{
  position: absolute;
  bottom: calc(100% + 5px); /*枠線分を空ける*/
  left: 0;
  width: 70px;
  height: 25px;
  border-radius: 0 6px 0 0; /*右上だけ丸く*/
  background: #fafafa;
  box-shadow: 1px -2px 3px rgba(0,0,0,25%);
}

/* スライドボタンの文字 */
.slide-btn:before{
  content: "^";
  position: absolute;
  top: 35%; /*下寄りの文字なので少し調整*/
  left: 50%;
  transform: translate(-50%,-50%) rotate(180deg);
  font-size: 16px;
  font-weight: bold; /*太字*/
  color: #666;
}

/* スライドボタン上の枠線部分 */
.slide-btn:after{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 70px;
  height: 5px;
  background: #fafafa;
  box-shadow: 0px 1px 2px -1px rgba(0,0,0,15%);;
}

/* クリックで矢印を反転 */
#slide:checked ~ .float-banner .slide-btn:before{
  top: 65%; /*上寄りの文字なので少し調整*/
  transform: translate(-50%,-50%);
}


/**** チェックボックス ****/
#slide{
  display: none; /*非表示*/
}

/**** 自作バナー用 ****/
.float-banner img{
  vertical-align: bottom; /*画像下の余白削除*/
}

/**** スマホ対策 ****/
@media only screen and (max-width: 599.9px) {
  .float-banner img{
    max-width: 360px;
    height: auto;
  }
}

/**** タブレット対策 ****/
@media only screen and (min-width: 600px) and (max-width: 959px) {
  .float-banner img{
    max-width: 800px;
    height: auto;
  }
}
/**************************************
 アンカー広告　表示・非表示を切り替えるスライドボタン　ここまで
***************************************/

/**************************************
 DLSiteウィジェット調整
***************************************/
html body div[id*="DLsite_blog_parts_00"].bp_title div.DLsite_bp_body div.DLsite_bp_title_wrap,
html body div[id*="DLsite_blog_parts_00"] div.DLsite_bp_body div.DLsite_bp_box_01 .icon_lead_01,
html body div[id*="DLsite_blog_parts_00"].bp_ranking div.DLsite_bp_body div.DLsite_bp_box_01 p	{
	z-index:3 !important;
}