@charset "UTF-8";

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

/************************************
** メインエリア（TOP）
************************************/
   
/* ヘッダーは assets/css/header.css に集約（2026 リニューアル P9）*/

/* 見出しへ飛んだときの固定ヘッダーぶんの逃がしは
   base.css の html{scroll-padding-top} に置き換え（2026 リニューアル P8）
   [id^="toc"]:target{ padding-top:85px; margin-top:-85px } は削除 */

/* 一覧カードは assets/css/cards.css に集約（2026 リニューアル P3）*/

.home main, .archive main{
    background-color: transparent;
    margin-top: 0;
    padding-top: 0;
}

/* ページ送りは assets/css/archive.css に集約（2026 リニューアル P7）。
   ここにあった旧デザイン（.pagination-next の「次のページ」ボタン、
   40px/48px の丸い数字ページャ）は archive.css と競合していた。
   ・.pagination-next は archive.css で display:none にしたので全て無効
   ・.page-numbers の width:40px / 480px以下 48px だけが生きており、
     archive.css の min-width:38px を押し広げて 320〜390px で
     ページャが1行に収まらなくなっていた */

/************************************
** コンテンツエリア（記事内）
************************************/

/* サムネイル真ん中 */
.entry-content figure.wp-block-image {
    width: 100%;
    text-align: center;
}

/* サムネイルラベル非表示 */
 .eye-catch .cat-label {
    display: none;
}

/* コンテンツ真ん中 */
.video-container,
.twitter-tweet {
    margin: 30px auto;
} 

/*記事内画像中央表示*/
.entry-content img{
margin:auto;
display:block;
}

/* 目次は assets/css/toc.css に集約（2026 リニューアル P2）*/

/* 番号付きリスト .list-6 と .list-box-1 は全342ページで0件だったため削除 */

@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 20px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}

/* サイドバーは assets/css/sidebar.css に集約（2026 リニューアル P8）*/

/* 記事本文の左右余白。#main が既に 16px を持っているので、
   ここでも 16px を足すと SP で本文だけ 32px 内側に入り、
   一覧カードやパンくずより狭くなってしまう。
   PCでは本文幅を --w-read で決めているので、この余白は要らない。 */
.single-post .entry-content {
    padding: 0;
}

.article h2 {
    margin: 4em -20px 2em;
}

.article h3 {
    margin: 3em -16px 2em;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}
.article h4 {
    border-top: 0;
}

/*数字リストのpaddingを40から20に変更*/
ol {
    padding-left: 20px;
}


/* 記事下の関連記事*/

h2.related-entry-heading {
  border-top: 1px solid #333;
  font-size: 12px;
  padding-block: 20px 0;
}
h2.related-entry-heading::before {
  content: "RELATED";
  font-size: 16px;
  display: block;
  line-height: 1.2;
}
h2.related-entry-heading span{
  color:#333;
}
.related-entry-card-thumb img {
  border-radius: 8px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); */
}
/* .entry-card-title と、そのspanのグレー下線は cards.css へ移設（P3）*/
.related-entry-card-title {
  color:#333;
  line-height: 1.75;
}
.rect-mini-card .related-entry-card-wrap {
  border-bottom: 1px solid #ddd;
  padding: 10px 10px 6px;
}
.rect-mini-card .related-entry-card-wrap:hover {
  background-color: #f0f0f0;
}
.related-entry-card .cat-label {
  display: none;
}

/*吹き出しのデザイン*/
.sb-id-1 .speech-icon img {
  border: 2px solid var(--c-brand);
  background: #ffffff; /* 背景色 */
}

.sb-id-1 .speech-balloon {
  background-color: #ffffff; /* 吹き出しメイン部分の背景色 */
  border: 2px solid var(--c-brand);
}

/************************************
** サイドバーエリア
************************************/

/* 検索窓は assets/css/search.css（本文カラム・SPヘッダーのパネル）と
   assets/css/sidebar.css（サイドバー）へ移設した。
   ここにあった main#main .search-box{display:none} は、
   検索結果ページの再検索フォームを消してしまうため廃止（P10）。 */


/* フッターは assets/css/footer.css へ移設した（2026 リニューアル P11）。
   ここにあった .navi-footer-in > .menu-footer li{border:none !important} は、
   フッターメニューを「運営」列の縦リストに組み替えたので不要になり廃止。
   コメントアウトされたままだった「SPでフッターナビを固定表示」の検証コードも
   削除（P9 でフッターモバイルボタンを2個に整理したため役目が終わっている）。 */


/* サイドバーは assets/css/sidebar.css に集約（2026 リニューアル P8）*/

/*h5 見出し点線に変更 20200922 murakami*/
.article h5 {
    border-bottom: 2px dashed var(--c-brand);
}

/*h5 浮き出る設定を他箇所に揃える 20200922 murakami*/

/* Stripe（Simple Pay）ボタンの装飾は全342ページで0件だったため削除 */

/* ブログカード文字サイズ変更 20210306 murakami
   → カードの文字サイズと余白は cards.css へ移設（P3）*/

/* サイドバーのバナーにホバーした際に透明度が下がるアニメーション追加 20250115 hotta */
aside div a img {
  border-radius: 8px;
  transition: opacity 0.3s;
}
aside div a img:hover {
  opacity: 0.8;
}

/* 20250713 */
/* サイドバーは assets/css/sidebar.css に集約（2026 リニューアル P8）*/

/* コンテンツ */
.main {
  padding-block: 20px;
}
.archive-title {
  color: #555;
  font-size: 20px;
  padding: 0 10px;
}
.entry-title {
  font-size: 28px;
  line-height: 1.6;
  margin-block: 0 20px;
  text-align: left !important;
}
.entry-tags .tag-link {
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 4px 12px;
}
.entry-tags .tag-link:hover {
  background-color: #ddd;
}
.entry-tags .tag-link .tax-icon {
  color: #666;
}
.date-tags {
  border-bottom: 1px solid #333;
  margin-block: 0 40px;
  padding-block: 0 20px;
}

/* 関連記事 */
.under-entry-content {
  margin-top: 80px;
}
.rect-mini-card .related-entry-card-title {
  font-size: 14px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

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

  /* WordPressログイン時、wpadminbarとヘッダーが被らないように修正 20250228 hotta */
  #wpadminbar + #header-container {
    top: 32px;
  }

  /* ヘッダーのテキストが上下中央に配置されていないのを修正 20250228 hotta */
  #navi .navi-in a {
    display: flex;
    align-items: center;
  }
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  /* ハンバーガーメニュー */
  .menu-close-button {
    font-size: 18px;
    line-height: 2.8;
  }

  .menu-drawer li {
    position: relative;
  }

  .menu-drawer li a {
    border-bottom: 1px solid #ddd;
    padding: 14px 10px;
  }

  .menu-drawer li::after {
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    bottom: 0;
    box-sizing: border-box;
    content: '';
    height: 9px;
    margin: auto;
    position: absolute;
    right: 24px;
    top: 0;
    transform: rotate(45deg);
    transition: all 0.5s ease;
    width: 9px;
  }

  #search-menu-content .search-edit {
    font-size: 14px;
  }

  .search-menu-button .search-box .fa-search:before {
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
    height: 16px;
    width: 16px;
  }

  /* 一覧カードのSP指定は cards.css へ移設（P3）*/
  .related-entry-card-title {
    font-size: 16px;
    line-height: 1.5;
  }

  .entry-title, .archive-title {
    font-size: 16px;
  }
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .popular-entry-cards .article-text {
		font-size: 85%;
	}
}