/**
 * Sasaeru Main Stylesheet
 *
 * Description: Unified frontend styling architecture for the Sasaeru theme.
 * Contains layout directives, modular component styles (FAQs, Columns), 
 * form integration overrides (MetForm), and responsive viewport breakpoints.
 *
 * Note: Certain class names maintain original spelling variations to ensure 
 * strict backward compatibility with existing Elementor DOM nodes.
 *
 * @package Sasaeru
 */

/* ==========================================================================
   1. GLOBAL UTILITIES & TYPOGRAPHY
   ========================================================================== */

/* Responsive visibility toggles */
.br-pc {
    /* display: block !important; */
}

.br-sp {
    display: none !important;
}

/* Base typographic configurations */
.description-text {
    font-family   : var(--font-primary);
    font-size     : 64px;
    line-height   : var(--lh-120);
    letter-spacing: var(--ls-01);
    color         : var(--color-text-base);
    font-weight   : 700;
}

.services-description-text {
    font-size: 64px;
    max-width: 572px;
}

.text-highlight {
    color: var(--color-primary);
}

.solution-description-text {
    font-family   : var(--font-primary);
    font-style    : normal;
    font-weight   : 400;
    font-size     : var(--fs-14);
    line-height   : var(--lh-160);
    letter-spacing: var(--ls-02);
    color         : var(--color-text-base);
    width         : 100%;
}

/* Prevent text wrapping on specific contextual UI strings */
#case-studies-section-sub-heading,
#feature-main-headline,
#footer-contact-us-title,
#pricing-section-description-text,
#services-page-reporting-section-description-text,
.benefit-text,
.concept-title,
.contact-section-descriptoin-text,
.featrue-description-text,
.flow-badge-text,
.logo-textmark,
.media-card p,
.problem-description-text,
.result-section-intro-text,
.step-description-text {
    white-space: nowrap;
}

#stat-description {
    font-family   : var(--font-primary);
    font-size     : var(--fs-32);
    font-weight   : bold;
    color         : var(--color-text-on-dark);
    line-height   : var(--lh-120);
    letter-spacing: var(--ls-02);
    text-align    : right;
    vertical-align: top;
    max-width     : 270px;
}

#stat-description span {
    font-size: 48px;
    color    : var(--color-primary);
}

.step-caption {
    font-family   : var(--font-primary);
    font-size     : var(--fs-14);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-02);
    text-align    : center;
    vertical-align: middle;
    max-width     : 199px;
    margin-bottom : 0;
}

#step-caption-1 {
    white-space: nowrap;
}

#step-caption-2 {
    max-width: 171px;
}

#step-caption-3 {
    max-width: 140px;
}

#banner-description-text {
    font-family   : var(--font-primary);
    font-weight   : 400;
    font-size     : var(--fs-16);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-02);
    color         : var(--color-text-base);
    height        : auto;
}

#banner-description-text p {
    margin-bottom: 0px;
    margin-top   : 0px;
}

.reason-description {
    font-family   : var(--font-primary);
    font-style    : normal;
    font-weight   : 400;
    font-size     : var(--fs-16);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-02);
    color         : var(--color-text-base);
    white-space   : nowrap;
}

.reason-description p {
    margin: 0 !important;
}

.case-study-heading {
    text-decoration-thickness: 0.5px !important;
    text-underline-offset    : 6px !important;
}

.column-header-description {
    font-family   : var(--font-primary);
    font-style    : normal;
    font-weight   : 700;
    font-size     : var(--fs-24);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-02);
    color         : var(--color-white);
}

/* ==========================================================================
   2. GLOBAL LAYOUT & STRUCTURAL COMPONENTS
   ========================================================================== */

.navbar-container {
    padding: 0 clamp(80px, calc(50.909px + 2.841vw), 160px);
}

.navbar-logo-container {
    width    : auto;
    max-width: 160px;
}

.navbar,
#hero-main-content-container {
    max-width: 1440px;
}

.navbar {
    background     : var(--color-surface-card);
    opacity        : 0.88;
    backdrop-filter: blur(12px);
}

#hero-section,
#hero-right-column {
    overflow-y: visible !important;
}

.navbar *,
#hero-section *,
#problems-section *,
#flow-section * {
    transition: all ease-in-out .3s;
}

#pricing-white-box {
    max-width: 1092px !important;
}

.contac-us-section-button {
    max-width: 560px;
}

#flow-steps-container {
    max-width: 1120px;
}

.flow-section-step-card {
    display        : flex;
    align-items    : start;
    justify-content: space-between;
}

.flow-section-step-card:active,
.flow-section-step-card:focus,
.flow-section-step-card:focus-within {
    border-width: 3px;
}

.flow-section-step-card:hover {
    background: var(--color-primary);
    cursor    : pointer;
}

.flow-section-step-card:hover .flow-section-step-label {
    color: var(--color-white);
}

#footer-link-list-2 {
    max-width: 560px;
}

.elementskit-navbar-nav>li>a:hover {
    transform : translateY(-1px) !important;
    transition: all 0.3s ease-in-out !important;
}

.elementskit-navbar-nav>li>a:active {
    transform : translateY(2px) !important;
    transition: all 0.1s ease-in-out !important;
}

/* ==========================================================================
   3. BUTTONS & INTERACTIVE STATES
   ========================================================================== */

/* Hardware acceleration and transition definitions for UI levitation */
.sasaeru-btn,
.banner-btn,
.cta-btn,
.nav-archive,
.nav-next,
.nav-prev,
.sasaeru-modal-close-btn,
.contact-form-btn {
    transition : all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: transform, box-shadow, background;
}

.sasaeru-btn svg,
.sasaeru-btn img,
.banner-btn svg,
.nav-next svg,
.nav-prev svg {
    transition: transform 0.3s ease-in-out !important;
}

/* Hover State Interpolation */
.sasaeru-btn:hover {
    background   : var(--color-hover-primary) !important;
    transform    : translateY(-3px) !important;
    box-shadow   : 0px 14px 24px rgba(0, 0, 0, 0.16) !important;
    border-radius: 8px !important;
    cursor       : pointer;
    color        : var(--color-text-on-primary);
}

.banner-btn:hover,
.cta-btn:hover,
.nav-archive:hover,
.nav-next:hover,
.nav-prev:hover {
    transform    : translateY(-3px) !important;
    box-shadow   : 0px 14px 24px rgba(0, 0, 0, 0.16) !important;
    border-radius: 8px !important;
}

.contac-us-section-button:hover {
    border-radius: 16px !important;
}

.sasaeru-modal-close-btn:hover,
.contact-form-btn:hover {
    transform: translateY(-3px) !important;
    cursor   : pointer;
}

/* Active State Depressions */
.sasaeru-btn:active,
.banner-btn:active,
.cta-btn:active {
    background: var(--color-active-primary) !important;
    transform : translateY(2px) !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.1s ease-in-out !important;
}

.sasaeru-modal-close-btn:active,
.contact-form-btn:active {
    transform : translateY(2px) !important;
    transition: all 0.1s ease-in-out !important;
}

