@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){
  /*必要ならばここにコードを書く*/
}
/*トップページカスマイズ　　swell風カスタマイズ***************************************/
.section-wrap{
	padding-top:3em;/*内側余白をあける（上）*/
	padding-bottom:3em;/*内側余白をあける（下）*/
}

/* 見出し---------------------------------------------- */
div.title{
	margin:2rem 0;/*外側余白*/
	padding:0;/*内側余白*/
	text-align:center;/*中央寄せ*/
	font-size:2.5rem;/*文字の大きさ*/
	letter-spacing:4px;/*文字間の余白*/
	line-height:1.8;/*行の高さ*/
}

div.title:after{
	display:block;
	font-size:.8rem;/*下段サブ見出しの文字の大きさ*/
}

div.newpost:after{
	content:'新着記事';
}
div.category:after{
	content:'カテゴリー別の記事';
}
div.popular:after{
	content:'今日、読まれている記事';
}


/* リンクボタン---------------------------------------------- */
.link-btn{
	display:block;/*ブロック要素にする*/
	margin:1em auto;/*外側余白*/
	padding: 0.7em 2.5em;/*内側余白*/
	text-align: center;/*中央寄せ*/
	text-decoration: none;/*文字装飾なし*/
	border:1px solid #ccc; /*枠線（太さ、種類、色）*/
	font-size:.9em;/*文字の大きさ*/
	color:#333;/*文字色*/
	width:250px;/*ボタンの幅*/
}

/* 記事横並べ(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置にする */
	flex-wrap: wrap;
}

/*新着、人気記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 2);/*pcで横2列に並べる*/
}

.cate .new-entry-cards.large-thumb a,
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*スマホで横１列に*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*スマホで横２列*/	
	}	
}

/*モバイルで文字の大きさを調整する場合*/
/*834px以下*/
@media screen and (max-width: 834px){
       .cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

/* タブ切り替え---------------------------------------------- */

/* 親要素でタブの横並びのためflexを指定*/
.tab-wrap {
	display: flex;
	flex-wrap: wrap;
	margin:5px 0;
}


/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	border-bottom:1px solid #b5b5ae!important;
	text-align: center;
	padding: .5em 1em;
	order: -1;
	position: relative;
	z-index: 1;
	cursor: pointer;
	flex: 1;
}

.tab-label:not(:last-of-type) {
	margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
}

/* アクティブなタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:#b5b5ae!important;
	color:#fff;
}

.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% + 5px);
	margin-left: -15px;
	border: 10px solid transparent;
	border-top:10px solid #b5b5ae;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
	height: auto;
	overflow: auto;
	padding: 15px 0 0 0;
	opacity: 1;
	transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}

/* アピールエリア　（トップページのファーストビジュアル）---------------------------------------------- *
/*全体*/
.appeal{
	height:calc(100vh - 60px); /*パソコンでの高さ調整*/
	background-size: cover; /*背景をフィットさせる*/
}

@media screen and (max-width: 834px){
	.appeal{
		height:calc(100svh - 50px); /*モバイルでの高さ調整*/
	}
}

.appeal-in {
	height:100%; /*パソコン、スマホ高さ調整*/
	width:100%; /*幅を最大に*/
	background-color:rgba(250,250,250,.5); /*背景色、白を透過させる*/
	backdrop-filter: blur(3px); /*ぼかしpxで調整*/
}

/*コンテンツエリア*/
.appeal-content {
	background-color:initial; /*デフォルトの背景色無効化*/
}

/*ボタン（アイコン部分）*/
.appeal-button{
	background-color:initial; /*ボタンの背景色無効化*/
	font-size:.8em; /*文字を少し小さく*/
	color:initial;/*アイコンの色はここで設定*/
}

/*アイコンを追加*/
.appeal-button:before{
	display:block;
	font-family: "Font Awesome 5 Free";
	font-weight:bold;
	content: "\f103"; /*アイコン指定*/
	font-size: 1.5em; /*アイコンの大きさ*/
	animation: move 1s infinite alternate ease-in-out; /*アイコンをゆっくり動かす*/
}

@keyframes move{
  from {
	  transform: translateY(0);
  }
  to {
	  transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html { scroll-behavior: smooth;}

/*アイコンを下に配置する場合はこのCSSを追加*/
.appeal{
	position:relative;/*ここを起点に*/
}

.appeal-button{
	position: absolute;/*アイコンを配置する*/
	bottom:30px;/*下から30pxの位置*/
	left: 50%;/*中央寄せにする*/
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}