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


/* ==============================
   デバイス別 改行制御クラス
   ============================== */
.br-item { display:none; }
@media (max-width:767px){ .sp-br { display:inline; } }
@media (min-width:768px) and (max-width:1024px){ .tb-br { display:inline; } }
@media (min-width:1025px){ .pc-br { display:inline; } }


.page-id-425 .l-article{
	max-width: 800px;
	margin: 0 auto;
}


/* カラムの表示列数制御 SP〜タブレット1列 */
@media (max-width: 1023px) {
  .responsive-column {
    display: flex !important;
    flex-direction: column !important;
  }
}


/* h3タグのアンダーバー（下線）をカスタマイズ */
.wp-block-heading.text-white {
  border-bottom: 1px solid #a0927d; /* 下線の太さとカラーを指定 */
  padding-bottom: 0.5em;            /* テキストと下線の間隔を調整 */
}


/* 全h3ブロック見出しの左下線カラー変更 */
h3.wp-block-heading::after {
  background-color: #7c655c !important;
}


/* 見出しの下線色変更 */
.post_content {
  --color_htag: #7c655c;
}


/* ==============================
      デバイス別 表示制御クラス
   ============================== */

/* --------- スマホのみ表示 --------- */
.sp-only {
  display: none !important;
}
@media (max-width: 767px) {
  .sp-only {
    display: block !important;
  }
}

/* --------- タブレットのみ表示 --------- */
.tb-only {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .tb-only {
    display: block !important;
  }
}

/* --------- PCのみ表示 --------- */
.pc-only {
  display: none !important;
}
@media (min-width: 1025px) {
  .pc-only {
    display: block !important;
  }
}

/* --------- スマホで非表示 --------- */
.sp-hide {
  display: block !important;
}
@media (max-width: 767px) {
  .sp-hide {
    display: none !important;
  }
}

/* --------- タブレットで非表示 --------- */
.tb-hide {
  display: block !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .tb-hide {
    display: none !important;
  }
}

/* --------- PCで非表示 --------- */
.pc-hide {
  display: block !important;
}
@media (min-width: 1025px) {
  .pc-hide {
    display: none !important;
  }
}



/* ==============================
   デバイス別 改行制御クラス
   ============================== */
.br-item { display:none; }
@media (max-width:767px){ .sp-br { display:inline; } }
@media (min-width:768px) and (max-width:1024px){ .tb-br { display:inline; } }
@media (min-width:1025px){ .pc-br { display:inline; } }


/* ==================================
   テキスト・リンクなどのデザイン変更
 * ================================== */
/* 特定のテキストカラーを白に */
.text-white {
	color: #ffffff;
}

.text-mutedbrick{
	color: #a44a3f;
}

.text-brown{
	color: #7f6854 !important;
}

/* 通常のリンク（アコーディオン内含む） */
.swell-block-accordion__body a {
  color: #7c655c !important;  /* ←希望のリンクカラーに変更 */
	text-decoration: underline;
}


/* リンクボタン変更 */
.wp-block-button__link {
  color: #766e64 !important;
  background-color: transparent !important;
  border: 2px solid #766e64 !important;
  padding: 0.6em 1.2em;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px; /* 角を少し丸くすると柔らかく見えます */
	font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

/* ホバー時 */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background-color: #6c6155 !important;
  color: #f4f1ed !important;
  border-color: #6c6155 !important;
}

/* クリック時 */
.wp-block-button__link:active {
  background-color: #3f3f3f !important;
  border-color: #3f3f3f !important;
  color: #f4f1ed !important;
}

/* ================================================== */


/* ==================================================
　　　　 言語切り替えメニューのデザイン変更
===================================================== */
/* Polylangプラグインのヘッダアイコンとドロップダウンのデザイン変更 */
@media (min-width: 960px) {
  /* 既存の .ttl（国旗＋テキスト）を隠す */
/*   .pll-parent-menu-item.current-menu-parent > a .ttl {
    display: none !important;
  } */

  /* <a> に ::before で任意テキストを表示 */
  .pll-parent-menu-item.current-menu-parent > a::before {
/*     content: "LANGUAGE";  */  /* ここに表示したい文字列を入れる */
/*     display: inline-block; */
	padding-left: 5px;			  /* フラグ分のスペース */
    font-size: 16px;              /* テキストサイズ */
    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;
  }
}


/* ドロップダウンの背景変更 */
.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; /* 軽い背景変化 */
}



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

  /* 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;                /* 背景色が必要ならここで指定 */
  }
}

/* ================================================== */


/* ==============================
   SWELL：ハンバーガーメニュー内サブメニューをアコーディオン化
   対象：ドロワー（ハンバーガー）内のみ
================================ */

/* ドロワー内の「子メニュー」を閉じた状態にする */
.l-drawer .menu-item-has-children > .sub-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  margin: 0;
  padding: 0;
}

/* 開いている状態 */
.l-drawer .menu-item-has-children.is-open > .sub-menu{
  max-height: 1000px; /* 多めでOK。必要なら増やす */
}