/* Hover state micro-interactions for SVG directional cues */
.sasaeru-btn:hover svg,
.sasaeru-btn:hover img,
.banner-btn>svg,
.nav-next>svg {
    transform: translateX(4px) !important;
}

.nav-prev>svg {
    transform: translateX(-4px) !important;
}

.sasaeru-link:hover {
    transition: all 0.3s ease-in-out !important;
    transform : translateY(-1.5px) !important;
}

.sasaeru-link:active {
    transition: all 0.1s ease-in-out !important;
    transform : translateY(2px) !important;
}

/* ==========================================================================
   4. METFORM INTEGRATION & FORM UI HARDENING
   ========================================================================== */

#contact-form {
    max-width: 960px;
}

.contact-form {
    gap: 24px !important;
}

.contact-form_additional-text {
    display: none !important;
}

#contact-us-form {
    box-shadow     : 0px 8px 24px -12px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(4px) !important;
}

#contact-us-page_form .mf-input-label {
    margin-bottom: 14.2px;
}

/* Form Container Constraints */
.elementor-widget-metform,
.elementor-widget-metform .elementor-widget-container,
.mf-form-wrapper,
.metform-form-content {
    height    : auto !important;
    min-height: 100% !important;
    overflow  : visible !important;
}

/* 4.1 Custom Checkbox Interface */
.mf-checkbox_label span {
    font-size  : var(--fs-12);
    font-weight: normal;
    color      : var(--color-text-subtle, #888888);
    /* Fallback preserved if specific token matching is required */
}

/* Visually hide default checkbox input to allow custom styling */
.mf-checkbox-option input[type="checkbox"] {
    position: absolute !important;
    opacity : 0 !important;
}

/* Custom Unchecked State Rendering */
.mf-checkbox-option input[type="checkbox"]+span::before {
    content         : "" !important;
    display         : inline-block !important;
    box-sizing      : border-box !important;
    width           : 16px !important;
    height          : 16px !important;
    border          : 1px solid var(--color-border-input) !important;
    border-radius   : 4px !important;
    background-color: var(--color-surface-card) !important;
    margin-right    : 8px !important;
    vertical-align  : middle !important;
    transition      : all 0.2s ease-in-out !important;
    background-image: none !important;
    margin-top      : -8px !important;
}

/* Custom Checked State Mapping */
.mf-checkbox-option input[type="checkbox"]:checked+span::before {
    background-color   : var(--color-primary) !important;
    border-color       : var(--color-border-base) !important;
    background-image   : url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23212121'/%3E%3C/svg%3E") !important;
    background-size    : 14px 14px !important;
    background-position: center !important;
    background-repeat  : no-repeat !important;
}

/* Suppress default MetForm visual hooks */
.mf-checkbox-option input[type="checkbox"]+span::after {
    display: none !important;
}

.mf-checkbox-option label {
    display    : inline-flex !important;
    align-items: center !important;
    cursor     : pointer !important;
}

.mf-checkbox-option input[type="checkbox"]:focus+span::before,
.mf-checkbox-option label:hover input[type="checkbox"]+span::before {
    border-color: var(--color-focus-ring) !important;
    box-shadow  : 0 0 0 1px rgba(255, 193, 7, 0.3) !important;
}

.privacy-policy-checkbox input[type="checkbox"]+span::before {
    margin-bottom: 0;
    margin-top   : 1px !important;
}

/* 4.2 Error Handling & Validation UX */
.mf-error-message {
    color      : var(--color-text-error) !important;
    font-family: var(--font-primary) !important;
    font-size  : var(--fs-12) !important;
    font-weight: 500 !important;
    margin-top : 4px !important;
}

#privacy-policy-wrapper {
    position: relative;
    width   : 100% !important;
}

#privacy-policy-wrapper .mf-error-message {
    width        : max-content;
    position     : absolute;
    left         : -50%;
    transform    : translateX(50%);
    bottom       : 0;
    margin-bottom: -28px;
}

#privacy-policy-wrapper:has(.mf-error-message) {
    margin-bottom: 20px;
}

/* ==========================================================================
   5. CUSTOM MODAL ARCHITECTURE
   ========================================================================== */

#global-floating-cta-container {
    display: none !important;
}

/* Hide and handle visibility securely via JS bindings */
body:not(.elementor-editor-active) #sasaeru-custom-modal {
    position               : fixed !important;
    top                    : 0;
    left                   : 0;
    width                  : 100vw;
    height                 : 100vh;
    z-index                : 99999;
    opacity                : 0;
    visibility             : hidden;
    pointer-events         : none;
    backdrop-filter        : blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition             : opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

body:not(.elementor-editor-active) #sasaeru-custom-modal.is-active {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
}

body:not(.elementor-editor-active) #sasaeru-custom-modal>.e-con,
body:not(.elementor-editor-active) #sasaeru-custom-modal>.e-container {
    transform : translateY(20px);
    transition: transform 0.3s ease-in-out;
}

body:not(.elementor-editor-active) #sasaeru-custom-modal.is-active>.e-con,
body:not(.elementor-editor-active) #sasaeru-custom-modal.is-active>.e-container {
    transform: translateY(0);
}

#sasaeru-custom-modal {
    position: relative;
}

#overlay-inner-content {
    max-width : 480px;
    max-height: 88vh;
    position  : relative;
    width     : 100%;
}

#sasaeru-custom-modal-inner-content {
    max-height: 90vh;
    position  : relative;
    width     : 480px !important;
    max-width : 90vw;
    padding   : 0px !important;
}

#sasaeru-custom-modal-inner-content .e-con-inner {
    padding: 0px !important;
}

#global-modal-form {
    height        : 100%;
    max-width     : 480px;
    width         : 100%;
    overflow      : scroll;
    padding       : 32px;
    padding-bottom: 0px;
}

#global-modal-close-btn a {
    width          : 40px !important;
    height         : 40px !important;
    background     : var(--color-base) !important;
    font-size      : 12 !important;
    font-family    : var(--font-primary) !important;
    font-weight    : 700 !important;
    line-height    : 0 !important;
    text-align     : center !important;
    display        : flex !important;
    align-items    : center !important;
    justify-content: center !important;
}

#sasaeru-custom-modal .sasaeru-modal-close-btn {
    display: flex !important;
}

/* Modal Context Form Adjustments */
.modal-contact-form-container {
    max-height: 100%;
    width     : 100%;
}

.modal-contact-form-container .contact-form,
#home-contact-form-container .contact-form {
    gap: 8px !important;
}

.modal-contact-form-container #form-concerns-row,
#home-contact-form-container #form-concerns-row {
    display: none !important;
}

.modal-contact-form-container .contact-form_additional-text,
#home-contact-form-container .contact-form_additional-text {
    display: flex !important;
}

.modal-contact-form-container .contact-form-btn,
#home-contact-form-container .contact-form-btn {
    width    : 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

#home-contact-form-container {
    overflow-y: scroll;
}

#home-contact-form-container::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   6. CAROUSELS & COMPONENT UI LOGIC
   ========================================================================== */

/* 6.1 Client Logos Horizontal Scroller */
.sasaeru-client-logos {
    display        : flex !important;
    flex-wrap      : nowrap !important;
    justify-content: space-between !important;
    align-items    : center;
    overflow-x     : visible !important;
    width          : 100%;
}

