@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/







/* ===== SWELL 標準 hover を無効化（PCヘッダーのみ）===== */

/* 文字色の変化を止める */
header nav a:hover .ttl{
  color: inherit !important;
}

/* 下線・背景・疑似要素があれば消す */
header nav a::before,
header nav a::after{
  content: none !important;
}










/* =================================================
   SWELL グローバルナビ
   トップ階層 hover を「赤ボールのみ」に完全置換
   （通常ヘッダー＋追従ヘッダー 共通）
   ================================================= */

/* ---------- 対象をトップ階層の a のみに限定 ---------- */
.c-gnav > li > a{
  background: none !important;
}

/* 文字色を hover / active でも固定 */
.c-gnav > li > a,
.c-gnav > li:hover > a,
.c-gnav > li.is-hover > a,
.c-gnav > li.is-active > a,
.c-gnav > li.current-menu-item > a,
.c-gnav > li.current-menu-ancestor > a{
  color: inherit !important;
}

/* 下線・装飾系 疑似要素を完全停止（トップ階層のみ） */
.c-gnav > li > a::before,
.c-gnav > li > a::after,
.c-gnav > li::before,
.c-gnav > li::after{
  content: none !important;
}

/* ---------- 赤ボール本体 ---------- */
.c-gnav > li > a .ttl{
  position: relative;
  padding-top: 14px;
}

.c-gnav > li > a .ttl::before{
  content: "";
  position: absolute;

  /* 開始：右端・中段 */
  top: 50%;
  right: 0;

  width: 8px;
  height: 8px;
  background: #e60000;
  border-radius: 50%;

  /* 円弧：右中段 → 中央上段 */
  offset-path: path("M 20 0 Q -60 -40 -120 -20");
  offset-distance: 0%;
  offset-rotate: 0deg;

  opacity: 0;

  transition:
    offset-distance .4s cubic-bezier(.4,0,.2,1),
    opacity .2s ease;
}


.c-gnav > li.menu-item-21 > a .ttl::before{
  offset-path: path("M 20 0 Q -50 -30 -80 -15");
}


.c-gnav > li.menu-item-421 > a .ttl::before{
  offset-path: path("M 20 0 Q -25 -20 -25 -15");
}


.c-gnav > li.menu-item-76 > a .ttl::before{
  offset-path: path("M 20 0 Q -25 -20 -25 -15");
}


.c-gnav > li.menu-item-220 > a .ttl::before{
  offset-path: path("M 20 0 Q -25 -20 -25 -15");
}


.c-gnav > li.menu-item-156 > a .ttl::before{
  offset-path: path("M 20 0 Q -25 -20 -25 -15");
}


.c-gnav > li.menu-item-237 > a .ttl::before{
  offset-path: path("M 20 0 Q -25 -20 -35 -15");
}


.c-gnav > li.menu-item-72 > a .ttl::before{
  offset-path: path("M 20 0 Q -25 -20 -35 -15");
}



/* =================================================
   1) active（現在ページ）を固定表示
   2) hover解除で逆円弧（同じ軌道を戻る）
   3) ページ離脱で非表示（activeが外れるので自動）
   ================================================= */

/* --- active対象（SWELL/WordPressでよく付く状態クラス）--- */
.c-gnav > li.current-menu-item > a .ttl::before,
.c-gnav > li.current-menu-ancestor > a .ttl::before,
.c-gnav > li.current_page_item > a .ttl::before,
.c-gnav > li.current_page_ancestor > a .ttl::before{
  offset-distance: 100% !important;
  opacity: 1 !important;
}

/* active時は「固定」＝戻らないようにしておく（hover解除で戻って欲しくないため） */
.c-gnav > li.current-menu-item > a .ttl::before,
.c-gnav > li.current-menu-ancestor > a .ttl::before,
.c-gnav > li.current_page_item > a .ttl::before,
.c-gnav > li.current_page_ancestor > a .ttl::before{
  
}

/* hover中はアニメ（既存の hover / is-hover と同じ） */
.c-gnav > li:hover > a .ttl::before,
.c-gnav > li.is-hover > a .ttl::before,
.c-gnav > li.is-active > a .ttl::before{
  offset-distance: 100% !important;
  opacity: 1 !important;
}

/* hover解除時（hoverでもactiveでもない状態）は自動で 0% に戻る
   → offset-path の同じ軌道を「逆向き」に走るので “逆円弧” になります */
.c-gnav > li > a .ttl::before{
  /* ここは既存の transition がある前提。無い場合だけ下を有効化してください。 */
  /* transition:
    offset-distance .4s cubic-bezier(.4,0,.2,1),
    opacity .2s ease; */
}




