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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*CSSで「@」記号を付加する*/
.domain::before {
  content: '@';
}

/*固定ページのタイトルを非表示*/
.page .entry-title{
  display: none;
}

/*記事のタイトルを非表示*/
.entry-title {
  display: none;
}

/*固定ページの投稿日・更新日を消す*/
.page .date-tags {
    display: none;
}

/*投稿ページの投稿日・更新日を消す*/
.post-date {
    display:none;
}
.post-update{
  display: none;
}

/*著者情報を消す*/
.page .author-info {
    display: none;
}

/*著者情報を消す*/
.post .author-info {
    display: none;
}

/*パンくずリスト カテゴリ・記事タイトルアイコン 非表示*/
.breadcrumb-item > span.fa-folder,
.breadcrumb-item > span.fa-file-o {
  display: none; /*非表示*/
}

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 16px;
font-weight: bold;
}

/*グローバルナビメニュー説明*/
.sub-caption{
font-size:12px; /*文字サイズ*/
font-weight: bold;
color: #000000; /*文字色*/
}

/*グローバルナビの影*/
#navi {
box-shadow:5px 0px 8px -3px #E5E5E5; /*水平方向 垂直方向 ぼかしの距離 広がりの距離 色*/
}

/*グローバルナビ（マウスオーバー）*/
#navi .navi-in a:hover {
color: #2370D3 !important;
background: #FFFFFF;
transition: all .2s ease;
}
/*ナビメニュー下線*/
.navi-in>ul .sub-menu {
opacity: 0.95;
padding-bottom:1px;
}

/************************
* 見出しのカスタマイズ *
*************************/

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}
/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}
/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}
/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}
/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

/*見出しカスタマイズ用コード*/
.article h2 {
    color: #000000;
    margin-top: 25px;
    margin-bottom: 3%;
    border-bottom: 1px solid #808080;
	display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-53%);
    font-size: 15pt;
}
.article h3 {
    color: #333333;
    padding: 10px 15px 9px 16px;
    margin-top: 20px;
    border-left: 4px solid #2370D3;
    border-right: 0px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #FFFFFF;
    background: #FCFCFC;
    font-size: 1.1em;
}
.article h4 {
    position: relative;
    color: #323232;
    padding-left: 1.4em;
    margin-top: 2px;
    margin-bottom: 10px;
    border-top: none;
    border-bottom: none;
    font-size: 1.1em;
}
h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  position: absolute;
  left: 2px;
  top: 2px;
  color: #55A8DC;
}
.article h5 {
    padding: 3px 4px 0px 16px;
    margin-top: 20px;
    font-size: 1.1em;
}
.article h6 {
    padding: 1px 15px 1px 20px;
    margin-top: 25px;
    border-left: solid 4px #808080;
    font-size: 1.1em;
}

/******************************
* エントリーカードのカスタマイズ *
*******************************/

/* 段間設定 */
.entry-content p { 
	margin: 0 0 1.2em 0;/* 段間設定　1.2emを好きな数値に変更してください*/
}

/*エントリーカードのタイトルフォント*/
.widget-entry-card-content{
	font-size: 11pt;/*一覧表示のタイトルフォントサイズ*/
	text-align: center;/*一覧表示のタイトル位置*/
}

/*エントリーカードのカテゴリー表示をカスタマイズ*/
.cat-label {
    top: 0.5em; /*上からの距離*/
    left: 0.5em; /*左からの距離*/
    font-size: 11px; /*文字サイズ*/
    color: #fff; /*文字色*/
    padding: 1px 9px; /*余白*/
    border-radius: 14px; /*角を丸く*/
}

/*大きなサムネイル表示の画像サイズをカスタマイズ*/
    .widget-entry-cards.card-large-image .a-wrap {
    width:auto;
    height:auto;
    display: inline-flex;
}

/*ブログカードの文字が見切れてしまう問題を解決*/
.entry-card-snippet.card-snippet.e-card-snippet{
    max-height:6.3em;
}

