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

/* =========================================================
  共通：色（今後の変更を楽にするため）
========================================================= */
:root{
  --accent: #B60F3C;         /* 旧 #ff9900 を置き換えた差し色 */
  --site-bg: #e8e8e8;        /* サイト背景色に合わせる（おすすめカード背景など） */
  --text-dark: #333333;
  --text-mid:  #7b7b7b;
  --soft-gray: #f6f6f6;
  --very-soft: #f7f7f7;
  --white: #ffffff;
  --offwhite: #f8f8f8;
}

/* =========================================================
  全体のバランス
========================================================= */
.entry-content{
  /* 本文下の空白を削除 */
  padding-bottom: 0;
  margin-bottom: 0;
}
.body .article{
  /* 本文SNSフォロー下の空白 */
  margin-bottom: 0;
}
@media (max-width: 1023px){
  /* 本文左右の空白 */
  article > .entry-content,
  article > footer.article-footer{
    padding: 0 20px;
  }
}
@media screen and (max-width: 880px){
  .page-body{ font-size: 16px; }
}
@media screen and (max-width: 480px){
  .page-body{ font-size: 15px; }
}

/* 画像の影（ヘッダー内などは個別で解除） */
img{
  box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}

/* タップ時のハイライトを消す（スマホ） */
a{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* =========================================================
  ヘッダーロゴ（PC）
========================================================= */
@media screen and (max-width: 1023px){
  .container{ margin-top: -3px; }
}
.logo-image{
  padding: 0;
  margin-left: 1em; /* ロゴが左に詰まる場合は0.1刻みで調整 */
  margin-top: 1em;
  margin-bottom: 1em;
  max-height: 200px; /* 大きいロゴを使う場合は増やす */
}
.logo{
  /* ロゴ画像を中央に配置したい場合はこの指定を削除 */
  text-align: left;
}
.logo-header img{
  /* ヘッダーのロゴ画像だけ影を消す */
  box-shadow: none !important;
}

/* =========================================================
  ヘッダー（モバイル）：ヘッダーメニュー・検索アイコン
========================================================= */
@media (max-width:1023px){
  .header-container{ display: none; }

  img.site-logo-image{
    max-height: 35px;
    padding: 2px 0 0 5px;
    box-shadow: none;
  }

  /* モバイルヘッダー背景 */
	.mobile-header-menu-buttons{
		background: var(--offwhite);
	}
}
.mobile-menu-buttons{
  height: 50px;
  box-shadow: none;
}
.mobile-menu-buttons > li{ padding-top: 0; }
.menu-button{ margin: auto; }
.mobile-menu-buttons .menu-button:hover{ background-color: var(--white); }

/* モバイルの時だけ画像変更 */




/* モバイルのアイコン色（ここは元の緑を維持） */
span.fas.fa-search::before{
  color: #90C31F;
  margin-left: 1em;
}
span.fas.fa-bars::before{
  color: #90C31F;
  margin-right: 1em;
}

/* モバイルボタンの文字を非表示 */
.navi-menu-caption.menu-caption,
.home-menu-caption.menu-caption,
.search-menu-caption.menu-caption,
.top-menu-caption.menu-caption,
.sidebar-menu-caption.menu-caption{
  display: none;
}

/* =========================================================
  ヘッダーメニュー（PC）
========================================================= */
.navi-in > ul{
  /* メニューを中央にしたい場合はこの指定を削除 */
  justify-content: flex-start;
}
.navi-in > ul li{
  line-height: 40px;
  height: 40px;
}
.navi-in a{ font-size: 15px; }
#navi .navi-in a:hover{ transform: none !important; }

/* サブメニュー */
.navi-in > ul .sub-menu a{ padding: 0; }
.navi-in > ul .sub-menu{
  box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap{
  color: var(--text-dark);              /* 文字色 */
  border-top: dotted #dddddd;
  background: var(--white);             /* 背景色 */
  padding: 0 0 0 2em;
  margin: 0;
}
.navi-in > ul .sub-menu a:hover{ transform: none !important; }

div#header-container{ box-shadow: none; }
div.item-label{ font-weight: bold; }

/* =========================================================
  アピールエリア（ヘッダー下の細帯）
========================================================= */
.appeal{
  padding: 0 0 .1em;
  box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
  padding: 0;
  min-height: 0px;
  max-height: 30px;
}
.appeal-content{
  background-color: #ffcccc; /* アピールエリア背景（必要なら後で差し色に合わせて調整） */
  margin: auto;
  padding: 0;
  max-width: 100%;
  opacity: 1;
  line-height: 1.6;
}
a.appeal-button{
  color: var(--offwhite) !important; /* 文字色 */
  font-size: .85em;
  padding: 0 23em 0;
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  box-shadow: none;
}
.appeal-button:hover{
  transform: none;
  box-shadow: none;
}

/* アピールエリア：レスポンシブ */
@media screen and (max-width: 1023px){
  a.appeal-button{ padding: 0 18em 0; }
}
@media screen and (max-width: 834px){
  a.appeal-button{ padding: 0 13em 0; }
  .appeal{ padding: .1em 0 .25em; }
}
@media screen and (max-width: 652px){
  a.appeal-button{ padding: 0 8em 0; }
}
@media screen and (max-width: 500px){
  a.appeal-button{ padding: 0 6em 0; }
}
@media screen and (max-width: 420px){
  a.appeal-button{ padding: 0 3em 0; }
}

/* =========================================================
  おすすめカード（ホーム上部）
========================================================= */
div#recommended-in.recommended-in.wrap.cf{
  margin-top: 20px;
  max-height: 220px;
}
@media screen and (min-width: 1024px){
  div#recommended-in.recommended-in.wrap.cf{ padding: 0 2em; }
}

.widget-entry-cards .a-wrap{
  transition: all .2s;
}
.widget-entry-cards .a-wrap:hover{
  transform: translateY(-1px);
  transition: all .2s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
  opacity: 1.0;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content{
  transition: all .1s;
  opacity: 1.0;
}
.widget-entry-cards.large-thumb-on .card-content{
  background: rgba(151, 151, 151, 0);
}

a.navi-entry-card-link.widget-entry-card-link.a-wrap{
  border-radius: 10px !important;
  margin: 1em .5em;
  background-color: var(--site-bg); /* サイト背景色に合わせる */
}
div.navi-entry-card-title.widget-entry-card-title.card-title{
  color: var(--text-dark);
  font-weight: bold;
  font-size: .8em;
  background-color: rgba(255, 255, 255, 0.8);
  padding: .6em .5em;
  border-radius: 30px;
}

/* おすすめカード：モバイル */
@media (max-width:834px){
  a.navi-entry-card-link.widget-entry-card-link.a-wrap{
    margin: .3em 0em;
  }
  div.navi-entry-card.widget-entry-card.e-card.cf{
    border-radius: 10px !important;
    overflow: hidden;
    max-height: 100px;
    margin: 0 .3em 0;
    box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1) !important;
  }
  .widget-entry-cards.large-thumb-on .a-wrap:hover{ box-shadow: none; }

  div.navi-entry-card-title.widget-entry-card-title.card-title{
    font-size: .6em;
    padding: .5em;
  }
  div#recommended-in.recommended-in.wrap.cf{
    margin: .7em .2em .3em;
  }
  .widget-entry-cards.large-thumb-on .card-content{
    background: rgba(151, 151, 151, 0.2);
  }
}

