/*
Theme Name: AGREATDREAM
Theme URI: https://agreatdream.com/
Description: Bilingual Japanese-English child theme for Twenty Twenty-Five.
Author: Glen
Author URI: https://agreatdream.com/
Template: twentytwentyfive
Version: 1.3
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: agreatdream
*/

/* =====================================================================
   0. VARIABLES
   ===================================================================== */
:root {
  --agd-navy: #0e2c45;
  --agd-burgundy: #6e2438;
  --agd-gold: #c6a15b;
  --agd-paper: #f7f5f0;
  --agd-ink: #202833;

  --agd-header-bg: var(--agd-navy);
  --agd-header-fg: #ffffff;
  --agd-trial-gold: #c8a96b;
  --agd-trial-gold-hover: #af9562;

  /* Desktop: height shared by nav buttons, language button, search input + button */
  --agd-btn-h: 40px;

  /* Desktop: how the nav group sits between the logo and the language button.
     space-evenly = fills the gap (default)   flex-end = pushed to the right
     center       = centered                  space-between = edge to edge */
  --agd-nav-justify: space-evenly;

  /* Mobile control height + logo width (changed per breakpoint below) */
  --agd-mob-h: 44px;
  --agd-mob-logo-w: 132px;
}

/* =====================================================================
   1. BASE
   ===================================================================== */
   input#agd-site-search-1{font-size:16px}
   figure.wp-block-image.aligncenter.size-g-360.is-resized,figure.wp-block-image.aligncenter.size-large.is-resized{display:block}
div.agd-sidebar a span,
div.agd-sidebar a div span{display:block}  
div.agd-sidebar{/*word-break:keep-all;*/word-break:auto-phrase;}

main{max-width:1220px!important;margin-left:auto;margin-right:auto;}

