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


/* 記事一覧サムネイルを大きく（16:9横並び・2026-07-11） */
.entry-card-thumb {
  width: 40% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 1.2em 0 0 !important;
}
.entry-card-thumb img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
.entry-card-content {
  margin-left: 0 !important;
  width: auto !important;
  flex: 1 !important;
  overflow: hidden;
}
/* スマホは縦積み：画像全幅→タイトル→抜粋（2026-07-11） */
@media screen and (max-width: 480px) {
  .entry-card-thumb {
    width: 100% !important;
    float: none !important;
    margin: 0 0 0.6em 0 !important;
  }
  .entry-card {
    display: block !important;
  }
  .entry-card-content {
    margin-left: 0 !important;
  }
}


/* スマホヘッダーメニューの折り返し防止（2026-07-11） */
@media screen and (max-width: 480px) {
  .mobile-header-menu-buttons .menu-button {
    white-space: nowrap;
  }
  .mobile-header-menu-buttons .menu-button a {
    font-size: 11px;
    padding: 0 4px;
  }
}

/* スマホ三本線メニューの虹アイコンをグラデーション表示（2026-07-13） */
.mobile-menu-buttons .custom-menu-icon .fa-rainbow {
  background: linear-gradient(180deg, #FF6B6B 0%, #FFA94D 25%, #FFD43B 45%, #69DB7C 65%, #4DABF7 82%, #9775FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 内部ブログカードのデザイン刷新（2026-07-17・libeblog.com参考） */
.internal-blogcard-wrap {
  position: relative !important;
  display: block !important;
  border: 2px solid #7EB6E8 !important;
  border-radius: 12px !important;
  margin-top: 28px !important;
  overflow: visible !important;
  background: #fff !important;
}
.internal-blogcard-wrap .internal-blogcard {
  border: none;
}
.internal-blogcard-wrap .internal-blogcard-label {
  position: absolute;
  top: -16px;
  left: 16px;
  z-index: 2;
  background: #7EB6E8;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.internal-blogcard-wrap .internal-blogcard-label .fa {
  display: none;
}
.internal-blogcard-wrap .internal-blogcard-label::before {
  content: "\1F4D8\00A0\00A0あわせて読みたい";
}
.internal-blogcard-wrap .internal-blogcard-content {
  padding-bottom: 4px;
  position: relative;
  min-height: 0;
}
.internal-blogcard-wrap .internal-blogcard-content::after {
  content: "続きを読む \00BB";
  display: block;
  width: fit-content;
  margin: 10px 0 0 auto;
  background: #7EB6E8;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 16px;
  border-radius: 3px;
}
.internal-blogcard-wrap .internal-blogcard-footer {
  display: none;
}

/* ブログカードの抜粋文を強制表示（Cocoonデフォルトでdisplay:noneだったため） */
.internal-blogcard-wrap .internal-blogcard-snippet {
  display: block !important;
  overflow: hidden;
  color: #666;
}

/* ブログカードのサムネイルを横長16:9に（2026-07-17） */
.internal-blogcard-wrap .internal-blogcard-thumbnail {
  width: 200px !important;
  height: 112px !important;
  border-radius: 0;
  overflow: hidden;
}
.internal-blogcard-wrap .internal-blogcard-thumbnail img {
  width: 200px !important;
  height: 112px !important;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 0;
}

.internal-blogcard-wrap .internal-blogcard-title {
  font-size: 19px !important;
  line-height: 1.4 !important;
}

a.blogcard-wrap.internal-blogcard-wrap.a-wrap {
  border: 2px solid #7EB6E8 !important;
  border-radius: 12px !important;
}

a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-thumbnail {
  margin-top: 16px !important;
}

a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-thumbnail {
  margin-top: 20px !important;
  align-self: flex-start !important;
  float: none !important;
  flex-shrink: 0 !important;
}
a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-content {
  flex: 1 !important;
  min-width: 200px !important;
}

a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard {
  padding-bottom: 4px !important;
}
a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-content {
  padding-bottom: 4px !important;
}

/* プロフィールページ本文上のアイキャッチ（カテゴリカード画像）を非表示（2026-07-17） */
.page-id-113 .eye-catch-wrap,
.page-id-113 .eye-catch {
  display: none !important;
}

/* 人気記事ランキング番号を金銀銅に（2026-07-17） */
.widget-entry-card-link.no-1::before {
  background-color: rgba(212, 175, 55, 0.75) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.widget-entry-card-link.no-2::before {
  background-color: rgba(167, 167, 173, 0.75) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.widget-entry-card-link.no-3::before {
  background-color: rgba(184, 115, 51, 0.75) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* おすすめカードの角を少し丸く（2026-07-17） */
a.navi-entry-card-link.widget-entry-card-link.a-wrap {
  border-radius: 10px !important;
  overflow: hidden !important;
  display: block !important;
}
.navi-entry-card-image.widget-entry-card-image.card-thumb {
  border-radius: 10px !important;
}

/* おすすめカードを常時ホバー時の明るさに（2026-07-17） */
a.navi-entry-card-link.widget-entry-card-link.a-wrap {
  filter: brightness(1.25) !important;
}

/* おすすめカードのホバー時に浮き上がる動き（2026-07-17） */
a.navi-entry-card-link.widget-entry-card-link.a-wrap {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* Cocoon標準のホバーopacity低下を打ち消す（2026-07-17） */
.widget-entry-cards.large-thumb-on a.navi-entry-card-link.widget-entry-card-link.a-wrap:hover {
  opacity: 1 !important;
}

/* スマホ幅：ブログカードをリベ大式コンパクトに（画像左・タイトル右・抜粋非表示・2026-07-19） */
@media screen and (max-width: 560px) {
  a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }
  a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-thumbnail {
    width: 38% !important;
    max-width: 160px;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 16px 10px 10px 0 !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }
  a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-content {
    padding-left: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-title {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  a.blogcard-wrap.internal-blogcard-wrap .internal-blogcard-snippet {
    display: none !important;
  }
}

/* スマホ：ヘッダーロゴボタンの文字を大きく＋下の重複タイトルを非表示（2026-07-19） */
@media screen and (max-width: 480px) {
  .mobile-header-menu-buttons .logo-menu-button .menu-button-in {
    font-size: 15px !important;
    font-weight: bold;
  }
  h1.logo.logo-header {
    display: none !important;
  }
}

/* スマホ：スライドインメニューを整える（余白の間延び解消・2026-07-19） */
@media screen and (max-width: 480px) {
  .navi-menu-content.menu-content {
    background: #FFF9EF !important;
    padding-top: 20px;
  }
  .navi-menu-content .widget {
    background: #fff;
    border-radius: 12px;
    margin: 0 16px;
    padding: 20px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .navi-menu-content aside.widget h3.widget-title {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #40210F !important;
    border-bottom: 2px solid #7EB6E8;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }
  .navi-menu-content .menu-drawer li {
    border-bottom: 1px solid #eee;
  }
  .navi-menu-content .menu-drawer li:last-child {
    border-bottom: none;
  }
  .navi-menu-content .menu-drawer a {
    display: block;
    padding: 14px 4px;
    font-size: 15px;
    font-weight: bold !important;
    color: #40210F !important;
  }
}

/* スマホ：スライドインメニューの「現在地」項目も同じ太さ・色に統一（2026-07-19） */
@media screen and (max-width: 480px) {
  .navi-menu-content .menu-drawer li.current-menu-item a,
  .navi-menu-content .menu-drawer .current-menu-item > a {
    font-weight: bold !important;
    color: #40210F !important;
  }
}

/* スマホ：ヘッダー・フッターのボタンバーに背景色（2026-07-19） */
@media screen and (max-width: 480px) {
  .mobile-header-menu-buttons.mobile-menu-buttons {
    background-color: #7EB6E8 !important;
  }
  .mobile-footer-menu-buttons.mobile-menu-buttons {
    background-color: #7EB6E8 !important;
  }
  .mobile-header-menu-buttons .menu-button-in,
  .mobile-header-menu-buttons .menu-caption,
  .mobile-header-menu-buttons .menu-icon .fas,
  .mobile-footer-menu-buttons .menu-button-in,
  .mobile-footer-menu-buttons .menu-caption,
  .mobile-footer-menu-buttons .menu-icon .fas {
    color: #ffffff !important;
  }
  .mobile-header-menu-buttons .logo-menu-button .menu-button-in {
    color: #ffffff !important;
  }
}

/* スマホ：現在地項目の内側item-labelにも太字を強制（2026-07-19） */
@media screen and (max-width: 480px) {
  .navi-menu-content .menu-drawer .item-label,
  .navi-menu-content .menu-drawer .caption-wrap {
    font-weight: bold !important;
    color: #40210F !important;
  }
}