.sasaeru-client-logos>.elementor-widget {
    flex     : 0 1 auto !important;
    width    : 100px !important;
    max-width: none !important;
}

.sasaeru-client-logos::-webkit-scrollbar {
    display: none;
}

/* 6.2 Hero Carousel Hardening */
#hero-carousel {
    width   : 100%;
    overflow: hidden;
}

#hero-carousel .swiper-container,
#hero-carousel .swiper {
    overflow: visible !important;
}

#hero-carousel .swiper-slide {
    width            : 400px !important;
    height           : 267px !important;
    border-radius    : 8px !important;
    overflow         : hidden !important;
    -webkit-transform: translateZ(0);
    transform        : translateZ(0);
}

#hero-carousel .swiper-slide img {
    width        : 100% !important;
    height       : 100% !important;
    object-fit   : cover !important;
    border-radius: 8px !important;
    display      : block;
}

/* ==========================================================================
   7. FAQ COMPONENT STYLING
   ========================================================================== */

.sasaeru-faq-container {
    width      : 100%;
    max-width  : 964px;
    margin     : 0 auto;
    font-family: var(--font-primary);
}

.faq-search-wrapper {
    background-color: var(--color-surface-subtle);
    padding         : 40px;
    border-radius   : 14px;
    margin-bottom   : 24px;
}

#faq-search-input {
    box-sizing         : border-box;
    width              : 100%;
    height             : 56px;
    padding            : 0px 24px 0px 48px;
    border             : 1px solid var(--color-border-input);
    border-radius      : 8px;
    font-size          : var(--fs-14);
    color              : var(--color-text-base);
    background-color   : var(--color-surface-card);
    background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='1.66' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: 20px center;
    background-size    : 20px;
    transition         : border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#faq-search-input:focus {
    outline     : none;
    border-color: var(--color-focus-ring);
    box-shadow  : 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.faq-filter-bar {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 32px;
    flex-wrap      : wrap;
    gap            : 24px;
}

.faq-tags {
    display       : flex;
    flex-direction: row;
    align-items   : center;
    gap           : 16px;
    flex-wrap     : wrap;
}

.faq-filter-btn {
    display         : flex;
    justify-content : center;
    align-items     : center;
    height          : 28px;
    padding         : 4px 24px;
    background-color: var(--color-surface-subtle);
    color           : var(--color-text-base);
    border          : none;
    border-radius   : 4px;
    font-size       : var(--fs-14);
    font-weight     : 700;
    cursor          : pointer;
    transition      : all 0.2s ease-in-out;
}

.faq-filter-btn:active,
.faq-filter-btn:focus,
.faq-filter-btn:hover {
    background-color: #D6D6D6;
    color           : var(--color-text-base);
}

.faq-filter-btn.active {
    background-color: var(--color-base);
    color           : var(--color-white);
}

.faq-counter {
    font-size  : var(--fs-12);
    color      : var(--color-text-base);
    font-weight: 400;
    white-space: nowrap;
}

.faq-item {
    background-color: var(--color-surface-card);
    border          : 1px solid var(--color-border-base);
    border-radius   : 14px;
    padding         : 24px 32px;
    margin-bottom   : 16px;
    transition      : all 0.3s ease-in-out;
}

.faq-question {
    display    : flex;
    align-items: center;
    cursor     : pointer;
    gap        : 16px;
}

.faq-q-icon {
    color      : var(--color-secondary);
    font-size  : 22px;
    font-weight: 700;
    font-family: var(--font-secondary);
    line-height: 1;
}

.faq-title {
    flex-grow  : 1;
    font-size  : var(--fs-18);
    font-weight: 700;
    color      : var(--color-text-base);
    margin     : 0;
    line-height: var(--lh-140);
}

.faq-badge {
    background-color: var(--color-surface-subtle);
    color           : var(--color-text-base);
    font-size       : 13px;
    font-weight     : 700;
    padding         : 4px 16px;
    border-radius   : 4px;
    white-space     : nowrap;
}

.faq-toggle-icon {
    font-size  : 16px;
    color      : var(--color-text-base);
    transition : transform 0.3s ease-in-out;
    font-family: monospace;
}

.faq-question.active .faq-toggle-icon {
    transform: rotate(180deg);
}

.faq-answer {
    display    : none;
    gap        : 16px;
    margin-top : 16px;
    padding-top: 16px;
}

.faq-a-icon {
    color       : var(--color-primary);
    font-size   : 22px;
    font-weight : 700;
    font-family : var(--font-secondary);
    line-height : var(--lh-120);
    padding-left: 16px;
}

.faq-answer-content {
    color      : var(--color-text-base);
    font-size  : var(--fs-16);
    line-height: var(--lh-160);
    font-weight: 400;
}

.faq-answer-content p {
    margin-bottom: 0;
}

/* ==========================================================================
   8. USEFUL INFORMATION COMPONENTS (Grid & Single Post)
   ========================================================================== */

/* 8.1 Grid Architecture */
.sasaeru-column-wrapper {
    width          : 100%;
    max-width      : 1440px;
    margin         : 0 auto;
    font-family    : var(--font-primary);
    padding        : 60px 20px;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

.sasaeru-column-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap                  : 22px;
    margin-bottom        : 60px;
}

.column-card {
    position       : relative;
    display        : flex;
    flex-direction : column;
    background     : var(--color-surface-card);
    border-radius  : 8px;
    padding        : 16px;
    text-decoration: none;
    box-sizing     : border-box;
    transition     : transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height         : 100%;
    overflow       : visible;
    max-width      : 360px;
}

