@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部分は削除してOKです）*/
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;/*いったん非表示状態に設定*/
}

/* アクティブなタブ、チェックされているラジオボタンの隣にある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;
}
	
/* ラジオボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}

/* SNSボタンカスタマイズ*/
/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border-radius: 50%; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 24px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}



.ff-noto-sans-jp,
.wf-active .ff-noto-sans-jp {
font-family: "Montserrat" ,"Noto Sans JP" ,sans-serif;
}


/***************************
** グローバルナビのカスタマイズ
****************************/
/* ナビメニュー 文字*/
#navi {
	font-family: 'Montserrat', sans-serif;/*〇〇にはお好きなGoogleフォントを入力*/
	font-weight: bold; /* 太文字 */
	letter-spacing: 0.12em;/*字間を広げる*/
	color: #333;
}
.navi-in a {
	font-size: 13px;/*文字サイズ*/
}

/* safari文字の太さ指定 */
_::-webkit-full-page-media, _:future, :root  
#navi {
	-webkit-text-stroke-width: .1px !important; 
}

 /* ブラウザChromeのみ太文字にする */
@media screen and (-webkit-min-device-pixel-ratio:0){
  #navi {
	-webkit-text-stroke-width: .4px !important;
}
}

/* ナビメニュー 下線*/
#navi .navi-in a::after {
	position: absolute;/*線の位置を絶対配置に*/
	bottom: 12px;/*線の位置*/
	left: 0;
	content: '';
	width: 100%;
	height: 2px;/*線の太さ*/
	background: #FFF035;/*線の色*/
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform 0.3s;/*変形の時間*/
}

#navi .navi-in a:hover::after {
	transform: scale(1, 1);
}

/* タブレットメニュー中央寄せ */
@media screen and (max-width: 768px){
#navi-in{
	display: flex;
	justify-content: center;
}
}

/*スマホメニューを横スクロール*/
@media screen and (max-width: 480px){
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#222; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#222; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
}	
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}

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

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

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