main#main.main{ margin: 0; }
.body .navi-entry-cards{ margin-bottom: 0; }

/* =========================================================
  エントリーカード（記事一覧）
========================================================= */
a.entry-card-wrap.a-wrap.border-element.cf{
  padding: 0 0 .5em;
  border-radius: 10px;
  width: 48%;
  margin-bottom: .8em; /* 隙間調整 */
}
a.entry-card-wrap.a-wrap{
  transition: all .1s;
}
a.entry-card-wrap.a-wrap:hover{
  transform: translateY(-1px);
  transition: all .1s;
  background-color: var(--white);
}

/* ★赤い部分（サムネ領域）を縦に広くする：max-heightをやめてheight固定に統一 */
figure.entry-card-thumb.card-thumb.e-card-thumb{
  height: 220px;            /* ←ここが基本の高さ（PC） */
  max-height: none;         /* 念のため無効化 */
  border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画像が引き伸ばされたり余白が出るのを防ぐ（必要なら） */
figure.entry-card-thumb.card-thumb.e-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.e-card-thumb .cat-label{ margin-left: .8em; }

/* エントリーカード：段階的サイズ調整 */
@media screen and (max-width: 1100px){
  figure.entry-card-thumb.card-thumb.e-card-thumb{ height: 200px; }
}
@media screen and (max-width: 1023px){
  figure.entry-card-thumb.card-thumb.e-card-thumb{ height: 240px; }
  a.entry-card-wrap.a-wrap:hover{
    transform: none;
    background-color: var(--white);
  }
}
@media screen and (max-width: 900px){
  figure.entry-card-thumb.card-thumb.e-card-thumb{ height: 230px; }
}
@media screen and (max-width: 750px){
  figure.entry-card-thumb.card-thumb.e-card-thumb{ height: 200px; }
}
@media screen and (max-width: 600px){
  figure.entry-card-thumb.card-thumb.e-card-thumb{ height: 320px; }

  a.entry-card-wrap.a-wrap.border-element.cf{ margin: .5em 1em !important; }
  .ect-vertical-card .entry-card-wrap{ width: 95% !important; }
}
@media screen and (max-width: 480px){
  .e-card-thumb .cat-label{ margin-left: 1em; }
}

/* 一覧リンク（モバイル） */
@media screen and (max-width: 1023px){
  div#list a{
    box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
  }
}