.column-card:hover {
    transform : translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.column-card-image-wrap {
    position     : relative;
    width        : 100%;
    border-radius: 4px;
    padding-top  : 52.35%;
    background   : var(--color-surface-bg, #F5F5F5);
}

.column-card-image-wrap img,
.column-image-placeholder {
    position     : absolute !important;
    top          : 0 !important;
    left         : 0 !important;
    width        : 100% !important;
    height       : 100% !important;
    object-fit   : cover !important;
    border-radius: 4px !important;
    display      : block !important;
}

.column-badge {
    position               : absolute;
    top                    : 8px;
    left                   : 8px;
    background             : rgba(33, 33, 33, 0.8);
    backdrop-filter        : blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color                  : var(--color-white);
    font-family            : var(--font-secondary);
    font-size              : var(--fs-12);
    font-weight            : 400;
    padding                : 4px 10px;
    border-radius          : 100px;
    z-index                : 2;
}

.column-new-badge {
    position           : absolute;
    top                : -24px;
    right              : -24px;
    width              : 67px;
    height             : 67px;
    background-image   : url("data:image/svg+xml,%3Csvg width='67' height='67' viewBox='0 0 67 67' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_44_1432)'%3E%3Cpath d='M40.9962 1.73942L44.2243 6.7928L50.097 5.58126L51.6055 11.3848L57.5652 12.0474L57.2064 18.033L62.6697 20.5048L60.4788 26.0866L64.9109 30.1257L61.1024 34.7573L64.0694 39.9682L59.016 43.1963L60.2276 49.069L54.424 50.5775L53.7615 56.5372L47.7758 56.1784L45.304 61.6417L39.7222 59.4508L35.6832 63.8829L31.0515 60.0744L25.8406 63.0414L22.6125 57.988L16.7398 59.1996L15.2313 53.396L9.27163 52.7335L9.63039 46.7478L4.16711 44.276L6.35798 38.6942L1.92591 34.6552L5.73443 30.0235L2.76741 24.8126L7.82079 21.5846L6.60925 15.7118L12.4128 14.2033L13.0754 8.24364L19.061 8.60239L21.5328 3.13912L27.1146 5.32999L31.1536 0.897919L35.7853 4.70644L40.9962 1.73942Z' fill='%23FFC107'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_44_1432' x='-7.76052e-05' y='3.79086e-05' width='66.8371' height='66.8371' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='1.02819'/%3E%3CfeGaussianBlur stdDeviation='0.963051'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_44_1432'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_44_1432' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-size    : contain;
    background-repeat  : no-repeat;
    background-position: center;
    color              : #1E1E1E;
    font-family        : var(--font-secondary);
    font-size          : 13px;
    font-weight        : 700;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    z-index            : 10;
    transform          : rotate(13.89deg);
}

.column-card-content {
    display       : flex;
    flex-direction: column;
    flex-grow     : 1;
    margin-top    : 16px;
}

.column-date {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    font-family  : var(--font-secondary);
    font-size    : var(--fs-12);
    color        : #99A1AF;
    margin-bottom: 8px;
}

.column-date svg {
    stroke: #99A1AF;
}

.column-title {
    font-size         : var(--fs-18);
    font-weight       : 700;
    color             : var(--color-text-base);
    line-height       : var(--lh-140);
    margin            : 0 0 16px 0;
    display           : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow          : hidden;
}

.column-read-more {
    align-items    : center;
    color          : var(--color-secondary);
    display        : flex;
    font-family    : var(--font-primary);
    font-size      : var(--fs-14);
    font-weight    : 500;
    gap            : 8px;
    justify-content: flex-end;
    line-height    : 20px;
    margin-top     : auto;
    font-style     : normal;
    letter-spacing : var(--ls-01);
}

.column-read-more span {
    margin-bottom: -6px;
}

/* 8.2 Grid Pagination */
.sasaeru-pagination {
    width          : 100%;
    display        : flex;
    justify-content: center;
}

.sasaeru-pagination .nav-links,
.sasaeru-pagination {
    display        : flex;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    gap            : 16px;
    width          : 100%;
}

.sasaeru-pagination .page-numbers {
    align-items    : center;
    background     : var(--color-surface-card);
    border-radius  : 4px;
    box-sizing     : border-box;
    color          : var(--color-text-base);
    display        : flex;
    flex-direction : column;
    font-family    : var(--font-secondary);
    font-size      : var(--fs-18);
    font-weight    : 500;
    height         : 60px;
    justify-content: center;
    line-height    : 28px;
    padding        : 16px;
    text-decoration: none;
    transition     : all 0.2s;
    width          : 39px;
}

.sasaeru-pagination .prev.page-numbers,
.sasaeru-pagination .next.page-numbers {
    border: 1px solid var(--color-border-base);
    height: 60px;
    width : 48px;
}

.sasaeru-pagination .page-numbers:hover {
    background: var(--color-surface-bg);
}

.sasaeru-pagination .page-numbers.current {
    background: var(--color-base);
    color     : var(--color-white);
}

.sasaeru-pagination .page-numbers.current:hover {
    background: var(--color-base);
}

/* 8.3 Single Column Template Architecture */
.sasaeru-hero-wrapper {
    width           : 100%;
    background-color: var(--color-surface-bg);
    position        : relative;
    overflow        : hidden;
    margin-bottom   : 40px;
}

.sasaeru-single-header-section {
    padding-top   : 140px !important;
    padding-bottom: 60px !important;
    z-index       : 2;
    position      : relative;
    width         : 100%;
    max-width     : 1440px;
    margin        : 0 auto;
    font-family   : var(--font-primary);
    color         : var(--color-text-base);
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 16px;
}

#useful-information-details_sidebar-container {
    width    : auto;
    min-width: 360px;
}

.sasaeru-single-wrapper {
    width      : 100%;
    max-width  : 1440px;
    margin     : 0 auto;
    font-family: var(--font-primary);
    padding-top: 0px !important;
    color      : var(--color-text-base);
}

.sasaeru-single-layout {
    display              : grid;
    grid-template-columns: 1fr 360px;
    gap                  : 40px;
    align-items          : start;
}

.single-featured-image img {
    width        : 100%;
    height       : auto;
    border-radius: 8px;
    margin-bottom: 40px;
}

.header-watermark {
    position         : absolute;
    top              : 100px;
    right            : 0;
    width            : 333px;
    height           : 380px;
    background-image : url('../images/ササエル__Watermark.avif');
    background-size  : contain;
    background-repeat: no-repeat;
    z-index          : -1;
    transform        : translateY(-100px);
}

.single-meta-row {
    display    : flex;
    align-items: center;
    gap        : 16px;
    flex-wrap  : wrap;
    margin     : 0;
}

.single-meta-row .column-badge {
    position      : relative;
    top           : 0;
    left          : 0;
    background    : var(--color-base);
    color         : var(--color-white);
    font-family   : var(--font-secondary);
    font-size     : var(--fs-12);
    line-height   : var(--lh-140);
    font-weight   : 400;
    padding       : 4px 8px;
    border-radius : 100px;
    letter-spacing: 0.16px;
}

.single-date,
.single-date-updated {
    display    : flex;
    align-items: center;
    gap        : 4px;
    font-family: var(--font-secondary);
    font-size  : var(--fs-12);
    line-height: 1.33;
    color      : var(--color-text-base);
}

.update-label {
    font-family: var(--font-primary);
}

.single-main-title {
    font-size     : 48px;
    font-weight   : 700;
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-02);
    margin        : 0;
    color         : var(--color-text-base);
    max-width     : 783px;
}

.single-author-box {
    display    : flex;
    align-items: center;
    gap        : 12px;
    margin     : 0;
}

.author-avatar {
    width          : 48px;
    height         : 48px;
    background     : var(--color-surface-bg);
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    overflow       : hidden;
    flex-shrink    : 0;
}

.author-avatar img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.author-name {
    font-weight   : 700;
    font-size     : var(--fs-14);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-01);
    color         : var(--color-text-base);
    margin-bottom : 4px;
}

.author-role {
    font-size     : var(--fs-12);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-01);
    color         : var(--color-text-base);
}

.sasaeru-breadcrumbs {
    display       : flex;
    align-items   : center;
    gap           : 4px;
    font-family   : var(--font-primary);
    font-size     : var(--fs-12);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-01);
    color         : var(--color-text-base);
    z-index       : 2;
    margin-top    : 40px;
}

.sasaeru-breadcrumbs a {
    color          : var(--color-text-base);
    font-weight    : 700;
    text-decoration: none;
    transition     : color 0.2s;
}

