/* ============================================================================
   Enago.jp Mega Menu Clone — v3, static + dynamic-injection
   ============================================================================
   Class names mirror the production Navbar.jsx 1:1 so that someone diffing the
   rendered DOM against the live site sees the same selectors.

   File sections:
     1.  Design tokens
     2.  Reset & base
     3.  Skip link
     4.  .megamenufullwidth — root sticky wrapper
     5.  .home — logo
     6.  .mainmenu — L1 horizontal list
     7.  .menu-backdrop & .leveltwomenu — injected mega-panel
     8.  .lvl2-menu, .lvl2-menu__col — column shell
     9.  .lvl2-menu__image — brand-logo head
    10.  .lvl2-menu__title, __second, __third, __fourth — sub-sections
    11.  .lvl2-menu__list & .lvl3-link — L3 cards (one / two variants)
    12.  Tag pills (.newtext, .populartext, .primary-light, .fill)
    13.  Fixed-state CTAs (.btn-cta, .help, .login)
    14.  Hamburger + mobile drawer
    15.  Page backdrop
    16.  Skeleton loading
    17.  Demo body
    18.  Responsive breakpoints
   ============================================================================ */


/* 1.  TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* Brand (verified against meta theme-color on enago.jp) */
    --enago-red: #d52b1e;
    --enago-red-hover: #b8231a;
    --enago-red-soft: #fef0ee;
    --enago-red-soft-2: #fde7e4;

    /* Neutrals — chosen to match enago.jp's body type colors */
    --ink: #1f1f1f;
    --ink-soft: #404040;
    --ink-muted: #595959;
    --ink-faint: #8a8a8a;

    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --surface-3: #ecedf0;
    --border: #e5e6e9;

    /* Tag colors (verified against the 3 production combos) */
    --tag-primary-bg: #d52b1e;
    --tag-primary-fg: #ffffff;
    --tag-secondary-bg: #f8a51b;
    --tag-secondary-fg: #ffffff;
    --tag-light-bg: #e7f0fb;
    --tag-light-fg: #2466b9;

    /* Layout */
    --container-max: 1320px;
    --container-pad: 20px;
    --bar-h-rest: 80px;
    --bar-h-fixed: 62px;

    /* Type */
    --font: メイリオ, Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "MS PGothic", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    ;

    /* Motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --t-1: 140ms;
    --t-2: 220ms;
    --t-3: 320ms;

    /* Z-index ladder */
    --z-header: 500;
    --z-panel: 510;
    /* belongs to the header stacking context */
    --z-backdrop: 400;
    --z-drawer: 700;
    --z-drawer-bd: 650;
    --z-hamburger: 720;
}


/* 2.  RESET & BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font: 400 15px/1.55 var(--font);
    color: var(--ink);
    background: var(--surface);
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
}

body.is-locked {
    overflow: hidden;
}


/* 3.  SKIP LINK
   ------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -42px;
    left: 8px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--enago-red);
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    transition: top var(--t-1) var(--ease);
}

.skip-link:focus {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* 4.  .megamenufullwidth — ROOT WRAPPER
   ------------------------------------------------------------------------- */
.megamenufullwidth {
    position: sticky;
    top: 0;
    /* z-index: 500; */
    z-index: 450;
    background: #464646;
    transition: box-shadow var(--t-2) var(--ease);
}

.megamenufullwidth.backdrop-shadow {
    box-shadow: 0 2px 6px rgba(15, 18, 22, .06);
}

.megamenufullwidth.hovered {
    box-shadow: 0 6px 18px rgba(15, 18, 22, .08);
}

/* Inner Bootstrap-style container — in rest mode caps to --container-max;
   in fixed (scrolled) mode goes full-bleed like the production site. */
.megamenufullwidth .container {
    /* max-width: var(--container-max); */
    margin: 0 auto;
    /* padding: 0 var(--container-pad); */
    transition: max-width var(--t-2) var(--ease), padding var(--t-2) var(--ease);
}

.megamenufullwidth[data-sticky="fixed"] {
    z-index: 500;
}

.megamenufullwidth[data-sticky="fixed"] .container {
    max-width: 1190px;
    width: 100%;
    /* padding: 0 32px; */
}

.megamenufullwidth[data-sticky="fixed"] .btn-cta.onnavbar {
    padding: 7px 7px;
}


.subnav__arrow {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 7.714px;
}

.megamenufullwidth[data-sticky="fixed"] .subnav__arrow {
    right: 9px;
}

.megamenufullwidth .row {
    display: block;
}

.customnavbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 50px;
    /* height: var(--bar-h-rest); */
    transition: height var(--t-2) var(--ease);
}

.megamenufullwidth[data-sticky="fixed"] .customnavbar {
    /* height: var(--bar-h-fixed); */
    /* height: 40px; */
}


/* 5.  .home — LOGO LINK
   ------------------------------------------------------------------------- */
.home {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 0;
}

.navbar-logo {
    display: block;
    height: 25px;
    width: auto;
    /* max-width: 170px; */
    transition: height var(--t-2) var(--ease), opacity var(--t-1) var(--ease);
}

.megamenufullwidth[data-sticky="fixed"] .navbar-logo {
    height: 24px;
}

.navbar-logo--fixed {
    display: none;
}

.megamenufullwidth[data-sticky="fixed"] .navbar-logo--rest {
    display: none;
}

.megamenufullwidth[data-sticky="fixed"] .navbar-logo--fixed {
    display: block;
}


/* 6.  .mainmenu — L1 HORIZONTAL LIST
   ------------------------------------------------------------------------- */
.mainmenu {
    display: flex;
    align-items: stretch;
    /* justify-content: flex-end; */
    gap: 0;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.mainmenu>li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.main-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--t-1) var(--ease), padding var(--t-2) var(--ease), font-size var(--t-2) var(--ease);
}

.megamenufullwidth[data-sticky="fixed"] .main-item {
    padding: 0 25px;
    padding-left: 0;
    font-size: 13.5px;
}

/* Red underline accent on hover / open / active */
/* .main-item::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 18px;
    height: 2.5px;
    background: var(--enago-red);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--t-2) var(--ease), bottom var(--t-2) var(--ease),
        left var(--t-2) var(--ease), right var(--t-2) var(--ease);
} */

.megamenufullwidth[data-sticky="fixed"] .main-item::after {
    left: 11px;
    right: 11px;
    bottom: 12px;
}

/* .main-item:hover,
.main-item.active {
    color: var(--enago-red);
} */

.main-item:hover::after,
.main-item.active::after {
    transform: scaleX(1);
}

.main-item:focus-visible {
    outline: 2px solid var(--enago-red);
    outline-offset: -4px;
}


/* 7.  .menu-backdrop & .leveltwomenu — INJECTED PANEL
   ------------------------------------------------------------------------- */
/*
   PRODUCTION DOM SHAPE (verified against Navbar.jsx line 277-303):

     <li>
       <a class="main-item active">…</a>
       <div class="menu-backdrop">
         <div class="leveltwomenu container-{0..5}">
           <div class="lvl2-menu">
             <div class="lvl2-menu__col">…</div>
             <div class="lvl2-menu__col">…</div>
           </div>
         </div>
       </div>
     </li>

   The .menu-backdrop is the absolutely-positioned full-width panel that
   docks under the navbar. It exists ONLY while the L1 is hovered.
*/
.level-one-menu-item-container:hover>a {
    color: #fec043 !important;
    font-weight: 700 !important;
}

.level-one-menu-item-container:hover .btn-cta {
    color: #fff !important;
    border-radius: 5px;
}

.menu-backdrop {
    position: absolute;
    top: 100%;
    /* left: 0;
    width: 100vw; */

    left: var(--left-margin, 0px);
    width: var(--mega-width, 0px) !important;
    /* Center the panel under the navbar regardless of which L1 spawned it */
    /* transform: translateX(calc(-1 * var(--panel-offset-left, 0px))); */
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(15, 18, 22, .10);
    z-index: var(--z-panel);

    /* Entrance animation — production uses a quick fade + slight Y-translate */
    animation: panel-in 200ms var(--ease);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
    /* animation-delay: 0.1s !important; */
}

@keyframes panel-in {
    from {
        opacity: 0;
        /* transform: translateX(calc(-1 * var(--panel-offset-left, 0px))) translateY(-6px); */
    }

    to {
        opacity: 1;
        /* transform: translateX(calc(-1 * var(--panel-offset-left, 0px))) translateY(0); */
    }
}

