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










/*タイトルロゴ*/
.tagline,
.logo {
	text-align: left;
}
.navi-in > ul {
	justify-content: flex-start;
}
/*タイトルロゴ*/



/*フッターの縦線削除*/
#navi-footer li {
  border: none;
}
/*フッターの縦線削除*/



/* メインカラムとサイドバー角を丸くする */
#main ,#sidebar{
  border-radius: 20px;
}
/* メインカラムとサイドバー角を丸くする */



/* サイドバー見出し装飾 */
  h3.widget-sidebar-title {
    color: #333333;                      /* 文字色 */
    background: #ffffff;                 /* 背景色 */
    padding: 0.25em 0.6em;               /* [上下][左右]の余白 */
    border-top: none;                    /* 上枠 */
    border-right: none;                  /* 右枠 */
    border-bottom: none;                  /* 下枠 */
    border-left: solid 6px #355998;      /* 左枠 */
  }
/* サイドバー見出し装飾 */



/* プロフィール枠線消す */
.author-box {
    border: 0;
}
/* プロフィール枠線消す */



/* コメント欄のアバター画像だけ左に寄せる */
.comment-list img.avatar {
  float: left !important;
  margin-right: 12px !important;
  margin-left: 0 !important;
}
/* コメント欄のアバター画像だけ左に寄せる */



/* フォローボタンをスマホでも1段に並べる */
@media screen and (max-width: 767px) {
  /* フォローアイコンのラッパーを横並び */
  .sns-follow-buttons {
    display: flex !important;
    justify-content: center !important;  /* 中央寄せ */
    flex-wrap: nowrap !important;         /* 折返し禁止 */
    gap: 8px !important;                  /* アイコン間の間隔 */
  }

  /* 各アイコンが折返さずに収まるよう最小幅を調整 */
  .sns-follow-buttons a {
    flex: 0 1 auto !important; /* 縮む・伸びる挙動の調整 */
    margin: 0 !important;
  }
}
/* フォローボタンをスマホでも1段に並べる */



/*プロフィールのSNSアイコン変更*/
/*サイドバープロフィールSNSアイコン中央寄せ*/
.sidebar .author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

/*サイドバープロフィールSNSアイコンスタイル設定*/
.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;
}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.bluesky-button.bluesky-follow-button-sq{background-color: #1185FE!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
.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アイコン変更*/



/*プロフィール文字サイズ等変更*/
.widget_author_box .author-description {
  font-size: 15px;
  line-height: 1.5;
}
/*プロフィール文字サイズ等変更*/



/*プロフィール背景画像*/
.sidebar.nwa .author-box{
    padding: 0;
}
.sidebar.nwa .author-box .author-thumb{
    width: 100%;
    margin: 0 0 2.5em 0;
    background: url(https://tomoina-home.com/wp-content/uploads/2026/02/blog-7.webp);
    background-size: cover;
    height: 8em;
}
.sidebar.nwa .author-box .author-thumb img{
    max-width: 100px;
    margin-top: 4.5em;
}
.sidebar.nwa .author-box .author-name{
	margin-bottom: 1em;
}
/* テキストの左右の余白 */
.sidebar.nwa .author-box .author-content{
	padding: 1em 1.5em;
}
/*プロフィール背景画像*/



/*記事選択の際のアニメーション*/
.entry-card-thumb {
    transition-duration: 0.3s; /*アニメーションの時間*/
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}
.entry-card-thumb:hover {
    transform: translateY(-6px); /*マウスホバーで上に移動*/
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}
.entry-card-thumb img { /*画像下の隙間を消す*/
    vertical-align: bottom;
}
.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
    background: none;
}
/*記事選択の際のアニメーション*/



/* 関連記事（ミニカード）画像ホバー */
.related-entry-card img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75);
}

.related-entry-card:hover img {
    transform: translateY(-6px);
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75);
}
/* 関連記事（ミニカード）画像ホバー */



/* 前後記事ミニカード：通常時（アニメーション設定） */
.prev-entry img,
.next-entry img,
.prev-post img,
.next-post img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75);
}
/* 前後記事ミニカード：通常時（アニメーション設定） */



/* 前後記事ミニカード：ホバー時 */
.prev-entry:hover img,
.next-entry:hover img,
.prev-post:hover img,
.next-post:hover img {
    transform: translateY(-6px);
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75);
}
/* 前後記事ミニカード：ホバー時 */



/* サイドバー：週間アクセス数（人気記事）画像ホバー */
#sidebar .widget img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75);
}

