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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ホームページの目次を非表示 */
.home.page .toc {
  display: none;
}
/* ホームページのタイトル・SNS・日付を非表示 */
.home.page .entry-title,
.home.page .sns-share,
.home.page .date-tags,
.home.page .post-date,
.home.page .post-update {
  display: none;
}
/* ホームページだけサイドバーを非表示 */
.home.page #sidebar {
  display: none;
}

/* ホームページのメイン部分を広げる */
.home.page #main {
  width: 100%;
  margin-right: 0;
}
/* ヘッダーのサイトタイトル */
.logo-header a,
.site-name-text {
  color: #334A68;
}
/* ヘッダーナビ */
#navi .navi-in a {
  color: #334A68;
}

/* マウスを乗せたとき */
#navi .navi-in a:hover {
  color: #A84D52;
  background-color: #F5F8FA;
}
/* 現在開いているページのナビを強調 */
#navi .current-menu-item > a,
#navi .current_page_item > a {
  color: #334A68;
  font-weight: 600;
  border-bottom: 2px solid #A84D52;
}
/* ホームページのボタン */
.home.page .wp-block-button__link {
  background-color: #334A68;
  color: #ffffff;
  border-radius: 3px;
}

/* ホームページのボタン：ホバー */
.home.page .wp-block-button__link:hover {
  background-color: #A84D52;
  color: #ffffff;
}
/* ホームページのセクション見出し */
.home.page .entry-content > h2 {
  color: #334A68;
  background-color: #F5F8FA;
  border-left: 4px solid #A84D52;
  padding: 16px 20px;
}
/* Latest Practical Guides の記事タイトル */
.home.page .wp-block-latest-posts__post-title {
  color: #334A68;
  text-decoration: none;
}

.home.page .wp-block-latest-posts__post-title:hover {
  color: #A84D52;
}
/* Latest Practical Guides の Read more */
.home.page .wp-block-latest-posts__post-excerpt a {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  background-color: #334A68;
  color: #ffffff;
  text-decoration: none;
  border-radius: 3px;
}

.home.page .wp-block-latest-posts__post-excerpt a:hover {
  background-color: #A84D52;
  color: #ffffff;
}
/* Latest Practical Guides の記事カード */
.home.page .wp-block-latest-posts.is-grid li {
  background-color: #ffffff;
  border: 1px solid #E3E8ED;
  padding: 16px;
  box-sizing: border-box;
}
/* Read more を独立した行にする */
.home.page .wp-block-latest-posts__post-excerpt a {
  display: block;
  width: fit-content;
  margin-top: 14px;
}
/* Read more の回り込みを解除 */
.home.page .wp-block-latest-posts__read-more {
  display: block !important;
  float: none !important;
  clear: both;
  width: fit-content;
  margin-top: 14px;
}
/* Latest Practical Guides が1記事だけのとき */
/* Latest Practical Guides が1記事だけのとき */
/* Latest Practical Guides：1記事のとき中央表示 */
.home.page ul.wp-block-latest-posts.is-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px;
}

.home.page ul.wp-block-latest-posts.is-grid > li:only-child {
  width: 520px !important;
  max-width: 100% !important;
  flex: 0 1 520px !important;
  margin: 0 auto 24px !important;
}
/* ホームページのフォローボタン・投稿者名を非表示 */
.home.page .sns-follow,
.home.page .author-info {
  display: none;
}
/* フッター */
.footer {
  background-color: #334A68;
  color: #ffffff;
}

/* フッター内のリンク */
.footer a {
  color: #ffffff;
}

/* フッターリンクにマウスを乗せたとき */
.footer a:hover {
  color: #F6C7C9;
}
/* フッターの上下余白 */
.footer {
  padding-top: 28px;
  padding-bottom: 28px;
}
/* フッターメニューと著作権表記を中央寄せ */
.footer-bottom-content {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}

.navi-footer-in > .menu-footer {
  justify-content: center !important;
}

