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

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

/* ==========================================================================
   ① ヘッダーのブログタイトル: 大きく装飾的に表示
   - PC / タブレット / スマホで段階的にサイズ調整
   - 8方向の濃紺縁取り + 影 + 半透明ガラス風背景バー
   ========================================================================== */

/* スマホ・タブレット限定: タイトルを大きく装飾的に表示
     PC表示は元のヘッダー画像をそのまま活かすため適用しない */
@media screen and (max-width: 1023px) {

/* デフォルト(デスクトップ含む) */
.site-name-text,
.site-name-text-link,
.logo-text .site-name-text,
.logo-text a {
  color: #ffffff !important;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "YuGothic", "游ゴシック", "Meiryo", sans-serif !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  text-shadow:
    -2px -2px 0 #006d6d,
     2px -2px 0 #006d6d,
    -2px  2px 0 #006d6d,
     2px  2px 0 #006d6d,
    -2px  0   0 #006d6d,
     2px  0   0 #006d6d,
     0   -2px 0 #006d6d,
     0    2px 0 #006d6d,
     0 6px 14px rgba(0,0,0,0.35) !important;
  -webkit-text-stroke: 0 !important;
  display: inline-block !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, #81D8D0 0%, #0ABAB5 100%) !important;
  border: 2px solid rgba(255,255,255,0.85) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(10,186,181,0.35), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* ロゴ領域を中央寄せ＆余白調整 */
.logo.logo-header.logo-text {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 14px 12px !important;
}

/* タブレット幅 */
}

@media screen and (max-width: 1023px) {
  .site-name-text,
  .site-name-text-link,
  .logo-text .site-name-text,
  .logo-text a {
    font-size: 24px !important;
    padding: 8px 16px !important;
  }
}

/* スマホ幅 */
@media screen and (max-width: 599px) {
  .site-name-text,
  .site-name-text-link,
  .logo-text .site-name-text,
  .logo-text a {
    font-size: 19px !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    border-width: 1.5px !important;
  }
  .logo.logo-header.logo-text {
    padding: 8px 6px !important;
  }
}


/* ==========================================================================
   ② TOPページの記事カードを モバイルで 2カラム表示に
   - Cocoon Blocks の カラム2 ブロック (.wp-block-cocoon-blocks-column-2) を
     スマホ幅でも左右並びキープ
   - .navi-entry-cards (ナビゲーションカード) の中身を縦積みに整理
   ========================================================================== */
@media screen and (max-width: 599px) {

  /* 2カラムラッパーを横並びキープ */
  .wp-block-cocoon-blocks-column-2,
  .wp-block-cocoon-blocks-column-2.column-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 8px !important;
  }

  /* 左右カラムを 50% ずつに */
  .wp-block-cocoon-blocks-column-2 > .column-left,
  .wp-block-cocoon-blocks-column-2 > .column-right {
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    flex: 0 0 calc(50% - 4px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* カード本体をカラムにフィット */
  .wp-block-cocoon-blocks-column-2 .navi-entry-cards,
  .wp-block-cocoon-blocks-column-2 .widget-entry-cards {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* カード内 a-wrap を縦積みに */
  .wp-block-cocoon-blocks-column-2 .navi-entry-card-link,
  .wp-block-cocoon-blocks-column-2 .widget-entry-card-link,
  .wp-block-cocoon-blocks-column-2 .a-wrap {
    display: block !important;
    width: 100% !important;
    padding: 4px !important;
    margin: 0 !important;
  }

  /* サムネ: 横幅100%・上に配置 */
  .wp-block-cocoon-blocks-column-2 .navi-entry-card-thumb,
  .wp-block-cocoon-blocks-column-2 .widget-entry-card-thumb,
  .wp-block-cocoon-blocks-column-2 .card-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
  }
  .wp-block-cocoon-blocks-column-2 .navi-entry-card-thumb img,
  .wp-block-cocoon-blocks-column-2 .widget-entry-card-thumb img,
  .wp-block-cocoon-blocks-column-2 .card-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    display: block !important;
  }

  /* コンテンツ部分 */
  .wp-block-cocoon-blocks-column-2 .navi-entry-card-content,
  .wp-block-cocoon-blocks-column-2 .widget-entry-card-content,
  .wp-block-cocoon-blocks-column-2 .card-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* タイトル: 小さめ・3行省略 */
  .wp-block-cocoon-blocks-column-2 .navi-entry-card-title,
  .wp-block-cocoon-blocks-column-2 .widget-entry-card-title,
  .wp-block-cocoon-blocks-column-2 .card-title,
  .wp-block-cocoon-blocks-column-2 .entry-card-title {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 抜粋・メタ非表示 */
  .wp-block-cocoon-blocks-column-2 .navi-entry-card-snippet,
  .wp-block-cocoon-blocks-column-2 .widget-entry-card-snippet,
  .wp-block-cocoon-blocks-column-2 .card-snippet,
  .wp-block-cocoon-blocks-column-2 .card-meta,
  .wp-block-cocoon-blocks-column-2 .post-date,
  .wp-block-cocoon-blocks-column-2 .post-update {
    display: none !important;
  }

  /* リボン縮小 */
  .wp-block-cocoon-blocks-column-2 .new-mark,
  .wp-block-cocoon-blocks-column-2 [class*="ribbon"],
  .wp-block-cocoon-blocks-column-2 [class*="label"] {
    font-size: 10px !important;
  }
}


@media screen and (max-width: 1023px) {
/* ==========================================================================
   ④ ヘッダー画像のタイトル焼き込みを非表示（CSSタイトルと二重表示の解消）
   ========================================================================== */
#header.header,
header#header.header {
  background-image: none !important;
}
}