html,
            body {
              width: 100%;
              max-width: 100%;
              min-width: 0;
              overflow-x: clip;
            }

            *,
            *::before,
            *::after {
              box-sizing: border-box;
            }

            body {
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'YuGothic', Meiryo, sans-serif;
              color: #0A2540;
              background-color: #FFFFFF;
              font-size: 16px;
              line-height: 1.75;
            }

            img,
            video {
              max-width: 100%;
              height: auto;
            }

            /* Prevent flex/grid children and long Japanese copy from forcing horizontal overflow */
            section,
            header,
            footer,
            section > div,
            header > div,
            footer > div,
            .comic-box,
            .comic-btn {
              min-width: 0;
              max-width: 100%;
            }

            @media (max-width: 359px) {
              h1, h2, h3, h4, h5, p, li, a, span, summary {
                overflow-wrap: anywhere;
              }
            }

            /* Comic Box & Frame Styles matching Line Art Manga Aesthetic */
            .comic-box {
              border: 3px solid #0A2540;
              box-shadow: 4px 4px 0px #0A2540;
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .comic-box:hover {
              transform: translateY(-3px);
              box-shadow: 6px 6px 0px #0A2540;
            }

            .comic-btn {
              border: 3px solid #0A2540;
              box-shadow: 4px 4px 0px #0A2540;
              transition: all 0.15s ease;
            }
            .comic-btn:hover {
              transform: translate(-2px, -2px);
              box-shadow: 6px 6px 0px #0A2540;
            }
            .comic-btn:active {
              transform: translate(1px, 1px);
              box-shadow: 2px 2px 0px #0A2540;
            }

            /* Carousel Nav Button: Maintains vertical centering while providing subtle click feedback */
            .carousel-nav-btn {
              border: 3px solid #0A2540;
              box-shadow: 3px 3px 0px #0A2540;
              transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
            }
            .carousel-nav-btn:hover {
              transform: translateY(calc(-50% - 1px));
              box-shadow: 4px 4px 0px #0A2540;
            }
            .carousel-nav-btn:active {
              transform: translateY(calc(-50% + 2px));
              box-shadow: 1px 1px 0px #0A2540;
            }

            /* Background Pattern Utilities */
            .bg-pattern-dots {
              background-image: radial-gradient(#004098 1.8px, transparent 1.8px);
              background-size: 24px 24px;
            }
            .bg-pattern-grid {
              background-image: linear-gradient(to right, rgba(0, 64, 152, 0.08) 1.5px, transparent 1.5px),
                                linear-gradient(to bottom, rgba(0, 64, 152, 0.08) 1.5px, transparent 1.5px);
              background-size: 32px 32px;
            }
            .bg-pattern-stripes {
              background: repeating-linear-gradient(
                -45deg,
                rgba(0, 64, 152, 0.03),
                rgba(0, 64, 152, 0.03) 12px,
                rgba(255, 255, 255, 0.8) 12px,
                rgba(255, 255, 255, 0.8) 24px
              );
            }

            .bg-network-pattern {
              background-image: radial-gradient(#004098 1.5px, transparent 1.5px), radial-gradient(#FF3B30 1.5px, #F4F7FA 1.5px);
              background-size: 60px 60px;
              background-position: 0 0, 30px 30px;
              opacity: 0.6;
            }

            /* Accordion Custom Styling */
            details summary::-webkit-details-marker {
              display: none;
            }
            details[open] summary .faq-icon {
              transform: rotate(180deg);
            }

            /* Custom Hide Scrollbar for Carousel */
            .no-scrollbar::-webkit-scrollbar {
              display: none;
            }
            .no-scrollbar {
              -ms-overflow-style: none;
              scrollbar-width: none;
            }

            /* Keyframe Animations */
            @keyframes mvLogoEntrance {
              0% {
                opacity: 0;
                transform: scale(0.2) translateY(-40px) rotate(-5deg);
              }
              60% {
                opacity: 1;
                transform: scale(1.08) translateY(6px) rotate(1.5deg);
              }
              80% {
                transform: scale(0.96) rotate(-0.5deg);
              }
              100% {
                opacity: 1;
                transform: scale(1) translateY(0) rotate(0deg);
              }
            }

            @keyframes mvMessageEntrance {
              0% {
                opacity: 0;
                transform: translateY(35px) scale(0.92);
              }
              70% {
                transform: translateY(-4px) scale(1.02);
              }
              100% {
                opacity: 1;
                transform: translateY(0) scale(1);
              }
            }

            /* Dynamic Line Flow Dash Animation */
            @keyframes lineFlowDash {
              0% { stroke-dashoffset: 60; }
              100% { stroke-dashoffset: 0; }
            }

            .animate-line-dash {
              stroke-dasharray: 8 6;
              animation: lineFlowDash 3s linear infinite;
            }

            .animate-mv-logo {
              animation: mvLogoEntrance 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            }

            .animate-mv-message {
              animation: mvMessageEntrance 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.35s forwards;
              opacity: 0;
            }

            /* Scroll Reveal Utility Classes */
            .reveal-on-scroll {
              opacity: 1;
              transform: translate(0, 0) scale(1);
              transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
              will-change: opacity, transform;
            }

            .reveal-on-scroll.reveal-pending {
              opacity: 0;
              transform: translateY(32px);
            }

            .reveal-on-scroll.reveal-pending.reveal-left {
              transform: translateX(-35px);
            }

            .reveal-on-scroll.reveal-pending.reveal-right {
              transform: translateX(35px);
            }

            .reveal-on-scroll.reveal-pending.reveal-zoom {
              transform: scale(0.9) translateY(20px);
            }

            .reveal-on-scroll.is-visible {
              opacity: 1;
              transform: translate(0, 0) scale(1);
            }

        /* =========================================================
           Hero / fixed-header overscroll gap fix
           Extend the MV background behind the fixed header so that
           mobile pull-down overscroll does not expose the white body.
           ========================================================= */
        #hero {
          margin-top: -4rem;
          padding-top: 8rem;
          background-color: #F4F7FA;
        }

        @media (min-width: 640px) {
          #hero {
            margin-top: -5rem;
            padding-top: 10rem;
          }
        }

        @media (min-width: 768px) {
          #hero {
            padding-top: 11rem;
          }
        }

        /* =========================================================
           Static Tailwind visual alignment fixes
           ========================================================= */

        /* Keep the desktop header Join CTA white-framed.
           alumni.css loads after Tailwind, so this intentionally overrides .comic-btn. */
        .header-join-btn {
          border: 2px solid #FFFFFF !important;
        }

        /* English section kicker labels: viewport-independent vertical centering.
           The box uses a fixed height with no vertical padding, and the text has its own
           line box. This prevents responsive width changes from altering vertical balance. */
        .section-kicker {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          box-sizing: border-box;
          height: 30px;
          min-height: 30px;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          line-height: 1 !important;
          white-space: nowrap;
          vertical-align: middle;
        }

        .section-kicker__text {
          display: block;
          font-family: Arial, Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          font-size: 13.5px;
          font-weight: 900;
          line-height: 1;
          letter-spacing: 0.1em;
          transform: translateY(0);
        }

        /* Keep headings visually strong after switching from Tailwind Play CDN to static CSS. */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-weight: 900 !important;
        }


        /* MV subtitle copy: force the heaviest loaded Noto Sans JP weight.
           This keeps the main MV message visually as strong as the blue CTA label. */
        .mv-subtitle-copy {
          font-weight: 900 !important;
        }

        /* MV subtitle box width. Responsive line breaks are controlled below. */
        .mv-subtitle-box {
          width: 100%;
          max-width: 760px;
        }

        /* Reduce the visual gap between the MV lead copy and the blue CTA label.
           The lead copy is already a block, so no extra <br> line is needed. */
        .mv-cta-label {
          display: inline-block;
          white-space: nowrap;
          margin: 14px auto 0 !important;
        }

        @media (max-width: 639px) {
          .mv-subtitle-box {
            width: calc(100% - 24px);
            max-width: 520px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px;
            padding-right: 20px;
          }
        }

          .mv-subtitle-copy {
            font-size: 18px;
            line-height: 1.5;
            letter-spacing: -0.02em;
          }
        }

        @media (min-width: 640px) {
          .mv-subtitle-box {
            max-width: none;
          }
        }

        /* =========================================================
           Mobile interaction and MV responsive line-break refinements
           ========================================================= */

        /* Mobile menu: match desktop navigation feedback by turning the label blue
           while retaining the pressed/focus background and shadow. The CTA button is
           excluded because it intentionally remains white text on the red button. */
        #mobile-menu > a.mobile-link:focus,
        #mobile-menu > a.mobile-link:active {
          color: #00A3E0 !important;
          background-color: rgba(255, 255, 255, 0.10);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
          outline: none;
        }

        /* MV subtitle: SP = 3 lines, PC/tablet = 2 lines. */
        .mv-subtitle-sp {
          display: block;
        }

        .mv-subtitle-pc {
          display: none;
        }

        @media (min-width: 640px) {
          .mv-subtitle-sp {
            display: none;
          }

          .mv-subtitle-pc {
            display: block;
          }
        }

        /* SP footer links: use the same pressed/focus shadow treatment as the
           mobile navigation without changing the desktop footer appearance. */
        @media (max-width: 767px) {
          .footer-mobile-link {
            border-radius: 8px;
            padding: 6px 8px;
            transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
          }

          .footer-mobile-link:focus,
          .footer-mobile-link:active {
            background-color: rgba(255, 255, 255, 0.10);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
            outline: none;
          }
        }



        /* =========================================================
           Local inline SVG icons
           Replaces the external Font Awesome stylesheet/CDN.
           ========================================================= */
        .site-icon-sprite {
          position: absolute;
          width: 0;
          height: 0;
          overflow: hidden;
          pointer-events: none;
        }

        .site-icon-wrap {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
        }

        .site-icon {
          display: inline-block;
          width: 1em;
          height: 1em;
          flex: 0 0 auto;
          vertical-align: -0.125em;
          color: currentColor;
        }

        .site-icon--xs { width: 0.75rem; height: 0.75rem; }
        .site-icon--sm { width: 0.875rem; height: 0.875rem; }
        .site-icon--md { width: 1rem; height: 1rem; }
        .site-icon--lg { width: 1.125rem; height: 1.125rem; }
        .site-icon--xl { width: 1.5rem; height: 1.5rem; }

        @keyframes siteIconSpin {
          to { transform: rotate(360deg); }
        }

        .site-icon-spin {
          animation: siteIconSpin 0.9s linear infinite;
          transform-origin: center;
        }
        /* SNS Icon (Font Awesome CDN replacement) */

        .sns-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 22px;
          height: 22px;
          flex-shrink: 0;
        }

        .sns-icon svg {
          width: 100%;
          height: 100%;
          fill: #004098;
        }

        .sns-icon-facebook {
          border-radius: 50%;
          overflow: hidden;
        }

        .sns-icon-facebook svg {
          background: #004098;
          fill: #ffffff;
          border-radius: 50%;
          padding: 3px;
        }

        .sns-icon-linkedin {
          border-radius: 3px;
          overflow: hidden;
        }

        .sns-icon-linkedin svg {
          background: #004098;
          fill: #ffffff;
          padding: 3px;
        }
        /* Member role alignment */
        .member-role {
          min-height: 42px;
          display: flex;
          align-items: flex-start;
        }
        /* MV PC subtitle size adjustment */
        .mv-subtitle-line2 {
          white-space: nowrap;
        }

        @media (min-width: 768px) {
          .mv-subtitle-box {
            max-width: 900px;
          }

          .mv-subtitle-copy {
            font-size: 30px !important;
            line-height: 1.5;
          }
        }

        /* =========================================================
           Final visual alignment fixes for CMS deployment
           ========================================================= */

        /* Mobile hamburger icon: center the three lines within the button. */
        #mobile-menu-btn .site-icon {
          transform: translateY(1px);
        }

        /* Benefits icons: use the local filled SVGs at a compact, consistent size. */
        #about h4 > .site-icon {
          width: 1.125rem;
          height: 1.125rem;
          flex: 0 0 1.125rem;
          vertical-align: middle;
        }

        /* Qualification icon: align with the heading text. */
        #apply .comic-box.mb-8 > h3 > .site-icon {
          width: 1.125rem;
          height: 1.125rem;
          flex: 0 0 1.125rem;
          vertical-align: middle;
        }

        /* Restore the colored top borders overridden by the base .comic-box border. */
        #about .comic-box.border-t-sb-navy {
          border-top-width: 8px !important;
          border-top-color: #0A2540 !important;
        }

        #about .comic-box.border-t-sb-blue {
          border-top-width: 8px !important;
          border-top-color: #004098 !important;
        }

        #about .comic-box.border-t-sb-value {
          border-top-width: 8px !important;
          border-top-color: #57A2D8 !important;
        }

        /* Community participation CTA: red top border. */
        #community-join {
          border-top-width: 8px !important;
          border-top-color: #FF3B30 !important;
        }

        /* Core management participation CTA: blue top border. */
        #apply .comic-box.border-t-sb-blue {
          border-top-width: 8px !important;
          border-top-color: #004098 !important;
        }

        /* =========================================================
           SP event carousel edge clip
           Clip the track edges so neighboring card borders cannot peek
           into the visible area. This does not change the flex layout,
           card width, scroll position, or carousel calculations.
           ========================================================= */
        @media (max-width: 767px) {
          #event-carousel-track {
            overflow-x: hidden;
            clip-path: inset(0 12px 0 12px);
          }
        }