.sasaeru-breadcrumbs a:hover {
    color: var(--color-secondary);
}

.sasaeru-breadcrumbs .current {
    font-weight: 400;
    color      : #999999;
}

/* 8.4 Single Post Content & Parsing UI */
.sasaeru-single-content {
    font-family: var(--font-primary);
    color      : var(--color-text-base);
}

.sasaeru-toc {
    box-sizing    : border-box;
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
    padding       : 24px;
    background    : #F9FAFB;
    border        : 1px solid var(--color-border-divider);
    border-radius : 8px;
    margin-bottom : 48px;
}

.sasaeru-toc .toc-title {
    font-weight   : 700;
    font-size     : var(--fs-18);
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-01);
    color         : var(--color-text-base);
    margin-bottom : 16px;
}

.sasaeru-toc .toc-list {
    list-style    : none;
    padding       : 0;
    margin        : 0;
    display       : flex;
    flex-direction: column;
    gap           : 16px;
}

.sasaeru-toc .toc-list li {
    position      : relative;
    padding-left  : 24px;
    font-size     : var(--fs-14);
    line-height   : var(--lh-160);
    letter-spacing: var(--ls-02);
    color         : var(--color-text-base);
}

.sasaeru-toc .toc-list li::before {
    content      : "";
    position     : absolute;
    left         : 0;
    top          : 6px;
    width        : 8px;
    height       : 8px;
    background   : var(--color-primary);
    border-radius: 50%;
}

.sasaeru-toc .toc-list a {
    color          : var(--color-text-base);
    text-decoration: none;
    transition     : color 0.2s;
}

.sasaeru-toc .toc-list a:hover {
    color: var(--color-secondary);
}

.sasaeru-single-content p {
    font-size     : var(--fs-16);
    line-height   : var(--lh-160);
    letter-spacing: var(--ls-01);
    margin-bottom : 32px;
}

.sasaeru-single-content h2 {
    font-size            : var(--fs-32);
    font-weight          : 700;
    line-height          : var(--lh-140);
    letter-spacing       : var(--ls-01);
    text-decoration      : underline;
    text-underline-offset: 4px;
    margin               : 48px 0 24px 0;
    clear                : both;
}

.sasaeru-single-content h3 {
    display       : inline-block;
    font-size     : 22px;
    font-weight   : 700;
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-02);
    background    : var(--color-base);
    color         : var(--color-white);
    padding       : 4px 12px;
    margin        : 40px 0 20px 0;
}

.sasaeru-single-content blockquote {
    box-sizing   : border-box;
    background   : #F3F4F6;
    border-left  : 4px solid #101828;
    padding      : 16px 24px;
    margin       : 32px 0;
    border-radius: 0;
}

.sasaeru-single-content blockquote p {
    margin: 0;
}

.sasaeru-global-cta {
    box-sizing     : border-box;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    padding        : 40px 24px;
    gap            : 24px;
    background     : var(--color-base);
    border-radius  : 24px;
    margin         : 64px 0 0 0;
    text-align     : center;
}

.sasaeru-global-cta .cta-sub {
    font-family   : var(--font-primary);
    font-size     : var(--fs-18);
    line-height   : var(--lh-160);
    letter-spacing: var(--ls-01);
    color         : var(--color-white);
    margin        : 0;
}

.sasaeru-global-cta .cta-main {
    font-family   : var(--font-primary);
    font-size     : var(--fs-24);
    font-weight   : 700;
    line-height   : var(--lh-160);
    letter-spacing: var(--ls-01);
    color         : var(--color-white);
    margin        : 0;
}

.sasaeru-global-cta .cta-btn {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 100%;
    max-width      : 320px;
    background     : var(--color-white);
    color          : var(--color-text-base);
    font-family    : var(--font-primary);
    font-size      : var(--fs-16);
    font-weight    : 700;
    padding        : 16px 0px;
    border-radius  : 8px;
    box-shadow     : 0px 8px 16px rgba(0, 0, 0, 0.16);
    text-decoration: none;
    transition     : transform 0.2s, box-shadow 0.2s;
}

/* 8.5 Post Navigation & Sidebar Logic */
.sasaeru-post-nav {
    display        : flex;
    width          : 100% !important;
    justify-content: center;
    align-items    : center;
    padding-top    : 40px;
    margin-bottom  : 40px;
    gap            : 24px;
}

.nav-prev a,
.nav-next a {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    padding        : 12px 20px;
    border         : 1px solid var(--color-border-base);
    border-radius  : 4px;
    color          : var(--color-text-base);
    text-decoration: none;
    font-weight    : 600;
    font-size      : var(--fs-14);
    transition     : all 0.2s;
}

.nav-archive a {
    background     : var(--color-base);
    color          : var(--color-white);
    padding        : 12px 32px;
    border-radius  : 4px;
    text-decoration: none;
    font-weight    : 600;
    font-size      : var(--fs-14);
}

.nav-prev a:hover,
.nav-next a:hover {
    background: var(--color-surface-bg);
    color     : var(--color-primary);
}

.nav-archive a:hover {
    color: var(--color-primary);
}

.sasaeru-single-sidebar {
    width: 360px;
}

.sidebar-banner {
    align-items    : center;
    border         : 1px solid var(--color-white);
    border-radius  : 10px;
    box-shadow     : 0px 4px 16px rgba(0, 0, 0, 0.16);
    box-sizing     : border-box;
    display        : flex;
    flex-direction : column;
    height         : auto;
    isolation      : isolate;
    justify-content: center;
    margin-bottom  : 40px;
    max-width      : auto;
    overflow       : hidden;
    padding        : 16px;
    position       : relative;
    text-decoration: none !important;
    width          : 100%;
}

.sidebar-banner:hover,
.sidebar-banner:hover .banner-main-text,
.sidebar-banner:hover .banner-top-text,
.sidebar-banner:hover .banner-btn {
    text-decoration: none !important;
}

.sidebar-banner::before {
    content            : "";
    position           : absolute;
    top                : 0;
    left               : 0;
    right              : 0;
    bottom             : 0;
    background-image   : url('../images/Sidebar Banner_BG.webp');
    background-size    : cover;
    background-position: center;
    mix-blend-mode     : multiply;
    border-radius      : 8px;
    z-index            : -1;
}

.banner-inner {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    gap            : 16px;
    width          : 100%;
    max-width      : 330px;
    z-index        : 2;
}

.banner-logo img {
    width     : 200px;
    height    : 65px;
    object-fit: contain;
}

.banner-text-group {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 4px;
    width         : 100%;
}

.banner-top-text {
    display        : flex;
    justify-content: center;
    align-items    : center;
    padding        : 1px 4px;
    width          : 100%;
    background     : var(--color-base);
    color          : var(--color-white) !important;
    font-family    : var(--font-primary);
    font-size      : var(--fs-16);
    font-weight    : 500;
    line-height    : var(--lh-120);
    letter-spacing : var(--ls-01);
    text-align     : center;
    white-space    : nowrap;
}

