/* ==========================================================
   LAYOUT（サイト共通レイアウト）
========================================================== */

/* スマホ開閉メニューの要素のカラーを固定
 * テーマのverによっては強制でデフォルトにするらしい？ */
.p-spMenu,
.p-spMenu a{
  color: var(--color_link) !important;
}


@media (max-width: 1024px) {
  /* 1) デフォルトのモバイルヘッダー内検索アイコンを隠す */
  .l-header__spNav .c-search,
  .l-header__spNav .p-spHeadMenu .search-menu-item {
    display: none !important;
  }
}

/* Polylang 言語切り替えメニューのデザイン変更 */

/* Polylangプラグインのヘッダアイコンとドロップダウンのデザイン変更 */
@media (min-width: 960px) {
  /* <a> に ::before で任意テキストを表示 */
  .pll-parent-menu-item.current-menu-parent > a::before {
	padding-left: 5px;			  /* フラグ分のスペース */
    line-height: 1;               /* 高さを揃える */
    margin-right: 8px;            /* テキスト右の余白 */
    vertical-align: middle;       /* ヘッダーの他要素と揃える */
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	text-shadow: 2px 2px 3px #808080;
  }
}

/* Polylang ドロップダウンの背景変更 */
.pll-parent-menu-item .sub-menu{
  background-color:#c3bbac !important;
}
.pll-parent-menu-item .sub-menu a{
  color:#fff !important;
}
.pll-parent-menu-item .sub-menu a:hover,
.pll-parent-menu-item .sub-menu a:focus {
  color: #7f6854 !important;            /* 例：濃いグレー */
  background-color: rgba(0,0,0,0.05) !important; /* 軽い背景変化 */
}


/* Polylang サブメニュー横幅をテキストにフィット */

#gnav .sub-menu,
.l-fixHeader .sub-menu{
  width: max-content;      /* 中身に合わせる */
  min-width: unset;        /* SWELLの制約解除 */
/*   padding-right: 15px; */    /* 右余白 */
}

/* Polylang サブメニュー横幅フィット終わり */




/* =========================================================
   SWELL：ハンバーガーメニュー（#sp_menu）内サブメニューを確実にアコーディオン化
   方式：display none/block（競合に強い）
========================================================= */

/* 親リンクにキャレット分の余白を確保 */
#sp_menu .menu-item-has-children > a{
  position: relative;
  padding-right: 2.8em; /* OurLocationsに寄せて調整 */
}

/* 既存の文字矢印（›）を無効化して、SVGキャレットに差し替え */
#sp_menu .menu-item-has-children > a::after{
  content: "";
  position: absolute;
  right: 0.8em;
  top: 50%;
  width: 1.15em;   /* ← サイズUPしたいならここ */
  height: 1.15em;  /* ← サイズUPしたいならここ */

  transform: translateY(-50%) rotate(0deg);
  opacity: 1;
  background-color: currentColor;

  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  pointer-events: none;
}



/* キャレット（>）回転モーション ↑開↓閉 */

#sp_menu .menu-item-has-children.is-open > a::after{
	animation: chevronRotateOpen 0.3s cubic-bezier(0.4,0,0.2,1) both;
}
#sp_menu .menu-item-has-children:not(.is-open) > a::after{
	animation: chevronRotateClose 0.3s cubic-bezier(0.4,0,0.2,1) both;
}


/* 4) Polylang：SPメニュー内ではPC用ドロップダウン装飾を無効化して “普通のメニュー” に揃える */
#sp_menu .pll-parent-menu-item > .sub-menu{
  position: static !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important; /* ← PC用の背景色強制をSPだけ打ち消す */
}

/* 5) Polylang：SPメニュー内のリンク色はSWELLの基本色に戻す
   ※ あなたの style.css にある .pll-parent-menu-item .sub-menu a { color:#fff !important; } を打ち消す */
#sp_menu .pll-parent-menu-item .sub-menu a{
  color: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
}



/* =========================================
   SWELL：ハンバーガーメニューUI
   SPメニュー：サブメニューをインデント（段落）
========================================= */
#sp_menu .sub-menu{
  padding-left: 1.2em; /* ← 段落量（好みで 0.8〜1.6em） */
  margin: 0; /* サブメニュー閉じた時に下の余白が残らなくなる */
}

/* 子項目の行間・余白を少し整える（任意） */
#sp_menu .sub-menu > li > a{
  display:flex !important;
  align-items: center; 
}


/* テキストサイズ制御 SP（〜767px） */
@media (max-width: 767px){
  /* メインメニューのテキスト */
  #sp_menu .c-spnav a{
    font-size: 17px !important;   /* ← SPの固定値 */
    line-height: 1.6 !important;
  }
  /* サブメニューのテキスト */
  #sp_menu .sub-menu a{
    font-size: 16px !important;
  }
}

/* タブレット（768〜1024px） */
@media (min-width: 768px) and (max-width: 1024px){
  /* メインメニューのテキスト */
  #sp_menu .c-spnav a{
    font-size: 18px !important;   /* ← TBの固定値 */
    line-height: 1.6 !important;
  }
  /* サブメニューのテキスト */
  #sp_menu .sub-menu a{
    font-size: 15px !important;
  }
}