/* タブレット余白 */
@media screen and (min-width: 601px) and (max-width: 834px){
  div#content.content.cf{ margin: 1em; }
}

h2.entry-card-title.card-title.e-card-title{
  font-size: 18px;
  color: #696969;
  font-weight: bold;
  text-align: center;
  line-height: 1.8em;
  margin-top: 3em;
  margin-bottom: 1em;
  padding: 0 1.5em 0;
}
.entry-card-snippet{ -webkit-line-clamp: unset; }

.entry-card-snippet.card-snippet.e-card-snippet{
  font-size: 14px;
  color: var(--text-mid);
  text-align: center;
  border-top: 3px dotted var(--accent);  /* 旧 #ff9900 */
  line-height: 1.8em;
  padding-top: 0.6em;
  margin-left: 2em;
  margin-right: 2em;
  margin-bottom: 4em;
  max-height: 20em;
}

/* エントリーカード：モバイル */
@media (max-width:834px){
  h2.entry-card-title.card-title.e-card-title{
    font-size: 1.15em;
    font-weight: bold;
    line-height: 1.7em;
    padding: 1.5em .8em 1em;
    margin: 0;
  }
  .entry-card-snippet.card-snippet.e-card-snippet{
    font-size: 13px;
    text-align: center;
    border-top: 3px dotted var(--accent);
    line-height: 1.8em;
    padding: 1em 0.5em 0;
    margin: 0 1em 1.5em;
  }
  main.main, div.sidebar{ padding: 0; }
}

a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{
  margin-right: 1.5em !important;
  color: var(--text-mid);
  font-size: .86em;
}

/* カテゴリーラベル（必要なら表示を戻すこと） */
.eye-catch .cat-label,
.cat-label{
  font-size: .7em;
  border-radius: 10px;
  margin: 0.5em;
  padding: 0 0.5em 0;
  background-color: var(--accent); /* 旧 #ff9900 */
  color: var(--offwhite);
}
div.admin-pv{ display: none; } /* 閲覧数を非表示 */

.ect-vertical-card{ justify-content: space-between; } /* 隙間調整 */
.ect--columns .entry-card-wrap{ width: calc((100% - 2em) / 3); }


/* =========================================================
  プロフィール欄（作者ボックス）
========================================================= */
.nwa .author-box{
  max-width: none;
  padding: 0;
  margin-bottom: 0;
}
aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
  padding: 0 !important;
  border-radius: 10px;
}
@media (max-width: 1023px){
  aside{ padding: 0 .5em; }
}