/* 親項目（子を持つ項目）に「開閉できる」見た目を少し足す（任意） */
.l-drawer .menu-item-has-children > a{
  position: relative;
  padding-right: 2.2em; /* 右側に余白（矢印スペース） */
}

/* 右側の簡易矢印（任意） */
.l-drawer .menu-item-has-children > a::after{
  content: "›";
  position: absolute;
  right: .9em;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .25s ease;
  opacity: .8;
}

/* 開いたら矢印回転 */
.l-drawer .menu-item-has-children.is-open > a::after{
  transform: translateY(-50%) rotate(-90deg);
}


/* ==============================
   Polylang：ドロワー内ではPC用ドロップダウン見た目を無効化
================================ */
.l-drawer .pll-parent-menu-item .sub-menu{
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;

/*   opacity: 1 !important;
  visibility: visible !important;
  transform: none !important; */

  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

/* 言語メニュー内のリンクも、他のリンクと同じトーンに寄せる */
.l-drawer .pll-parent-menu-item a{
  background: transparent !important;
  border-radius: 0 !important;
}


/* 最終手段：display:block 強制を潰す（ドロワー内のみ） */
.l-drawer .menu-item-has-children > .sub-menu{
  display: block !important; /* max-heightで制御するため block に固定 */
}


/* =========================================
   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.is-open > a::after{
  animation: spMenuChevronOpen 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

/* 閉じる時 */
#sp_menu .menu-item-has-children:not(.is-open) > a::after{
  animation: spMenuChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes spMenuChevronOpen{
  0%   { transform: translateY(-50%) rotate(-90deg);  opacity: .85; }
  49%  { opacity: .55; }
  52%  { opacity: .55; }
  100% { transform: translateY(-50%) rotate(90deg); opacity: .85; }
}

@keyframes spMenuChevronClose{
  0%   { transform: translateY(-50%) rotate(90deg); opacity: .85; }
  49%  { opacity: .55; }
  52%  { opacity: .55; }
  100% { transform: translateY(-50%) rotate(-90deg);  opacity: .85; }
}


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


/* ================================================== */


/* About Shumeiページのコンタクトするセンター紹介ブロック */
/* 1) 子要素に付いたインライン font-size を無効化（親 .responsive-cn の配下だけ） */
.responsive-cn [style*="font-size"] {
  font-size: inherit !important;
}

/* 2) .responsive-cn 自体をレスポンシブなサイズへ（見出し用・やや大きめの例） */
.responsive-cn,
.responsive-cn .swl-fz {
  /* 最小16px、ビューポートに応じて伸縮、最大22px の例 */
  font-size: clamp(16px, 2.2vw, 18px) !important;
  line-height: 1.35;
}


/* ================================================== */



/* ================================================== */

/* Home3つの芸術紹介記事 */

/* =========================================
   rc3-fixed-gap（リッチカラム 3列→SPで1列）
   画像はカラム幅にフィット、ボタンは中央&内容幅
   タブレットでも列間ギャップを優先保持
   ========================================= */

/* 1) 親インナーをGrid化。各セルで中央寄せ */
.rc3-fixed-gap .swell-block-columns__inner {
  display: grid !important; /* SWELLのflexを上書き */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  justify-items: center; /* セル内で水平方向に中央 */
  align-items: start;    /* 上揃え */
}

@media (max-width: 640px) {
  .rc3-fixed-gap .swell-block-columns__inner {
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 16px;
  }
}

/* 2) カラム（＋内側ラッパ）をカード化して中央寄せ */
.rc3-fixed-gap .swell-block-column,
.rc3-fixed-gap .swell-block-column__inner {
  display: flex;
  flex-direction: column;
  align-items: center; /* 画像もボタンも中央寄せ */
  text-align: center;
  width: 100%;
}

/* 3) 画像サイズ：カラム幅にフィット + 最大幅で見栄え調整 */
.rc3-fixed-gap .wp-block-image {
  width: 100%;
  max-width: clamp(240px, 28vw, 420px); /* 必要に応じて調整 */
  margin: 0 auto;
}
.rc3-fixed-gap .wp-block-image img {
  display: block;
  width: 100% !important;   /* サムネ幅や属性値を上書き */
  height: auto !important;
}

/* 4) 画像とボタンの間隔 */
.rc3-fixed-gap .swell-block-column > * + * {
  margin-top: clamp(10px, 1.2vw, 16px);
}

/* === rc3-fixed-gap：ボタンをテキスト幅に（横に伸ばさない）=== */


/* ボタン行は常に中央寄せ。個々のボタンは縮む（flex伸長を無効化） */
.rc3-fixed-gap .wp-block-buttons {
  width: 100%;
  display: flex;
  justify-content: center !important;
  gap: 12px; /* 複数ボタン時の間隔（任意） */
}
.rc3-fixed-gap .wp-block-buttons > .wp-block-button {
  flex: 0 0 auto !important;  /* 伸びない */
  width: auto !important;
}

/* アウトライン含む a 要素を“テキスト幅”に */
.rc3-fixed-gap .wp-block-button .wp-block-button__link,
.rc3-fixed-gap .wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex !important;         /* 行内要素として内容幅 */
  align-items: center;
  justify-content: center;
  width: fit-content !important;           /* ← ここが肝。古環境では width:auto でも可 */
  min-width: 0 !important;                 /* 以前の min-width を打ち消し */
  max-width: none !important;
  padding: .55em 1.25em;                   /* 横幅をさらに詰めたい場合はここを小さく */
  white-space: nowrap;                     /* 1行に収める（改行させたいなら削除） */
  box-sizing: border-box;
  align-self: center !important;           /* 親flex内でも中央 */
}

