/*
Theme Name: SWELL CHILD
Template: swell
Version: 1.0.0
*/

/* ============================================
   SWELLメニュー切り替え（完成版）
   ============================================ */

/* --------------------------------------------------
   1. SWELL標準の「日本語（説明）」を強制非表示
   -------------------------------------------------- */
.c-gnavLink__description {
    display: none !important;
}

/* --------------------------------------------------
   2. メニューのレイアウト設定 (PHP追加分)
   -------------------------------------------------- */
/* PCサイズ（960px以上）のみ適用 */
@media screen and (min-width: 960px) {

  /* リンク全体の枠組み */
  .c-gnavLink .my-menu-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    width: 100%;
    height: 100%;
    line-height: 1 !important;
    /* 縦並びをリセット */
    flex-direction: row !important;
  }

  /* --- 英語（ABOUTなど） --- */
  .c-gnavLink .en-label {
    display: block !important;
    opacity: 1;
    transition: opacity 0.3s ease;
    
    /* 重なり順 */
    position: relative;
    z-index: 5;
  }

  /* --- 日本語（会社情報など） --- */
  .c-gnavLink .jp-label {
    /* 英語の真上に重ねる（絶対配置） */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    width: 100%;
    margin: 0 !important;
    
    /* 文字スタイル */
    font-size: 13px !important; /* 日本語のサイズ調整 */
    font-weight: bold !important;
    white-space: nowrap !important; /* 横並び防止 */
    
    /* 最初は隠す */
    opacity: 0 !important;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none; /* マウスの邪魔をさせない */
  }

  /* --------------------------------------------------
     3. ホバー時の動き（カーソルを乗せた時）
     -------------------------------------------------- */
  
  /* マウスが乗ったら：英語を消す */
  .c-gnavLink:hover .en-label {
    opacity: 0 !important;
  }

  /* マウスが乗ったら：日本語を出す */
  .c-gnavLink:hover .jp-label {
    opacity: 1 !important;
  }
}