/* =========================================
   SPメニュー：サブメニュー開閉を滑らかに（高さ＋フェード）
========================================= */

/* サブメニューは常に block にして、max-height で閉じる */
#sp_menu .menu-item-has-children > .sub-menu{
  display: block;
  overflow: hidden;

  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);

  pointer-events: none;

  transition-property: max-height, opacity, transform;
  transition-duration: 0.35s, 0.25s, 0.25s;
  transition-timing-function:
    cubic-bezier(0.4,0,0.2,1),
    cubic-bezier(0.4,0,0.2,1),
    cubic-bezier(0.4,0,0.2,1);
}


#sp_menu .menu-item-has-children.is-open > .sub-menu{
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);

  pointer-events: auto;
}


/* リンク全体は動かさない（下線などは固定） */
#sp_menu .c-spnav a{
  display: block;
}

/* テキストだけ動かす */
#sp_menu .c-spnav a .spnav__label{
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

#sp_menu .c-spnav a:hover .spnav__label,
#sp_menu .c-spnav a:focus-visible .spnav__label{
  transform: translateX(8px);
}



/* SPメニュー：hover/focus の背景色変化を消す */
#sp_menu .c-spnav a:hover,
#sp_menu .c-spnav a:focus,
#sp_menu .c-spnav a:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
}


/* サブメニュー閉時クリック不能にする */
#sp_menu .menu-item-has-children > .sub-menu{
  pointer-events: none;
}
#sp_menu .menu-item-has-children.is-open > .sub-menu{
  pointer-events: auto;
}


/* ========================================================================
 * ハンバーガーメニュー（#sp_menu）内サブメニューを確実にアコーディオン化 end
 *  ========================================================================*/




@media (max-width: 1024px) {

  /* 2) モバイルメニュー内の言語切替を右端に揃える */
  .l-header__spNav .p-spHeadMenu .pll-parent-menu-item {
    margin-left: auto;               /* 左側の余白を伸ばして右端固定 */
  }

  /* 3) 言語切替プルダウンの見た目微調整 */
  .l-header__spNav .p-spHeadMenu .pll-parent-menu-item > a > .ttl {
    margin: 0;                       /* 不要な余白リセット */
    padding: 0.5em 1em;              /* タップしやすいサイズに */
    background: none;                /* 背景色が必要ならここで指定 */
  }
}


/* =========================================
   SPメニュー：デフォルトの先頭「＞」を消す
========================================= */

/* よくあるパターン：a::before に付いている場合 */
#sp_menu .c-spnav a::before{
  content: none !important;
  display: none !important;
}

/* もう1パターン：li::before に付いている場合の保険 */
#sp_menu .c-spnav li::before{
  content: none !important;
  display: none !important;
}

/* 先頭アイコン分の左余白が残る場合があるのでリセット */
#sp_menu .c-spnav a{
  padding-left: 0 !important;
}



/* =========================================
   SPメニュー：矢印モーション（OurLocations系に寄せる）
========================================= */


#sp_menu .menu-item-has-children > a::after{
  font-size: 30px; /* 例：>のサイズを 26→30へ。好みで 24〜34 */
}

/* SWELL ハンバーガーメニューUI end */



/* =========================================================
   SWELL グローバルナビ：親メニューのテキスト右側に
   キャレットSVGを常時表示（最終・確定）
   ※ a ではなく .ttl に紐づける

   グローバルナビ：キャレット回転モーション
   ・hover 時
   ・サブメニュー open 時
========================================================= */

/* 基準 */
.menu-item-has-children > a > .ttl{
  position: relative;
}

/* ===== 影 ===== */
.menu-item-has-children > a > .ttl::before{
  content: "";
  position: absolute;
  right: -0.15em;
  top: 50%;
  width: 0.9em;
  height: 0.9em;

  /* 中央基準＋少し下 */
  transform: translateY(calc(-50% + 3px));
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);

  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6' fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;

  filter: blur(2px);
  opacity: 0.65;

  pointer-events: none;
}

/* 開状態 */
.menu-item-has-children:hover > a > .ttl::before,
.menu-item-has-children.is-pinned > a > .ttl::before{
  transform: translateY(calc(-50% + 3px)) rotate(180deg);
}


/* ===== 本体 ===== */
.menu-item-has-children > a > .ttl::after{
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.35em;
  vertical-align: middle;

  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;

  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);

  pointer-events: none;
}

/* 開状態 */
.menu-item-has-children:hover > a > .ttl::after,
.menu-item-has-children.is-pinned > a > .ttl::after{
  transform: rotate(180deg);
}


/* =========================================================
   PC Gnav pinned 制御（>=960px）
   - pinned 中はキャレットが閉じアニメにならない
   - pinned解除の瞬間だけ is-unpinning で close アニメを強制
========================================================= */
@media (min-width: 960px){
  .menu-item-has-children.is-pinned{
    position: relative;
  }

  .menu-item-has-children.is-pinned > .sub-menu{
    left: 50% !important;
    right: auto !important;
    top: 100% !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* SWELL グローバルナビ キャレットUI end */