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

/* --- スマホ版：ロゴ→画像→メニュー の順番に変更 --- */
@media screen and (max-width: 480px) {
  /* 1. 全体を並び替え可能にする */
  #container {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. ロゴ（一番上） */
  #header-container {
    order: 1 !important;
    padding: 5px 0 !important;
  }
  
  /* ロゴのアニメーション復活 */
  .site-name-text-link img {
    max-height: 40px !important;
    width: auto !important;
    animation: flash 2s infinite; 
  }

  /* 3. 画像（2番目） */
  #appeal {
    order: 2 !important;
    background-position: 85% center !important; 
    min-height: 300px !important; 
    margin: 0 !important;
  }

  /* 4. メニュー（画像の下） */
  #navi {
    order: 3 !important;
    display: block !important;
    background-color: #000 !important;
    border: none !important;
  }

  .navi-in > ul {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 15px 0 !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .navi-in a {
    font-size: 11px !important;
    color: #fff !important;
    font-weight: bold;
  }

  /* 不要な表示を消す */
  .header-container .navi, .caption-text {
    display: none !important;
  }
}

/* アニメーションの設定 */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}