@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
body {
	 font-size:16px;
	}
 /*フロントページもっと見るを消す*/
.list-new-entries .list-more-button-wrap {
    display: none;
}

/*スタイルリセット用*/
main h2.wp-block-heading,
main h3.wp-block-heading,
main h4.wp-block-heading {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    font-weight: bold;
}

main h2.wp-block-heading:before,
main h3.wp-block-heading:before,
main h4.wp-block-heading:before,
main h2.wp-block-heading:after,
main h3.wp-block-heading:after,
main h4.wp-block-heading:after {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    margin: initial;
    content: initial;
    position: initial;
}

/************************************
** トップページカスタマイズ
************************************/
.home #main h1{
    font-size: 1em;
    color: #555;
    letter-spacing: 1px;
    margin: 1em 0 em;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.home #main h1:before, .home #main h1:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #aaa;
    display: block;
}
.home #main h1:before {
    margin-right: .4em;
}
.home #main h1:after {
    margin-left: .4em;
}
.home #main .large-thumb{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.8em 0;
}
.home #main .large-thumb a{
    width: 50%;
    padding: 10px;
}
.home #main .large-thumb a:hover{
    background:unset;
}
.home #main .widget-entry-cards .e-card {
    font-size: 18px;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height:100%;
}
.home #main .widget-entry-cards .e-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 3px 18px 3px rgba(0,0,0,.08);
}
.home #main .widget-entry-cards figure {
    float: none;
    width: 100%;
}
.home #main .widget-entry-cards figure img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 210px;
}
.home #main .widget-entry-cards .card-content {
    margin: 0 0 0.5em;
    padding:10px 15px;
    background:#fff;
}
.home #main .large-thumb .new-entry-card-title,.home #main .large-thumb .popular-entry-card-title {
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 600;
    color: #555;
    margin-top: 3px;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
    .home #main h1{
        margin: 1em 0 0;
        padding: 0;
        font-size:0.8em;
    }
    .home #main .widget-entry-cards .e-card {
        margin:0 5px;
    }
    .home #main .large-thumb a {
        width: 100%;
        padding: 0;
        margin:0 0 15px;
    }
    .home .mobile-2{
        justify-content:space-between;
    }
    .home .mobile-2 a{
        width:48% !important;
    }
    .home .mobile-2 figure img {
        object-fit: unset !important;
        height: auto !important;
    }
    .home #main .large-thumb .new-entry-card-title{
        line-height:1.3;
    }
}
/************************************
** ボタン
************************************/
.p-button {
    max-width: 300px;
    margin: 0 auto;
}
.p-button a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #eba02f;
    box-shadow: 0 5px 20px rgba(235, 160, 47, .5);
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.p-button a:hover{
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}
.home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{
    display: none;
}
/*フロントページのh1見出し非表示*/
.front-top-page #main .entry-title{
  display: none;
}