/******************************
* 新着記事表示のカスタマイズ *
*******************************/

.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

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

/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}


/*************************
* SNSボタンのカスタマイズ *
**************************/

/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #4F4F4F; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #4F4F4F; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/**********************
* アピールエリアの設定 *
***********************/
/* 背景画像に透過色を被せる */
.appeal .appeal-in {
	width: 100%;
	background-color: rgba(0, 0, 0, .10);
}

/*アピールエリアの背景色*/
.appeal-content {
	background: rgba(100, 100, 100, .40);
}

/*タイトルの背景色・文字色*/
.appeal-title{
	background: rgba(100, 100, 100, .0);
	color: #FCFCFC;
    font-size: 40px;
}
/*メッセージの背景色・文字色*/
.appeal-message {
	background: rgba(100, 100, 100, .0);
	color: #FCFCFC;
}

/* テキストにシャドウを付ける */
.appeal-title {
	text-shadow: 2px 2px 0 #282828;
}

/* スマホ用に表示サイズを変える */
@media screen and (max-width:767px) {
  .appeal-title {
    font-size: 20px;
  }
}

/**********************
* headerの文字サイズ変更 *
***********************/
/* スマホ・タブレットビュー */
#header .site-name-text {
	font-size: 18px;
}
/* タブレットより大きいサイズの指定 */
@media screen and (min-width: 769px) {
	#header .site-name-text {
		font-size: 22px;
	}
}

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

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

/*エントリーカードのタイトルフォント*/
.widget-entry-card-content{
 font-size: 9pt;
}
	
/*大きなサムネイル表示の画像サイズをカスタマイズ*/
.widget-entry-cards.card-large-image .a-wrap {
width:49%;
height:auto;
display: inline-flex;
}
	
.article h3 {
    color: #333333;
    margin-top: 25px;
    line-height: 150%;
    border-left: 10px solid #2370D3;
    border-right: 0px solid #ccc;
    border-bottom: 1px solid #FFFFFF;
    background: #FCFCFC;
    font-size: 1.1em;
}
	
.article h4 {
    position: relative;
    color: #323232;
    padding-top: 1.0em;
    padding-left: 1.4em;
    margin-top: 2px;
    margin-bottom: 10px;
    border-top: none;
    border-bottom: none;
    font-size: 1.1em;
}
h4:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    position: absolute;
    left: 2px;
    top: 18px;
    color: #55A8DC;
}
.article h5 {
    padding-top: 1.0em;
    font-size: 1.1em;
}
	
}

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

/************************************
** フッターモバイルボタンの文字色・背景色
************************************/

.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button:hover,
.mobile-footer-menu-buttons .menu-button a,
.navi-menu-content,
.menu-drawer a,
.menu-drawer a:hover{
  background-color: #17479E;
  color: white;
}


/************************************
** ボックスメニューカスタマイズ
************************************/

.box-menus{
margin:10px; /*全体の外側余白*/
}
.box-menu{
width: 19.2%;
border: 1px solid #15479E; /*枠線の形状・色*/
border-radius: 10px; /*枠線の角丸み*/
margin:4px; /*全体の外側余白*/
padding-bottom:14px; /*枠内余白*/
}
.box-menu:hover { /*オンマウス時*/
box-shadow: inset 1px 1px 0 0 #15479E,
 1px 1px 0 0 #15479E, 1px 0 0 0 #15479E;
border-radius: 10px; /*枠線角丸*/
background: #EFEFEF; /*背景色*/
color:#15479E; /*文字色*/	
}
.box-menu-label{ /*メニューの文字*/
 font-size: 16px; /*文字サイズ*/
color:#303030; /*文字色*/
}
.box-menu-description{ /*説明文の文字*/
 font-size: 12px; /*文字サイズ*/
}
.box-menu-icon { /*アイコン*/
font-size: 30px; /*アイコンサイズ*/
color: #15479E; /*アイコンカラー*/
}