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


/* サイト全体 */
/* ここから */

/* 更新日非表示 */
.post-date,.post-update {
	display: none;
}

/* ユーザー名非表示 */
.footer-meta {
	display: none;
}

/*エントリー・アーカイブの見出し*/
.entry-title,
.archive-title {
  font-size: 2em;
  margin-top: 2em;
  margin-bottom: 20px;
  line-height: 1.3;
}

/* ここまで */



/* ヘッダー */
/* ここから */

/* スライドショーの余白 */
.metaslider {
	padding: 30px 0 0 0;
}
/* ここまで */

/* ヘッダーキャラクター */
/* ここから */

/* 緑バナーを基準&はみ出し防止（PC 基本） */
#header-in{
  position: relative;
  overflow: hidden; /* PC用：帯外にはみ出した分は隠す */
}

/* キャラの“入れ物”共通設定（PCデフォルト） */
.hero-chara{
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  z-index: 10;
  padding-bottom: 4px;
}

/* PC（1025px以上）：キャラは右側で揺れる */
@media (min-width: 1025px){

  .hero-chara{
    right: 10px;
    bottom: 0;
    animation: moveX 30s ease-in-out infinite; /* PC用アニメーション */
  }

  .hero-chara img{
    display: block;
    max-height: 100%;
    width: auto;
    height: auto;
    max-width: min(26vw, 260px);
  }
}

/* PC用アニメーション */
@keyframes moveX {
  0%, 100% { transform: translateX(220px); }
  50%      { transform: translateX(-100px); }
}

/* ▼▼ ここからモバイル（1024px 以下） ▼▼ */
@media (max-width: 1024px){

  /* 横にはみ出した分だけ隠す（画面外スタートのため） */
  #header-in{
    overflow-x: hidden;
    overflow-y: visible; /* 縦方向は隠さない */
  }

  .hero-chara{
    position: static;          /* 通常フロー（ロゴ下）に配置 */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 0;
    margin-top: 4px;

    /* スマホ専用の横移動アニメーション */
    animation: moveX-sp 40s linear infinite;
  }

  .hero-chara img{
    width: 110px;         /* スマホ固定サイズ（大きさ安定） */
    height: auto;
    max-width: none;
    max-height: none;
  }
}

/* スマホ用アニメーション：右外 → 左外 → 右外 */
@keyframes moveX-sp {
  0%   { transform: translateX(100vw); }
  50%  { transform: translateX(-100vw); }
  100% { transform: translateX(100vw); }
}

/* ここまで */



/* フッター */
/* ここから */
/* フッター画像位置調整 */
img.saranocara {
  display: block;
  margin-left: auto;
  margin-right: auto;
	margin-top: 50px;
}
/* ここまで */



/* ヘッダーメニューのデザイン関係 */
/* ここから */

/* ---------- 英語ラベル ---------- */
.en  {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  opacity: .75;
}

/* ---------- 区切り線（各項目の左側に） ---------- */
#navi-in .menu-top > li + li { position: relative; }
#navi-in .menu-top > li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 22px;
  background: rgba(97,33,111,.25);
}

/* ---------- ホバー/現在ページ：さりげない背景色 ---------- */
/* 通常時：透明 */
#navi-in .menu-top li a {
  border-radius: 6px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* ホバー時：トップもサブも同じ背景色 */
#navi-in .menu-top li:hover > a {
  background-color: rgba(102, 187, 51, 0.15);
  color: #206702;
}
/* ここまで */

/* 投稿ページサムネイル非表示 */
.single .eye-catch-wrap {
  display: none !important;
}