/* =================================================
   activeでも hover時だけ少し動かす
   ================================================= */

/* activeは基本固定（アニメは殺さない） */
.c-gnav > li.current-menu-item > a .ttl::before,
.c-gnav > li.current-menu-ancestor > a .ttl::before,
.c-gnav > li.current_page_item > a .ttl::before,
.c-gnav > li.current_page_ancestor > a .ttl::before{
  offset-distance: 100% !important;
  opacity: 1 !important;
}

/* active + hover のときだけ少し動かす（98%←ここを好みで調整） */
.c-gnav > li.current-menu-item:hover > a .ttl::before,
.c-gnav > li.current-menu-ancestor:hover > a .ttl::before,
.c-gnav > li.current_page_item:hover > a .ttl::before,
.c-gnav > li.current_page_ancestor:hover > a .ttl::before,
.c-gnav > li.current-menu-item.is-hover > a .ttl::before,
.c-gnav > li.current-menu-ancestor.is-hover > a .ttl::before,
.c-gnav > li.current_page_item.is-hover > a .ttl::before,
.c-gnav > li.current_page_ancestor.is-hover > a .ttl::before{
  offset-distance: 50% !important;
}



/* =================================================
   active（固定表示）のときだけ赤 → 青にする
   ================================================= */

/* active（現在ページ） */
.c-gnav > li.current-menu-item > a .ttl::before,
.c-gnav > li.current-menu-ancestor > a .ttl::before,
.c-gnav > li.current_page_item > a .ttl::before,
.c-gnav > li.current_page_ancestor > a .ttl::before{
  background-color: #000000 !important; /* ← 青 */
}




/* =================================================
赤ボール：離脱時に進行方向へ抜けて消える
（トップ階層のみ／通常＋追従 共通）
================================================= */

/* ① 非hover・非activeの“初期状態” */
.c-gnav > li > a .ttl::before{
offset-distance: 0%;
opacity: 0;
}

/* ② hover中（通常の到達位置） */
.c-gnav > li:hover > a .ttl::before,
.c-gnav > li.is-hover > a .ttl::before{
offset-distance: 100%;
opacity: 1;
transition:
offset-distance .35s cubic-bezier(.4,0,.2,1),
opacity .15s ease;
}



/* ④ active は固定（色や挙動は前回設定どおり）
※ active + hover の“少し動く”設定がある場合はそのまま有効 */
.c-gnav > li.current-menu-item > a .ttl::before,
.c-gnav > li.current-menu-ancestor > a .ttl::before{
offset-distance: 100%;
opacity: 1;
}


/* =================================================
離脱：進行方向へ少し移動しながら消える（円弧移動は維持）
トップ階層のみ／通常＋追従 共通
================================================= */

/* 非hover（待機）= 0%（次のhoverで 0→100 の円弧移動ができる） */
.c-gnav > li > a .ttl::before{
offset-distance: 0%;
opacity: 0;
transform: translate(14px,-6px); /* 待機時は少し右上に逃がしておく */
transition:
/* “戻り”は見えないように遅延させる（消えてから0%へ戻す） */
offset-distance .01s linear .18s,
opacity .18s ease 0s,
transform .18s ease 0s;
}

/* hover中：円弧移動（0→100）＋表示 */
.c-gnav > li:hover > a .ttl::before,
.c-gnav > li.is-hover > a .ttl::before{
offset-distance: 100%;
opacity: 1;
transform: translate(0,0);
transition:
offset-distance .35s cubic-bezier(.4,0,.2,1) 0s,
opacity .12s ease 0s,
transform .35s cubic-bezier(.4,0,.2,1) 0s;
}

/* hover解除（= 非hoverに戻る時）：
まず opacity/transform で “進行方向へ抜けつつ消える”
offset-distance は .18s 遅延で 0% に戻る（見えないのでバレない） */
.c-gnav > li:not(:hover):not(.is-hover) > a .ttl::before{
opacity: 0;
transform: translate(-20px,-10px); /* 進行方向（左上）へ抜ける感じ */
}


.c-gnav > li.current-menu-item > a .ttl::before,
.c-gnav > li.current-menu-ancestor > a .ttl::before{
offset-distance: 100% !important;
opacity: 1 !important;
transform: translate(0,0) !important;
}


/* ---------- hover 発火（通常＋追従＋JS制御すべて対応） ---------- */
.c-gnav > li:hover > a .ttl::before,
.c-gnav > li.is-hover > a .ttl::before,
.c-gnav > li.is-active > a .ttl::before,
.c-gnav > li.current-menu-item > a .ttl::before,
.c-gnav > li.current-menu-ancestor > a .ttl::before{
  offset-distance: 100% !important;
  opacity: 1 !important;
}