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

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

/* H2見出しのスタイル */
.article h2 {
	background-color: #005e1d;
    color: white;/* 文字の色 */
    padding: 15px;
    margin-top: 80px; /* 見出しとその直前の文字の距離 */
}

/* H3見出しのスタイル */
.article h3 {
    background-color: transparent;
    color: black;/* 文字の色 */
    border-left: 8px solid #005e1d; /* 見出し左線色・太さ */
    border-bottom: 1px solid #005e1d; /* 見出し下線色・太さ */
    padding: 12px;
    margin-top: 60px; /* 見出しとその直前の文字の距離 */
}

/* H4見出しのスタイル */
.article h4 {
    background-color: transparent;
    color: black;/* 文字の色 */
    border-left: 6px solid #005e1d;  /* 見出し左線色・太さ */
    border-bottom: 1px solid #005e1d; /* 見出し下線色・太さ */
    padding: 10px;
    margin-top: 40px; /* 見出しとその直前の文字の距離 */
}

/* H5見出しのスタイル */
.article h5 {
    background-color: transparent;
    color: black; /* 文字の色 */
    border-left: 4px solid #005e1d;  /* 見出し左線色・太さ */
    border-bottom: 1px solid #005e1d; /* 見出し下線色・太さ */
    padding: 8px;
    margin-top: 30px; /* 見出しとその直前の文字の距離 */
}

/* H6見出しのスタイル */
.article h6 {
    background-color: transparent;
    color: black; /* 文字の色 */
    border-left: 2px solid #005e1d;  /* 見出し左線色・太さ */
    border-bottom: 1px solid #005e1d; /* 見出し下線色・太さ */
    padding: 6px;
    margin-top: 20px; /* 見出しとその直前の文字の距離 */
}


/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 10px 5px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:center;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 20px;
    font-weight: 700;
    color:#00994C; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -35px;
    width: 30px;
    height: 30px;
    font-family: "Font Awesome 5 Free";
    content : "\f03a"; /* アイコンを変える場合はここを変更 */
    font-size:18px;
    margin-right:5px;
    color:#FFFFFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#00994C; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 30%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:6px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.3em 0 0.3em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #00994C; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

/*SNSボタン全体とサイトリンクボタン*/
.author-box .sns-follow-buttons a.follow-button {
font-size: 20px;
width: 28px;
height: 28px;
color: #fff; /*文字色*/
border:none;
background-color:#00994C; /*ボタン色*/
border-radius: 4px;
}
/*ホバー時*/
.author-box .sns-follow-buttons a.follow-button:hover {
border: 1px solid #002561; /*枠線色*/
background-color: #fff; /*ボタン色*/
color: #002561; /*文字色*/
}

/*カテゴリーのカスタマイズ*/

.widget_categories ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
    font-size: 16px;
}

/*カテゴリーのアイコンを変更*/
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f192"; /*アイコンのフォント*/
  color:#a8bcc8; /*アイコンの色*/
  padding-right:5px; /*アイコンとフォントの間の余白*/
  font-weight: 900; /*アイコンの太さ（なくてもOK）*/
  font-size:18px; /*アイコン・フォントの大きさ（なくてもOK）*/
}

.widget_categories > ul > li > a:first-child { 
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
    display: block;
    float: right;
    background: #ededed;
    padding: 0 1em;
    font-size: 14px;
    margin-top: .2em;
    border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color:#72c7e6;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
    background: #72c7e6;
    color: #fff;
    transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
    color:#333;
    text-decoration: none;
    padding: 0 4px 4px 4px;
    display: block;
    border: none;
}
/*子カテゴリーのアイコンを変更*/
.widget_categories ul li ul li a::before{ 
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f061"; /*アイコンのフォント*/
  color: #a8bcc8; /*アイコンの色*/
}

/* サイドバーの見出しをカスタマイズ */
.sidebar .widget_recent_entries h2 {
    background-color: #f0f0f0; /* 背景色 */
    color: #333; /* 文字色 */
    padding: 5px; /* 余白 */
    border-radius: 5px; /* 角丸 */
　  font-size: 16px;
}

/* 最近の投稿リストのスタイル */
.sidebar .widget_recent_entries ul {
    list-style: none; /* リストマーカーを削除 */
    padding: 0;
}

.sidebar .widget_recent_entries ul li {
    margin-bottom: 2px; /* 各投稿の間隔 */
}

.sidebar .widget_recent_entries ul li a {
    color: #000000; /* リンク色 */
    text-decoration: none; /* 下線を削除 */
}

.sidebar .widget_recent_entries ul li a:hover {
    color: #72c7e6; /* ホバー時のリンク色 */
    text-decoration: underline; /* ホバー時の下線 */
}


/* サイドバーのウィジェットタイトル */
.sidebar h3 {
    background-color: #005e1d; /* 背景色 */
    color: #ffffff; /* 文字色 */
    padding: 10px; /* 内側の余白 */
    border-radius: 5px; /* 角を丸くする */
    text-align: center; /* 中央揃え */
}

/* タイトルバーのフォントを変更 */
.site-name-text {
    font-family: 'Avenir', 'Helvetica Neue', sans-serif;
    font-size: 40px; /* 必要に応じてサイズも変更 */
}

/* グローバルメニューのフォントサイズ等変更 */
.navi-in .menu-header .item-label {
    font-size: 18px; /* 必要に応じてサイズを変更 */
    font-weight: bold; /* 文字を太字にする */
}

/* サイトマップカスタマイズ */

/* (1)カテゴリ先頭記号を非表示 */
.wsp-container > ul.wsp-posts-list>li {
list-style-type: none;
}

/* (2)カテゴリ背景色と位置調整 */
.wsp-container strong.wsp-category-title {
display: block;
padding: 0.2em 1.0em;
background: #e5f5f7;
}

/* (3)全体の余白をゼロに(全体左寄せ) */
.wsp-container > ul.wsp-posts-list {
padding: 0;
}

/* (4)カテゴリごとの末尾に余白*/
ul.wsp-posts-list {
padding-bottom: 15px;
}

/* (5)記事タイトルの先頭記号を項番に */
.wsp-container li {
list-style-type: decimal;
}

/* サイトマップカスタマイズ ここまで*/

/* サイドバーの面をへこませる */
#sidebar {
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

/* コンテンツの面をへこませる */
#content {
    box-shadow: inset 2px 2px  10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}


/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background: #005e1d;
	color: #c0dbe2;
}

.logo-menu-button.menu-button{
	background: #005e1d;
}

.mobile-menu-buttons{
	background: #005e1d;
}

/*ヘッダーの文字色と背景色を変える追加CSS*/
.menu-button-in{
	color: #c0dbe2!important;
	background-color: #005e1d!important;
}

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#666666; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#ffaf00; /* マウスホバー時の文字色 */
}
#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;
  }
}

/* トップベージ以外のページでロゴとヘッダーメニューの間の間隔をなくす */
.header .logo {
    margin-bottom: 0;
    padding-bottom: 0;
}

.header .navi {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* トップページだけにヘッダーを表示 */
.home .header {
    display: block;
}

/* 投稿ページと固定ページのヘッダーを非表示にする */
.single .header,
.page .header {
    display: none;
}

/* グローバルメニューとコンテンツの間隔をなくす */
#navi {
    margin-bottom: 0;
}

.content {
    margin-top: 0;
}


/* ロゴの初期状態を非表示にする */
.site-logo {
    display: none;
}


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

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

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

}