@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.skin-grayish :where(.navi-in, .navi-footer-in) a:hover .sub-caption{
	display: block;
}
.skin-grayish :where(.navi-in, .navi-footer-in) a .sub-caption{
	display: none;
}



/* ボタンの背景色、文字色、ボーダーのカスタマイズ */
.skin-grayish .list-new-entries .list-more-button,
.skin-grayish .list-columns .list-more-button,
.skin-grayish .index-tab-wrap .list-more-button {
	background-color:rgba(17, 17, 170, 0.4); /* 背景色 */
	width: 20%;
	color:rgba(17, 17, 170, 0.27); /* 文字色 */
	opacity:0.1;
	border: none;
	border-radius: 40px; /* 角を丸くする */
}

.skin-grayish .list-new-entries .list-more-button:hover,
.skin-grayish .list-columns .list-more-button:hover,
.skin-grayish .index-tab-wrap .list-more-button:hover {
	background-color:rgba(17, 17, 170, 0.4); /* 背景色 */
	width: 20%;
	color:#ffff; /* 文字色 */
	opacity:1;
	border: none;
	border-radius: 40px; /* 角を丸くする */
}

.skin-grayish .list-new-entries .list-more-button::before,
.skin-grayish .list-columns .list-more-button::before,
.skin-grayish .pagination-next-link::before,
.skin-grayish .index-tab-wrap .list-more-button::before,
.skin-grayish .comment-btn::before,
.skin-grayish .pager-links .post-page-numbers .page-numbers.page-prev-next::before {
  display: block;
  content: "";
  background-color: var(--skin-grayish-site-main-thin);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: top .7s, left .7s ease-in-out;
  z-index: -100;
  border-radius: 40px; /* 角を丸くする */
}



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

/*834px以下*/
@media screen and (max-width: 834px){
.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
		margin-top: 30px;
	}
	.article ul, .article ol {
		padding-left: 0;
	}
	/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.btn.cocoon-block-button__width-50, .ranking-item-link-buttons a.cocoon-block-button__width-50 {
		width: 100%;
	}
	.article h3 {
		font-size:15px;
	}
  /*必要ならばここにコードを書く*/
}