.nwa .author-box .author-thumb{
  width: 100%;
  height: 9em;
  margin: 0 0 5em 0;
  border-radius: 10px 10px 0 0;
}
.author-box figure.author-thumb{
  float: none;
  text-align: center;
  background: url(https://fukumomo3-redlist.com/wp-content/uploads/2025/12/2a572d667e65b39f02fe995a91fdd88e.png) center no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}
.author-box img.avatar.photo{
  background-image: none;
  padding: 0 !important;
  box-shadow: none;
}
.author-box figure.author-thumb img{
  width: 40%;
  max-width: 180px;
  margin-top: 5em;
}

/* プロフィール：PC */
@media (min-width:1023px){
  .nwa .author-box .author-thumb{ height: 8em; }
  .author-box figure.author-thumb img{ max-width: 120px; }
}

/* プロフィール：スマホ */
@media (max-width:480px){
  .nwa .author-box .author-thumb{ height: 8em; }
  .author-box figure.author-thumb img{ max-width: 130px; }
}

.author-box .author-name{ margin: 0 0 1.5em 0; }
.author-box .author-content .author-name a{
  text-decoration: none;
  font-size: 1.2em;
  color: #545454;
}
.nwa .author-box .author-description{ margin-bottom: 1.5em; }
.author-box .author-content .author-description p{
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6em !important;
  margin: 1em;
}
#author_box-2 p{ margin: 1em 2.5em; }

div.author-follows{ padding-bottom: 2em; }
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }

.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
  border-radius: 50%;
  border: none;
  width: 40px;
  height: 40px;
  color: #fff !important;
  margin: 3px;
  transition: .5s;
}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

