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

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


/************************************
** 記事タイトル・上部ラベル
************************************/

/* 記事タイトル */
.single .article-header .entry-title {
  font-size: 30px;
  line-height: 1.45;
  font-weight: 700;
  margin-bottom: 14px;

  /* 日本語タイトルの不自然な改行を減らす */
  text-wrap: pretty;
  word-break: auto-phrase;
  line-break: strict;
}


/* ラベル全体 */
.tfc-top-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
}


/* 各ラベル */
.tfc-top-label {
  display: inline-flex;
  align-items: center;

  padding: 7px 11px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  color: #356342;
  background: #eef6f0;

  border: 1px solid #cddfd2;
  border-radius: 999px;

  white-space: nowrap;
}


/************************************
** アイキャッチ
************************************/

/* アイキャッチとの間隔 */
.single .eye-catch-wrap {
  margin-top: 6px;
}


/* アイキャッチ画像 */
.single .eye-catch-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}


/************************************
** レスポンシブデザイン
************************************/

/* 1023px以下 */
@media screen and (max-width: 1023px) {
  /* 必要になったら追加 */
}


/* 834px以下 */
@media screen and (max-width: 834px) {
  /* 必要になったら追加 */
}


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

  /************************************
  ** 記事全体
  ************************************/

  /* 記事カード上部の余白を縮める */
  .single .main {
    padding-top: 10px !important;
  }

  .single .article-header {
    margin-top: 0 !important;
  }


  /************************************
  ** 記事タイトル
  ************************************/

  .single .article-header .entry-title {
    font-size: 22px;
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 2px;

    text-wrap: pretty;
    word-break: auto-phrase;
    line-break: strict;
  }

  /* タイトル・日付・アイキャッチを一つのまとまりに見せる */
  .single .article-header .date-tags {
    margin: -12px 0 5px !important;
    padding: 0 !important;
    line-height: 1.2;
  }

  .single .article-header .date-tags .post-date {
    line-height: 1.2;
  }


  /************************************
  ** 記事上部ラベル
  ************************************/

  .tfc-top-labels {
    gap: 6px;
    margin-bottom: 12px;
  }

  .tfc-top-label {
    padding: 6px 9px;
    font-size: 12px;
  }


  /************************************
  ** アイキャッチ
  ************************************/

  .single .eye-catch-wrap {
    margin-top: 0 !important;
  }

  .single .eye-catch-image {
    border-radius: 6px;
  }


  /************************************
  ** スマホのサイトヘッダーを小さくする
  ************************************/

  /* キャッチコピーを非表示 */
  #header-container .tagline {
    display: none !important;
  }


  /* ヘッダー周辺の余分な高さをなくす */
  #header-container,
  #header-container-in,
  #header,
  #header-in {
    min-height: 0 !important;
    height: auto !important;
  }


  /* サイト名を少し小さくする */
  #header-container .site-name-text {
    font-size: 23px !important;
    line-height: 1.35 !important;
  }


  /* ヘッダー下の余白を抑える */
  #header-container {
    margin-bottom: 0 !important;
  }


  /************************************
  ** スマホ：基本情報などの表
  ************************************/

  /* 表全体 */
  .single .entry-content .wp-block-table table {
    width: 100%;
    table-layout: fixed;
  }


  /* 左側の項目名 */
  .single .entry-content .wp-block-table th {
    width: 34%;
    padding: 10px 6px;

    font-size: 13px;
    line-height: 1.45;

    /* 単語の途中で不自然に改行しにくくする */
    word-break: keep-all;
    overflow-wrap: normal;
  }


  /* 右側の内容 */
  .single .entry-content .wp-block-table td {
    width: 66%;
    padding: 10px 8px;

    font-size: 15px;
    line-height: 1.55;

    word-break: normal;
    overflow-wrap: break-word;
  }
}
/* =========================================
投稿ページ上部・サイドバー調整 2026-08-21
========================================= */

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

	/* カテゴリー＋主タグを同じデザインにする */
.single-post .article-header .entry-categories-tags {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.single-post .article-header .entry-categories-tags a {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;

  margin: 0 !important;
  padding: 5px 8px !important;

  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.2 !important;

  color: #fff !important;
  background: #333 !important;

  border: 1px solid #333 !important;
  border-radius: 2px !important;

  text-decoration: none !important;
}

.single-post .article-header .entry-categories-tags a .fa {
  color: #fff !important;
}

.single-post .article-header .entry-categories-tags a:hover {
  background: #4a4a4a !important;
  border-color: #4a4a4a !important;
}
	
  /* 記事カード上部の余白 */
  .single-post #main {
    padding-top: 12px;
  }


  /************************************
  ** 記事上部
  ** 1段目：タイトル
  ** 2段目：カテゴリー ←→ 日付
  ** 3段目：アイキャッチ
  ************************************/

  .single-post .article-header {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
  }

  /* タイトル */
  .single-post .article-header .entry-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
  }

  /* 左側：カテゴリー */
  .single-post .article-header .entry-categories-tags {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;

    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }

  /* 右側：投稿日・更新日 */
  .single-post .article-header .date-tags {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;

    position: static !important;
    width: auto !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    text-align: right;
  }

  /* アイキャッチ */
  .single-post .article-header .eye-catch-wrap {
    grid-column: 1 / -1;
    grid-row: 3;

    margin-top: 0 !important;
  }


  /************************************
  ** サイドバー
  ************************************/

  #sidebar .widget-sidebar-title {
    font-size: 18px;
    line-height: 1.4;
  }

  #sidebar .new-entry-card-title {
    font-size: 14px;
    line-height: 1.55;
  }

  #sidebar .new-entry-card-link {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #sidebar .new-entry-cards .cat-label {
    font-size: 10px;
    line-height: 1.3;
    padding: 2px 5px;
  }

}


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

  /* ホーム画面：トップ画像上の余白を縮める */
  body.home #main {
    padding-top: 10px !important;
  }

  /* 最初のブロックに余白がある場合も詰める */
  body.home #main .entry-content > :first-child {
    margin-top: 0 !important;
  }

}