.banner-main-text {
    width         : 100%;
    text-align    : center;
    color         : var(--color-text-base) !important;
    font-family   : var(--font-primary);
    font-size     : var(--fs-32);
    font-weight   : 600;
    line-height   : var(--lh-120);
    letter-spacing: var(--ls-05);
    text-align    : center;
}

.banner-btn {
    box-sizing     : border-box;
    display        : flex;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    padding        : 16px 5px;
    gap            : 8px;
    width          : 100%;
    max-width      : 320px;
    height         : 56px;
    background     : var(--color-base);
    box-shadow     : 0px 8px 16px rgba(0, 0, 0, 0.16);
    border-radius  : 8px;
    font-family    : var(--font-primary);
    font-size      : var(--fs-16);
    font-weight    : 500;
    line-height    : var(--lh-140);
    letter-spacing : var(--ls-01);
    color          : var(--color-white) !important;
    transition     : none !important;
}

.sidebar-recent-posts {
    display       : flex;
    flex-direction: column;
    gap           : 24px;
    width         : 100%;
    max-width     : 360px;
}

.sidebar-title {
    font-family   : var(--font-primary);
    font-size     : var(--fs-24);
    font-weight   : 700;
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-01);
    color         : #101828;
    margin        : 0;
    padding       : 0;
    border        : none;
}

.sidebar-grid {
    display       : flex;
    flex-direction: column;
    gap           : 24px;
}

/* 8.6 Home Overrides for Specific Components */
.home-column-wrapper {
    padding-top   : 80px;
    padding-bottom: 20px;
}

.home-column-wrapper .column-new-badge {
    display: none !important;
}

.articles-card-container {
    padding: 0;
    margin : 0;
}

.home-faq-container .faq-badge {
    display: none !important;
}

.home-faq-container .faq-item {
    box-sizing   : border-box;
    padding      : 0 24px;
    border       : 1px solid var(--color-border-base);
    border-radius: 14px;
    background   : var(--color-surface-card);
    margin-bottom: 16px;
}

.home-faq-container .faq-question {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 24px 0;
    gap            : 16px;
}

.home-faq-container .faq-q-icon {
    font-family: var(--font-secondary);
    font-size  : 20px;
    font-weight: 700;
    line-height: 28px;
    color      : var(--color-secondary);
}

.home-faq-container .faq-title {
    font-family: var(--font-primary);
    font-size  : var(--fs-18);
    font-weight: 700;
    line-height: var(--lh-140);
    color      : var(--color-text-base);
    flex-grow  : 1;
}

.home-faq-container .faq-answer {
    padding    : 0 0 24px 0;
    margin     : 0;
    gap        : 16px;
    align-items: flex-start;
}

.home-faq-container .faq-a-icon {
    font-family : var(--font-secondary);
    font-size   : 20px;
    font-weight : 700;
    line-height : 28px;
    color       : var(--color-primary);
    padding-left: 16px;
}

.home-faq-container .faq-answer-content,
.home-faq-container .faq-answer-content p {
    font-family: var(--font-primary);
    font-size  : var(--fs-16);
    font-weight: 400;
    line-height: var(--lh-160);
    color      : var(--color-text-base);
    margin     : 0;
}

/* ==========================================================================
   9. SYSTEM STATUS PAGES (404 & Maintenance Mode)
   ========================================================================== */

.sasaeru-status-page {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    text-align     : center;
    min-height     : 100vh;
    padding        : 120px 20px;
    font-family    : var(--font-primary);
}

.status-img {
    width        : 100% !important;
    max-width    : 280px !important;
    margin-bottom: 32px;
}

.status-title {
    font-size     : var(--fs-32);
    font-weight   : 700;
    color         : var(--color-text-base);
    margin-bottom : 16px;
    letter-spacing: var(--ls-02);
}

.status-message {
    font-size    : var(--fs-16);
    line-height  : var(--lh-160);
    color        : var(--color-text-subtle);
    margin-bottom: 32px;
}

.status-btn {
    max-width     : 280px !important;
    font-size     : var(--fs-16) !important;
    padding       : 16px 24px !important;
    min-height    : 56px !important;
    background    : var(--color-primary);
    border-radius : 8px;
    color         : var(--color-text-base);
    font-family   : var(--font-primary);
    font-weight   : 700;
    line-height   : var(--lh-140);
    letter-spacing: var(--ls-02);
}

