/* file: cocoon-child-master/style.css */
/* =========================================
   子テーマ：Cocoon Child（アキラ用整理版）
   目的：
    - スキン「alice」使用時、ヘッダー上部の
      サイトタイトル（薄い "new-nekomikke"）を完全に非表示
    - 行政メニューの表示/非表示（/?gov=on|off）を強制制御
    - 将来の追記がしやすいように構造とコメントを整理
   注意：
    - 反映されない場合はキャッシュ/圧縮CSSをクリア
      （Cocoon設定→キャッシュ削除、ブラウザキャッシュ削除）
   ========================================= */

/* -------------------------------------------------
 * 文字コード
 * ------------------------------------------------- */
@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
*/

/* =================================================
   [A] ベース領域（必要ならここに追記）
   ================================================= */
/* ここに共通の調整を記述します。現状は空のまま。 */


/* =================================================
   [B] スキン「alice」：ヘッダーのサイトタイトルを非表示
   -------------------------------------------------
   背景のストライプは残しつつ、クリック可能な
   サイト名テキストリンク自体を出さない。
   - SEO用<title>は別機構なので影響なし
   - 余白が残る場合の詰め指定も用意（任意）
   ================================================= */

/* ▼ テキストロゴの候補を広く潰す（alice想定のクラスを網羅） */
.skin-alice #header .site-title,
.skin-alice #header .site-title a,
/*.skin-alice #header .site-name,*/
/*.skin-alice #header .site-name a,*/
.skin-alice #header .site-name-text,
.skin-alice #header .site-name-text a,
.skin-alice #header .logo,
.skin-alice #header .logo a,
.skin-alice #header-title,
.skin-alice #site-title,
.skin-alice .header-container .site-title,
.skin-alice .header-container .site-title a {
  display: none !important; /* クリックも不可に */
}

/* ▼ タイトル分の上余白が気になる場合のみ有効化
   （不要なら以下を削除またはコメントアウト） */
.skin-alice .header-container {
  padding-top: 0 !important;
}


/* =================================================
   [C] 行政メニューの出し分け（強制力MAX版）
   -------------------------------------------------
   仕様：
   - body.gov-off … 行政メニューを完全に非表示
   - body.gov-on  … すべてのページで確実に表示
   対象：
   - #navi（Cocoon標準ナビ）
   - .menu-top / nav（スキンやテンプレで異なる場合の保険）
   - li.for-gov-only / a.for-gov-only を目印に制御
   ================================================= */

/* ▼ 非表示（gov-off） */
body.gov-off #navi .navi-in li.for-gov-only,
body.gov-off #navi .navi-in a.for-gov-only,
body.gov-off .menu-top li.for-gov-only,
body.gov-off .menu-top a.for-gov-only,
body.gov-off nav li.for-gov-only,
body.gov-off nav a.for-gov-only {
  display: none !important;
}

/* ▼ 表示（gov-on）— HOME などで消されるケースを打ち消し */
body.gov-on #navi .navi-in li.for-gov-only,
body.gov-on .menu-top li.for-gov-only,
body.gov-on nav li.for-gov-only {
  display: list-item !important;
}
body.gov-on #navi .navi-in a.for-gov-only,
body.gov-on .menu-top a.for-gov-only,
body.gov-on nav a.for-gov-only {
  display: inline-block !important;
}


/* =================================================
   [D] レスポンシブ（必要に応じて追記）
   ================================================= */

/* 1023px 以下（タブレット横〜） */
@media screen and (max-width: 1023px){
  /* ここにタブレット向けの調整を追記 */
}

/* 834px 以下（タブレット縦） */
@media screen and (max-width: 834px){
  /* ここにタブレット縦向けの調整を追記 */
}

/* 480px 以下（スマホ） */
@media screen and (max-width: 480px){
  /* ここにスマホ向けの調整を追記 */
}


/* ヘッダーの大きいサイト名（.site-name-text）の色をテーマカラーに変更 */
header .site-name-text {
  color: #58B4AE !important;
}


/* =========================================
   SNSフォロー：Instagramボタンを公式グラデに
   - 背景はInstagram公式グラデ
   - アイコンは白
   - テーマ/スキンの指定より強く上書き（!important）
   ========================================= */