.leveltwomenu {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 17px var(--container-pad) 36px;
    background: linear-gradient(180deg, #fff 50%, #ffefed);
    padding-bottom: 15px;
}

/* Per-L1 container modifier — used when production needs panel-specific
   column tweaks. In our case .container-3 only has 2 columns; we wire CSS
   to widen those. (Matches `flex-basis: 270px / 200px` for container-4.) */
.leveltwomenu.container-3 .lvl2-menu {
    max-width: 880px;
}


/* 8.  .lvl2-menu / .lvl2-menu__col — COLUMN GRID
   ------------------------------------------------------------------------- */
.lvl2-menu {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

/* Single-column override (matches lvl2-menu__col-1 in production) */
.lvl2-menu.lvl2-menu__col-1 {
    grid-template-columns: 1fr;
    max-width: 560px;
}

.lvl2-menu__col {
    display: flex;
    flex-direction: column;
    /* gap: 16px; */
    min-width: 0;
    border-right: 1px solid hsla(0, 1%, 77%, .302);
    padding-right: 20px;
}

.lvl2-menu__col:last-child {
    border-right: none !important;
}

/* Container-4 (エナゴについて) production exception: 3rd column wider */
.leveltwomenu.container-4 .lvl2-menu__col:nth-child(2) {
    flex-basis: 270px;
}


/* 9.  .lvl2-menu__image — BRAND LOGO HEAD
   ------------------------------------------------------------------------- */
.lvl2-menu__image {
    display: flex;
    align-items: center;
    padding-bottom: 4px;
}

.lvl2-menu__image img {
    display: block;
    height: auto;
    max-height: 34px;
    width: auto;
}


/* 10.  .lvl2-menu__title / __second / __third / __fourth
   ------------------------------------------------------------------------- */
.lvl2-menu__title {
    margin: 0;
    /* padding-bottom: 4px; */
    margin-bottom: 15px;
}

.lvl2-menu__title h6 {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    margin-bottom: 0;
}

.lvl2-menu__title p {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.55;
}

/* The "no-icon" variant gets slightly different left padding for visual
   alignment with L3 cards that lack icons. */
.lvl2-menu__title--no-icon h6 {
    padding-left: 0;
}

/* Subsequent sub-sections get a top divider */
.lvl2-menu__second,
.lvl2-menu__third,
.lvl2-menu__fourth {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 14px;
    /* border-top: 1px solid var(--border); */
}


/* 11.  .lvl2-menu__list & .lvl3-link — L3 CARDS
   ------------------------------------------------------------------------- */
.lvl2-menu__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lvl3-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    transition: background var(--t-1) var(--ease);
    margin: 0 -10px;
    /* visual bleed for the hover background */
}

.lvl3-link:hover {
    background: var(--enago-red-soft);
}

.lvl3-link:hover h5 {
    color: #00F;
}

.lvl3-link__active {
    background: var(--enago-red-soft-2);
}

.lvl3-link__active h5 {
    color: var(--enago-red);
    font-weight: 700;
}

.lvl3-link:focus-visible {
    outline: 2px solid var(--enago-red);
    outline-offset: -2px;
}

.lvl3-menu {
    padding: 0;
    margin: 0;
}

.lvl3-menu__card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
}

/* --one  = card has a description → larger padding, wraps description */
/* --two  = compact, single-line   */
.lvl3-menu__card--one {
    padding: 11px 10px;
}

.lvl3-menu__card--two {
    padding: 8px 10px;
}

.lvl3-menu__card--icon {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    overflow: hidden;
    /* clip broken-image alt text */
}

.lvl3-menu__card--icon img {
    width: 25px;
    height: 25px;
    max-width: 25px;
    max-height: 25px;
    object-fit: contain;
}

.lvl3-menu__card--content {
    flex: 1;
    min-width: 0;
}

.lvl3-menu__card--title {
    display: flex;
    align-items: center;
}

.lvl3-menu__card--title .d-flex {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.lvl3-menu__card--title h5 {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1.45;
    transition: color var(--t-1) var(--ease);
}

.lvl3-menu__card--title h5.fw-bold {
    font-weight: 700;
}

.lvl3-menu__card--desc {
    margin-top: 3px;
}

.lvl3-menu__card--desc p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-muted);
}

.lvl3-menu__card--desc a {
    color: var(--enago-red);
    text-decoration: underline;
}

/* External-link affordance (when slug starts with http) */
/* .lvl3-link[data-external="true"] h5::after {
    content: "↗";
    margin-left: 4px;
    font-size: 11px;
    color: var(--ink-faint);
    font-weight: 500;
} */