/* ==========================================================================
   10. MEDIA QUERIES (Responsive Breakpoints)
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1 TABLET BREAKPOINT (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    #global-floating-cta-container {
        display: flex !important;
    }

    .br-pc {
        display: none !important;
    }

    .br-sp {
        display: block !important;
    }

    p:has(.br-sp) {
        white-space: nowrap;
    }

    .navbar-container {
        padding: 0 44.64px;
    }

    .navbar-logo-container {
        max-width: 120.976px;
    }

    #hero-carousel .swiper-slide {
        width : 317.12px !important;
        height: 211.57px !important;
    }

    .sasaeru-client-logos {
        justify-content           : flex-start !important;
        overflow-x                : auto !important;
        scroll-snap-type          : x mandatory;
        -webkit-overflow-scrolling: touch;
        gap                       : 16px !important;
        scrollbar-width           : none;

        margin-left : -24px !important;
        margin-right: -24px !important;
        width       : calc(100% + 48px) !important;

        padding-left  : 24px !important;
        padding-right : 24px !important;
        padding-bottom: 16px !important;
    }

    .sasaeru-client-logos::-webkit-scrollbar {
        display: none;
    }

    .sasaeru-client-logos>.elementor-widget {
        flex             : 0 0 auto !important;
        scroll-snap-align: center;
    }

    .sasaeru-client-logos::after {
        content: "";
        flex   : 0 0 8px;
    }

    .sasaeru-single-layout {
        grid-template-columns: 1fr 280px;
        gap                  : 32px;
    }

    .sasaeru-single-sidebar {
        width        : 100%;
        margin-bottom: 24px;
    }

    .banner-inner {
        max-width: 100%;
    }

    .banner-btn {
        max-width: 100%;
    }

    .sidebar-recent-posts {
        max-width: 100%;
    }

    .faq-search-wrapper {
        padding: 24px;
    }

    .faq-filter-btn {
        padding: 4px 20px;
    }

    .faq-item {
        padding: 24px 24px;
    }

    .faq-q-icon,
    .faq-a-icon {
        font-size: 20px;
    }

    .faq-title {
        font-size: var(--fs-16);
    }

    .faq-answer-content {
        font-size: 15px;
    }

    .sasaeru-column-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap                  : 24px;
        padding-bottom       : 40px !important;
    }

    .column-title {
        font-size: 17px;
    }

    .sasaeru-single-header-section {
        width        : 100%;
        padding      : 24px;
        padding-left : 0px !important;
        padding-right: 0px !important;
    }

    .single-main-title {
        font-size: 34px;
    }

    .author-avatar {
        width : 54px;
        height: 54px;
    }

    .header-watermark {
        top   : 90px;
        right : -10px;
        width : 250px;
        height: 285px;
    }

    /* Homepage Columns Tablet & Mobile Overrides (Horizontal Scroll) */
    .home-column-wrapper {
        align-items: stretch !important;
    }

    .home-column-wrapper .sasaeru-column-grid {
        display                   : flex;
        flex-wrap                 : nowrap;
        justify-content           : flex-start !important;
        overflow-x                : auto;
        scroll-snap-type          : x mandatory;
        -webkit-overflow-scrolling: touch;
        gap                       : 16px;
        padding-top               : 0px;

        margin-left : -24px;
        margin-right: -24px;
        width       : calc(100% + 48px) !important;

        padding-left   : 24px;
        padding-right  : 24px;
        scrollbar-width: none;
    }

    .home-column-wrapper .sasaeru-column-grid::after {
        content: "";
        flex   : 0 0 16px;
    }

    .home-column-wrapper .sasaeru-column-grid::-webkit-scrollbar {
        display: none !important;
    }

    .home-column-wrapper {
        overflow-x    : hidden;
        padding-bottom: 24px !important;
    }

    .column-wrapper-shortcode .sasaeru-column-wrapper {
        padding-bottom: 24px !important;
    }

    .sasaeru-column-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    .column-wrapper-shortcode::-webkit-scrollbar {
        display: none !important;
    }

    .home-column-wrapper .column-card {
        flex             : 0 0 auto;
        width            : 320px;
        height           : 265px;
        scroll-snap-align: center;
    }

    .home-column-wrapper .column-card-content {
        margin-top: 16px;
    }

    .home-column-wrapper .column-title {
        font-size         : var(--fs-18);
        margin-bottom     : 0;
        -webkit-line-clamp: 2;
    }

    .home-column-wrapper .column-read-more {
        display: none;
    }

    #stat-description {
        width: 100%;
    }

    #flow-steps-container {
        justify-content: center;
    }

    /* Force ElementsKit Nav Menu to stay horizontal */
    .elementskit-menu-hamburger,
    .elementskit-menu-close,
    .ekit-menu-close,
    .elementskit-menu-overlay {
        display: none !important;
    }

    .elementskit-menu-container {
        display   : flex !important;
        position  : static !important;
        width     : auto !important;
        max-width : none !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity   : 1 !important;
        visibility: visible !important;
        transform : none !important;
        padding   : 0 !important;
    }

    .elementskit-navbar-nav {
        display        : flex !important;
        flex-direction : row !important;
        flex-wrap      : nowrap !important;
        align-items    : center !important;
        justify-content: flex-end !important;
        gap            : 24px !important;
        margin         : 0 !important;
        padding        : 0 !important;
    }

    .elementskit-navbar-nav>li>a {
        padding    : 0 !important;
        font-size  : 12.916px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .elementskit-submenu-indicator {
        display: none !important;
    }

    .elementskit-nav-identity-panel {
        padding: 0 !important;
    }

    /* Floating Mobile CTA Pill */
    #sasaeru-floating-cta {
        position      : fixed !important;
        bottom        : 24px !important;
        left          : 50% !important;
        width         : calc(100% - 40px) !important;
        max-width     : 360px !important;
        z-index       : 9999 !important;
        transform     : translate(-50%, 160%) !important;
        transition    : transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        margin        : 0 !important;
        padding       : 0 !important;
        background    : transparent !important;
    }

    #sasaeru-floating-cta button {
        box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.25), 0px 4px 10px rgba(0, 0, 0, 0.12) !important;
    }

    #sasaeru-floating-cta.is-visible {
        transform     : translate(-50%, 0) !important;
        pointer-events: auto !important;
    }

    .medium-section-step-text-group p {
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   10.2 MOBILE BREAKPOINT (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #banner-description-text {
        width     : 314px;
        font-size : var(--fs-14);
        text-align: center;
    }

    #banner-description-text p {
        margin-top: 0;
    }

    .reason-description {
        font-size     : var(--fs-14);
        line-height   : var(--lh-160);
        letter-spacing: var(--ls-02);
    }

    .br-pc {
        display: none !important;
    }

    .br-sp {
        display: block !important;
    }

    #stat-description p {
        white-space: nowrap;
    }

    .home-column-wrapper .sasaeru-column-grid {
        padding-bottom: 0 !important;
        margin-bottom : 0 !important;
    }

    .column-header-description {
        font-family   : 'Noto Sans JP';
        font-style    : normal;
        font-weight   : 700;
        font-size     : var(--fs-18);
        line-height   : var(--lh-140);
        letter-spacing: var(--ls-02);
        width         : max-content !important;
        color         : var(--color-white);
        overflow-x    : visible;
    }

    .column-header-container {
        overflow-x: visible !important;
    }

    .navbar-container {
        padding: 0 8px;
    }

    .navbar-logo-container {
        max-width: 88px;
    }

    #hero-carousel .swiper-slide {
        width : 240px !important;
        height: 160px !important;
    }

    #stat-description {
        font-size : var(--fs-24);
        text-align: left;
        max-width : 100%;
    }

    #stat-description span {
        font-size: var(--fs-32);
    }

    .step-caption {
        max-width : 100%;
        text-align: left;
    }

    #step-caption-2 {
        max-width: 100%;
    }

    #step-caption-3 {
        max-width: 100%;
    }

    .services-description-text {
        max-width: 295px;
        font-size: var(--fs-32);
    }

    /* FAQ Core Mobile Adjustments */
    .faq-search-wrapper {
        padding: 16px 24px;
    }

    .faq-filter-bar {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 16px;
        margin-bottom : 24px;
    }

    .faq-tags {
        width         : 100%;
        overflow-x    : auto;
        flex-wrap     : nowrap;
        padding-bottom: 8px;
        gap           : 4px;
    }

    .faq-tags::-webkit-scrollbar {
        display: none !important;
    }

    .faq-filter-btn {
        padding    : 4px 16px;
        white-space: nowrap;
    }

    .faq-item {
        padding: 24px 16px;
    }

    .faq-question {
        flex-wrap  : nowrap;
        align-items: flex-start;
    }

    .faq-q-icon {
        font-size  : var(--fs-18);
        line-height: 1.4;
    }

    .faq-a-icon {
        font-size   : var(--fs-18);
        margin-top  : 2px;
        padding-left: 0px !important;
    }

    .faq-title {
        width         : 200px !important;
        font-size     : var(--fs-16);
        flex-grow     : 0;
        letter-spacing: 1%;
    }

    .faq-answer {
        margin-top: 0;
    }

    .faq-answer-content {
        font-size: var(--fs-14);
    }

    .faq-toggle-icon {
        margin-left: auto;
    }

    .faq-badge {
        display: none;
    }

    /* Post Layout Component Hooks */
    .elementor-element-ebf666b {
        align-items  : center !important;
        align-content: center !important;
        align-self   : center !important;
    }

    .sasaeru-hero-wrapper {
        margin-bottom: 24px;
    }

    .fixed-url-breadcrumb {
        white-space: nowrap;
    }

    .sasaeru-column-wrapper {
        padding    : 0px;
        padding-top: 40px;
    }

    .sasaeru-column-grid {
        grid-template-columns: 1fr !important;
        gap                  : 22px;
        margin-bottom        : 0px;
    }

    .column-title {
        font-size: var(--fs-16);
    }

    .column-card-content {
        margin-top: 8px;
    }

    .sasaeru-pagination {
        justify-content: center;
        gap            : 4.67px;
        max-width      : 345px;
        margin         : 0 auto;
    }

    .sasaeru-pagination .page-numbers {
        padding: 16px 12px;
    }

    .sasaeru-single-header-section {
        gap           : 8px;
        overflow-x    : hidden;
        padding-bottom: 32px !important;
        padding-left  : 24px !important;
        padding-right : 24px !important;
        padding-top   : 100px !important;
        width         : 100%;
    }

    .header-watermark {
        width : 191px;
        height: 219px;
        top   : 92px;
        right : -10px;
    }

    .single-meta-row {
        gap: 16px;
    }

    .single-meta-row .column-badge {
        font-size  : 10px;
        line-height: 1.7;
    }

    .single-date,
    .single-date-updated {
        font-size: 10px;
    }

    .single-main-title {
        font-size: var(--fs-24);
    }

    .author-avatar {
        width : 48px;
        height: 48px;
    }

    .sasaeru-breadcrumbs {
        font-size  : 10px;
        align-items: start;
        margin-top : 32px;
    }

    .sasaeru-single-wrapper {
        padding: 24px 16px 60px;
    }

    .sasaeru-single-layout {
        grid-template-columns: 1fr;
        gap                  : 48px;
    }

    .single-featured-image img {
        margin-bottom: 16px;
    }

    .sasaeru-toc {
        padding      : 16px;
        margin-top   : 0px;
        margin-bottom: 16px;
    }

    .sasaeru-toc .toc-title {
        font-size: var(--fs-16);
    }

    .sasaeru-single-content,
    .single-featured-image {
        padding-left : 24px !important;
        padding-right: 24px !important;
    }

    .sasaeru-single-content p {
        font-size    : var(--fs-14);
        margin-bottom: 16px;
        margin-top   : 0px;
    }

    .sasaeru-single-content h2 {
        font-size    : var(--fs-18);
        margin-bottom: 16px;
        margin-top   : 0px;
    }

    .sasaeru-single-content h3 {
        font-size    : var(--fs-16);
        margin-bottom: 16px;
        margin-top   : 0px;
        padding      : 4px 8px;
    }

    .sasaeru-single-content blockquote {
        padding      : 16px;
        margin-bottom: 16px;
        margin-top   : 0px;
    }

    .sasaeru-single-content blockquote p {
        font-size: var(--fs-14);
    }

    .sasaeru-global-cta {
        padding      : 40px 24px;
        gap          : 16px;
        border-radius: 16px;
        margin       : 0;
    }

    .sasaeru-global-cta .cta-sub {
        font-size: var(--fs-16);
    }

    .sasaeru-global-cta .cta-main {
        font-size: var(--fs-18);
    }

    .sasaeru-global-cta .cta-btn {
        font-size: var(--fs-14);
    }

    .sidebar-recent-posts {
        gap      : 16px;
        max-width: 345px;
        margin   : 0 auto;
    }

    .sidebar-banner {
        padding: 24px 26px;
    }

    .banner-logo {
        height: 56.44px;
    }

    .banner-top-text {
        font-size  : var(--fs-14);
        line-height: var(--lh-120);
    }

    .banner-main-text {
        font-size: 28px;
    }

    .banner-btn {
        font-size: var(--fs-14);
        padding  : 16px 0px;
    }

    .sidebar-recent-posts {
        margin-bottom: 40px;
    }

    .sidebar-title {
        font-size: var(--fs-18);
    }

    .sasaeru-post-nav {
        flex-direction : row;
        flex-wrap      : wrap;
        justify-content: center;
        align-items    : center;
        gap            : 16px;
        row-gap        : 24px;
    }

    .nav-prev a,
    .nav-next a,
    .nav-archive a {
        width          : 100%;
        justify-content: center;
        box-sizing     : border-box;
    }

    .nav-prev {
        order: 1;
    }

    .nav-next {
        order: 2;
    }

    .nav-archive {
        order     : 3;
        margin-top: 0;
    }

    /* Homepage FAQ Context Modifications */
    .home-faq-container .faq-item {
        padding: 0 16px;
    }

    .home-faq-container .faq-question {
        align-items: flex-start;
        padding    : 24px 0;
        gap        : 8px;
    }

    .home-faq-container .faq-q-icon {
        font-size: var(--fs-18);
    }

    .home-faq-container .faq-title {
        font-size: var(--fs-14);
    }

    .home-faq-container .faq-answer {
        padding: 0 0 24px 0;
        gap    : 8px;
    }

    .home-faq-container .faq-a-icon {
        font-size: var(--fs-18);
    }

    .home-faq-container .faq-answer-content,
    .home-faq-container .faq-answer-content p {
        font-size: var(--fs-14);
    }

    .elementskit-navbar-nav {
        gap: 8px !important;
    }

    .elementskit-navbar-nav>li>a {
        font-size: var(--fs-12) !important;
    }

    #contact-form-submit-button {
        width: 100% !important;
    }

    /* Intentional legacy spelling preserved */
    .stat-box {
        white-space: nowarp;
    }

    #footer-link-list-2 {
        max-width: 345px;
    }

    p:has(.br-sp) {
        white-space: nowrap;
    }

    #hero-campaign-ribbon {
        flex-wrap : wrap;
        max-height: max-content;
        row-gap   : 8px;
    }

    #result-section-main-heading {
        white-space: nowrap;
    }

    /* Status Component Typography */
    .sasaeru-status-page {
        min-height: 100vh;
        padding   : 100px 20px;
    }

    .status-title {
        font-size: var(--fs-24);
    }

    .status-message {
        font-size: var(--fs-14);
    }

    .status-img {
        max-width    : 220px;
        margin-bottom: 24px;
    }
}