#sidebar .widget a:hover img {
    transform: translateY(-6px);
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75);
}
/* サイドバー：週間アクセス数（人気記事）画像ホバー */



/* グローバルメニューのホバー背景色を少し濃い灰色に */
#navi .navi-in > ul > li > a:hover {
    background-color: #cccccc !important; /* 好きな濃さに調整 */
}

/* サブメニューのホバーも同様に */
#navi .navi-in .sub-menu li > a:hover {
    background-color: #cccccc !important;
}
/* グローバルメニューのホバー背景色を少し濃い灰色に */



/* PC用ホバーはそのままでスマホだけ灰色失くす */
#navi .navi-in > ul > li > a:hover,
#navi .navi-in .sub-menu li > a:hover {
    background-color: #cccccc !important;
}

/* スマホではホバー背景を消す */
@media (hover: none) and (pointer: coarse) {
    #navi .navi-in > ul > li > a:hover,
    #navi .navi-in .sub-menu li > a:hover {
        background-color: transparent !important;
    }
}
/* PC用ホバーはそのままでスマホだけ灰色失くす */



/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}
/* 見出し2 */

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* 見出し3 */
/* 見出しリセット */



/* h1 */
.single h1:first-letter {
    font-size: 2em;       /* 先頭文字を大きくする */
    color: #7172ac;       /* 先頭文字の色 */
}
/* h1 */



/* h2 */
body.single-post h2,
body.page h2 {
  padding: 0.4em 0.5em;
  color: #494949;
  background: #f4f4f4;
  border-left: solid 5px #7db4e6;
  border-bottom: solid 3px #d7d7d7;
  font-size: 22px;
}
/* h2 */



/* h3 */
.single .entry-content h3 {
  padding: 0.25em 0.5em;   /* 上下 左右の余白 */
  color: #494949;          /* 文字色 */
  background: transparent; /* 背景透明 */
  border-left: solid 5px #7db4e6; /* 左線 */
  font-size: 20px;
}

/* 関連記事ブロックのH3は除外 */
.single .post-card-list h3 {
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
}
/* h3 */



/* h5 */
.article .entry-content h5 {
  position: relative;
  background: #f1f8ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}

.article .entry-content h5:before {
  font-family: "FontAwesome";
  content: "\f040";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* h5 */



/* カテゴリラベル*/
.entry-card-thumb .cat-label {
    top: -6px;
    left: 3%;
    padding: 11px 10px 5px 10px;
    background-image: linear-gradient(135deg, rgba(245, 148, 84, 0.8) 0%, rgba(245, 86, 148, 0.8) 100%);
    border: 2px solid #222;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-5deg);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
/* カテゴリラベル*/



/* TOPタブ選んだ時の色変更*/
/* PCのみ hover（Cocoon標準の灰色に戻す） */
@media (hover: hover) and (pointer: fine) {
  .index-tab-buttons .index-tab-button:hover {
    background-color: #e6e6e6 !important; /* Cocoon標準の灰色 */
    color: #333333 !important;
  }
}

/* 選択中タブ：文字を白にしない */
.index-tab-buttons .index-tab-button.is-active {
  color: #333333 !important;
}
/* TOPタブ選んだ時の色変更*/



/* 見出し下の余白を調整 */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-bottom: 0.5em; /* デフォルトは1em以上のことが多いので半分くらいに */
    margin-top: 1em; /* 上余白も調整したい場合 */
}
/* 見出し下の余白を調整 */



/* 固定ページ更新日非表示 */
.post-63 .date-tags,
.post-86 .date-tags,
.post-91 .date-tags {
display: none;
}
/* 固定ページ更新日非表示 */



/* ボックスメニューのアイコンだけ浮き＆影を無効化 */
#sidebar .box-menu-icon img {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

/* ホバーしても動かないようにする */
#sidebar .box-menu a:hover img {
    box-shadow: none !important;
    transform: none !important;
}
/* ボックスメニューのアイコンだけ浮き＆影を無効化 */



/* ===== ゲーム評価用 棒グラフ（最終・クリーン版） ===== */

.score-row {
  display: flex;
  align-items: center;
  gap: 0;          /* バー同士の間隔をゼロに */
  margin: 0;       /* 行の余白をゼロに */
}

.score-label {
  width: 100px;    /* 必要に応じて調整 */
  font-weight: bold;
  font-size: 13px;
  line-height: 1;  /* 行間を最小に */
  white-space: nowrap;
  margin-right: 2px; /* ラベルとバーの距離も最小 */
}

.bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}