/* SNSボタン色（元のまま） */
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color:#6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color:#7dcdf7!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color:#7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color:#2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background:linear-gradient(165deg,#427eff 5%,#f13f79 50%) no-repeat!important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color:#bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color:#cd201f!important;}
div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq{background-color:#000000!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color:#0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color:#41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color:#FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color:#111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color:#00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color:var(--accent)!important;} /* 旧 #ff9900 */
div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq{background-color:#5C16C5!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color:#C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color:#4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color:#4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color:#47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color:#2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color:#f26522!important;}

/* プロフィール：1023以下 */
@media (max-width:1023px){
  .nwa .author-box .author-thumb{
    height: 11em;
    margin: 0 0 7em 0;
  }
  .author-name{ font-size: 16px !important; }
  .author-description{
    line-height: 1.5 !important;
    text-align: center;
    margin: 0 auto;
  }
}

/* スマホでサイドバー非表示 */
@media screen and (max-width: 1023px){
  div.sidebar{ display: none; }
}

/* =========================================================
  サイドバー（ウィジェット）
========================================================= */
#sidebar > .widget{ border-radius: 10px; }
.sidebar{ padding-left: 0px; }

@media screen and (max-width: 1205px){
  .sidebar{
    padding: 0%;
    padding-right: 1.5%;
  }
}
.widget_search{ padding: 0; }

/* サイドバー内の検索アイコン（旧 #ff9900 → 新アクセント） */
.sidebar span.fas.fa-search::before{
  color: var(--accent);
}

/* サイドバー見出し */
.sidebar h3{
  color: var(--text-mid);
  border-radius: 0%;
  border-bottom: 3px dotted;
  border-color: var(--accent); /* 旧 #ff9900 */
  padding-bottom: 0.3em;
  margin-top: -0.5em;
  margin-bottom: 1em;
}

/* サイドバーリンク */
.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a{
  background-color: var(--white);
  margin: 6px 0;
  padding: 4px 10px;
  border-radius: 20px;
  transition: 0.4s;
}
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover{
  background-color: var(--accent); /* 旧 #ff9900 */
  color: #fff !important;
}

/* タグクラウド */
.tagcloud a{ background-color: var(--very-soft); }
.tagcloud a:hover{
  background-color: var(--accent); /* 旧 #ff9900 */
  color: #fff !important;
  transition: 0.4s;
}

/* おすすめ（サイドバー） */
.nwa .recommended.rcs-card-margin a{
  margin: 0 0 1em;
  width: 90%;
}
.widget-entry-cards .widget-entry-card-content{ color: #565656; }

/* =========================================================
  記事タイトル（H1）
========================================================= */
header.article-header.entry-header{
  text-align: center;
  margin-bottom: 3em;
}
.article-header h1{
  position: static;
  font-size: 1.4em;
  color: var(--text-dark);
  background-color: var(--white);
  line-height: 1.8em;
  text-shadow: none;
  margin: 0;
  padding: 1.5em .95em 1.1em;
}

/* アイキャッチ */
.eye-catch{
  box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2);
}
.eye-catch img{
  height: auto !important;
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  transform: none;
}

/* カテゴリー・タグ */
a.cat-link,
a.tag-link{
  font-size: .7em;
  border-radius: 10px;
  border: 0;
  margin: 0.5em;
  padding: 0 0.5em 0;
  background: var(--accent) !important; /* 旧 #ff9900 */
  color: var(--white) !important;
}
.cat-link:hover,
.tag-link:hover{
  opacity: .5;
  transition: all .3s ease-in-out;
}
.entry-categories-tags{ margin-bottom: 0.4em; }

/* 日付表示 */
.date-tags{
  font-size: 1.2em;
  color: var(--accent); /* 旧 #ff9900 */
  top: 5px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
div.date-tags span.post-update{ order: 1; }
span.fas.fa-history::before{ content: "\f2f1"; }
div.date-tags span.post-update,
div.date-tags span.post-date{ margin-right: 10px; }

@media (max-width:1023px){
  .entry-categories-tags.ctdt-one-row{ padding: 0; }
}
@media (max-width:420px){
  .article-header h1{ font-size: 1.2em; }
  .date-tags{ top: 3px; }
}
@media (max-width:834px){
  main.main, div.sidebar{ padding: 0; }
}
@media screen and (max-width: 600px){
  .content{ margin-top: 0px; }
}

/* =========================================================
  リスト（ul）
========================================================= */
.article ul:not(li ul,.toc-list,dd ul,.widget ul){
  background: var(--very-soft); /* 背景色 */
  line-height: 2;
  border-radius: 4px;
  border: 1.5px dashed;
  border-color: var(--accent);  /* 旧 #ff9900 */
  padding: 1.5em;
  padding-left: 3em;
}
.article ul li:not(.toc-list li,.toc-list ul li,.faq li){ margin: 0em; }
@media (max-width:600px){
  .article ul:not(li ul,.toc-list,dd ul,.widget ul){ padding-left: 2.5em; }
}
.article li ul{ padding-left: 1em; }

/* =========================================================
  記述リスト（dl）
========================================================= */
.article dl:not(.faq){
  background: var(--very-soft);
  line-height: 2;
  border-radius: 4px;
  border: 1.5px dashed;
  border-color: var(--accent); /* 旧 #ff9900 */
  padding: 1.5em;
  margin: 3em 0;
}
.article dt:not(.faq-question)::before{
  content: '✔ ';
  font-size: 20px;
  color: var(--accent); /* 旧 #ff9900 */
}
.article dd{ margin-left: 5px; }
.article dd ul,
.article dd ol{
  padding-left: 1.2em;
  margin-bottom: 0;
}
.article dl p{ margin-bottom: 0; }
@media (max-width:600px){
  .article dd ul,
  .article dd ol{ padding-left: .9em; }
}

/* =========================================================
  本文見出し（H2〜H5）
========================================================= */
.article h2:before{ background-image: none; }
.article h2{
  line-height: 2;
  background-color: var(--soft-gray);
  font-size: 24px;
  color: var(--text-dark);
  border-radius: 1px;
  border-left: solid 14px var(--accent); /* 旧 #ff9900 */
  padding: 1em;
  margin-top: 70px;
  margin-bottom: 2em;
}
.article h3{
  line-height: 2;
  background-color: var(--soft-gray);
  font-size: 20px;
  border: none;
  color: var(--text-dark);
  border-radius: 2px;
  border-left: 10px solid var(--accent); /* 旧 #ff9900 */
  padding: 0.4em 0.8em;
  margin-top: 90px;
}
.article h3:before{ width: 0em; }

.article h4{
  line-height: 2;
  background-color: var(--soft-gray);
  font-size: 18px;
  border: none;
  color: var(--text-dark);
  border-radius: 2px;
  border-left: 10px solid var(--accent); /* 旧 #ff9900 */
  padding: 0.4em 0.8em;
  margin-top: 90px;
}
.article h5{
  line-height: 2;
  background-color: var(--soft-gray);
  font-size: 16px;
  border: none;
  color: var(--text-dark);
  border-radius: 2px;
  border-left: 8px solid var(--accent); /* 旧 #ff9900 */
  padding: 0.4em 0.8em;
  margin-top: 80px;
}

@media (max-width:480px){
  .article h2{
    font-size: 18px;
    padding: 1.5em 1em 1.5em 0.5em;
  }
  .article h3{
    font-weight: bold;
    font-size: 17px !important;
  }
  .article h4,
  .article h5{ font-size: 15px !important; }
}

/* =========================================================
  目次（TOC）
========================================================= */
.toc-title{ font-weight: bold; }
.toc-title::after{ color: #666666; }

.toc-list > li a{
  font-weight: bold;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}
.toc-list > li a::before{
  font-family: "Font Awesome 5 Free";
  content : "\f144";
  margin-right: 7px;
}
.toc-list > li li a{
  font-weight: normal;
  font-size: 95%;
  margin-top: 0;
  margin-left: 2em;
}
.toc-list > li li a::before{
  content: "";
  width: 7px;
  height: 7px;
  left: -2px;
  display: inline-block;
  border-radius: 50%;
  background: var(--accent); /* 旧 #ff9900 */
  position: relative;
  margin-bottom: 2px;
}
@media (max-width:880px){
  .toc-list > li a{ margin-left: -10px; }
  .toc-list > li li a{ margin-left: -2em; }
  .toc-list > li li a::before{
    left: 3px;
    margin-bottom: 1px;
  }
}
.toc a:hover{
  color: var(--text-dark);
  text-decoration: underline;
}

/* =========================================================
  記事本文：ブログカード
========================================================= */
.blogcard{
  padding-bottom: .8%;
  border: 0px solid whitesmoke;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
  transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
  background-color: #fafafa;
  box-shadow: none;
  transform: none;
}
.blogcard-footer{ padding-top: 2%; }
.blogcard:before{ display: none; }

.internal-blogcard::after,
.external-blogcard::after{
  content: "続きを読む ≫";
  position: absolute;
  bottom: 0.7em;
  right: 1em;
  font-size: 0.7em;
  background-color: #8b968d; /* 続きを読む背景 */
  padding: .4em 3em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
}
.blogcard-content{ max-height: none; }
.blogcard-date{ display: none; }

.blogcard-title{
  font-size: 1em;
  padding: .2em .2em 0;
  line-height: 1.4em;
  text-align: justify;
}
.blogcard-snippet{
  padding: 0em .5em;
  color: var(--text-mid);
  text-align: justify;
}

/* ブログカード：レスポンシブ */
@media screen and (max-width: 1023px){
  .blogcard-title{
    padding: .3em .3em 0em .2em;
    line-height: 1.5em;
  }
  .blogcard-snippet{
    font-size: .9em;
    margin-top: .3em;
  }
}
@media screen and (max-width: 960px){
  .blogcard-title{
    padding: .3em .3em .2em .2em;
    line-height: 1.5em;
  }
  .blogcard-snippet{
    font-size: .8em;
    max-height: 15em;
  }
}
@media screen and (max-width: 834px){
  .blogcard-title{
    font-size: 1.1em;
    padding: .2em .3em .5em .2em;
  }
  .blogcard-snippet{ font-size: .9em; }
}
@media screen and (max-width: 740px){
  .blogcard-title{ padding: .3em; }
}
@media screen and (max-width: 673px){
  .blogcard-title{
    padding: .3em .5em 1em .2em;
    line-height: 1.8em;
  }
  .blogcard-snippet{ display: none; }
}
@media screen and (max-width: 480px){
  .blogcard{ padding-bottom: 2%; }
  .blogcard-title{
    padding: .1em .4em 0em .1em;
    line-height: 1.5em;
  }
  .blogcard-footer{ padding-top: 5%; }
}
@media screen and (max-width: 410px){
  .blogcard-domain{
    max-width: 11em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 375px){
  .blogcard-domain{ max-width: 9em; }
}

/* =========================================================
  ブログカード：ラベル（前回/次回/関連記事など）
========================================================= */
.bct-prev .blogcard-label,
.bct-next .blogcard-label,
.bct-related .blogcard-label,
.bct-reference .blogcard-label,
.bct-reference-link .blogcard-label,
.bct-popular .blogcard-label,
.bct-together .blogcard-label,
.bct-detail .blogcard-label,
.bct-check .blogcard-label,
.bct-pickup .blogcard-label,
.bct-official .blogcard-label,
.bct-dl .blogcard-label{
  display: inline !important;
  background-color: var(--accent); /* 旧 #ff9900 */
  margin-left: .5em;
}
@media screen and (max-width: 600px){
  .blogcard-label{ margin-left: -0.3em !important; }
}

/* =========================================================
  カテゴリー 非表示（必要なら解除）
========================================================= */
.cat-label{ display: none; }

/* =========================================================
  ボタン位置調整
========================================================= */
/* トップへ戻るボタン */
.go-to-top{
  right: 10px;
  bottom: 180px;
}

/* 翻訳（旗）ボタン */
#gt_float_wrapper{
  bottom: 120px !important;
  right: 0px !important;
}
/* =============================
 サムネイル  
================================ */