body { color: var(--agd-ink);background-color:#ecebed;font-weight:400}

/* Fonts. A Latin-only stack gives thin Japanese (kanji/kana fall back to the browser default).
   Latin fonts stay first (they only supply Latin letters); Japanese characters then fall through to the first
   Japanese font the device has: Hiragino (Mac/iOS) > Noto (Android/Linux) > Meiryo (Windows, sturdier than Yu Gothic). */
:root {
  --agd-font-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue";
  --agd-font-ja: var(--agd-font-latin), "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", "Yu Gothic Medium", "YuGothic", sans-serif;
}
html[lang="ja"] body,
html[lang="ja"] body :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .wp-element-button, .wp-block-button__link) {
  font-family: var(--agd-font-ja);
}
html[lang="ja"] body { line-height: 1.85; letter-spacing: .02em; }
/* English pages keep the original stack */
html:not([lang="ja"]) body { font-family: var(--agd-font-latin), sans-serif; }
a { text-underline-offset: .18em; }
a:hover { color: #0d2f6f; }
.agd-brand { color: var(--agd-navy); letter-spacing: .025em; font-weight: 750; }

.agd-language-links { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; font-size: .92rem; }
.agd-language-links a { text-decoration: none; font-weight: 650; }

.agd-search-form { display: flex; gap: .5rem; width: 100%; max-width: 34rem; }

.agd-search-form br{display:none} /*Glen - fixing injected br code*/










.agd-search-form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.agd-search-form input[type="search"] { min-width: 0; flex: 1; padding: .75rem .9rem; border: 1px solid #aab3bc; border-radius: 3px; background: #fff; color: #17212b; }
.agd-search-form button { padding: .75rem 1rem; border: 0; border-radius: 3px; background: var(--agd-navy); color: #fff; font-weight: 700; cursor: pointer; }
.agd-search-form button:hover { background: #0d2f6f; }

.agd-sidebar { padding: 1.2rem; background: var(--agd-paper); border-top: 3px solid var(--agd-gold); border-radius: 2px; }
.agd-sidebar ul { padding-left: 1.2rem; }
.agd-sidebar li { margin-block: .45rem; }
.agd-button-link { display: inline-block; padding: .7rem 1rem; background: var(--agd-navy); color: #fff; text-decoration: none; border-radius: 3px; font-weight: 700; }
.agd-button-link:hover { color: #fff; background: var(--agd-navy); }


.gray-btn, a.gray-btn, a.gray-btn:visited {
    display: inline-block;
    text-align: center !important;
    margin: 0 auto !important;
    color: #555 !important;
    font-weight: 500;
    border-radius: 50px;
    background: #f2f2f2;
    background: linear-gradient(#fafafa, #e7e7e7);
    background: -moz-linear-gradient(top,#fafafa 0%,#e7e7e7 100%);
    border: 1px solid #cfcfcf;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(255, 255, 255, 0.9);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15),inset 0 0 1px rgba(255,255,255,0.9);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

@media (max-width: 680px) {
  .agd-search-form { flex-wrap: wrap; }
  .agd-search-form input[type="search"] { flex-basis: 100%; }
  .agd-search-form button { flex: 1; }
}

/* =====================================================================
   2. SIDEBAR + PAGE LAYOUT (templates page-en-sidebar / page-jp-sidebar)
   ===================================================================== */
.agd-sidebar .wp-block-buttons { margin-bottom: .75rem; }
.agd-sidebar .wp-block-button { width: 100%; }
.agd-sidebar .wp-block-button__link {
  width: 100%; box-sizing: border-box; text-align: center;
  background: #e3e6ea; color: var(--agd-navy); border-radius: 2rem; font-weight: 700; line-height: 1.4;
}
.agd-sidebar .wp-block-button__link:hover { background: #d3d8de; color: var(--agd-navy); }
.agd-sidebar .agd-sb-phone .wp-block-button__link { font-size: 1.5rem; }
.agd-sidebar .agd-online { font-size: .85rem; line-height: 1.5; margin-block: 1rem; }
.agd-sidebar .agd-online a { color: var(--agd-navy); text-decoration: none; }
.agd-sidebar .agd-online a:hover { text-decoration: underline; }
.agd-sidebar .wp-block-heading {
  font-size: 1rem; letter-spacing: .06em; color: var(--agd-navy);
  border-bottom: 1px solid rgba(16,43,70,.2); padding-bottom: .35rem; margin: 1.5rem 0 .5rem;
}
.agd-sidebar .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: .35rem; }
.agd-sidebar .wp-block-navigation a { color: var(--agd-navy); text-decoration: none; }
.agd-sidebar .wp-block-navigation a:hover { text-decoration: underline; }

/* Sidebar menus printed with [agd_menu] (classic menus) */
.agd-sidebar .agd-sb-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.agd-sidebar .agd-sb-menu-list li { margin: 0; padding: 0; list-style: none; }
.agd-sidebar .agd-sb-menu-list a { color: var(--agd-navy); text-decoration: none; }
.agd-sidebar .agd-sb-menu-list a:hover { text-decoration: underline; }
.agd-sidebar .agd-sb-menu-list .sub-menu { list-style: none; margin: .35rem 0 .2rem; padding: 0 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; font-size: .95em; }
.agd-sidebar .agd-menu-missing { padding: .5rem; background: #fff3cd; border: 1px solid #e0c36a; font-size: .85rem; }

/* Sidebar column: never narrower than 298px.
   The templates set the columns to 70% / 30% with an inline style, so !important is needed here.
   Below 782px WordPress stacks the columns, so the sidebar simply takes the full width. */
@media (min-width: 782px) {
  .agd-page-layout .agd-columns { flex-wrap: nowrap; }
  .agd-page-layout .agd-columns > .wp-block-column:first-child { flex: 1 1 0 !important; min-width: 0; }
  .agd-page-layout .agd-columns > .wp-block-column:last-child  { flex: 0 0 max(30%, 298px) !important; min-width: 298px; }
}

/* =====================================================================
   3. HEADER - SHARED
   Breakpoints
     1. Phone   : up to 599px      (tiny screens <= 380px get their own layout)
     2. Tablet  : 600px - 899px
     3. Laptop  : 900px - 1199px
     4. Desktop : 1200px and up
   Below 900px = MOBILE header (logo + search / online / menu).
   900px and up = DESKTOP header (row 1: logo, nav, language / row 2: search).
   ===================================================================== */
.agd-site-header {
  position: relative; z-index: 1000;
  background: var(--agd-header-bg); color: var(--agd-header-fg);
  border-bottom: 1px solid rgba(16,43,70,.16);
}
.agd-site-header .agd-header-inner { position: static; }

.agd-site-header .agd-logo { margin: 0; }
.agd-site-header .agd-logo a { display: block; line-height: 0; }
.agd-site-header .agd-logo img { display: block; width: 100%; max-width: none; height: auto; }

/* Hide stray empty paragraphs WordPress can add around shortcodes */
.agd-site-header .agd-header-inner > p:empty { display: none; }

/* WordPress can inject <br> into shortcode / HTML blocks; inside flex rows they create blank gaps */
.agd-site-header .agd-mobile-header-controls br,
.agd-site-header .agd-mobile-search-panel br,
.agd-site-header .agd-language-links br,
.agd-site-header .agd-search-form br { display: none !important; }

/* >>> THE KEY FIX: mobile-only parts are hidden by default (= on PC). <<<
   They are switched on again only inside the max-width:899px block below. */
.agd-site-header .agd-mobile-header-controls,
.agd-site-header .agd-mobile-search-panel,
.agd-site-header .agd-mobile-menu-panel { display: none; }

/* Link colours inside the header */
.agd-site-header .agd-language-links a { color: var(--agd-header-fg); }
.agd-site-header .agd-language-links a:hover { color: var(--agd-gold); }
.agd-site-header .agd-search-form button { background: var(--agd-navy); border: 1px solid var(--agd-gold) !important;}
.agd-site-header .agd-search-form button:hover { background: #8a2f48; }

/* =====================================================================
   4. HEADER - DESKTOP / LAPTOP (900px and up)
   row 1 = logo | nav buttons | language button
   row 2 = full-width search field + button
   ===================================================================== */
@media (min-width: 900px) {
  .agd-site-header .agd-header-inner {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(12px, 1.5vw, 26px);
    row-gap: 12px;
  }

  .agd-site-header .agd-logo { grid-column: 1; grid-row: 1; width: 150px; align-self: center; }

  /* Nav sits in the middle column, between logo and language button */
  .agd-site-header .agd-nav,
  .agd-site-header .agd-emergency-menu {
    grid-column: 2; grid-row: 1; width: 100%; min-width: 0; margin: 0 !important; align-self: center;
  }

  /* Tools group dissolves so language + search can be placed on the grid */
  .agd-site-header .agd-header-tools { display: contents !important; }

  .agd-site-header .agd-language-links {
    grid-column: 3; grid-row: 1; justify-self: end; align-self: center;
    flex-wrap: nowrap; white-space: nowrap; margin: 0 !important;
  }
  .agd-site-header .agd-language-links a {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    height: var(--agd-btn-h); padding: 0 16px; line-height: 1;
    border: 1px solid rgba(255,255,255,.45); border-radius: 4px;
  }
  .agd-site-header .agd-language-links a:hover { border-color: var(--agd-gold); }

  /* Globe icon to the LEFT of the language text (same artwork as the mobile Menu button).
     Drawn as a mask so it follows the text colour, including the gold hover. */
  .agd-site-header .agd-language-links a::before {
    content: ""; display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; margin-right: 8px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M17.98,8.69c-.07-2.19-.93-4.17-2.3-5.69-.14-.15-.28-.31-.43-.45C13.96,1.28,12.28.42,10.41.12c-.36-.06-.73-.09-1.11-.11-.02,0-.03,0-.05,0-.09,0-.17-.01-.26-.01h0c-.11,0-.21.01-.32.02-.32.01-.63.04-.94.08-1.93.27-3.67,1.16-5.01,2.46-.15.14-.29.3-.43.45C.94,4.53.09,6.51.02,8.69c0,.1-.02.21-.02.31s.01.21.02.31c.08,2.19.93,4.17,2.3,5.7.14.15.28.31.43.45,1.32,1.28,3.04,2.16,4.95,2.44.32.05.65.08.99.09.11,0,.21.02.32.02.01,0,.02,0,.03,0,.06,0,.12,0,.18,0,.03,0,.06,0,.09,0,.39-.01.78-.05,1.15-.11,1.85-.3,3.5-1.16,4.79-2.41.15-.14.29-.3.43-.45,1.37-1.52,2.23-3.51,2.31-5.71,0-.1.02-.21.02-.31s-.01-.21-.02-.31ZM17.36,8.69h-2.76c-.04-1.41-.35-2.74-.88-3.95.56-.37,1.08-.8,1.55-1.28,1.24,1.41,2.02,3.23,2.09,5.23ZM5.26,13.41c1.03-.55,2.19-.87,3.42-.92v4.62c-1.44-.84-2.63-2.13-3.42-3.71ZM12.94,4.51c-1.08.61-2.32.97-3.63,1.03V.74c1.53.83,2.8,2.14,3.63,3.77ZM8.68,5.53c-1.24-.05-2.4-.37-3.44-.93.79-1.59,1.99-2.89,3.44-3.74v4.67ZM8.68,6.15v2.54h-4.44c.04-1.25.3-2.44.75-3.51,1.11.58,2.37.93,3.69.98ZM8.68,9.31v2.56c-1.32.05-2.56.39-3.67.97-.46-1.08-.73-2.27-.77-3.53h4.44ZM9.3,12.49c1.3.05,2.53.41,3.61,1.01-.83,1.61-2.09,2.92-3.61,3.74v-4.75ZM9.3,11.87v-2.56h4.69c-.04,1.3-.33,2.52-.81,3.63-1.16-.64-2.48-1.02-3.88-1.07ZM9.3,8.69v-2.54c1.4-.05,2.73-.43,3.89-1.08.48,1.1.76,2.33.79,3.62h-4.69ZM14.85,3.01c-.42.44-.88.83-1.39,1.17-.71-1.38-1.72-2.55-2.94-3.42,1.67.31,3.16,1.11,4.32,2.24ZM7.78.72c-1.28.89-2.34,2.12-3.07,3.58-.57-.36-1.1-.79-1.56-1.28C4.38,1.81,5.99.98,7.78.72ZM2.72,3.47c.52.54,1.1,1,1.73,1.39-.5,1.17-.79,2.46-.83,3.83H.64c.07-2,.85-3.82,2.08-5.22ZM.64,9.31h2.99c.04,1.37.34,2.67.85,3.84-.63.39-1.22.85-1.74,1.39-1.25-1.41-2.02-3.23-2.1-5.23ZM3.16,15c.47-.49,1-.91,1.57-1.28.74,1.46,1.81,2.68,3.09,3.57-1.8-.26-3.42-1.08-4.66-2.29ZM10.49,17.24c1.22-.86,2.24-2.03,2.96-3.41.51.34.97.73,1.39,1.17-1.17,1.14-2.68,1.94-4.35,2.24ZM15.26,14.55c-.47-.48-.99-.91-1.55-1.28.54-1.21.86-2.54.9-3.96h2.76c-.07,2.01-.85,3.83-2.1,5.24Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M17.98,8.69c-.07-2.19-.93-4.17-2.3-5.69-.14-.15-.28-.31-.43-.45C13.96,1.28,12.28.42,10.41.12c-.36-.06-.73-.09-1.11-.11-.02,0-.03,0-.05,0-.09,0-.17-.01-.26-.01h0c-.11,0-.21.01-.32.02-.32.01-.63.04-.94.08-1.93.27-3.67,1.16-5.01,2.46-.15.14-.29.3-.43.45C.94,4.53.09,6.51.02,8.69c0,.1-.02.21-.02.31s.01.21.02.31c.08,2.19.93,4.17,2.3,5.7.14.15.28.31.43.45,1.32,1.28,3.04,2.16,4.95,2.44.32.05.65.08.99.09.11,0,.21.02.32.02.01,0,.02,0,.03,0,.06,0,.12,0,.18,0,.03,0,.06,0,.09,0,.39-.01.78-.05,1.15-.11,1.85-.3,3.5-1.16,4.79-2.41.15-.14.29-.3.43-.45,1.37-1.52,2.23-3.51,2.31-5.71,0-.1.02-.21.02-.31s-.01-.21-.02-.31ZM17.36,8.69h-2.76c-.04-1.41-.35-2.74-.88-3.95.56-.37,1.08-.8,1.55-1.28,1.24,1.41,2.02,3.23,2.09,5.23ZM5.26,13.41c1.03-.55,2.19-.87,3.42-.92v4.62c-1.44-.84-2.63-2.13-3.42-3.71ZM12.94,4.51c-1.08.61-2.32.97-3.63,1.03V.74c1.53.83,2.8,2.14,3.63,3.77ZM8.68,5.53c-1.24-.05-2.4-.37-3.44-.93.79-1.59,1.99-2.89,3.44-3.74v4.67ZM8.68,6.15v2.54h-4.44c.04-1.25.3-2.44.75-3.51,1.11.58,2.37.93,3.69.98ZM8.68,9.31v2.56c-1.32.05-2.56.39-3.67.97-.46-1.08-.73-2.27-.77-3.53h4.44ZM9.3,12.49c1.3.05,2.53.41,3.61,1.01-.83,1.61-2.09,2.92-3.61,3.74v-4.75ZM9.3,11.87v-2.56h4.69c-.04,1.3-.33,2.52-.81,3.63-1.16-.64-2.48-1.02-3.88-1.07ZM9.3,8.69v-2.54c1.4-.05,2.73-.43,3.89-1.08.48,1.1.76,2.33.79,3.62h-4.69ZM14.85,3.01c-.42.44-.88.83-1.39,1.17-.71-1.38-1.72-2.55-2.94-3.42,1.67.31,3.16,1.11,4.32,2.24ZM7.78.72c-1.28.89-2.34,2.12-3.07,3.58-.57-.36-1.1-.79-1.56-1.28C4.38,1.81,5.99.98,7.78.72ZM2.72,3.47c.52.54,1.1,1,1.73,1.39-.5,1.17-.79,2.46-.83,3.83H.64c.07-2,.85-3.82,2.08-5.22ZM.64,9.31h2.99c.04,1.37.34,2.67.85,3.84-.63.39-1.22.85-1.74,1.39-1.25-1.41-2.02-3.23-2.1-5.23ZM3.16,15c.47-.49,1-.91,1.57-1.28.74,1.46,1.81,2.68,3.09,3.57-1.8-.26-3.42-1.08-4.66-2.29ZM10.49,17.24c1.22-.86,2.24-2.03,2.96-3.41.51.34.97.73,1.39,1.17-1.17,1.14-2.68,1.94-4.35,2.24ZM15.26,14.55c-.47-.48-.99-.91-1.55-1.28.54-1.21.86-2.54.9-3.96h2.76c-.07,2.01-.85,3.83-2.1,5.24Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }


  /* Row 2: full-width search */
  .agd-site-header .agd-search-form {
    grid-column: 1 / -1; grid-row: 2;
    display: flex !important; flex-wrap: nowrap !important;
    width: 100%; max-width: none; min-width: 0; margin: 0 !important;
  }
  .agd-site-header .agd-search-form input[type="search"] {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: var(--agd-btn-h); padding: 0 .9rem;
  }
  .agd-site-header .agd-search-form button {
    box-sizing: border-box; height: var(--agd-btn-h); padding: 0 1.4rem; line-height: 1;
  }

  /* ---- Nav list: classic menu fallback (<ul class="agd-emergency-menu-list">) ---- */
  .agd-site-header .agd-emergency-menu { display: block !important; }
  .agd-site-header .agd-emergency-menu-list {
    display: flex !important; flex-flow: row wrap !important;
    justify-content: var(--agd-nav-justify) !important; align-items: stretch !important;
    gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
    list-style: none !important;
  }
  /* ---- Nav list: real Navigation block ---- */
  .agd-site-header .agd-nav { display: flex !important; justify-content: var(--agd-nav-justify); }
  .agd-site-header .agd-nav .wp-block-navigation__responsive-container,
  .agd-site-header .agd-nav .wp-block-navigation__responsive-container-content { width: 100%; }
  .agd-site-header .agd-nav .wp-block-navigation__container {
    display: flex; flex-flow: row wrap !important; justify-content: var(--agd-nav-justify);
    align-items: stretch; gap: 6px; width: 100%;
  }
  .agd-site-header .agd-nav .wp-block-navigation__responsive-container-open { display: none !important; }

  /* ---- Every top-level nav button: SAME HEIGHT ---- */
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li {
    display: flex !important; position: relative; margin: 0 !important; padding: 0 !important;
    list-style: none !important; background: transparent !important;
  }
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a {
    display: inline-flex !important; align-items: center; justify-content: center;
    box-sizing: border-box; height: var(--agd-btn-h); min-height: var(--agd-btn-h);
    padding: 0 clamp(6px, .7vw, 12px) !important;
    color: #fff !important; background: var(--agd-navy) !important;
    border: 1px solid var(--agd-gold) !important; border-radius: 4px;
    font-size: clamp(.72rem, .8vw, .92rem); font-weight: 500; line-height: 1.1;
    white-space: nowrap; text-decoration: none !important;
  }
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a:hover,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a:focus-visible {
    background: #0d2f6f !important; border-color: #fff !important; color: #fff !important; outline-offset: 3px;
  }

  /* Trial-lesson button (gold) - top level only */
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a.agd-trial-lesson,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li.agd-trial-lesson > a,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="trial-lesson"],
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="trial_lesson"],
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="taiken"],
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="体験"] {
    background: var(--agd-trial-gold) !important; border-color: var(--agd-trial-gold) !important; color: #000 !important;
  }
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a.agd-trial-lesson:hover,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li.agd-trial-lesson > a:hover,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="trial-lesson"]:hover,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="trial_lesson"]:hover,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="taiken"]:hover,
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) > li > a[href*="体験"]:hover {
    background: var(--agd-trial-gold-hover) !important; border-color: var(--agd-trial-gold-hover) !important; color: #000 !important;
  }

  /* Small arrow on items that have a dropdown */
  .agd-site-header .agd-emergency-menu-list > li.menu-item-has-children > a::after {
    content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; flex: 0 0 auto;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  }

  /* Dropdowns */
  .agd-site-header .agd-emergency-menu-list > li > .sub-menu {
    display: none !important; position: absolute !important; z-index: 99999; top: 100%; left: 0;
    min-width: 220px; width: max-content; max-width: min(320px, 80vw);
    margin: 0 !important; padding: 6px !important; list-style: none !important;
    background: var(--agd-header-bg) !important; border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
  }
  .agd-site-header .agd-emergency-menu-list > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
  .agd-site-header .agd-emergency-menu-list > li:hover > .sub-menu,
  .agd-site-header .agd-emergency-menu-list > li:focus-within > .sub-menu { display: block !important; }
  .agd-site-header .agd-emergency-menu-list .sub-menu > li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
  .agd-site-header .agd-emergency-menu-list .sub-menu a {
    display: flex !important; width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 10px !important;
    justify-content: flex-start; text-align: left; font-size: .9rem; font-weight: 600;
    color: #fff !important; background: transparent !important; border: 1px solid transparent !important;
    text-decoration: none !important; white-space: normal;
  }
  .agd-site-header .agd-emergency-menu-list .sub-menu a:hover,
  .agd-site-header .agd-emergency-menu-list .sub-menu a:focus-visible {
    background: #0d2f6f !important; border-color: var(--agd-trial-gold) !important;
  }
  /* Block-navigation dropdowns */
  .agd-site-header .agd-nav .wp-block-navigation__submenu-container {
    min-width: 14rem; padding: .5rem 0;
    background: var(--agd-header-bg) !important; color: var(--agd-header-fg) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
  }
  .agd-site-header .agd-nav .wp-block-navigation__submenu-container a { color: var(--agd-header-fg) !important; }
}

/* Laptop 900-1199: a little tighter */
@media (min-width: 900px) and (max-width: 1199px) {
  .agd-site-header .agd-header-inner { column-gap: 12px; }
  .agd-site-header :is(.agd-emergency-menu-list, .agd-nav .wp-block-navigation__container) { gap: 4px !important; }
}

/* =====================================================================
   5. HEADER - MOBILE (up to 899px): phone + tablet
   ONE ROW  = logo (left) | search icon | online count | menu + globe (right)
   ===================================================================== */
@media (max-width: 899px) {
  /* Hide every desktop part */
  .agd-site-header .agd-nav,
  .agd-site-header .agd-emergency-menu,
  .agd-site-header .agd-header-tools { display: none !important; }

  .agd-site-header { padding: .6rem .75rem !important; }

  .agd-site-header .agd-header-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    column-gap: 8px; row-gap: 8px;
  }

  /* Logo: LEFT */
  .agd-site-header .agd-logo {
    grid-column: 1; grid-row: 1; justify-self: start;
    width: var(--agd-mob-logo-w); max-width: 100%;
  }

  /* Controls: RIGHT */
  .agd-site-header .agd-mobile-header-controls {
    display: flex; grid-column: 2; grid-row: 1; justify-self: end;
    align-items: stretch; justify-content: flex-end; gap: 6px; min-width: 0;
  }
  .agd-site-header .agd-mobile-header-controls > * {
    box-sizing: border-box; height: var(--agd-mob-h); min-width: var(--agd-mob-h);
    margin: 0; padding: 4px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: inherit; font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center;
    color: #fff; background: transparent; text-decoration: none; white-space: nowrap;
    border: 1px solid rgba(255,255,255,.35); border-radius: 4px; cursor: pointer;
  }
  .agd-site-header .agd-mobile-header-controls > a:hover,
  .agd-site-header .agd-mobile-header-controls > button:hover { color: #fff; border-color: var(--agd-gold); }

  .agd-site-header .agd-mobile-search-toggle { padding: 0; }
  .agd-site-header .agd-mobile-header-controls .agd-mobile-search-toggle svg { width: 22px; height: 22px; }
  .agd-site-header .agd-mobile-online,
  .agd-site-header .agd-mobile-menu-toggle { min-width: 64px; }
  .agd-site-header .agd-mobile-online strong { font-size: 13px; }
  .agd-site-header .agd-mobile-label { display: block; }
  .agd-site-header .agd-mobile-header-controls .agd-globe-icon { display: block; width: 16px; height: 16px; min-width: 16px; min-height: 16px; flex: 0 0 16px; margin: 0; overflow: visible; }

  /* Search dropdown */
  .agd-site-header .agd-mobile-search-panel {
    position: absolute; z-index: 100001; top: 100%; left: 0; right: 0;
    padding: 12px; background: var(--agd-header-bg); box-shadow: 0 8px 20px rgba(0,0,0,.2);
  }
  .agd-site-header .agd-mobile-search-panel.is-open { display: block; }
  .agd-site-header .agd-mobile-search-panel form { display: flex; gap: 6px; }
  .agd-site-header .agd-mobile-search-panel input { min-width: 0; flex: 1; box-sizing: border-box; height: 44px; padding: 0 10px; border: 0; border-radius: 3px; }
  .agd-site-header .agd-mobile-search-panel button { height: 44px; padding: 0 16px; background: var(--agd-trial-gold); color: #000; border: 0; border-radius: 3px; font-weight: 700; }

  /* Menu dropdown - options CENTERED */
  .agd-site-header .agd-mobile-menu-panel {
    position: absolute; z-index: 100000; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 80px); overflow-y: auto;
    padding: 4px 14px 42px; background: var(--agd-header-bg);
    border-top: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 24px rgba(0,0,0,.2);
  }
  .agd-site-header .agd-mobile-menu-panel.is-open { display: block; }
  .agd-site-header .agd-mobile-menu-panel ul {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    list-style: none; margin: 0; padding: 0;
  }
  .agd-site-header .agd-mobile-menu-panel li {
    list-style: none; margin: 0; padding: 0; text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }
  .agd-site-header .agd-mobile-menu-panel li:last-child { border-bottom: 0; }
  .agd-site-header .agd-mobile-menu-panel a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 46px; padding: 10px 8px; color: #fff; font-weight: 600; text-decoration: none;
  }
  .agd-site-header .agd-mobile-menu-panel a:hover { color: var(--agd-gold); }
  .agd-site-header .agd-mobile-menu-panel .sub-menu { padding: 0 0 6px; border-top: 1px solid rgba(255,255,255,.12); }
  .agd-site-header .agd-mobile-menu-panel .sub-menu li { border-bottom: 0; }
  .agd-site-header .agd-mobile-menu-panel .sub-menu a { min-height: 40px; font-size: .94rem; font-weight: 500; color: rgba(255,255,255,.88); }
  .agd-site-header .agd-mobile-menu-panel a[href*="trial-lesson"],
  .agd-site-header .agd-mobile-menu-panel a[href*="trial_lesson"],
  .agd-site-header .agd-mobile-menu-panel a[href*="taiken"],
  .agd-site-header .agd-mobile-menu-panel a[href*="体験"] { color: var(--agd-trial-gold); }
}

/* 1. Phone: up to 599px */
@media (max-width: 599px) {
  :root { --agd-mob-h: 44px; --agd-mob-logo-w: min(132px, 34vw); }
}

/* 2. Tablet: 600px - 899px: a bit larger */
@media (min-width: 600px) and (max-width: 899px) {
  :root { --agd-mob-h: 48px; --agd-mob-logo-w: 150px; }
  .agd-site-header .agd-mobile-header-controls > * { font-size: 12px; }
  .agd-site-header .agd-mobile-online,
  .agd-site-header .agd-mobile-menu-toggle { min-width: 72px; }
  .agd-site-header .agd-mobile-menu-panel { padding-left: 24px; padding-right: 24px; }
}

/* =====================================================================
   6. HEADER - TINY SCREENS (380px and below)
   row 1 = centered logo
   row 2 = centered controls (search icon, online, menu with globe under it)
   ===================================================================== */
@media (max-width: 380px) {
  :root { --agd-mob-h: 44px; --agd-mob-logo-w: min(150px, 60vw); }

  .agd-site-header .agd-header-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    row-gap: 8px;
  }
  .agd-site-header .agd-logo { grid-column: 1; grid-row: 1; justify-self: center; margin-inline: auto; }
  .agd-site-header .agd-mobile-header-controls {
    grid-column: 1; grid-row: 2; justify-self: center; justify-content: center; width: 100%; gap: 8px;
  }
  .agd-site-header .agd-mobile-online,
  .agd-site-header .agd-mobile-menu-toggle { min-width: 68px; }
}

/* =====================================================================
   7. RSS / FACEBOOK / INSTAGRAM LINK ROW
   Markup: <div class="rss_border"><div id="rss_wrap"><div class="rss_wrap"> <a class="rss|facebook|instagram"> ...
   Icons are drawn by CSS (no image files), coloured per network.
   ===================================================================== */
.rss_border {
  margin: 2rem 0; padding: 1.1rem 1rem;
  border-top: 1px solid rgba(16,43,70,.15); border-bottom: 1px solid rgba(16,43,70,.15);
  clear: both;
}
.rss_border #rss_wrap, .rss_border .rss_wrap { margin: 0; padding: 0; border: 0; background: none; }
.rss_border .rss_wrap {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem;
}
.rss_border .rss_wrap a {
  --brand: var(--agd-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  box-sizing: border-box; min-height: 44px; padding: 0 1.15rem; margin: 0;
  background: #fff; color: var(--agd-navy);
  border: 1px solid rgba(16,43,70,.22); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16,43,70,.08);
  font-size: .95rem; font-weight: 700; line-height: 1; letter-spacing: .01em; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rss_border .rss_wrap a::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; background-color: var(--brand);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.rss_border .rss_wrap a:hover,
.rss_border .rss_wrap a:focus-visible {
  color: var(--agd-navy); border-color: var(--brand);
  box-shadow: 0 4px 10px rgba(16,43,70,.14); transform: translateY(-1px);
}
.rss_border .rss_wrap a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rss_border .rss_wrap a.rss       { --brand: #e8590c; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'/%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1'/%3E%3C/svg%3E"); }
.rss_border .rss_wrap a.facebook  { --brand: #1877f2; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.rss_border .rss_wrap a.instagram { --brand: #d6249f; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); }

@media (max-width: 480px) {
  .rss_border .rss_wrap a { flex: 1 1 100%; max-width: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rss_border .rss_wrap a { transition: none; }
  .rss_border .rss_wrap a:hover { transform: none; }
}

/* =====================================================================
   8. SIDEBAR DESIGN (English + Japanese)  -  one colour = one meaning
   ---------------------------------------------------------------------
     GREEN   (solid)  important: fees banner, courses, contact
     AMBER            money: lesson types, cancellations, campaigns   (.fee / .bank-discounts)
     TERRACOTTA       bank transfer + access map                      (.orange)
     GRAY             study material                                  (.study)
     white            everything else
   Works with BOTH markups:  <a class="menu-box fee"><div>..</div></a>   (classes on the link - new)
                             <a><div class="menu-box fee">..</div></a>   (classes on the div  - old)
   Icons (yen, bank, pin, book, mail, cap) repeat the meaning for colour-blind visitors.
   The 298px minimum width from section 2 is NOT touched.
   ===================================================================== */
:root {
  --agd-green: #1f5f46;     --agd-green-hover: #17503a;
  --agd-amber: #d9a21b;     --agd-amber-tint: #fff8e1;     --agd-amber-line: #efdfb0;
  --agd-terra: #c4622d;     --agd-terra-tint: #fdeee4;     --agd-terra-line: #efcdb8;
  --agd-gray:  #7d8794;     --agd-gray-tint:  #eceff2;     --agd-gray-line:  #d9dee4;
  --agd-line:  #dcd8cc;
}

/* ---- Panel ---- */
.agd-sidebar {
  box-sizing: border-box; padding: 1rem;
  background: var(--agd-paper); border: 1px solid #e3ded2; border-top: 3px solid var(--agd-gold);
  border-radius: 6px; overflow-wrap: anywhere;
}
.agd-sidebar a { text-decoration: none; }

/* ---- Top buttons ---- */
.agd-sidebar .wp-block-buttons { margin: 0 0 .55rem; gap: 0; }
.agd-sidebar .wp-block-button.agd-sb-btn,
.agd-sidebar .agd-sb-btn .wp-block-button { width: 100%; }
.agd-sidebar .agd-sb-btn .wp-block-button__link {
  display: block; width: 100%; box-sizing: border-box; padding: .7rem 1rem; text-align: center;
  background: #fff; color: var(--agd-navy); border: 1px solid var(--agd-navy); border-radius: 4px;
  font-size: .9rem; font-weight: 700; line-height: 1.45;
  transition: background-color .15s ease, color .15s ease;
}
.agd-sidebar .agd-sb-btn .wp-block-button__link:hover,
.agd-sidebar .agd-sb-btn .wp-block-button__link:focus-visible { background: var(--agd-navy); color: #fff; }
/* Phone = important -> green */
.agd-sidebar .agd-sb-phone .wp-block-button__link {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--agd-green); border-color: var(--agd-green); color: #fff; font-size: 1.3rem; letter-spacing: .05em;
}
.agd-sidebar .agd-sb-phone .wp-block-button__link::before {
  content: ""; flex: 0 0 22px; width: 22px; height: 22px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agd-sidebar .agd-sb-phone .wp-block-button__link:hover { background: var(--agd-green-hover); border-color: var(--agd-green-hover); }
/* Online users = quiet info (gray), with a small static dot */
.agd-sidebar .agd-sb-btn .wp-block-button__link[href*="users-online"] {
  background: var(--agd-gray-tint); border-color: var(--agd-gray-line); color: var(--agd-navy); font-size: .84rem; font-weight: 500;
}
.agd-sidebar .agd-sb-btn .wp-block-button__link[href*="users-online"] strong { font-size: .92rem; }
.agd-sidebar .agd-sb-btn .wp-block-button__link[href*="users-online"] strong::before {
  content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: #2fb36b;
}
.agd-sidebar .agd-sb-btn .wp-block-button__link[href*="users-online"]:hover { background: #e1e5ea; color: var(--agd-navy); }

/* ---- Section headings ---- */
.agd-sidebar .wp-block-heading,
.agd-sidebar .agd-sb-label {
  margin: 1.6rem 0 .6rem; padding: 0 0 .4rem; position: relative;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5b6773;
  border-bottom: 1px solid rgba(16,43,70,.15);
}
.agd-sidebar .wp-block-heading::after,
.agd-sidebar .agd-sb-label::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 2.5rem; height: 3px; background: var(--agd-gold); }
html[lang="ja"] .agd-sidebar .wp-block-heading,
html[lang="ja"] .agd-sidebar .agd-sb-label { font-size: .92rem; letter-spacing: .08em; }

/* ---- Lists ---- */
.agd-sidebar .agd-sb-nav,
.agd-sidebar .agd-sb-menu { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.agd-sidebar .agd-sb-nav > a { display: block; }
.agd-sidebar .agd-sb-menu-list { gap: .4rem; }
.agd-sidebar .agd-sb-menu-list .sub-menu { margin: .4rem 0 .1rem; padding-left: 1rem; gap: .3rem; }
.agd-sidebar .wp-block-navigation__container { gap: .4rem; align-items: stretch; width: 100%; }

/* ---- Base card: white, thin line, 4px corners, colour bar on the left ---- */
.agd-sidebar .agd-sb-nav > a[class],
.agd-sidebar .agd-sb-nav > a:not([class]) > div,
.agd-sidebar .agd-sb-menu-list a,
.agd-sidebar .wp-block-navigation-item__content {
  display: block; position: relative; box-sizing: border-box; margin: 0; padding: .7rem .95rem;
  background: #fff; color: var(--agd-navy);
  border: 1px solid var(--agd-line); border-left: 4px solid var(--agd-line); border-radius: 4px;
  font-size: .92rem; line-height: 1.55; font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.agd-sidebar .agd-sb-nav > a[class]:hover,
.agd-sidebar .agd-sb-nav > a:not([class]):hover > div,
.agd-sidebar .agd-sb-nav > a[class]:focus-visible,
.agd-sidebar .agd-sb-nav > a:not([class]):focus-visible > div,
.agd-sidebar .agd-sb-menu-list a:hover,
.agd-sidebar .agd-sb-menu-list a:focus-visible,
.agd-sidebar .wp-block-navigation-item__content:hover {
  background: #fbfaf6; border-left-color: var(--agd-gold); transform: translateX(2px); text-decoration: none;
}
.agd-sidebar .agd-sb-nav > a:focus-visible { outline: 2px solid var(--agd-navy); outline-offset: 2px; border-radius: 4px; }
.agd-sidebar .agd-sb-nav strong,
.agd-sidebar .agd-sb-nav b { font-weight: 700; }

/* ---- GREEN = important (solid). Old dark-blue (English file) is treated the same as dark-green. ---- */
.agd-sidebar .agd-sb-nav > a.menu-dark-green,
.agd-sidebar .agd-sb-nav > a > div.menu-dark-green,
.agd-sidebar .agd-sb-nav > a.menu-dark-blue,
.agd-sidebar .agd-sb-nav > a > div.menu-dark-blue,
.agd-sidebar .agd-sb-nav > a.lightgreen,
.agd-sidebar .agd-sb-nav > a > div.lightgreen {
  background: var(--agd-green); border-color: var(--agd-green); border-left-color: var(--agd-gold);
  color: #fff; padding-top: .85rem; padding-bottom: .85rem; font-size: .95rem;
}
.agd-sidebar .agd-sb-nav > a.menu-dark-green:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.menu-dark-green,
.agd-sidebar .agd-sb-nav > a.menu-dark-blue:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.menu-dark-blue,
.agd-sidebar .agd-sb-nav > a.lightgreen:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.lightgreen { background: var(--agd-green-hover); border-color: var(--agd-green-hover); border-left-color: var(--agd-gold); }
.agd-sidebar .agd-sb-nav > a.menu-dark-green *,
.agd-sidebar .agd-sb-nav > a > div.menu-dark-green *,
.agd-sidebar .agd-sb-nav > a.menu-dark-blue *,
.agd-sidebar .agd-sb-nav > a > div.menu-dark-blue *,
.agd-sidebar .agd-sb-nav > a.lightgreen *,
.agd-sidebar .agd-sb-nav > a > div.lightgreen * { color: #fff; }

/* ---- AMBER = money / payment ---- */
.agd-sidebar .agd-sb-nav > a.fee,
.agd-sidebar .agd-sb-nav > a > div.fee,
.agd-sidebar .agd-sb-nav > a.bank-discounts,
.agd-sidebar .agd-sb-nav > a > div.bank-discounts {
  background: var(--agd-amber-tint); border-color: var(--agd-amber-line); border-left-color: var(--agd-amber);
}
.agd-sidebar .agd-sb-nav > a.fee:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.fee,
.agd-sidebar .agd-sb-nav > a.bank-discounts:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.bank-discounts { background: #fff2c4; border-left-color: var(--agd-amber); }

/* ---- TERRACOTTA = bank transfer + access map ---- */
.agd-sidebar .agd-sb-nav > a.orange,
.agd-sidebar .agd-sb-nav > a > div.orange {
  background: var(--agd-terra-tint); border-color: var(--agd-terra-line); border-left-color: var(--agd-terra); font-weight: 600;
}
.agd-sidebar .agd-sb-nav > a.orange:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.orange { background: #fbe2d2; border-left-color: var(--agd-terra); }

/* ---- GRAY = study material ---- */
.agd-sidebar .agd-sb-nav > a.study,
.agd-sidebar .agd-sb-nav > a > div.study {
  background: var(--agd-gray-tint); border-color: var(--agd-gray-line); border-left-color: var(--agd-gray);
}
.agd-sidebar .agd-sb-nav > a.study:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.study { background: #e1e5ea; border-left-color: var(--agd-navy); }
.agd-sidebar .agd-sb-nav > a.has-children,
.agd-sidebar .agd-sb-nav > a > div.has-children { font-weight: 700; padding-right: 2rem; }
.agd-sidebar .agd-sb-nav > a.has-children::after,
.agd-sidebar .agd-sb-nav > a > div.has-children::after {
  content: ""; position: absolute; right: .95rem; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .5;
}
/* links listed under a parent topic */
.agd-sidebar .agd-sb-nav > a.study:not(.menu-box),
.agd-sidebar .agd-sb-nav > a > div.study:not(.menu-box) {
  margin-left: 1rem; padding: .4rem .75rem; background: transparent; border: 0; border-left: 2px solid var(--agd-gray-line);
  border-radius: 0; font-size: .86rem; line-height: 1.5;
}
.agd-sidebar .agd-sb-nav > a.study:not(.menu-box):hover,
.agd-sidebar .agd-sb-nav > a:hover > div.study:not(.menu-box) { background: var(--agd-gray-tint); border-left-color: var(--agd-navy); transform: none; }

/* ---- New markup: the link is the card, so the inner <div> must stay plain ---- */
.agd-sidebar .agd-sb-nav > a[class] > div { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; }

/* ---- Spacing between groups (classes already used in your markup) ---- */
.agd-sidebar .agd-sb-nav > a.mb20,
.agd-sidebar .agd-sb-nav > a > div.mb20 { margin-bottom: 1rem; }
.agd-sidebar .agd-sb-nav > a.mb10,
.agd-sidebar .agd-sb-nav > a > div.mb10 { margin-bottom: .5rem; }

/* ---- Small utility links (log in / out, partner site) ---- */
.agd-sidebar .agd-sb-nav > a.menu-item,
.agd-sidebar .agd-sb-nav > a > div.menu-item {
  padding: .4rem .5rem; background: transparent; border: 0; color: #5b6773; font-size: .84rem; text-align: center;
}
.agd-sidebar .agd-sb-nav > a.menu-item:hover,
.agd-sidebar .agd-sb-nav > a:hover > div.menu-item { background: transparent; color: var(--agd-navy); text-decoration: underline; transform: none; }

/* ---- Icons on the key items (matched by the link address, so no HTML changes) ---- */
.agd-sidebar .agd-sb-nav > a[href*="/fees"] > div,
.agd-sidebar .agd-sb-nav > a[href*="/courses"] > div,
.agd-sidebar .agd-sb-nav > a[href*="bank-transfer"] > div,
.agd-sidebar .agd-sb-nav > a[href*="access"] > div,
.agd-sidebar .agd-sb-nav > a[href*="/contact"] > div,
.agd-sidebar .agd-sb-nav > a[href*="quiz63"] > div { padding-left: 2rem; }
.agd-sidebar .agd-sb-nav > a[class][href*="/fees"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="/fees"] > div::before,
.agd-sidebar .agd-sb-nav > a[class][href*="/courses"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="/courses"] > div::before,
.agd-sidebar .agd-sb-nav > a[class][href*="bank-transfer"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="bank-transfer"] > div::before,
.agd-sidebar .agd-sb-nav > a[class][href*="access"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="access"] > div::before,
.agd-sidebar .agd-sb-nav > a[class][href*="/contact"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="/contact"] > div::before,
.agd-sidebar .agd-sb-nav > a[class][href*="quiz63"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="quiz63"] > div::before {
  content: ""; position: absolute; left: .95rem; top: .9rem; width: 1.15rem; height: 1.15rem; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.agd-sidebar .agd-sb-nav > a[class][href*="/fees"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="/fees"] > div::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l6 9 6-9'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='M7 13h10'/%3E%3Cpath d='M7 17h10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l6 9 6-9'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='M7 13h10'/%3E%3Cpath d='M7 17h10'/%3E%3C/svg%3E"); }
.agd-sidebar .agd-sb-nav > a[class][href*="/courses"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="/courses"] > div::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E"); }
.agd-sidebar .agd-sb-nav > a[class][href*="bank-transfer"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="bank-transfer"] > div::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10'/%3E%3Cpath d='M9 21V10'/%3E%3Cpath d='M15 21V10'/%3E%3Cpath d='M19 21V10'/%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10'/%3E%3Cpath d='M9 21V10'/%3E%3Cpath d='M15 21V10'/%3E%3Cpath d='M19 21V10'/%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3C/svg%3E"); }
.agd-sidebar .agd-sb-nav > a[class][href*="access"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="access"] > div::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.agd-sidebar .agd-sb-nav > a[class][href*="/contact"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="/contact"] > div::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E"); }
.agd-sidebar .agd-sb-nav > a[class][href*="quiz63"]::before,
.agd-sidebar .agd-sb-nav > a:not([class])[href*="quiz63"] > div::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .agd-sidebar * { transition: none !important; }
  .agd-sidebar .agd-sb-nav > a[class]:hover,
.agd-sidebar .agd-sb-nav > a:not([class]):hover > div,
.agd-sidebar .agd-sb-menu-list a:hover { transform: none; }
}

/* =====================================================================
   9. FOOTER (English + Japanese)
   Navy panel, white text, gold small headings. Links are white: the theme's default link colour is
   navy, which would be invisible on the navy background.
   ===================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.agd-footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: .2em; }
.agd-footer a:hover, .agd-footer a:focus-visible { color: var(--agd-gold); text-decoration-color: var(--agd-gold); }
.agd-footer-inner { max-width: 1180px; margin: 0 auto; font-size: .95rem; line-height: 1.75; }
.agd-footer-inner p { margin: 0 0 .75rem; }
.agd-footer-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr 1fr; gap: 2rem 2.5rem;padding-bottom:42px }
@media (max-width: 1000px) { .agd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .agd-footer-grid { grid-template-columns: minmax(0, 1fr); } }
.agd-footer-col { min-width: 0; overflow-wrap: anywhere; }

.agd-footer-title {
  margin: 0 0 .8rem; padding: 0 0 .45rem; position: relative;
  color: var(--agd-gold); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
html[lang="ja"] .agd-footer-title { font-size: .92rem; letter-spacing: .08em; }

.agd-footer address { font-style: normal; }
.agd-footer ul { list-style: none; margin: 0; padding: 0; }
.agd-footer li { margin: 0 0 .4rem; }

.agd-footer-logo { display: inline-block; margin-bottom: .9rem; line-height: 0; text-decoration: none; }
.agd-footer-logo img { display: block; width: 170px; max-width: 100%; height: auto; }
.agd-footer-name span { opacity: .8; font-size: .9em; }
.agd-footer-points li { position: relative; padding-left: 1.1rem; }
.agd-footer-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 2px; background: var(--agd-gold); }

/* Contact / trial lesson = important action = green */
.agd-footer a.agd-footer-cta {
  display: block; box-sizing: border-box; margin-top: 1rem; padding: .8rem 1rem;
  background: var(--agd-green); color: #fff; text-decoration: none; text-align: center;
  border: 1px solid var(--agd-gold); border-left-width: 4px; border-radius: 4px; line-height: 1.5;
  transition: background-color .15s ease;
}
.agd-footer a.agd-footer-cta span { display: block; font-size: .85em; opacity: .9; }
.agd-footer a.agd-footer-cta:hover, .agd-footer a.agd-footer-cta:focus-visible { background: var(--agd-green-hover); color: #fff; }

.agd-footer-bio { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .88rem; opacity: .92; }
.agd-footer-bottom { margin-top: 1.25rem; text-align: center; font-size: .85rem; opacity: .92; }
.agd-footer-bottom p { margin: 0 0 .5rem; }
.agd-footer-bottom span { display: block; }
.agd-footer a.agd-footer-top { display: inline-block; margin-top: .25rem; padding: .35rem .9rem; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; text-decoration: none; }
.agd-footer a.agd-footer-top:hover { border-color: var(--agd-gold); }

/* =====================================================================
   TRIAL LESSON BUTTON = GOLD (体験申込み / Book a Trial Lesson)
   ===================================================================== */
@media (min-width: 900px) {
  .agd-site-header .agd-emergency-menu-list > li.agd-trial-lesson > a,
  .agd-site-header .agd-nav .wp-block-navigation__container > .agd-trial-lesson > .wp-block-navigation-item__content {
    background: var(--agd-trial-gold) !important;
    border-color: var(--agd-trial-gold) !important;
    color: #102b46 !important;
    font-weight: 700;
  }
  .agd-site-header .agd-emergency-menu-list > li.agd-trial-lesson > a:hover,
  .agd-site-header .agd-emergency-menu-list > li.agd-trial-lesson > a:focus-visible,
  .agd-site-header .agd-nav .wp-block-navigation__container > .agd-trial-lesson > .wp-block-navigation-item__content:hover {
    background: var(--agd-trial-gold-hover) !important;
    border-color: var(--agd-trial-gold-hover) !important;
    color: #102b46 !important;
  }
}

/* Same item inside the phone menu: gold text */
.agd-site-header .agd-mobile-menu-panel li.agd-trial-lesson > a { color: var(--agd-trial-gold); font-weight: 700; }

/* iPhone/iPad Safari zooms into any field whose text is smaller than 16px.
   Applies only to touch screens, so desktop sizes are unchanged. */
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea,
  .agd-mobile-search-panel input,
  .agd-search-form input {
    font-size: 16px !important;
  }
}

/* Bigger headings on laptop/desktop only (phone and tablet unchanged) */
@media (min-width: 900px) {
  main .wp-block-post-title,
  .wp-block-post-content h1 {
    font-size: clamp(1.8rem, 1.6vw, 2.4rem) !important;
    line-height: 1.3;border-top:3px solid darkred;border-bottom:3px solid darkred;
    margin-bottom:21px;padding:2px 5px
  }
  .wp-block-post-content h2 {
    font-size: clamp(1.4rem, 1.8vw, 1.85rem) !important;
    line-height: 1.4;
  }
}

/* =====================================================================
   MOBILE MENU: lines, emoji spacing, colours (phone + tablet)
   ===================================================================== */
@media (max-width: 899px) {

  /* Links are normal blocks, not flex: lines stack and the space after an emoji stays */
  .agd-site-header .agd-mobile-menu-panel li > a {
    display: block; min-height: 0; margin: 3px 0; padding: 12px 10px;
    text-align: center; line-height: 1.5;
  }
  /* Works with the span markup from functions.php (and is harmless without it) */
  .agd-mi-line { display: block; }
  .agd-mi-b { font-weight: 700; }
  .agd-mi-line:not(.agd-mi-b) { font-size: .86em; font-weight: 400; opacity: .9; }
  .agd-emoji { display: inline-block; margin: 0 .25em; }
  .agd-emoji img.emoji { margin: 0 !important; vertical-align: -0.15em; }

  /* GREEN = important (class "courses" or "agd-c-green", or these links) */
  .agd-site-header .agd-mobile-menu-panel :is(li.courses > a, li.agd-c-green > a, a[href*="/fees"], a[href*="/courses"], a[href*="/contact"]) {
    background: #1f5f46; color: #fff;
    border-left: 4px solid #c6a15b; border-right: 4px solid transparent; border-radius: 4px;
  }
  /* AMBER = money */
  .agd-site-header .agd-mobile-menu-panel :is(li.agd-c-amber > a, a[href*="private-lessons"], a[href*="man-to-man"], a[href*="semi-private"], a[href*="group-lessons"], a[href*="online-lessons"], a[href*="cancellation-fee"], a[href*="campaigns"]) {
    background: #fff8e1; color: #102b46;
    border-left: 4px solid #d9a21b; border-right: 4px solid transparent; border-radius: 4px;
  }
  /* TERRACOTTA = bank + access */
  .agd-site-header .agd-mobile-menu-panel :is(li.agd-c-terra > a, a[href*="bank-transfer"], a[href*="/access"]) {
    background: #fdeee4; color: #102b46;
    border-left: 4px solid #c4622d; border-right: 4px solid transparent; border-radius: 4px;
  }
  /* GRAY = study material: any menu item with the class "study" */
  .agd-site-header .agd-mobile-menu-panel :is(li.study > a, li.agd-c-gray > a, a[href*="word-list"], a[href*="quiz"], a[href*="ielts"], a[href*="toeic"], a[href*="idioms"], a[href*="tricky"], a[href*="dialogues"], a[href*="meiji"], a[href*="eiken"], a[href*="grammar"], a[href*="transition-words"], a[href*="technical-paper"], a[href*="kanji"], a[href*="hoteru"], a[href*="/blog"], a[href*="verbs"]) {
    background: #eceff2; color: #102b46;
    border-left: 4px solid #7d8794; border-right: 4px solid transparent; border-radius: 4px;
  }
}







sapporo-no-eikaiwa-suku-ru-agreatdream







/* =========================================================
   FIXED LAYERING + SLOW OCTOPUS LEGS
   ========================================================= */

.bounce-fill{
position:relative;
overflow:hidden;
isolation:isolate;
z-index:1;
border-radius:999px;
transition:color .6s ease;
}

/* =========================================================
   MAIN BODY
   ========================================================= */

.bounce-fill:before{
content:"";

position:absolute;

left:-30%;
bottom:-420%;

width:160%;
height:340%;

z-index:-2;
pointer-events:none;

background:
radial-gradient(circle at 50% 35%,
#1946a8 0%,
#123b96 34%,
#0d2f6f 68%,
#071a42 100%);

opacity:.98;

filter:
blur(2px)
saturate(120%);

border-radius:
74% 26% 58% 42% /
32% 68% 28% 72%;

transform:
translateY(0)
rotate(-6deg);

transition:
transform 1.35s cubic-bezier(.22,1.2,.36,1);

animation:
bodyMorph 4.5s ease-in-out infinite alternate;
}

/* =========================================================
   LEGS LAYER
   ========================================================= */

.bounce-fill:after{
content:"";

position:absolute;

left:-18%;
bottom:-410%;

width:136%;
height:360%;

z-index:-1;
pointer-events:none;
opacity:.95;

/* actual tentacles */
background:

radial-gradient(ellipse at 8% 100%,
#0d2f6f 0 18%,
transparent 22%),

radial-gradient(ellipse at 18% 100%,
#123b96 0 17%,
transparent 21%),

radial-gradient(ellipse at 30% 100%,
#0d2f6f 0 19%,
transparent 23%),

radial-gradient(ellipse at 42% 100%,
#1946a8 0 18%,
transparent 22%),

radial-gradient(ellipse at 54% 100%,
#0d2f6f 0 17%,
transparent 21%),

radial-gradient(ellipse at 66% 100%,
#123b96 0 18%,
transparent 22%),

radial-gradient(ellipse at 78% 100%,
#0d2f6f 0 19%,
transparent 23%),

radial-gradient(ellipse at 90% 100%,
#1946a8 0 17%,
transparent 21%);

filter:
blur(7px)
saturate(120%);

transform:
translateY(0)
rotate(-3deg);

transition:
transform 1.4s cubic-bezier(.22,1.2,.36,1);

clip-path:polygon(
0% 100%,
6% 76%,
12% 100%,
18% 58%,
24% 100%,
32% 84%,
40% 100%,
48% 46%,
56% 100%,
64% 74%,
72% 100%,
80% 54%,
88% 100%,
94% 68%,
100% 100%
);

animation:
legsIdle 7s ease-in-out infinite alternate;
}

/* =========================================================
   HOVER
   ========================================================= */

.bounce-fill:hover:before{
transform:
translateY(-74%)
rotate(5deg)
scale(1.03);
}

.bounce-fill:hover:after{
transform:
translateY(-68%)
rotate(2deg)
scaleY(1.08);

animation:
legsWave 4.2s ease-in-out infinite alternate;
}

.bounce-fill:hover{
color:#fff;
}

/* =========================================================
   BODY
   ========================================================= */

@keyframes bodyMorph{

0%{
border-radius:
74% 26% 58% 42% /
32% 68% 28% 72%;
}

25%{
border-radius:
62% 38% 74% 26% /
42% 58% 18% 82%;
}

50%{
border-radius:
82% 18% 42% 58% /
26% 74% 40% 60%;
}

75%{
border-radius:
54% 46% 24% 76% /
72% 28% 68% 32%;
}

100%{
border-radius:
46% 54% 38% 62% /
82% 18% 52% 48%;
}

}

/* =========================================================
   IDLE LEGS
   ========================================================= */

@keyframes legsIdle{

0%{
clip-path:polygon(
0% 100%,
6% 76%,
12% 100%,
18% 58%,
24% 100%,
32% 84%,
40% 100%,
48% 46%,
56% 100%,
64% 74%,
72% 100%,
80% 54%,
88% 100%,
94% 68%,
100% 100%
);

transform:
translateY(0)
rotate(-4deg)
skewX(-2deg);
}

100%{
clip-path:polygon(
0% 100%,
8% 60%,
14% 100%,
20% 86%,
28% 100%,
36% 54%,
44% 100%,
52% 90%,
60% 100%,
68% 58%,
76% 100%,
84% 82%,
92% 100%,
98% 62%,
100% 100%
);

transform:
translateY(0)
rotate(3deg)
skewX(3deg);
}

}

/* =========================================================
   SLOW BLOWING LEGS
   ========================================================= */

@keyframes legsWave{

0%{
transform:
translateY(-68%)
rotate(-4deg)
skewX(-6deg)
scaleY(1.04);
}

25%{
transform:
translateY(-68%)
rotate(3deg)
skewX(5deg)
scaleY(1.1);
}

50%{
transform:
translateY(-68%)
rotate(-2deg)
skewX(-4deg)
scaleY(1.06);
}

75%{
transform:
translateY(-68%)
rotate(4deg)
skewX(6deg)
scaleY(1.12);
}

100%{
transform:
translateY(-68%)
rotate(-3deg)
skewX(-5deg)
scaleY(1.08);
}

}