.copyright {
  text-align: center !important;
}
/* ホームページ：スマホ表示の文字サイズ調整 */
@media screen and (max-width: 834px) {

  .home.page .entry-content {
    font-size: 16px;
    line-height: 1.8;
  }

  .home.page .entry-content h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .home.page .entry-content > h2 {
    font-size: 23px;
    line-height: 1.3;
    padding: 12px 14px;
  }

  .home.page .wp-block-column h2,
  .home.page .wp-block-column h3 {
    font-size: 21px;
    line-height: 1.3;
  }

  .home.page .wp-block-button__link {
    font-size: 16px;
    padding: 11px 18px;
  }
}
/* Sora / Yukiプロフィール画像：スマホ */
@media screen and (max-width: 834px) {

  .home.page .character-profile-image {
    width: 100%;
    text-align: center;
  }

  .home.page .character-profile-image img {
    display: block;
    width: 60% !important;
    max-width: 360px;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media screen and (max-width: 834px) {
  .home.page .wp-block-columns p {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}
/* 記事ページのタイトル */
.single-post .entry-title {
  color: #334A68;
}
/* 記事ページのカテゴリーラベル */
.single-post .eye-catch .cat-label {
  background-color: #334A68;
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 6px 10px;
}
/* 記事本文のH2見出し */
.single-post .entry-content h2 {
  color: #334A68;
  background-color: #F5F8FA;
  border-left: 4px solid #A84D52;
  padding: 16px 20px;
}
/* 記事本文のH3見出し */
.single-post .entry-content h3 {
  color: #334A68;
  background: transparent;
  border: none;
  border-bottom: 2px solid #DCE5EC;
  padding: 8px 0 10px;
}
/* 記事本文のリンク */
.single-post .entry-content a {
  color: #334A68;
}

/* 記事本文のリンク：ホバー */
.single-post .entry-content a:hover {
  color: #A84D52;
}
/* Yuki：左側の吹き出し */
.single-post .speech-wrap.sbp-l .speech-balloon {
  background-color: #FCECEF;
  border-color: #E7B8BE;
}

/* Yuki：吹き出しの三角 */
.single-post .speech-wrap.sbp-l .speech-balloon::before {
  border-right-color: #E7B8BE;
}

.single-post .speech-wrap.sbp-l .speech-balloon::after {
  border-right-color: #FCECEF;
}

/* Yuki：アイコンの枠 */
.single-post .speech-wrap.sbp-l .speech-icon-image {
  border-color: #E7B8BE;
}
/* Sora：右側の吹き出し */
.single-post .speech-wrap.sbp-r .speech-balloon {
  background-color: #EAF4F8;
  border-color: #B9D3E0;
}

/* Sora：吹き出しの三角 */
.single-post .speech-wrap.sbp-r .speech-balloon::before {
  border-left-color: #B9D3E0;
}

.single-post .speech-wrap.sbp-r .speech-balloon::after {
  border-left-color: #EAF4F8;
}

/* Sora：アイコンの枠 */
.single-post .speech-wrap.sbp-r .speech-icon-image {
  border-color: #B9D3E0;
}
/* 吹き出し下のキャラクター名 */
.single-post .speech-wrap.sbp-l .speech-name {
  color: #A84D52;
  font-weight: 600;
}

.single-post .speech-wrap.sbp-r .speech-name {
  color: #334A68;
  font-weight: 600;
}
/* 記事ページの目次 */
.single-post .toc {
  background-color: #F5F8FA;
  border: 1px solid #DCE5EC;
  border-left: 4px solid #A84D52;
  border-radius: 4px;
  padding: 18px 22px;
}

/* 目次タイトル */
.single-post .toc-title {
  color: #334A68;
  font-weight: 600;
}

/* 目次内リンク */
.single-post .toc a {
  color: #334A68;
  text-decoration: none;
}

.single-post .toc a:hover {
  color: #A84D52;
}
/* サイドバー内のブロック見出し */
#sidebar .wp-block-heading,
.sidebar .wp-block-heading {
  color: #334A68 !important;
  background-color: #F5F8FA !important;
  border-left: 4px solid #A84D52 !important;
  padding: 12px 14px !important;
}
/* サイドバーのSearchボタン */
#sidebar .wp-block-search__button {
  background-color: #334A68;
  color: #ffffff;
  border: none;
  border-radius: 3px;
}

/* Searchボタン：ホバー */
#sidebar .wp-block-search__button:hover {
  background-color: #A84D52;
  color: #ffffff;
}
/* サイドバーのRecent Postsリンク */
#sidebar .wp-block-latest-posts a {
  color: #334A68;
  text-decoration: none;
}

/* Recent Postsリンク：ホバー */
#sidebar .wp-block-latest-posts a:hover {
  color: #A84D52;
}