/************************************
** カラム
************************************/
/*カラム背景色*/
.header-container,
.main,
.sidebar,
.footer {
background-color: #fcfaf7;
}
/*メインカラム背景色*/
.header-container,
.main, {
background-color: #f8f7f6;
}
/*サイドバー背景色*/
.header-container,
.sidebar,
.footer {
background-color: #fcfaf7;
}
/************************************
** 景品表示法対応
************************************/
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: none; /* 上の線 */
    border-bottom: none; /* テキスト下の線 */
    border-left: none; /* 左の線 */
    border-right: none; /* 右の線 */
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #888181; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #F7EEDF;
    padding: 3px 0;
    margin-bottom: 2em;
}
/************************************
** サイドバーサイト内検索
************************************/
input.search-edit{
  background-color: transparent;/*検索ボックスの背景色*/
}
input.search-edit{
  border: 1px solid #74bfa6;/*検索ボックスのボーダー*/
  position: relative;
}
input.search-edit::placeholder{
  color: #aaa;/*placeholderの文字色*/
}
button.search-submit{
  width: 60px;/*検索ボタンの幅*/
  height: 100%;
  background-color: #74bfa6;/*検索ボタンの色*/
  position: absolute;
  right: 0;
  top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: var(--cocoon-basic-border-radius);
  border-bottom-right-radius: var(--cocoon-basic-border-radius);
  border-bottom-left-radius: 0;
  color: #fff;/*虫眼鏡の色*/
}
/************************************
** サイドバー見出し
************************************/
.sidebar h3 {
    background: none;
    font-size: 16px;
    color: #74bfa6; /* 文字色指定 */
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #74bfa6; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}
/************************************
** サイドバードロップダウン
************************************/
#sidebar select {
  background: transparent;
  color: #5b5b5b; /* 文字色 */
  font-size: 16px;
}
/************************************
** サイドバー文字サイズ
************************************/
/*サイドバー全体 */
}
.widget_recent_entries ul li a {
font-size: 16px;
}
/*プロフィール説明文 */
.nwa .author-box .author-description {
font-size: 16px;
}
/*プロフィール名前 */
.nwa .author-box .author-name {
font-size: 17px;
}
/************************************
** カテゴリーやタグページの見出し
************************************/
.archive-title {
  color: #D19D73; /* 文字色 */
}
/************************************
** 目次
************************************/
/* 目次の背景色を変更する */
.toc-title{
  background-color: #74bfa6;  /* 背景色を変更する */
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #ffffff;  /* 文字の色を変える */
}
  /* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
  font-family: "Font Awesome 5 Free";  /* Font Awesome 5を使用するために指定 */
  content : "\f03a";  /* Font Awesome 5のアイコン番号 */
  font-size:20px;  /* アイコンの大きさ */
  margin-right:10px;  /* アイコン右の余白 */
  color:#74bfa6;  /* アイコンの色 */
  background-color:#ffffff;  /* アイコンの背景の色 */
  border-radius: 50%;  /* アイコンの背景を丸くする */
  padding:8px;  /* アイコン背景の余白 */
}
  font-size:20px;  /* アイコンの大きさ */
  margin-right:10px;  /* アイコン右の余白 */
  color:#a8bcc8;  /* アイコンの色 */
  background-color:#ffffff;  /* アイコンの背景の色 */
  border-radius: 50%;  /* アイコンの背景を丸くする */
  padding:8px;  /* アイコン背景の余白 */
}
/* 目次のH2見出しのみ太字にする */
.toc-content ol li{
  color: #8195a2;  /* 文字の色 */
  margin:0.5em;  /* 文字の余白 */
}
.toc-list > li{
  font-weight: bold;  /* h2のみ太字にする */
}
.toc-list > li li{
  font-weight: normal;  /* h2以外を標準の太さにする */
}
/************************************
** サイドバー目次
************************************/
/* 目次の背景色を変更する */
.sidebar .toc {
  background-color: #fcfaf7;  /* 目次の背景色を変更する */
}
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 390px; /* 目次の高さ上限 */
}
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px; /* スクロールバーの横幅 */
}
/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
}
/************************************
** サイドバー
************************************/
/* サイドバーはみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 300px; /* 目次の高さ上限 */
}
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px; /* スクロールバーの横幅 */
}
/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
}
/* エントリーカード文字大きさ */
.entry-card-title {
 font-size: 18px;
} 
/* サイドバー見出しと文字大きさ */
.sidebar h3 {
font-size: 17px;
}
.widget_recent_entries ul li a {
font-size: 15px;
}
/* サイドバーの角を丸くする */
#sidebar{
	border-radius: 20px; /* 数値を変えたら丸みが変わる */
}
/************************************
** サイドバー目次
************************************/
/* サイドバー目次ブロックの枠線 */
.widget_toc,
.toc-widget {
    border: 1px solid #dddddd; /* 枠線の太さ、種類、色 */
    padding: 16px; /* 内側の余白 */
    background-color: #fcfaf7; /* 背景色（任意） */
    border-radius: 5px; /* 角丸（任意） */
    margin-bottom: 20px; /* 下のウィジェットとの余白 */
}
/************************************
** タグクラウド
************************************/
.tagcloud a{
  border-radius: 0px; /*角の丸み*/
  background-color: #ffffff; /*背景の色*/
  color: #8195a2; /*アイコンと文字の色*/
}
/*投稿本文中タグ：ホバー時のカスタマイズ*/
.entry-tags a:hover {
  color: #8195a2; /*アイコンと文字の色*/
}
/************************************
** 目次
************************************/
/** H3以下のタイトルナンバリング消去 **/
.article .toc-list > li li {
  list-style: none;
}
/** H3以下のタイトル冒頭をドットにする **/
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #b7b7b7; /*こちらで点の色を変更*/
  position: relative;
  margin-bottom: 2px;
 }
/************************************
** サイドバー目次
************************************/
/** H3以下のタイトルナンバリング消去 **/
.widget_toc,
.toc-list > li li {
  list-style: none;
}
/************************************
** サイドバーアーカイブ( ウィジェット アーカイブ)
************************************/
.widget_archive ul li {
  /*親カテゴリ*/
  padding-left: 10px;
  border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
  /*カテゴリ間の下線種類*/
}
.widget_archive ul li a {
  /*リンク*/
  font-size: 16px;
}
.widget_archive ul li a .post-count {
  /*記事数*/
　font-size: 16px;
  /*数字サイズ*/	
}
/************************************
** 吹き出し
************************************/
/* 吹き出しの名前を細くする */
.speech-name {
    font-weight: 300; /* 通常は400やbold。300や200にすると細くなる */
    font-size: 12px;   /* 文字を小さくしたい場合は調整（例：12px） */
    opacity: 0.8;      /* 薄くすることで細く見せることも可能 */
}
/************************************
** サイドバー目次
************************************/
/* サイドバーの目次の番号がはみ出す対策 */
.sidebar .toc-list,
.sidebar .toc-content ol {
  margin-left: 0;
  padding-left: 1.5em; /* 番号が入るスペースを確保 */
  list-style-position: outside; /* 番号を枠の左側（内側）に配置 */
}

/* 数字とテキストの重なりを防止 */
.sidebar .toc-list li,
.sidebar .toc-content ol li {
  margin-bottom: 0.5em;
}