/* 念のため“左寄せ”系クラスを無効化して中央に寄せる */
.rc3-fixed-gap .wp-block-buttons.is-content-justification-left,
.rc3-fixed-gap .wp-block-buttons.is-content-justification-space-between,
.rc3-fixed-gap .wp-block-buttons.is-content-justification-right {
  justify-content: center !important;
}

/* =========================================
   rc3-fixed-gap：SWELL既定の columns 余白（--swl-clmn-mrgn--x）を無効化
   ※インライン style を上書きするため !important 必須
   ========================================= */
.swell-block-columns.rc3-fixed-gap{
  --swl-clmn-mrgn--x: 0px !important;
  --swl-clmn-pddng--x: 0px !important; /* 環境によって効く */
}

/* 念のため、外枠・内枠の左右余白も強制リセット */
.swell-block-columns.rc3-fixed-gap{
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.rc3-fixed-gap .swell-block-columns__inner{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* rc3-fixed-gap：SWELLの擬似余白（変数）だけを無効化 */
.post_content .swell-block-columns.rc3-fixed-gap{
  --swl-clmn-mrgn--x: 0px !important;
  --swl-clmn-pddng--x: 0px !important;
}


/* ================================================================= */


/* ============================
   アコーディオン内部をタイトに（acc-tight）
   ============================ */

/* アコーディオン本体と次ブロックの間も過剰に空けない */
.acc-tight { margin-bottom: 0 !important; }
.acc-tight + * { margin-top: clamp(8px, 1vw, 14px) !important; }

/* 本体：中身コンテナ（SWELLは data-swl-acc="body"）の上下パディングを控えめに */
.acc-tight .swell-block-accordion__body,
.acc-tight [data-swl-acc="body"] {　　　　　　　　　　　　　　　　　
  padding-top: clamp(6px, 0.8vw, 12px) !important;
  padding-bottom: clamp(6px, 0.8vw, 12px) !important;
}

/* 先頭/末尾での余白ダブりを防止 */
/* .acc-tight [data-swl-acc="body"] > *:first-child { margin-top: 0 !important; } */
.acc-tight [data-swl-acc="body"] > *:last-child  { margin-bottom: 0 !important; }

/* アコーディオン内部の縦リズム（隣接要素の基本間隔） */
.acc-tight [data-swl-acc="body"] > * + * {
  margin-top: clamp(6px, 0.8vw, 12px) !important;
}

/* 段落 ↔ h3 の間隔をさらにタイトに（ご要望ポイント） */
.acc-tight [data-swl-acc="body"] p + h3,
.acc-tight [data-swl-acc="body"] h3 + p {
  margin-top: clamp(6px, 0.8vw, 12px) !important;
}

/* 段落のデフォルト下余白を少し抑える（内部のみ） */
.acc-tight [data-swl-acc="body"] p { margin-bottom: 0.9em !important; }

/* SWELLのセクションタイトル（下線つき等）を使っている場合 */
.acc-tight [data-swl-acc="body"] .c-secTitle { 
  margin-bottom: clamp(6px, 0.8vw, 12px) !important;
}
.acc-tight [data-swl-acc="body"] .c-secTitle__line { 
  margin-top: 6px !important;
}

/* 区切り線/スペーサーが入っているケースも圧縮 */
.acc-tight [data-swl-acc="body"] hr.wp-block-separator {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.acc-tight [data-swl-acc="body"] .wp-block-spacer {
  height: 8px !important; /* スペーサーが原因の“謎の空き”対策 */
}


/* Our Locationsの国とセンター紹介とアクセスのレイアウト */
/* ▼ アコーディオン（acc-tight 内）に埋め込まれた social-links をタイトに */
.acc-tight .social-links-compact {
  --row-gap: clamp(6px, 0.7vw, 12px);  /* ← 行間の基本値。好みで調整OK */
  line-height: 1.2;
  margin: 0 !important;
  padding: 0 !important;
}

/* 余計な改行を無効化（<br>が空行を作るのを止める） */
.acc-tight .social-links-compact br { display: none !important; }

/* p がデフォルトで持つ下マージンを0に */
.acc-tight .social-links-compact p { margin: 0 !important; }

/* アンカーを横並び・中央揃え・行間は --row-gap で管理 */
.acc-tight .social-links-compact a,
.acc-tight .social-links-compact p > a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;                     /* アイコンとテキストの間隔 */
  margin: 0 !important;         /* inline style を打ち消し */
  padding: 0 !important;
  white-space: nowrap;
  text-decoration: none !important;
}

/* 行間（上下の余白）を統一。p の有無に左右されないよう包括的に指定 */
.acc-tight .social-links-compact > * + *,
.acc-tight .social-links-compact a + a,
.acc-tight .social-links-compact a + p,
.acc-tight .social-links-compact p + a,
.acc-tight .social-links-compact p + p {
  margin-top: var(--row-gap) !important;
}

/* アイコンサイズ（必要なら調整） */
.acc-tight .social-links-compact svg {
  width: 20px; height: 20px; flex: 0 0 auto;
}


/* === social-links の上下だけ内側余白を足す（acc-tight 内のみ） === */
/* 好みの値に変えてOK：例）上 8px／下 10px */
.acc-tight .social-links-compact {
  --social-top-pad: 8px;
  --social-bottom-pad: 10px;
  padding-top: var(--social-top-pad) !important;
  padding-bottom: var(--social-bottom-pad) !important;
}

/* 余計な空行を作る可能性のある空の <p> を無効化（保険） */
.acc-tight .social-links-compact p:empty {
  display: none !important;
}


/* ✅ social-links-compact を確実に縦並びにする（acc-tight 内のみ） */
.acc-tight .social-links-compact{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--row-gap) !important; /* 既存の行間変数をそのまま利用 */
}

/* ✅ 各リンクは1行を占有させる（横並び事故を防止） */
.acc-tight .social-links-compact a,
.acc-tight .social-links-compact p > a{
  display: inline-flex !important; /* アイコンと文字は横並び */
  margin-top: 0 !important;        /* 既存の margin-top ルールと二重にならないように */
}

/* ✅ 既存の「a + a の margin-top」で行間が二重になるのを防止 */
.acc-tight .social-links-compact > * + *,
.acc-tight .social-links-compact a + a,
.acc-tight .social-links-compact a + p,
.acc-tight .social-links-compact p + a,
.acc-tight .social-links-compact p + p{
  margin-top: 0 !important;
}


/* アコーディオン単体：下線のみ（横線だけ） */
.acc-under{
  --acc-bd: 1px;
  --acc-bd-color: #766e64; /* 好きな色に変更 */
}

/* SWELLアコーディオンの “外側details” のみに下線を描く */
.acc-under.swell-block-accordion > details.swell-block-accordion__item{
  border: 0 !important;
  border-bottom: var(--acc-bd) solid var(--acc-bd-color) !important;
  margin: 0 !important;
  box-shadow: none !important;

  /* 縦線が出る可能性を潰す（保険） */
  border-left: 0 !important;
  border-right: 0 !important;
}

/* さらに保険：タイトル側に余計な線がある場合も消す（横線は外側detailsで管理） */
.acc-under.swell-block-accordion .swell-block-accordion__title{
  border: 0 !important;
  box-shadow: none !important;
}

/* アコーディオン内の “詳細ブロック(details)” には線を出さない（今回の悩み対策） */
.acc-under details.wp-block-details{
  border: 0 !important;
  box-shadow: none !important;
}


/* ================================================================= */


/* =========================================================
   social-links-compact (slc) — 行間バリアント
   目的:
   - デフォルトは「tight（詰め）」：住所/電話などの本文テキストと並べても目立たない
   - 必要な箇所だけ「loose（広め）」：SNSリンク単体表示で見栄え良く
   使い分け:
   - <div class="social-links-compact slc">            ← tight（デフォルト）
   - <div class="social-links-compact slc slc--loose"> ← loose
========================================================= */


/* ---------------------------------------------------------
   [A] slc の共通スタイル（デフォルト = tight）
   ※ここを触ると基本の見た目が変わります
--------------------------------------------------------- */
.acc-tight .social-links-compact.slc{

  /* (1) 行間（縦方向の間隔）
     - row と row の間隔に使います
     - 値を小さく → 行間が詰まる / 大きく → 行間が広がる */
  --row-gap: clamp(2px, 0.35vw, 6px);  /* ←デフォルトtight */

  /* (2) 行送り（リンク行そのものの詰まり具合）
     - 値を小さく → 文字の上下が詰まる（本文と馴染みやすい）
     - 値を大きく → ゆったり */
  --slc-line-height: 1.0;             /* ←デフォルトtight */

  /* (3) ブロック上下の余白（social-links 全体の上下の“外観の厚み”）
     - テキストと並べるときは薄めが自然 */
  --social-top-pad: 2px;               /* ←デフォルトtight */
  --social-bottom-pad: 2px;            /* ←デフォルトtight */

  /* ここから実適用 */
  line-height: var(--slc-line-height);
  margin: 0 !important;
  padding-top: var(--social-top-pad) !important;
  padding-bottom: var(--social-bottom-pad) !important;
}


/* ---------------------------------------------------------
   [B] wpautop / ブロック整形対策（再発防止の保険）
   目的:
   - Gutenberg / アコーディオン内で <br> や <p> が混入しても崩れないように
   注意:
   - あなたの運用（コメントを row 内に置く）を守れているなら、
     これらは“ほぼ効かない”＝安全な保険になります
--------------------------------------------------------- */

/* 改行タグが勝手に増えても見た目に影響させない */
.acc-tight .social-links-compact.slc br{
  display: none !important;
}

/* slc直下に <p> が混入した場合に“1行扱い”で隙間が増えるのを防止
   例: <p><!-- Email --></p> のようなコメント入り p も確実に無効化 */
.acc-tight .social-links-compact.slc > p{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   [C] 行間の付け方（重要）
   - row + row の時だけ margin-top を入れる
   - 余計な要素が挟まっても行間が二重化しづらい
--------------------------------------------------------- */
.acc-tight .social-links-compact.slc .slc__row + .slc__row{
  margin-top: var(--row-gap) !important;
}


/* ---------------------------------------------------------
   [D] 1行（リンク）の見た目
   - テキスト + アイコンは横並び
--------------------------------------------------------- */
.acc-tight .social-links-compact.slc .slc__link{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;                /* (4) テキストとアイコンの距離 */
  white-space: nowrap;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.acc-tight .social-links-compact.slc .slc__icon{
  width: 20px;              /* (5) アイコンサイズ（他SNSと統一） */
  height: 20px;
  flex: 0 0 auto;
}


/* ---------------------------------------------------------
   [E] loose バリアント（必要な箇所だけ広めにする）
   - SNSリンクだけ単体で見せる時に“余白が気持ちいい”見え方にする
   使い方:
   - <div class="social-links-compact slc slc--loose"> ... </div>
--------------------------------------------------------- */
.acc-tight .social-links-compact.slc.slc--loose{
  --row-gap: clamp(6px, 0.7vw, 12px);  /* (1) 行間を広げる */
  --slc-line-height: 1.2;              /* (2) 行送りをゆったり */
  --social-top-pad: 8px;               /* (3) 上下余白を厚め */
  --social-bottom-pad: 10px;
}


/* ================================================================= */

/* アコーディオン内の段落ブロックに付与した「contact-lines」を指定した段落だけ下余白を0にする */
.acc-tight [data-swl-acc="body"] p.contact-lines{
  margin-bottom: 0 !important;
}
/* 旧の row+row は無効化 */
.acc-tight .social-links-compact.slc .slc__row + .slc__row{
  margin-top: 0 !important;
}

/* ================================================================= */

/* ボタンブロックの幅をテキストの幅に合わせるように設定 */

/* ===== Gutenbergボタンを“テキスト幅”に（全ページ） ===== */
/* 本文領域の代表クラスをまとめてスコープ。テーマにより片方だけでOK */
:where(.post_content, .p-entry__body, .entry-content) 
  .wp-block-buttons:not(.is-vertical) > .wp-block-button {
  flex: 0 0 auto !important;   /* 伸びない */
  width: auto !important;      /* 100%幅を打ち消し */
}

/* a要素（実ボタン）の幅を内容幅に。アウトラインも含めて統一 */
:where(.post_content, .p-entry__body, .entry-content) 
  .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;      /* 枠が横に伸びない */
  min-width: 0 !important;
  white-space: nowrap;         /* 1行で収める（改行させたい場合は normal に） */
  padding: .55em 14px !important;       /* 余白はお好みで */
  box-sizing: border-box;
}

/* アウトラインスタイルも同様に“内容幅”に固定 */
:where(.post_content, .p-entry__body, .entry-content) 
  .wp-block-button.is-style-outline .wp-block-button__link {
  width: auto !important;
}


/* ================================================== */


/* ===========================
   custom-details：一列固定 + 擬似矢印
   =========================== */

/* スマホ（〜765.98px） */
@media (max-width: 765.98px) {
  details.wp-block-details.pc-hide.custom-details,
  details.wp-block-details.custom-details {
    display: block !important;
    float: none !important;
    clear: both !important;
    flex-direction: column !important; /* 万一flexが残っても縦並び */
    align-items: stretch !important;
    gap: 0 !important;
  }
  details.wp-block-details.custom-details > summary {
    display: block !important;
    position: relative;
    margin: 0 0 8px 0 !important;
    padding-left: 1.1em;  /* 矢印ぶん */
  }
  details.wp-block-details.custom-details > summary::-webkit-details-marker { display: none; }
  details.wp-block-details.custom-details > summary::marker { content: ""; }
  details.wp-block-details.custom-details > summary::before {
    content: "";
    position: absolute; left: 0; top: 0.55em;
    border: .32em solid transparent; border-left-color: currentColor;
    transition: transform .2s ease;
  }
  details.wp-block-details.custom-details[open] > summary::before { transform: rotate(90deg); }

  details.wp-block-details.custom-details > *:not(summary) {
    display: block !important; float: none !important; clear: both !important;
    margin-left: 0 !important; width: 100% !important; max-width: 100% !important;
  }
  details.wp-block-details.custom-details figure.wp-block-image {
    margin: 0 !important; max-width: 100%;
  }
}

/* タブレット/PC（766px〜） */
@media (min-width: 766px) {
  details.wp-block-details.pc-hide.custom-details,
  details.wp-block-details.custom-details {
    display: block !important;
    float: none !important;
    clear: both !important;
    /* 万一flexが勝っても縦積み */
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
  }
  details.wp-block-details.custom-details > summary {
    display: block !important;
    position: relative;
    margin: 0 0 10px 0 !important;
    padding-left: 1.2em; /* 矢印ぶん */
  }
  details.wp-block-details.custom-details > summary::-webkit-details-marker { display: none; }
  details.wp-block-details.custom-details > summary::marker { content: ""; }
  details.wp-block-details.custom-details > summary::before {
    content: "";
    position: absolute; left: 0; top: 0.55em;
    border: .35em solid transparent; border-left-color: currentColor;
    transition: transform .2s ease;
  }
  details.wp-block-details.custom-details[open] > summary::before { transform: rotate(90deg); }

  details.wp-block-details.custom-details > *:not(summary) {
    display: block !important; float: none !important; clear: both !important;
    margin-left: 0 !important; width: 100% !important; max-width: 100% !important;
  }
  details.wp-block-details.custom-details figure.wp-block-image {
    margin: 0 !important; max-width: 100%;
  }
}


/* ================================================================================================== */

/* =========================================
   SWELL ボタン：btn-border（例外化・統一版）
   - btn-border を付けたボタンだけ、SWELLの輪郭/背景（hover/focus含む）を無効化
   - 線はラッパー（.wp-block-button.btn-border）にだけ描画
   - 上線：現状どおり
   - 下線：ホバー時だけ逆（左→右へ短くなる）
   - 線色：#766e64 のまま
========================================= */

/* 0) btn-border を付けたボタンブロック（外側）だけ対象 */
.wp-block-button.btn-border{
  position: relative;
  display: inline-block;
}

/* 1) btn-border のときだけ SWELLの「輪郭/背景/影」を強制的に無効化
      ※ is-style-outline 等が付いていても“当てさせない” */
.wp-block-button.btn-border .wp-block-button__link{
  position: relative;
  border: none !important;
  border-radius: 0 !important;

  /* SWELLが輪郭っぽく見せる要素をまとめて無効化 */
  outline: none !important;
  box-shadow: none !important;

  /* SWELLのoutline系ボタンは hover で背景が入ることがあるので透明固定 */
  background: transparent !important;

  /* ついでに下線などを消して見た目を安定 */
  text-decoration: none !important;
}

/* 2) btn-border のときだけ hover / focus / active / focus-visible も無効化 */
.wp-block-button.btn-border .wp-block-button__link:hover,
.wp-block-button.btn-border .wp-block-button__link:focus,
.wp-block-button.btn-border .wp-block-button__link:active,
.wp-block-button.btn-border .wp-block-button__link:focus-visible{
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 3) 上下ライン（ラッパーに描画） */
.wp-block-button.btn-border::before,
.wp-block-button.btn-border::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;

  background: #766e64 !important; /* ←カラー指定はそのまま */
  pointer-events: none;
  z-index: 2;

  transform: scaleX(1);
  transition: transform .3s;
}

/* 上ライン（現状維持） */
.wp-block-button.btn-border::before{
  top: 0;
  transform-origin: left;
}

/* 下ライン（ホバー時だけ逆方向に縮む） */
.wp-block-button.btn-border::after{
  bottom: 0;
  transform-origin: right; /* ★左→右へ短く見える */
}

/* 4) hoverで線を消す */
.wp-block-button.btn-border:hover::before{
  transform: scaleX(0);
}
.wp-block-button.btn-border:hover::after{
  transform: scaleX(0);
}

/* 5) 旧CSS（a.btn-border側の擬似要素）を無効化して競合を防ぐ */
.wp-block-button .wp-block-button__link.btn-border::before,
.wp-block-button .wp-block-button__link.btn-border::after{
  content: none !important;
}


/* =========================================
   btn-border：クリックできる感（右に ">" を追加）
   - ">" 分の余白を確保
   - ">" はリンク内の右端に固定表示
   - 線（ラッパー）はそのまま → ">" まで伸びる
========================================= */

/* 1) リンクに ">" 用のスペースを作る */
.wp-block-button.btn-border .wp-block-button__link{
  padding-right: 1.6em !important; /* ← ">" の分。必要なら増減 */
  cursor: pointer;
}

/* 2) 右側に ">" を表示（リンクの右端に固定） */
.wp-block-button.btn-border .wp-block-button__link::after{
  content: ">";
  position: absolute;
  right: .4em;               /* 右端からの距離 */
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;      /* クリックの邪魔をしない */
}

/* 3) （任意）ホバーで ">" を少し動かして“押せる感”を強める */
.wp-block-button.btn-border .wp-block-button__link::after{
  transition: transform .6s;
}
.wp-block-button.btn-border:hover .wp-block-button__link::after{
  transform: translate(.35em, -50%); /* 少し右へ */
}



/* ================================================
 * btn-border のボタンだけ文字サイズを用途別に固定 
 * ================================================ */

/* タブレット（1025px >=）：16px */
@media (min-width: 1025px){
  .wp-block-button.btn-border .wp-block-button__link{
    font-size: 16px !important;
  }
}

/* タブレット（768px >= 1024px）：14px */
@media (min-width: 768px) and (max-width: 1024px){
  .wp-block-button.btn-border .wp-block-button__link{
    font-size: 14px !important;
  }
}

/* スマホ（<= 767px）：12px */
@media (max-width: 767px){
  .wp-block-button.btn-border .wp-block-button__link{
    font-size: 12px !important;
  }
}


/* ================================================
 * btn-rp（responsive） のボタンだけ文字サイズを用途別に固定 
 * ================================================ */

/* タブレット（1025px >=）：16px */
@media (min-width: 1025px){
  .wp-block-button.btn-rp .wp-block-button__link{
    font-size: 16px !important;
  }
}

/* タブレット（768px >= 1024px）：14px */
@media (min-width: 768px) and (max-width: 1024px){
  .wp-block-button.btn-rp .wp-block-button__link{
    font-size: 14px !important;
  }
}

/* スマホ（<= 767px）：12px */
@media (max-width: 767px){
  .wp-block-button.btn-rp .wp-block-button__link{
    font-size: 12px !important;
  }
}

/* ================================================================================================== */


/* ================================
   詳細ブロック：SVG chevron + 回転 + 途中で “じわっと消える” モーション
   ================================ */

.post_content details.wp-block-details > summary{
  position: relative;
  padding-right: 2.2em;
  list-style: none;
}

/* 標準マーカー消し */
.post_content details.wp-block-details > summary::-webkit-details-marker{
  display: none;
}

/* テーマ側が summary::after などで矢印を出している場合に消す */
.post_content details.wp-block-details > summary::after{
  content: none !important;
  display: none !important;
}

/* 自前アイコン（chevron-right.svg） */
.post_content details.wp-block-details > summary::before{
  content: "";
  position: absolute;
  right: 0.8em;
  top: 50%;
  width: 1.05em;
  height: 1.05em;

  /* “閉” の基準状態 */
  transform: translateY(-50%) rotate(0deg);
  opacity: 1;

  /* currentColor で着色（マスク方式） */
  background-color: currentColor;

  -webkit-mask-image: url("http://shumeiorgtest.test/wp-content/uploads/2026/01/chevron-down.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("http://shumeiorgtest.test/wp-content/uploads/2026/01/chevron-down.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  pointer-events: none;
}

/* 開く時 */
.post_content details.wp-block-details[open] > summary::before{
  animation: detailsChevronOpen 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

/* 閉じる時 */
.post_content details.wp-block-details:not([open]) > summary::before{
  animation: detailsChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

/* 開く時 */
@keyframes detailsChevronOpen{
  0%   { transform: translateY(-50%) rotate(0deg);  opacity: 1; }
  49%  { opacity: 0.5; }
  52%  { opacity: 0.5; }
  100% { transform: translateY(-50%) rotate(180deg); opacity: 1; }
}

/* 閉じる時 */
@keyframes detailsChevronClose{
  0%   { transform: translateY(-50%) rotate(180deg); opacity: 1; }
  49%  { opacity: 0.5; }
  52%  { opacity: 0.5; }
  100% { transform: translateY(-50%) rotate(0deg);  opacity: 1; }
}





/* ================================================================================================== */



/* =========================================================
   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("http://shumeiorgtest.test/wp-content/uploads/2026/01/chevron-down.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("http://shumeiorgtest.test/wp-content/uploads/2026/01/chevron-down.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: spMenuChevronOpen 0.3s cubic-bezier(0.4,0,0.2,1) both;
}
#sp_menu .menu-item-has-children:not(.is-open) > a::after{
  animation: spMenuChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

/* 開く時 */
@keyframes spMenuChevronOpen{
  0%   { transform: translateY(-50%) rotate(0deg);   opacity: 1; }
  49%  { opacity: 0.5; }
  52%  { opacity: 0.5; }
  100% { transform: translateY(-50%) rotate(180deg); opacity: 1; }
}

/* 閉じる時 */
@keyframes spMenuChevronClose{
  0%   { transform: translateY(-50%) rotate(180deg); opacity: 1; }
  49%  { opacity: 0.5; }
  52%  { opacity: 0.5; }
  100% { transform: translateY(-50%) rotate(0deg);   opacity: 1; }
}



/* 4) Polylang：SPメニュー内ではPC用ドロップダウン装飾を無効化して “普通のメニュー” に揃える */
#sp_menu .pll-parent-menu-item > .sub-menu{
  position: static !important;
/*   transform: none !important;
  visibility: visible !important;
  opacity: 1 !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;
}


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

/* 子項目の行間・余白を少し整える（任意） */
#sp_menu .sub-menu > li > a{
  padding-top: .55em;
  padding-bottom: .55em;
}


/* テキストサイズ制御 SP（〜767px） */
@media (max-width: 767px){
  #sp_menu .c-spnav a{
    font-size: 15px !important;   /* ← SPの固定値 */
    line-height: 1.6 !important;
  }
  /* サブメニューは少し小さくしたい場合（任意） */
  #sp_menu .sub-menu a{
    font-size: 14px !important;
  }
}
/* タブレット（768〜1024px） */
@media (min-width: 768px) and (max-width: 1024px){
  #sp_menu .c-spnav a{
    font-size: 16px !important;   /* ← TBの固定値 */
    line-height: 1.6 !important;
  }
  #sp_menu .sub-menu a{
    font-size: 14px !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;
}