/* a要素そのものを塗る（背景） */
.footer .sns-follow .sns-follow-buttons a.instagram,
.sns-follow .sns-follow-buttons a.instagram,
.follow-button .instagram a {
  background: radial-gradient(circle at 30% 107%,
              #fdf497 0%, #fdf497 5%,
              #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #fff !important;           /* 文字/アイコン基準色 */
  border-color: transparent !important;
  box-shadow: none !important;
}

/* テーマによっては ::before で色を重ねる場合があるので無効化 */
.footer .sns-follow .sns-follow-buttons a.instagram::before,
.sns-follow .sns-follow-buttons a.instagram::before,
.follow-button .instagram a::before {
  background: transparent !important;
  box-shadow: none !important;
}

/* SVGやFontAwesomeアイコンの塗りを白に固定 */
.footer .sns-follow a.instagram svg,
.sns-follow a.instagram svg,
.follow-button .instagram a svg,
.footer .sns-follow a.instagram .fa,
.sns-follow a.instagram .fa,
.follow-button .instagram a .fa {
  fill: #fff !important;
  color: #fff !important;
}

/* ホバー時は少し暗くして押し感（任意） */
.footer .sns-follow a.instagram:hover,
.sns-follow a.instagram:hover,
.follow-button .instagram a:hover {
  filter: brightness(0.95) !important;
}


/* Instagramボタン：配色分布を公式寄り&ビビッドに */
.sns-follow a[href*="instagram.com"]{
  /* 上から順に“手前”に重なる。最後が一番下の土台 */
  background:
    /* 右上：ピンクの強いグロー */
    radial-gradient(120% 120% at 88% 14%,
      #ff2ea6 0%, #ff2ea6 36%, rgba(255,46,166,0) 70%),

    /* 左上：紫の塊（やや広め） */
    radial-gradient(120% 130% at 12% 12%,
      #8134af 0%, #a133b1 40%, rgba(129,52,175,0) 72%),

    /* 左下：黄 → オレンジのグロー（強め） */
    radial-gradient(140% 160% at 18% 86%,
      #fedb64 0%, #ffc148 24%, #ff9f2e 42%, rgba(255,159,46,0) 72%),

    /* 全体のベース：赤〜ピンクで締める（ビビッド） */
    linear-gradient(135deg,
      #ff005d 0%,   /* 赤みの強いピンク */
      #ff3b7a 28%,  /* 鮮やかピンク */
      #ff6a3d 52%,  /* 赤みオレンジ（中央を暖色寄りに） */
      #e81c73 70%,  /* 赤ピンク */
      #b81fae 100%  /* 紫寄りで締め */
    ) !important;

  color:#fff !important;
  border-color:transparent !important;
  box-shadow:none !important;
  border-radius:12px !important; /* 角丸は好みで */
  overflow:hidden;
}

/* テーマ側の上塗り対策 */
.sns-follow a[href*="instagram.com"]::before{ background:transparent !important; }

/* アイコン白固定（FontAwesome/SVG） */
.sns-follow a[href*="instagram.com"] .fa,
.sns-follow a[href*="instagram.com"] svg{
  color:#fff !important;
  fill:#fff !important;
}

/* ホバー時の押し感（任意） */
.sns-follow a[href*="instagram.com"]:hover{ filter:brightness(0.95) !important; }

/* ===== SNSフォローテキストを中央寄せ ===== */
.sns-follow-message {
  text-align: center !important;
  display: block;
  margin-bottom: 10px; /* アイコンとの間隔は調整可能 */
  font-size: 0.9em;    /* ← 文字の大きさ：親の90%のサイズに */
}

/* 上部キャッチフレーズの色をテーマカラーに〜ここから〜 */
/* キャッチフレーズ（サイト説明）の色を強制上書き */
:where(#header, .l-header) :is(.site-description, .site-tagline, .logo-tagline, .tagline) {
  color: #58B4AE !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* a や内包 span に色が当たらないケース対策 */
:where(#header, .l-header) :is(.site-description, .site-tagline, .logo-tagline, .tagline) *,
:where(#header, .l-header) :is(.site-description, .site-tagline, .logo-tagline, .tagline) a {
  color: #58B4AE !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* 上部キャッチフレーズの色をテーマカラーに〜ここまで〜 */



/* ========================= ここから：猫アイコン用レイアウト========================= */
/* ========================= ここから：猫アイコン＋テキスト中央寄せ ========================= */

/* <a> 自体はflexでアイコン＋テキスト横並び */
#navi .menu > li > a,
#header .menu > li > a,
#header-container .menu > li > a,
header .menu > li > a,
.header .menu > li > a,
.l-header .menu > li > a{
  display: flex !important;
  align-items: center !important;    /* 垂直中央 */
  justify-content: flex-start !important; /* 左にアイコン、その後テキスト */
  gap: .5rem;
  padding: 0 14px !important;        /* 左右の余白 */
  min-height: 44px;
  line-height: 1.2 !important;
  text-decoration: none;
  width: 100%;                       /* ← 背景色を全幅に効かせる */
  box-sizing: border-box;
}

/* 猫アイコン */
#navi .nm-cat-icon,
#header .nm-cat-icon,
#header-container .nm-cat-icon,
header .nm-cat-icon,
.header .nm-cat-icon,
.l-header .nm-cat-icon{
  display: block;
  height: 30px;
  width: auto;
  margin-right: 8px;
  transform: translateY(1px);
  pointer-events: none;
}

/* テキスト部分をflex:1で中央寄せ */
#navi .menu > li > a .nm-label,
#header .menu > li > a .nm-label,
#header-container .menu > li > a .nm-label,
header .menu > li > a .nm-label,
.header .menu > li > a .nm-label,
.l-header .menu > li > a .nm-label{
  flex: 1;                /* ← 幅いっぱいに広げる */
  text-align: center;     /* 中央寄せ */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* スマホ時に少し大きめ */
@media (max-width: 768px){
  #navi .nm-cat-icon,
  #header .nm-cat-icon,
  #header-container .nm-cat-icon,
  header .nm-cat-icon,
  .header .nm-cat-icon,
  .l-header .nm-cat-icon{
    height: 32px;
    margin-right: 10px;
    transform: translateY(1px);
  }
  #navi .menu > li > a,
  #header .menu > li > a,
  #header-container .menu > li > a,
  header .menu > li > a,
  .header .menu > li > a,
  .l-header .menu > li > a{
    min-height: 46px;
  }
}
/* ========================= ここまで：猫アイコン＋テキスト中央寄せ ========================= */

/* ========================= ここから：X,Instagramボタン間の空白 ========================= */
@media screen and (min-width: 768px) {
  .sns-follow-buttons .sns-button {
    margin-right: 16px !important;
  }
  .sns-follow-buttons .sns-button:last-child {
    margin-right: 0 !important;
  }
}
/* ========================= ここまで：X,Instagramボタン間の空白 ========================= */



/* =================================================
   [E] SNS画像アイコン（メディアライブラリ版）
   -------------------------------------------------
   目的：
   - WPメディアライブラリに置いた PNG/SVG アイコンを
     <img> で表示する実装に最適化。
   - 既存の「Font Awesome/擬似要素」方式と干渉しないよう、
     対象ブロックをできるだけ限定して上書き。
   前提：
   - 対象HTMLは CocoonのSNSブロック：
     <div class="sns-follow bc-brand-color fbc-hide sf-bottom">
       <div class="sns-follow-buttons sns-buttons"> … </div>
     </div>
   - 各<a>の中に <img>（64px）を直置きしている構成。
   注意：
   - 既存のInstagramグラデ指定（上記[C]）や
     a[href*="instagram.com"] などの強い指定を
     このブロック内だけリセットして画像を素で見せる。
   - 反映されない場合はキャッシュ削除＆ハードリロード。
   ================================================= */

/* ▼ 対象ブロック限定（同一ページの他SNS部品に影響しないように） */
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons {
  display: flex;
  align-items: center;
  gap: 12px;                 /* アイコン間の余白 */
  flex-wrap: wrap;
}

/* ▼ 各ボタン（画像直置き前提）：余計な背景/影/グラデを外す */
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons .sns-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;               /* 画像サイズに追従 */
  height: auto;
  padding: 4px;              /* クリック領域の確保（好みで） */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;   /* 画像の角丸は画像側に依存 */
  transition: transform .15s ease, filter .15s ease;
}

/* ▼ 画像サイズ：高さ48px */
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons .sns-button > img {
  display: block;
  height: 48px;
  width: auto;               /* アスペクト比を保つ */
  object-fit: contain;
}

/* ▼ ホバー効果（軽め）。画像はそのまま、全体の明度を少し下げる */
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons .sns-button:hover {
  transform: translateY(-2px);
  filter: brightness(0.95);
}

/* ▼ スマホ時は自動で詰める（必要に応じて微調整） */
@media (max-width: 767.98px){
  .sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons {
    gap: 10px;
  }
  .sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons .sns-button {
    padding: 2px;
  }
  .sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons .sns-button > img {
    height: 40px;            /* モバイルは少しだけ小さく */
  }
}

/* ▼ このブロック内に限り、強制的に背景を外す（Instagramグラデ等の上書き解除） */
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a.instagram,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a.youtube-button,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a[class*="youtube"],
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a.tiktok-button,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a[class*="tiktok"],
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a.x-corp-button,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a[href*="instagram.com"],
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a[href*="youtube.com"],
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a[href*="tiktok.com"]{
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ▼ 擬似要素で色を塗っているスキン対策 */
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a.instagram::before,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a.youtube-button::before,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a[class*="youtube"]::before,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a.tiktok-button::before,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a[class*="tiktok"]::before {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  content: "";               /* 一部テーマで中途半端に残るのを回避 */
}

/* ▼ 文字色/塗りの固定（FontAwesomeが残っていても見た目に干渉しないよう白固定） */
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a .fa,
.sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons a svg {
  color: #fff !important;
  fill: #fff !important;
}

/* ▼ 既存のボタン間隔指定（[既存]セクション）と矛盾しないように再度明示 */
/* こちらは PC幅で右マージンを効かせる既存指定を尊重（必要なら調整） */
@media screen and (min-width: 768px) {
  .sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons .sns-button {
    margin-right: 16px !important;
  }
  .sns-follow.bc-brand-color.fbc-hide.sf-bottom .sns-follow-buttons .sns-button:last-child {
    margin-right: 0 !important;
  }
}