@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon
Version:    1.1.3
*/

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

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .site-logo-image {
    width: 30vw;
    height: auto;
  }
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

@media screen and (max-width: 768px) {
  img.site-logo.header-site-logo-image {
    width: 30vw !important;
    height: auto !important;
  }
}

/* PCヘッダーメニューを右寄せにする */
@media screen and (min-width: 1024px) {
  .header-container .navi,
  .header-container .menu-header,
  .header-container .global-nav {
    text-align: right !important;
  }
}
@media screen and (min-width: 1024px) {
  .navi,
  .menu-header,
  .global-nav,
  .header-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* PCメニューを横並びにする */
@media screen and (min-width: 1024px) {
  .navi ul,
  .global-nav ul,
  .menu-header ul {
    display: flex;
    gap: 24px; /* メニュー同士の間隔。好みで調整 */
    align-items: center;
  }

  .navi li,
  .global-nav li,
  .menu-header li {
    display: inline-block;
  }
}

/* PCメニューを横並びにする（Cocoon用） */
@media screen and (min-width: 1024px) {

  /* ul を flex にする */
  nav#navi .menu-header.menu-pc {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* 右寄せ */
    gap: 24px;
  }

  /* li の縦並びを解除 */
  nav#navi .menu-header.menu-pc > li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ----------------------------------------------------
   モバイルスライドメニュー（ハンバーガー）の調整
   ri さん専用カスタム
   ---------------------------------------------------- */

/* ▼ メニュー本体の幅を「文字の幅」に合わせる
   （Cocoon のモバイルメニュー本体は #navi-menu-content） */
#navi-menu-content {
  width: fit-content;   /* 中身の幅に自動で合わせる */
  max-width: 90vw;      /* 画面からはみ出さないように保険 */
  padding: 1em;         /* 余白はお好みで調整可能 */
}

/* モバイルメニュー全体のコンテンツ上部に余白を追加 */
.menu-content, .mobile-menu-content {
    padding-top: 3em !important; /* 現在より広めの余白に調整 (例: 3em) */
}

/* 「× Close」という文字のスタイル（以前のコード） */
.menu-close-button::before {
    content: "× Close" !important;
    font-size: 0.7rem !important;
    font-weight: normal !important;
    background: none !important;
    border: none !important;
    position: absolute !important;
     top: 2em !important;           /* 上からの位置（数値を増やすと下に移動） */
    left: 50% !important;          /* 左端から50%の位置に移動 */
    transform: translateX(-50%) !important; /* 要素自身の幅の半分だけ左に戻す */
    right: auto !important;        /* 元々あった右寄せの設定を解除 */
}


/* 元々あったアイコン表示を完全に消す（以前のコード） */
.menu-close-button .fas {
    display: none !important;
}