/* ================================================================================================== */

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

.menu-item-has-children > a > .ttl{
  position: relative; /* キャレットの基準 */
}

/* テキスト直後にキャレットを出す */
.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-color: #fff;

  -webkit-mask-image: url("http://shumeiorgtest.test/wp-content/uploads/2026/01/chevron-down.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("http://shumeiorgtest.test/wp-content/uploads/2026/01/chevron-down.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

/* =========================================================
   グローバルナビ：キャレット回転モーション
   ・hover 時
   ・サブメニュー open 時
   ※ details ブロックと完全同一モーション
========================================================= */

/* 基準状態（閉） */
.menu-item-has-children > a > .ttl::after{
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

/* 開く時 */
@keyframes navChevronOpen {
  0%   { transform: rotate(0deg);   opacity: 1; }
  49%  { opacity: 0.5; }
  52%  { opacity: 0.5; }
  100% { transform: rotate(180deg); opacity: 1; }
}

/* 閉じる時 */
@keyframes navChevronClose {
  0%   { transform: rotate(180deg); opacity: 1; }
  49%  { opacity: 0.5; }
  52%  { opacity: 0.5; }
  100% { transform: rotate(0deg);   opacity: 1; }
}



/* =========================================================
   グローバルナビ：キャレット回転モーション（hover / open / pinned）
   - pinned中に hover が外れても close を発火させない
   - unpin の瞬間だけ close を最優先
========================================================= */

/* 開く（hover / is-open / is-pinned） */
.menu-item-has-children:hover > a > .ttl::after,
.menu-item-has-children.is-open > a > .ttl::after,
.menu-item-has-children.is-pinned > a > .ttl::after{
  animation: navChevronOpen 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

/* 閉じる（hoverでもopenでもpinnedでもない時だけ） */
.menu-item-has-children:not(:hover):not(.is-open):not(.is-pinned):not(.is-unpinning) > a > .ttl::after{
  animation: navChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

/* pin解除の瞬間だけ：close を最優先で強制 */
.menu-item-has-children.is-unpinning > a > .ttl::after{
  animation: navChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
}
.menu-item-has-children.is-unpinning:hover > a > .ttl::after,
.menu-item-has-children.is-unpinning.is-open > a > .ttl::after,
.menu-item-has-children.is-unpinning.is-pinned > a > .ttl::after{
  animation: navChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
}


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

  /* --- pinned時のサブメニュー表示（右ズレ防止込み） --- */
  .menu-item-has-children.is-pinned{
    position: relative; /* 子ulの基準を安定させる */
  }

  .menu-item-has-children.is-pinned > .sub-menu{
    /* SWELLのデフォルト: left:50% + translateX(-50%) を維持してズレ防止 */
    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;
  }

  /* --- キャレットは animation で統一（transitionは競合しやすいので切る） --- */
  .menu-item-has-children > a > .ttl::after{
    transition: none !important;
  }

  /* 1) 開く：hover / is-open / is-pinned のどれか */
  .menu-item-has-children:hover > a > .ttl::after,
  .menu-item-has-children.is-open > a > .ttl::after,
  .menu-item-has-children.is-pinned > a > .ttl::after{
    animation: navChevronOpen 0.3s cubic-bezier(0.4,0,0.2,1) both;
  }

  /* 2) 閉じる：hover でも open でも pinned でもない時だけ
        ※ pinned中に勝手に閉じないように “is-pinned を必ず除外” */
  .menu-item-has-children:not(:hover):not(.is-open):not(.is-pinned):not(.is-unpinning) > a > .ttl::after{
    animation: navChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both;
  }

  /* 3) pin解除の瞬間だけ：close を最優先（他の条件に絶対負けない） */
  .menu-item-has-children.is-unpinning > a > .ttl::after{
    animation: navChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
  }
  .menu-item-has-children.is-unpinning:hover > a > .ttl::after,
  .menu-item-has-children.is-unpinning.is-open > a > .ttl::after,
  .menu-item-has-children.is-unpinning.is-pinned > a > .ttl::after{
    animation: navChevronClose 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
  }
}

/* ================================================================================================== */