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

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

body 
.home.page .entry-title,
.home.page .sns-follow,
.home.page .sns-share,
.home.page .post-date,
.home.page .post-update,
.home.page .author-info{
  display: none;
}

.home.page .entry-title{
  display: none;
}

.new-entry-card-date {
  display: block;
}

.btn-grey { background-color: #333333; } /* グレー */

/*h2見出し*/
.home.page h2 {
  border-bottom: solid 5px skyblue;
  position: relative;
}

.home.page h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px #ffc778;
  bottom: -5px;
  width: 30%;
}

/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #ccffff;
	color: #000;
}

.logo-menu-button.menu-button{
	background-color: #ccffff;
}

/************************************
** ヘッダーメニュー ホバーエフェクト化のカスタマイズ
************************************/
#navi .navi-in a {
  position: relative;
}
#navi .navi-in a::after {
  position: absolute;
  color: rgba(255,255,255,1);
  bottom: 0px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 4px;
  background: #ff3377;
  transform: scaleX(0);
  transition: transform 0.4s;
}
#navi .navi-in a:hover::after {
  transform: scaleX(1);
  transition: transform 0.3s;
}

/*新着記事を横一列で表示*/
.widget-entry-cards.card-large-image .a-wrap {
width:32%;
height:auto;
display: inline-flex;
}

/*背景スライドショー化*/
.bg-slider {
	width:100vw;
	height: 80vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-slider__title{
	color: #fff;
	margin-top:;
	font-size: 48px;
	line-height: 1.5;
	font-weight: bold;
	text-align:center;
	text-shadow: 1px 1px 1px #000;
}

/*インスタグラム */
	.SpOnly{
  display: none;
}
.PcOnly{
  display: block;
}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	/*新着記事を横一列で表示*/
.widget-entry-cards.card-large-image .a-wrap {
width:32%;
height:auto;
display: inline-flex;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/*新着記事を横一列で表示*/
.widget-entry-cards.card-large-image .a-wrap {
width:49%;
height:auto;
display: inline-flex;
}

/*インスタグラム */
	.SpOnly{
  display: block;
}
.PcOnly{
  display: none;
}
	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.widget-entry-cards.card-large-image .a-wrap {
width:100%;
height:auto;
display: inline-flex;
}
}