@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){
  /*必要ならばここにコードを書く*/
}

/* ==================================
   記事用 ナンバー付きH2見出し
================================== */

.entry-content {
  counter-reset: mia-heading;
}

.entry-content h2.mia-heading {
  counter-increment: mia-heading;

  display: flex;
  align-items: center;
  gap: 12px;

  margin: 2.8em 0 1.3em;
  padding: 0;

  background: none;
  border: none;

  color: #253e59;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.5;
}

/* 01・02・03 の丸 */
.entry-content h2.mia-heading::before {
  content: counter(mia-heading, decimal-leading-zero);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  box-sizing: border-box;
  border-radius: 50%;

  background: #527b9c;
  color: #ffffff;

  font-size: 15px;
  font-weight: 500;
}

/* 見出し右側の細い線 */
.entry-content h2.mia-heading::after {
  content: "";

  flex: 1;
  height: 1px;
  min-width: 25px;

  background: #aab9c5;
}

/* スマホ */
@media screen and (max-width: 600px) {

  .entry-content h2.mia-heading {
    gap: 9px;
    margin: 2.3em 0 1em;
    font-size: 1.1em;
  }

  .entry-content h2.mia-heading::before {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 12px;
  }
}

/* 汎用情報カード */
.entry-content .mia-info {
  margin: 2em 0;
  padding: 18px 22px;
  background: #f4f8fb;
  border-left: 4px solid #527b9c;
  border-radius: 6px;
}

.entry-content .mia-info p:first-child {
  margin-top: 0;
  margin-bottom: 10px;
  color: #253e59;
  font-size: 1.05em;
  font-weight: 700;
}

/* ==================================
   目次デザイン
================================== */

.entry-content .toc {
  background: #f7fafc;
  border: 1px solid #d6e2eb;
  border-radius: 8px;
  padding: 22px 26px;
}

/* 「目次」のタイトル */
.entry-content .toc-title {
  color: #253e59;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 目次のリンク */
.entry-content .toc a {
  color: #253e59;
  text-decoration: none;
}

/* 01・02などの番号 */
.entry-content .toc-list {
  color: #527b9c;
}

/* 項目同士を少しゆったり */
.entry-content .toc-list li {
  margin: 8px 0;
  line-height: 1.7;
}

/* 目次タイトルを「CONTENTS　目次」に */
.entry-content .toc-title {
  font-size: 0;
}

.entry-content .toc-title::before {
  content: "CONTENTS　目次";
  font-size: 16px;
  color: #253e59;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ==================================
   目次の開閉を矢印で表示
================================== */

/* 閉じているとき */
.entry-content .toc-title::after {
  content: "⌄";
  margin-left: 8px;
  color: #527b9c;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

/* 開いているとき */
.entry-content .toc-checkbox:checked + .toc-title::after {
  content: "⌃";
}

/* ==================================
   サイドバー文字サイズ・余白調整
================================== */

/* サイドバー全体の基本文字サイズ */
.sidebar {
  font-size: 14px;
}

/* カテゴリー・アーカイブなどのリスト */
.sidebar ul li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* リスト内リンク */
.sidebar ul li a {
  font-size: 14px;
  line-height: 1.5;
}

/* プロフィール本文 */
.sidebar .author-box,
.sidebar .author-box p {
  font-size: 14px;
  line-height: 1.6;
}

/* サイドバーのリスト間隔をコンパクトに */
.sidebar ul li {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.4;
}

/* リンク自体の余白も調整 */
.sidebar ul li a {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.4;
}

/* ==================================
   トップナビの文字サイズ
================================== */

#navi .item-label {
  font-size: 14px;
}

/* トップメニューの横幅を少しコンパクトに */
#navi .navi-in > ul > li {
  width: 190px;
}

/* PCヘッダーを横長に調整 */
@media screen and (min-width: 769px) {
  #header {
    aspect-ratio: 3 / 1;
    background-size: cover;
    background-position: center 30%;
  }
}

/* ==================================
   PCヘッダー タイトルを左寄せ
================================== */

@media screen and (min-width: 769px) {

  #header .logo {
    text-align: left;
    margin-left: 4%;
    margin-right: auto;
  }

  #header .site-name-text {
    font-size: 28px;
  }
}