/* --------------------------------------------------------------------------
   10.3 SMALL MOBILE BREAKPOINT (<= 375px)
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
    .navbar {
        flex-direction : column !important;
        align-items    : center !important;
        justify-content: center !important;
        row-gap        : 8px !important;
        min-height     : 60px !important;
        height         : auto;
        max-height     : max-content;
    }

    .elementskit-navbar-nav {
        gap: 16px !important;
    }

    #hero-section {
        margin-top: 110px;
    }

    #services-header-section {
        margin-top: 100px;
    }

    #faq-section-header-section,
    #column-section-header-section {
        margin-top: 24px;
    }

    #contact-section-header {
        padding-top: 100px;
    }

    #sasaeru-custom-modal-inner-content {
        max-height                : 90vh;
        margin-top                : 20px;
        overscroll-behavior       : contain;
        -webkit-overflow-scrolling: touch;
    }

    #campaign-text {
        padding: inherit 8px;
    }

    p:has(.br-sp),
    #services-header-section-description-text,
    #highlight-lead-text,
    #problem-section-stat-subtitle,
    #column-subheader-title,
    #header-black-badge-text p {
        white-space: nowrap;
    }

    #stat-description {
        font-weight: 600;
    }

    #stat-description span {
        font-weight: 700;
    }

    .services-description-text {
        margin-bottom: 0;
    }

    #medium-section-company-grid {
        padding: auto;
        width  : max-content;
    }
}