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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ヘッダー・モバイルメニューボタンの背景透明化と影消し */
.navi-menu-button,
.header-container .mobile-menu-buttons {
  background: none !important;        /* 背景を消す */
  background-color: transparent !important; /* 完全透明 */
}	

@media screen and (max-width: 1023px) {
	.mobile-header-menu-buttons {
	    box-shadow: none;
	}
}
.mobile-menu-buttons {
    box-shadow: none;
}



  .logo-menu-button.menu-button {
    justify-content: flex-start;
    padding-left: 22px;
  }

  #mobile-header {
    transform: none !important;   /* CocoonのJSによるtransformを無効化 */
    transition: none !important;  /* アニメーションも無効化 */
  }
	
/* --------------------------
   モバイルヘッダーボタン常時固定 & 影を消す
-------------------------- */
#mobile-header {
    position: fixed !important;     /* 常に固定 */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    border-bottom: none !important;
    background: transparent !important;
    transform: none !important;     /* Cocoon標準JSのtransform無効化 */
    transition: none !important;    /* Cocoon標準JSのアニメーション無効化 */
}

/* --------------------------
   モバイルフッターボタンのスクロール非表示設定
-------------------------- */
#mobile-footer {
    position: fixed;                 /* 画面下に固定 */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    transition: transform 0.3s ease;
}
/* モバイルフッターボタンの背景色変更 */
.mobile-footer-menu-buttons {
  background-color: #009fea; /* 好きな色コードに変更 */
}
/* モバイルフッターボタンのアイコン・文字を白にする */
.mobile-footer-menu-buttons a,
.mobile-footer-menu-buttons i,
.mobile-footer-menu-buttons 
{
  color: #ffffff !important; /* 白 */
}

/* メニューボタン内のアイコン・文字を白に */
.mobile-menu-buttons a,
.mobile-menu-buttons i {
  color: #ffffff !important;

}

#main .button-caption {
	display: none; /*キャプション非表示*/
}	

/* ▼左端にキャラクター透過画像を配置（バーの上にはみ出す） */
.mobile-footer-menu-buttons::before {
  content: "";
  position: absolute;
  bottom: 0; /* バーの下端を基準に */
  left: 0;
  width: 100px; /* キャラの幅に合わせて調整 */
  height: 120px; /* キャラの高さに合わせて調整 */
  background-image: url(http://jitta.blog/wp-content/uploads/2025/10/IMG_4402.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  z-index: 3;
  pointer-events: none; /* クリックの邪魔をしない */	


.mobile-header-menu-buttons {
  background: rgba(255,255,255,0.5);
}
*ナビゲーションメニュー背景透明化*/
.header-container,.navi{
background:rgba(255,255,255,0.5);
}
/*ナビゲーションメニュー背景透明化*/
.mobile-header-menu-buttons.mobile-menu-buttons.menu-button {
background:rgba(255,255,255,0.5);
}

	
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
  bottom: 0;
  left: 0;
}

.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
/* モバイルメニュー本体を右から左にスライド */
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);           /* 画面外に隠す */
  width: 74%;                            /* 横幅74% */
  height: 100%;
  background: rgba(255, 255, 255, 0.9);  /* 半透明90%白 */
  transition: transform 0.3s ease;       /* スライドアニメーション */
  padding: 20px;
  box-sizing: border-box;
  z-index: 9999;
}
/* メニューにフェードインを追加 */
.navi-menu-content {
  opacity: 0;                             /* 初期は透明 */
  transition: opacity 0.5s ease;          /* フェードイン速度 0.5秒 */
}
	
/* メニューが開いた状態 */
.navi-menu-content.toggled-on {
  transform: translateX(0);
}

/* 背景オーバーレイ */
#navi-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* 背景少し暗く */
  z-index: 9998;
}

/* 背景オーバーレイの初期状態 */
#navi-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* 暗さ20％ */
  opacity: 0;                        /* 初期は透明 */
  visibility: hidden;                /* 完全に非表示 */
  transition: opacity 1.6s ease, visibility 1.6s ease;
  z-index: 9998;
}

/* メニュー開いたときのオーバーレイ */
#navi-menu-overlay.active {
  opacity: 1;                        /* フェードイン */
  visibility: visible;
}
/* メニュー本体と同時にフェードアウトも適用 */
.navi-menu-content {
  transition: transform 0.8s ease, opacity 0.8s ease;
}

/* メニューが開いた状態 */
.navi-menu-content.toggled-on {
  opacity: 1;                             /* 開いたら不透明に */
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
}.menu-icon i
width: 20px;
/＊ アイコンのサイズ＊/
height: auto;
margin-right: 6px；／* 文字との余白*/
vertical-align: middle;
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}
•menu-icon,
-menu-icon-right {
width: 20px！important; /* サイズ固定 */
height: auto important;
max-width: none！important;/*Cocoonの自動拡大を無効化＊/
• menu-icon,
-menu-icon-right {
display: inline-block ！important；／＊横並びにする*/
width: 20px important;
/* サイズ調整＊/
height: auto !important; max-width: none !important;
vertical-align: middle;
／＊ テキストと高さを揃える*/
	-menu-icon {
margin-right: 6px;
/* 文字の左に置いたときの余白*/
｝
• menu-icon-right {
margin-Left: 6px；
/* 文字の右に置いたときの余白＊/
｝

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/*
サイドメニュー本体（不透明）
#drawer，
. drawer,
#sidebar-drawer {
background-color： #ffffff！important;/*日で不透明*/
}
				


/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

	

1/ボックスメニューのリンクを外部リンクだけ「新しいタブ」で開く
add_filter（'box_menu_link_target"
, function (§target, $url)‹
if (!includes_home_url($url)) {
$target = '.
_blank';
｝
return $target;
｝， 10, 2）；