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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*トップページ全てをまとめて非表示*/
.home.page .entry-title,
/* .home.page .sns-share,
.home.page .sns-follow, */
.home.page .date-tags,
.home.page .author-info{
  display: none;
}
.header-container, .navi, .content, .content-in, .main, .footer, .sidebar {background:transparent;}
/* 通知エリア */
.notice-area {background-color:transparent;border-top:#bbb 1px solid;border-bottom:#888 1px solid;}
/* menu */
.navi-in a:hover {background-color: #f3ebf8;}
/* h2 */
.article h2:before {
position: relative;
top: 0px;
margin:0 10px 0 0;
content: url(//shibayamaryu.com/wp-content/uploads/2023/01/shibah2001.png);
}
.article h2 {font-size: 24px;padding: 10px;border-radius: 8px;margin-bottom: 1.0em;background: linear-gradient(90deg, #afb5cf, transparent);}
.sidebar h2, .sidebar h3 {font-size: 18px;padding: 10px;border-radius: 8px;margin-bottom: 1.0em;background: linear-gradient(90deg, #afb5cf, transparent);}
/**/
/*******************************
* 新着記事を横並びに
********************************/
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
width: 33.333%;
}

/* SNS */
.btn-purple, .btn-wrap.btn-wrap-purple > a, .sns-buttons a {background-color: #55295b;}
/768px以下/
@media screen and (max-width: 768px){

}

/480px以下/
@media screen and (max-width: 480px){

}

.bg-image-loop {
	width: 100%;
	height: 400px; /* 画像の高さを指定 */
	position: relative;
	background: url("//shibayamaryu.com/wp-content/uploads/2023/02/shugetu002.jpg") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 35s linear infinite; 
	margin: 0px 0;
	padding: 0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -1681px 0; } /* 1666pxは使用した背景画像の長さ */
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.new-entry-cards.large-thumb a {
width: 50%;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.new-entry-cards.large-thumb a {
width: 100%;
}
}