.bar {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  font-weight: 600;

  position: relative;
  display: block;
  height: 16px;       /* 高さをさらに小さく */
  line-height: 16px;
  min-width: 24px;
  padding: 0 4px;     /* 内側の余白も最小 */
  border-radius: 4px; /* 小さめにして詰め感アップ */

  color: #111;
  font-size: 12px;
  white-space: nowrap;
  text-align: right;

  background: linear-gradient(
    90deg,
    #364fc7 0%,
    #4263eb 18%,
    #4dabf7 36%,
    #74c0fc 54%,
    #a5d8ff 72%,
    #d0ebff 100%
  );

  filter: saturate(0.9) brightness(1.04);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.08);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .score-label {
    width: 70px;
    font-size: 12px;
    margin-right: 1px;
  }

  .bar {
    height: 14px;
    line-height: 14px;
    font-size: 11px;
    padding: 0 3px;
  }

  .score-row {
    gap: 0;
    margin: 0;
  }
}

/* ===== /ゲーム評価用 棒グラフ ===== */



/* ===== ハート評価===== */
.cocoon-heart-rate {
  font-size: 1.2em;
  color: #e25555;
}

.cocoon-heart-rate .heart {
  margin-right: 2px;
}

.cocoon-heart-rate .heart.empty {
  color: #ddd;
}

.cocoon-heart-rate .heart.half {
  position: relative;
  color: #ddd;
}

.cocoon-heart-rate .heart.half::before {
  content: "❤";
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #e25555;
}

.cocoon-heart-rate .rate-num {
  margin-left: 4px;
  font-size: 0.9em;
  color: #666;
}
/* ===== ハート評価===== */



/* ===== 画像横並び（スマホ調整とか色　===== */
.mySwiper img {
    width: 100%;
    display: block;
    border-radius: 8px; /* 任意で角丸 */
}

/* ページネーションの丸 */
.swiper-pagination-bullet {
    width: 5px !important;        /* 少し小さめに */
    height: 5px !important;
    background-color: #ff8000 !important; /* 濃いオレンジ */
    opacity: 1 !important;         /* 薄くならないように */
    border: 2px solid #ff8000;     /* 輪郭も付けて見やすく */
}

/* アクティブな丸 */
.swiper-pagination-bullet-active {
    background-color: #ff4500 !important; /* さらに濃いオレンジ */
}

/* ナビゲーション矢印 */
.swiper-button-next,
.swiper-button-prev {
    color: #ff8000 !important;     /* オレンジ色 */
    font-size: 24px;               /* 大きめに */
    text-shadow: 1px 1px 2px #000; /* 黒影で背景に埋もれない */
}

/* ナビ矢印ホバー時のアクセント */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #ff4500 !important;    /* 少し濃いオレンジ */
}




/* ===== 画像横並び（スマホ調整とか色　===== */



/* 画像まとめを大きく */
.mySwiper-peek {
    max-width: 1200px;
    margin: 30px auto;
    background: linear-gradient(180deg, #111, #000);
    padding: 24px 0;
    border-radius: 16px;
}

/* 画像 */
.mySwiper-peek img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* 中央主役・左右控えめ */
.mySwiper-peek .swiper-slide {
    transform: scale(0.95);
    opacity: 0.6;
    transition: 0.4s;
}

.mySwiper-peek .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

/* ページネーション */
.mySwiper-peek .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background-color: #ff8000;
    opacity: 1;
}

.mySwiper-peek .swiper-pagination-bullet-active {
    background-color: #ff4500;
}

/* ナビ矢印 */
.mySwiper-peek .swiper-button-next,
.mySwiper-peek .swiper-button-prev {
    color: #ff8000;
    text-shadow: 1px 1px 2px #000;
}

/* ===== スマホ調整 ===== */
@media screen and (max-width: 768px) {
    .mySwiper-peek {
        width: 100%;
        margin-left: 0;
        padding: 0;
        border-radius: 0;
        background: #000;
    }

    .mySwiper-peek img {
        height: 260px;
        object-fit: contain;   /* 切れ防止 */
        background: #000;
        box-shadow: none;
        border-radius: 0;
    }

    .mySwiper-peek .swiper-slide {
        transform: none;
        opacity: 1;
    }
}
/* 画像まとめを大きく */




/* 人気記事ランキング（角丸） */
 .widget-entry-cards.ranking-visible .card-thumb::before {
  top: -6px;
  left: -5px;
  border-radius: 100%;
  font-weight: bold;
}
/* 人気記事ランキング（角丸） */