/* Image-only L3 (Nobel-laureates card) */
.lvl3-link--image-only .lvl3-menu__card {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.lvl3-link--image-only .lvl3__hero {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.lvl3-link--image-only .lvl3__hero img {
    width: 100%;
    height: auto;
}


/* 12.  TAG PILLS
   -------------------------------------------------------------------------
   Names map 1:1 to production:
     tagType=primary       → .newtext            (red — "New")
     tagType=secondary     → .populartext        (orange — "おすすめ")
     tagType=primary_light → .primary-light      (blue — "オプション")
     TagStyle=fill         → .fill (on top of any of the above)
*/

/* display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 18px !important;
    padding: 3px 4px;
    border-radius: 3px;
    background: #ffd900;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    text-align: center;
    color: #000;
    margin-left: 5px;
    margin-bottom: 3px; */
.newtext,
.populartext,
.primary-light {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

.populartext {
    color: #212529 !important;
}

.newtext {
    background: #f1305a;
    color: var(--tag-primary-fg);
}

.populartext {
    background: #ffd900;
    color: var(--tag-secondary-fg);
}

.primary-light {
    background: #c5e8ff;
    color: var(--tag-light-fg);
}

.newtext.fill {
    background: var(--tag-primary-bg);
    color: var(--tag-primary-fg);
}


/* 13.  FIXED-STATE CTAs
   ------------------------------------------------------------------------- */
.nav-extra {
    display: none !important;
}

/* When the navbar is scrolled past the threshold, the extras appear. */
.megamenufullwidth[data-sticky="fixed"] .nav-extra {
    display: inline-flex !important;
    align-items: center;
    animation: cta-in 240ms var(--ease);
}

@keyframes cta-in {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.btn-cta-navbar {
    margin-left: 8px;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    background: #147fd4;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
    transition: background var(--t-1) var(--ease);
}


.btn-cta:hover {
    background: #219dff;
}

.btn-cta:focus-visible {
    outline: 2px solid var(--enago-red);
    outline-offset: 3px;
}

.btn-cta.onnavbar {
    padding: 7px 20px;
    /* border-radius: 0px; */
}

/* Help icon + call popover */
.help {
    position: relative;
}

.help>img {
    display: block;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 50%;
    /* background: var(--surface-2); */
    transition: background var(--t-1) var(--ease);
    cursor: pointer;
}

.help:hover>img {
    /* background: var(--surface-3); */
}

.call-pop {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 290px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 18, 22, .14);
    padding: 10px 12px;


    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-1) var(--ease),
        transform var(--t-1) var(--ease),
        visibility 0s linear var(--t-1);
}

.help.is-open .call-pop,
.help:hover .call-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(-12px);
    transition-delay: 0s;
    z-index: 1000;
}

.call-pop::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transform: rotate(45deg);
}

.call-wrap .col {
    display: block;
}

.call-wrap ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.call-wrap li a {
    display: block;
    padding: 9px 8px;
    border-radius: 4px;
    transition: background var(--t-1) var(--ease);
}

.call-wrap li a:hover {
    background: var(--surface-2);
}

.call-wrap strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #212529;
    letter-spacing: 0.01em;
}

.call-wrap a>span,
.call-wrap a {
    font-size: 11.5px;
    color: var(--ink-muted);
}

.call-wrap strong+span {
    display: block;
    margin-top: 2px;
}

.login a {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background: var(--surface-2); */
    transition: background var(--t-1) var(--ease);
}

.login a:hover {
    /* background: var(--surface-3); */
}

.login img {
    width: 29px;
    height: 29px;
}


/* 14.  HAMBURGER & MOBILE DRAWER
   ------------------------------------------------------------------------- */
.hamburger {
    display: none;
    position: relative;
    z-index: var(--z-hamburger);
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    /* margin-left: auto; */
    border-radius: 4px;
}

.hamburger:focus-visible {
    outline: 2px solid var(--enago-red);
    outline-offset: 2px;
}

.hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--t-2) var(--ease), opacity var(--t-1) var(--ease);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
    opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.drawer-header {
    padding: 10px 20px;
}

.mobile-drawer {
    position: fixed;
    inset: 0;
    /* inset: 0 0 0 auto; */
    width: min(380px, 88vw);
    /* leave a backdrop strip so tap-outside works */
    background: #fff;
    z-index: var(--z-drawer);
    /* padding: 80px 0 40px; */

    transform: translateX(-100%);
    visibility: hidden;
    overflow-y: auto;
    transition: transform 300ms var(--ease), visibility 0s linear 300ms;
    box-shadow: -10px 0 28px rgba(15, 18, 22, .14);
}

.mobile-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 300ms var(--ease), visibility 0s linear 0s;
    z-index: 1000;
}

.m-l1 {
    border-bottom: 1px solid var(--border);
}

.m-l1__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}

.m-l1__btn:hover {
    background: var(--surface-2);
}

.m-l1__btn.is-open {
    background: var(--enago-red-soft);
    color: var(--enago-red);
}

.m-l1__chev {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--t-2) var(--ease);
}

