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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*追加*/
/* トップページ用ヘッダーの非表示 */
body:not(.home) .header {
    display: none;
}

/* その他のページ用ヘッダーの非表示 */
body.home .header-top {
    display: none;
}
/*トップページカスマイズ***************************************/

body {
	background-color:#fff!important;/*背景色を白にしない場合は削除*/
}

/*セクション内側余白（お好みで調整）*/
.section-wrap{
	padding-top:2em;/*内側余白をあける（上）*/
	padding-bottom:2em;/*内側余白をあける（下）*/
}

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

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;/*ボタンの幅*/
	letter-spacing:4px;/*文字間の余白*/
}

/* 記事横並べ(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置にする */
	flex-wrap: wrap;
	justify-content: center;/*カード中央寄せ*/
}

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

.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 {
  --active-tab-color:#b5b5ae; /*選択したタブの色をここに指定*/
  --tab-gap:10px;/*タブ間の余白*/
  display: flex;
  flex-wrap: wrap;
  gap:var(--tab-gap);
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
  color: var(--active-tab-color);
  border-bottom:1px solid var(--active-tab-color);
  text-align: center;
  padding: .5em 1em;
  order: -1;/*タブを上段に表示する*/
  cursor: pointer;
  flex-grow:1;
  position:relative;
}

/* タブのコンテンツ部分*/
.tab-content {
  width: 100%;
  display: none;/*いったん非表示状態に設定*/
}

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

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
  background-color: var(--active-tab-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
    height: 10px;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 20px;
}

.tab-switch:checked+.tab-label+.tab-content {
  display: block;/*選択されたらコンテンツ表示する*/
  margin-top:1em;
}
	
/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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