.m-l1__btn.is-open .m-l1__chev {
    transform: rotate(-135deg);
}

.m-l1__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-3) var(--ease);
    background: var(--surface-2);
}

.m-l2 {
    padding: 4px 0;
}

.m-l2+.m-l2 {
    border-top: 1px solid var(--border);
}

.m-l2__logo {
    padding: 14px 22px 4px;
}

.m-l2__logo img {
    max-height: 28px;
    width: auto;
}

.m-l2__title {
    margin: 0;
    padding: 14px 22px 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--enago-red);
}

.m-l3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 22px;
    font-size: 14px;
    color: var(--ink);
    transition: background var(--t-1) var(--ease);
}

.m-l3:hover {
    background: #fff;
}

.m-l3 img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    object-fit: contain;
}

.m-l3__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.m-cta {
    margin: 24px 22px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-cta .btn-cta {
    width: 100%;
    padding: 14px;
}

.m-cta__contact {
    font-size: 13px;
    color: var(--ink-muted);
    text-align: center;
    margin-top: 6px;
}

.m-cta__contact a {
    color: var(--enago-red);
    font-weight: 700;
}


/* 15.  PAGE BACKDROP
   ------------------------------------------------------------------------- */
.page-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 22, .35);
    z-index: var(--z-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-2) var(--ease), visibility 0s linear var(--t-2);
}

body.has-panel .page-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-2) var(--ease), visibility 0s;
}

body.has-drawer .page-backdrop {
    opacity: 1;
    visibility: visible;
    z-index: var(--z-drawer-bd);
    transition: opacity var(--t-2) var(--ease), visibility 0s;
}


/* 16.  SKELETON LOADING (only flashes if data ever fails to seed)
   ------------------------------------------------------------------------- */
.mainmenu__skeleton {
    width: 110px;
    height: 14px;
    margin: 33px 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* 17.  DEMO BODY
   ------------------------------------------------------------------------- */
.demo-main {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px 120px;
}

.demo-hero {
    padding: 80px 0 60px;
    text-align: center;
}

.demo-hero h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.demo-hero__lead {
    font-size: 16px;
    color: var(--ink-muted);
    margin: 0 0 30px;
    line-height: 1.7;
}

.demo-hero__lead code {
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--enago-red);
    font-family: メイリオ, Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "MS PGothic", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    ;
}

.demo-hero__hint {
    display: inline-block;
    font-size: 13px;
    color: var(--ink-faint);
    padding: 8px 16px;
    border: 1px dashed var(--surface-3);
    border-radius: 999px;
    animation: bob 1.8s ease-in-out infinite;
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

.demo-block {
    padding: 50px 0;
    border-bottom: 1px solid var(--border);
}

.demo-block h2 {
    margin: 0 0 14px;
    font-size: 22px;
}

.demo-block p {
    margin: 0;
    color: var(--ink-muted);
    line-height: 1.8;
}

.demo-block p code {
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--enago-red);
    font-family: メイリオ, Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "MS PGothic", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    ;
}

.demo-block--alt {
    background: var(--surface-2);
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
}


/* 18.  RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
    :root {
        --bar-h-rest: 64px;
        --bar-h-fixed: 56px;
    }

    .mainmenu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .megamenufullwidth .container,
    .megamenufullwidth[data-sticky="fixed"] .container {
        padding: 0 16px;
    }

    body.has-drawer .megamenufullwidth {
        box-shadow: none;
    }

    body.has-drawer .megamenufullwidth {
        z-index: calc(var(--z-drawer) + 10);
    }
}

@media (max-width: 560px) {
    .navbar-logo {
        height: 30px;
    }
}

.menu-item-1 .lvl2-menu {
    grid-template-columns: 300px 300px auto auto !important;
}

.menu-item-2 .lvl2-menu {
    grid-template-columns: auto 300px auto !important;
}

a.contact-pill {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.menu-direction-fix .lvl2-menu__col:nth-child(3) .lvl3-menu__card--mini {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.menu-direction-fix .lvl2-menu__col:nth-child(3) .lvl3-menu__card--mini .lvl3-menu__card--icon img {
    width: 100px !important;
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
}

.menu-direction-fix .lvl2-menu__col:nth-child(3) .lvl3-menu__card--mini .lvl3-menu__card--icon {
    width: unset !important;
    height: unset !important;
    max-height: unset !important;
    flex: unset !important;
    max-width: unset !important;
}

.faqpanel .lvl2-menu__first .lvl3-menu .lvl3-menu__card {
    align-items: start !important;
}

.no-bullet {
    list-style-type: none !important;
}