:root {
    /* Colors - Webdeki Style */
    --primary-color: #0056b3;
    /* Slightly deeper blue */
    --primary-gradient: linear-gradient(135deg, #0056b3 0%, #007cd8 100%);
    --secondary-color: #f7f9fc;
    /* Very light blue-grey for backgrounds */
    --accent-color: #ffcc00;
    /* Vivid yellow for CTA */
    --accent-hover: #ffdb4d;
    --text-color: #333333;
    --text-light: #666666;
    --white: #ffffff;

    /* Shadows - Premium Depth */
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px -10px rgba(0, 86, 179, 0.15);
    /* Blue-tinted shadow */
    --shadow-lg: 0 20px 40px -10px rgba(0, 86, 179, 0.25);
    --shadow-float: 0 15px 35px rgba(0, 0, 0, 0.1);

    /* Typography */
    --font-main: 'Noto Sans JP', sans-serif;
    --header-height: 80px;
}

/* Reset & Base */
html {
    scroll-behavior: smooth;
    font-size: 16px;
    box-sizing: border-box;
    /* IMPORTANT */
}

*,
*:before,
*:after {
    box-sizing: inherit;
    /* IMPORTANT */
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.05em;
    /* More breathing room */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

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

/* Utilities */
.container {
    max-width: 1280px;
    /* Wider container */
    margin: 0 auto;
    padding: 0 25px;
    position: relative;
    z-index: 2;
}

.text-center {
    text-align: center;
}

/* Add spacing for About section content below hero image */
.hero-devices+.text-center {
    margin-top: 100px;
}

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

.text-accent {
    color: var(--accent-color);
}

.bg-light {
    background-color: var(--secondary-color);
}

.section-padding {
    padding: 100px 0;
    position: relative;
}

/* More padding */

/* Decorations (Shapes) */
.shape-bg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-accent {
    background-color: var(--accent-color);
    color: #333;
    /* Dark text on yellow for readability */
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);
}

.btn-accent:hover {
    background-color: var(--accent-hover);
}

.btn-white {
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

/* Modern Card */
.card {
    background: var(--white);
    border-radius: 20px;
    padding: 50px 30px;
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    z-index: 1;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

/* Header */
.header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.4rem;
    /* Adjusted for space */
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1001;
    /* Above mobile menu */
}

.logo span {
    background: var(--accent-color);
    color: #333;
    padding: 2px 6px;
    font-size: 0.7rem;
    border-radius: 4px;
    transform: rotate(-5deg);
}

.nav-menu {
    display: flex;
    gap: 32px;
    /* Reduced gap for more items */
    align-items: center;
}

.nav-link {
    font-weight: 700;
    position: relative;
    padding: 10px 0;
    font-size: 0.95rem;
    /* Adjusted size */
    color: var(--text-color);
}

.nav-link::after {
    content: '';
    position: absolute;
\
.nav-menu li:last-child {\
    margin-left: 15px;\
}
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent-color);
    transition: width 0.3s;
    border-radius: 2px;
}

.nav-link:hover::after {
    width: 100%;
}

/* Hamburger & Mobile Menu */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1001;
    margin-left: auto;
    /* Push to right in flex container */
}

.hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 0px;
}

.hamburger span:nth-child(2) {
    top: 10px;
}

.hamburger span:nth-child(3) {
    top: 20px;
}

/* Hamburger Active State */
.hamburger.active span:nth-child(1) {
    top: 10px;
    transform: rotate(135deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.hamburger.active span:nth-child(3) {
    top: 10px;
    transform: rotate(-135deg);
}

/* Hero Section - Redesign (Blue) */
.hero {
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 100px;
    background: linear-gradient(135deg, #0060ff 0%, #00b0ff 100%);
    /* Vivid Blue Gradient */
    position: relative;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

/* Dot Pattern Overlay - Reset */
/* Dot Pattern Overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 30px 30px;
    /* Spacing of dots */
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Anti-From Slogan - Adjusted for Blue BG */
.hero-anti-from {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 40px;
    color: #fff;
    /* White text */
    line-height: 1.4;
    display: inline-block;

    background: transparent;
    /* Clear background */
    padding: 20px 50px;
    border-radius: 60px;
    border: 3px solid #fff;
    /* White border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: rotate(0deg);
    /* Straight */
    max-width: 90%;
}

.hero-anti-from .highlight-text {
    color: #ffcc00;
    /* Yellow highlight */
    font-size: 1.1em;
    position: relative;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: transparent;
}

/* Price Display */
.hero-price-area {
    margin-bottom: 20px;
}

.hero-tax-note {
    font-size: 1rem;
    margin-bottom: 5px;
    opacity: 0.9;
}

.hero-price-main {
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    color: #fff;
    /* White text */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.hero-price-prefix {
    font-size: 2rem;
}

.hero-price-val {
    font-size: 6rem;
    letter-spacing: -0.05em;
    font-family: 'Outfit', sans-serif;
}

.hero-price-suffix {
    font-size: 2rem;
}

.hero-tagline {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 40px;
}

/* Gradient CTA Button */
.btn-hero-gradient {
    background: linear-gradient(90deg, #ff0055 0%, #ffaa00 100%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 20px 80px;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(255, 0, 85, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-hero-gradient:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(255, 0, 85, 0.6);
}

.btn-hero-gradient::after {
    content: '>';
    font-weight: 900;
    margin-left: 10px;
}

@media (max-width: 768px) {
    .hero-price-val {
        font-size: 4rem;
    }

    .hero-price-prefix,
    .hero-price-suffix {
        font-size: 1.2rem;
    }

    .btn-hero-gradient {
        padding: 15px 40px;
        font-size: 1.2rem;
    }

    .hero-pills {
        gap: 10px;
    }

    .hero-pill {
        padding: 6px 15px;
        font-size: 0.9rem;
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

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

/* Wave Divider */
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(130% + 1.3px);
    height: 100px;
}

.wave-divider .shape-fill {
    fill: #ffffff;
}

/* Section specific */
.section-title {
    font-size: 2.2rem;
    margin-bottom: 70px;
    position: relative;
    display: inline-block;
    z-index: 10;
}

/* Decorative title underline */
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 6px;
    background: var(--accent-color);
    margin: 20px auto 0;
    border-radius: 3px;
    opacity: 0.8;
}

/* English decorative text behind title */
.section-title::before {
    content: attr(data-en);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    color: rgba(0, 86, 179, 0.04);
    font-weight: 900;
    white-space: nowrap;
    z-index: -1;
    font-family: sans-serif;
}

/* Comparison Section Refined */
.comparison-container {
    overflow-x: auto;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    background: #fff;
    padding: 10px;
    /* Gap around table */
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    /* Cleaner borders */
    min-width: 600px;
    /* Ensure logical width on mobile */
}

.comparison-table th,
.comparison-table td {
    padding: 25px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* Header Styling */
.comparison-table th {
    background: #fdfdfd;
    font-weight: 700;
    color: #555;
    font-size: 1.1rem;
    border-top: none;
}

/* Feature Column */
.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    padding-left: 40px;
    font-weight: 700;
    color: #333;
    width: 20%;
}

/* WebExpress Column (Highlight) */
.comparison-table .highlight-header {
    background: #fff;
    /* White to pop against bg */
    color: #0060ff;
    font-size: 1.4rem;
    position: relative;
    border-top: 5px solid #0060ff;
    /* Top highlight accent */
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -5px 20px rgba(0, 96, 255, 0.1);
    z-index: 2;
}

.comparison-table .highlight-col {
    background-color: #f0f7ff;
    /* Very subtle blue */
    font-weight: 900;
    color: #0060ff;
    font-size: 1.3rem;
    border-bottom: 1px solid #e0efff;
    position: relative;
    z-index: 2;
}

/* Last Row Rounded */
.comparison-table tr:last-child .highlight-col {
    border-radius: 0 0 10px 10px;
    border-bottom: none;
}

/* Competitors */
.comparison-table td:nth-child(3),
.comparison-table td:nth-child(4) {
    color: #888;
    background: #fafafa;
    /* Subtle gray for others */
}


.comparison-table .highlight-header {
    background: var(--accent-color);
    color: #333;
    font-size: 1.2rem;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Scroll Animation */
.scroll-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.scroll-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
.footer {
    background: #1a2533;
    /* Darker navy */
    color: var(--white);
    padding: 80px 0 30px;
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 900px) {

    /* Breakpoint for 7+ items */
    .header-inner {
        position: relative;
        /* justify-content: space-between (default flex) or flex-start */
    }

    .hamburger {
        display: block;
        /* No absolute positioning, use flex auto margin */
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000;
        gap: 30px;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.2rem;
    }

    .hero {
        text-align: center;
        padding-top: 120px;
        padding-bottom: 100px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .card {
        padding: 30px 20px;
    }
}


/* Wave Divider */
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
    /* Wave on top */
}

/* ... svg styles ... */

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
    /* Reduced height for subtlety */
}

.wave-divider .shape-fill {
    fill: #FFFFFF;
}

/* Device Mockup */
.hero-devices {
    margin-top: 40px;
    transform: translateY(30px);
    /* Push down into the wave */
    position: relative;
    z-index: 1;
    /* Behind wave (wave is z-index: 3) */
}

.hero-img-devices {
    max-width: 100%;
    height: auto;
    width: 600px;
    /* Limit max width on Desktop */
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    /* Soft shadow for 3D effect */
    animation: float 6s ease-in-out infinite;
    mix-blend-mode: multiply;
    /* Blends white bg with blue hero */
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

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

@media (max-width: 768px) {
    .wave-divider svg {
        height: 40px;
    }

    .hero-img-devices {
        width: 90%;
    }
}

/* Text Marker Effect */
.marker-yellow {
    background: linear-gradient(transparent 60%, rgba(255, 230, 0, 0.8) 60%);
    font-weight: 900;
    padding: 0 4px;
}

/* Worries Section */
/* Worries Section */
.worries-area {
    margin: 40px auto 80px;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Increased gap for pop-outs */
    padding: 0 20px;
}

.worry-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    min-height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: visible;
    /* Allow image to pop out */
}

.worry-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.worry-img {
    position: absolute;
    bottom: -15px;
    /* Pop out bottom */
    width: 140px;
    /* Larger image */
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1)) contrast(1.1) brightness(1.05);
    z-index: 1;
    mix-blend-mode: multiply;
    /* Make white background transparent */
}

/* Specific Layouts */
.worry-card.layout-left .worry-img {
    left: -10px;
    /* Pop out left */
    right: auto;
}

.worry-card.layout-right .worry-img {
    right: -10px;
    /* Pop out right */
    left: auto;
}

/* Adjust padding based on image position */
.worry-card.layout-left {
    padding-left: 100px;
    padding-right: 30px;
}

.worry-card.layout-right {
    padding-right: 100px;
    padding-left: 30px;
}

.worry-card::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 20px;
    /* Always left for quote */
    font-size: 80px;
    line-height: 1;
    color: #ffd700;
    font-family: serif;
    font-weight: 900;
    z-index: 0;
    opacity: 0.5;
}

.worry-card strong {
    color: #0060ff;
    /* Blue highlight */
    display: block;
    font-size: 1.5rem;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .worries-area {
        gap: 30px;
    }

    .worry-card {
        flex-direction: column-reverse;
        /* Image on top (visually) or bottom? Let's keep image at bottom but static position */
        text-align: center;
        /* Center everything */
        padding: 30px 20px 40px;
        /* Add bottom padding for image if absolute, or just normal padding if static */
        /* Let's make image static for mobile for stability */
        justify-content: flex-start;
        align-items: center;
        min-height: auto;
    }

    /* Reset specific layouts */
    .worry-card.layout-left,
    .worry-card.layout-right {
        padding: 30px 20px;
        /* Standard padding */
    }

    .worry-img {
        position: static;
        /* No longer absolute popping out */
        width: 100px;
        margin-top: 20px;
        transform: none;
    }

    .worry-card.layout-left .worry-img,
    .worry-card.layout-right .worry-img {
        left: auto;
        right: auto;
    }

    .worry-card strong {
        font-size: 1.3rem;
    }
}

@keyframes marquee  {
          0%  {
                  transform:  translateX(0);
              
    }

            100%  {
                  transform:  translateX(calc(-50% - 20px));
                  /* Move by half width (original set) + gap */      
    }

      
}

    /* Infinite Marquee */  .marquee-container  {
          overflow:  hidden;
          padding:  40px 0;
          background:  #fdfdfd;
          position:  relative;
          width:  100%;
      
}

    .marquee-content  {
          display:  flex;
          gap:  40px;
          width:  max-content;
          animation:  marquee 30s linear infinite;
      
}

    .marquee-item  {
          width:  200px;
          /* Adjust size of mobile screens */      flex-shrink:  0;
          border-radius:  20px;
          overflow:  hidden;
          box-shadow:  0 10px 20px rgba(0,  0,  0,  0.1);
          transition:  transform 0.3s ease;
      
}

    .marquee-item img  {
          width:  100%;
          height:  auto;
          display:  block;
      
}

    .marquee-item:hover  {
          transform:  translateY(-10px);
      
}

  @keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 20px));
    }
}

.marquee-container {
    overflow: hidden;
    padding: 40px 0;
    background: #fdfdfd;
    position: relative;
    width: 100%;
}

.marquee-content {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee-item {
    width: 200px;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.marquee-item img {
    width: 100%;
    height: auto;
    display: block;
}

.marquee-item:hover {
    transform: translateY(-10px);
}

/* Service Highlights Section (Refined Card) */
.service-highlights-area {
    padding: 80px 20px;
    background: #fdfdfd;
    text-align: center;
}

.service-card-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    /* Wraps on mobile */
    max-width: 1280px;
    margin: 50px auto 0;
    width: 100%;
    /* Ensure full width available */
}

/* Ensure no parent container is restricting width too much */
.service-highlights-area {
    padding: 80px 20px;
    background: #fdfdfd;
    text-align: center;
    width: 100%;
    margin: 0;
}

.service-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    width: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    position: relative;
    border-top: 6px solid #0060ff;
    /* Default Blue */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-card.border-green {
    border-color: #00d4a0;
}

.service-card.border-yellow {
    border-color: #ffd700;
}

.service-icon-img {
    width: 180px;
    /* Large illustration */
    height: auto;
    margin-bottom: 30px;
    display: block;
}

/* Titles */
.service-sub-title {
    font-size: 1rem;
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-main-title {
    font-size: 1.1rem;
    color: #333;
    font-weight: 900;
    line-height: 1.6;
    margin-bottom: 30px;
    height: 3.2em;
    /* Ensure alignment */
}

/* Buttons */
.btn-service {
    width: 100%;
    background: #0088ff;
    background: linear-gradient(135deg, #0088ff 0%, #0060ff 100%);
    color: #fff;
    padding: 15px 0;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 96, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-service:hover {
    box-shadow: 0 8px 25px rgba(0, 96, 255, 0.4);
    transform: translateY(-2px);
}

.btn-service span {
    margin-left: 10px;
    font-size: 1.2rem;
}

/* Divider under section title */
.section-divider {
    width: 40px;
    height: 4px;
    background: #0088ff;
    margin: 10px auto 40px;
    border-radius: 2px;
}

/* AI Explanation Section */
.ai-explanation-area {
    padding: 80px 20px;
    background: #f4f6f9;
    text-align: center;
}

.ai-illustration-container {
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 20px;
}

.ai-illustration-img {
    width: 100%;
    height: auto;
    display: block;
}

.ai-illustration-bubble {
    position: absolute;
    top: -20px;
    right: -20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    font-weight: 900;
    font-size: 1.2rem;
    color: #333;
    border: 3px solid #0060ff;
}

.ai-explanation-text {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.ai-explanation-title {
    font-size: 1.8rem;
    color: #0060ff;
    font-weight: 900;
    margin-bottom: 20px;
}

.ai-explanation-desc {
    font-size: 1.1rem;
    color: #555;
    line-height: 2;
    font-weight: 500;
}

/* Contact Banner Section */
.contact-banner {
    background: #0088ff;
    background-image: radial-gradient(#60b0ff 1px, transparent 1px);
    background-size: 20px 20px;
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.contact-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-left {
    flex: 1;
    padding-right: 20px;
}

.contact-title {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-desc {
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 1.6;
    opacity: 0.9;
}

.contact-phone-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.contact-phone-icon {
    font-size: 3rem;
}

.contact-phone-number {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
}

.contact-btn-area {
    display: flex;
    gap: 20px;
}

.btn-contact-mail {
    background: #ffcc00;
    color: #333;
    font-weight: 900;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 0 #cc9900;
    transition: transform 0.1s;
}

.btn-contact-mail:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #cc9900;
}

.operator-img-container {
    width: 400px;
    height: 400px;
    position: absolute;
    bottom: -60px;
    right: -100px;
    z-index: 1;
    pointer-events: none;
}

.operator-img {
    width: 100%;
    height: auto;
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
        text-align: center;
    }

    .operator-img-container {
        display: none;
        /* Hide on mobile to save space */
    }

    .contact-phone-number {
        font-size: 2.5rem;
    }
}

/* Comparison Section (Dark Stylish) */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    margin: 0 auto;
    background: #222;
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.comparison-table th,
.comparison-table td {
    padding: 20px 15px;
    border-bottom: 1px solid #444;
    text-align: center;
    vertical-align: middle;
}

.comparison-table th {
    background: #111;
    font-weight: 700;
    color: #aaa;
    border-bottom: 2px solid #555;
    font-size: 0.95rem;
}

/* Specific Columns */
.comparison-table th:nth-child(1) {
    /* Feature Label */
    width: 15%;
    font-size: 0.9rem;
    background: #1a1a1a;
    color: #e0e0e0;
}

.comparison-table td:nth-child(1) {
    /* Feature Label Cells */
    font-weight: 700;
    background: #1a1a1a;
    color: #e0e0e0;
}

/* WebExpress55 Column (Highlight) */
.comparison-table th:nth-child(2) {
    background: #0060ff;
    color: #fff;
    font-size: 1.1rem;
    border-bottom: 2px solid #0050d5;
}

.comparison-table td:nth-child(2) {
    background: rgba(0, 96, 255, 0.1);
    border-bottom: 1px solid #0050d5;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.comparison-table th:nth-child(3),
.comparison-table th:nth-child(4) {
    width: 25%;
}

.text-small {
    font-size: 0.8rem;
    display: block;
    margin-top: 5px;
    color: #bbb;
    font-weight: 400;
}

@media (max-width: 768px) {
    .table-scroll-hint {
        display: block;
        text-align: center;
        margin-bottom: 10px;
        color: #777;
    }
}

/* Comparison Table Readability Improvements */
.comparison-table th,
.comparison-table td {
    padding: 25px 20px;
    /* More spacing */
    border-bottom: 1px solid #555;
    /* Lighter border */
    font-size: 1.05rem;
    /* Larger text */
}

.comparison-table th {
    background: #111;
    color: #fff;
    /* Whiter headers */
    font-size: 1.1rem;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* WebExpress55 Column Enhancements */
.comparison-table th:nth-child(2) {
    font-size: 1.25rem;
    /* Bigger header */
    background: #0050d5;
    /* Slightly darker blue header for contrast */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.comparison-table td:nth-child(2) {
    background: rgba(0, 96, 255, 0.08);
    /* More subtle background */
    font-size: 1.2rem;
    /* Larger key numbers */
    border-left: 2px solid #0060ff;
    border-right: 2px solid #0060ff;
    position: relative;
}

/* Bottom border for the highlighted column */
.comparison-table tr:last-child td:nth-child(2) {
    border-bottom: 2px solid #0060ff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.text-small {
    color: #555;
    /* Dark gray for visibility on light bg */
    font-size: 0.85rem;
    margin-top: 5px;
    font-weight: 500;
    /* Slightly bolder */
    display: block;
}

/* Row hover effect for readability */
.comparison-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

.comparison-table tr:hover td:nth-child(2) {
    background-color: rgba(0, 96, 255, 0.15);
    /* Keep blue tint on hover */
}

/* Comparison Table Redesign (Pop-out Style) */
.comparison-table {
    width: 100%;
    border-collapse: separate;
    /* Needed for border-radius */
    border-spacing: 2px;
    /* Small gap like image */
    min-width: 800px;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    border: none;
}

.comparison-table th,
.comparison-table td {
    padding: 20px 10px;
    text-align: center;
    vertical-align: middle;
    border: none;
    /* Reset borders */
}

/* Left Sidebar Column (Yellow) */
.comparison-table tr td:first-child {
    background: #FFD700;
    /* Yellow */
    color: #333;
    font-weight: 700;
    border-radius: 5px;
    width: 15%;
}

/* Main Column (WebExpress55) - Orange Pop-out effect */
.comparison-table th:nth-child(2) {
    background: #FF6600;
    /* Bright Orange Header */
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    border-radius: 10px 10px 0 0;
    padding: 25px 10px;
    position: relative;
    top: -10px;
    /* Slight pop-up effect for header */
}

.comparison-table td:nth-child(2) {
    background: #fff;
    color: #FF6600;
    /* Orange text */
    font-weight: 900;
    font-size: 1.3rem;
    border-left: 3px solid #FF6600;
    border-right: 3px solid #FF6600;
}

.comparison-table tr:last-child td:nth-child(2) {
    border-bottom: 3px solid #FF6600;
    border-radius: 0 0 10px 10px;
}

/* Competitor Columns (Gray) */
.comparison-table th:nth-child(3),
.comparison-table th:nth-child(4) {
    background: #888;
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
}

.comparison-table td:nth-child(3),
.comparison-table td:nth-child(4) {
    background: #f5f5f5;
    color: #333;
    font-weight: 500;
    border-radius: 5px;
}

/* Remove top-left empty cell background if needed */
.comparison-table thead tr th:first-child {
    background: transparent;
}

/* Text sizing overrides */
.comparison-table td {
    font-size: 1rem;
}

.comparison-table td:nth-child(2) {
    font-size: 1.4rem;
    /* Main column bigger */
}

/* FAQ Redesign */
.faq-section {
    background-color: #eef9ff;
    background-image: radial-gradient(#d0e6f8 2px, transparent 2px);
    background-size: 30px 30px;
    padding: 80px 20px;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question {
    padding: 25px 30px;
    display: flex;
    align-items: center;
    position: relative;
}

.faq-icon-q {
    background: #0088ff;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 1.2rem;
    margin-right: 20px;
    flex-shrink: 0;
}

.faq-text {
    font-weight: 700;
    color: #333;
    font-size: 1rem;
    flex-grow: 1;
    text-align: left;
}

.faq-toggle-icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: '';
    position: absolute;
    background: #0088ff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq-toggle-icon::before {
    width: 100%;
    height: 2px;
}

.faq-toggle-icon::after {
    width: 2px;
    height: 100%;
}

.faq-item.active .faq-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 30px;
    color: #555;
    line-height: 1.6;
    text-align: left;
    padding-left: 85px;
    /* Align with text */
}

.faq-item.active .faq-answer {
    max-height: 200px;
    /* Approximate max height */
    padding-bottom: 25px;
}


/* FAQ Answer Redesign */
.faq-answer-content {
    display: flex;
    align-items: flex-start;
    padding: 20px 30px;
    border-top: 1px solid #f5f5f5;
}

.faq-icon-a {
    background: #a8dbf0;
    /* Light blue from reference */
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 1.2rem;
    margin-right: 20px;
    flex-shrink: 0;
}

.faq-answer p {
    margin: 0;
    color: #333;
    line-height: 1.8;
}

/* Override previous padding */
.faq-answer {
    padding: 0 !important;
}

/* News Section */
.news-section {
    background: #fff;
    padding: 80px 20px;
}

.news-container {
    max-width: 800px;
    margin: 0 auto;
}

.news-item {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    text-align: left;
    transition: background-color 0.3s;
}

.news-item:hover {
    background-color: #f9f9f9;
}

.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    min-width: 200px;
}

.news-category {
    border: 1px solid #0088ff;
    color: #0088ff;
    background: #fff;
    padding: 3px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-right: 15px;
    white-space: nowrap;
}

.news-date {
    color: #aaa;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

.news-title {
    color: #333;
    font-weight: 500;
    flex: 1;
    line-height: 1.6;
}

.news-title:hover {
    text-decoration: underline;
    color: #0088ff;
}

/* News Button */
.btn-news-list {
    background: linear-gradient(90deg, #0056b3 0%, #00aaff 100%);
    color: #fff;
    border: none;
    padding: 18px 80px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 10px 20px rgba(0, 136, 255, 0.3);
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-top: 50px;
}

.btn-news-list:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0, 136, 255, 0.4);
    color: #fff;
    text-decoration: none;
}

.btn-news-list::after {
    content: '>';
    margin-left: 10px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
    }

    .news-meta {
        margin-bottom: 8px;
    }
}

/* CTA Section */
.cta-section {
    position: relative;
    padding: 100px 20px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    background-color: #0088ff;
    /* Fallback */
}

.cta-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cta-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/cta-bg.png') no-repeat center center/cover;
    opacity: 0.4;
    /* Blend with blue */
    mix-blend-mode: luminosity;
    /* Make it monochromatic/blueish */
}

.cta-overlay-blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 96, 255, 0.9) 0%, rgba(0, 160, 255, 0.8) 100%);
    z-index: 1;
}

.cta-overlay-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 2;
}

.cta-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 50px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.05em;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.btn-cta {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #fff;
    color: #fff;
    font-weight: 700;
    padding: 18px 60px;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(5px);
}

.btn-cta:hover {
    background: #fff;
    color: #0060ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn-cta::after {
    content: '>';
    position: absolute;
    right: 30px;
    font-weight: 900;
    font-size: 1.2rem;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    cursor: pointer;
    transition: background 0.3s;
}

.back-to-top::before {
    content: '';
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(-135deg);
    margin-top: 6px;
}

.back-to-top:hover {
    background: #000;
}


/* Page Header (General) */
.page-header {
    background: linear-gradient(135deg, #0060ff 0%, #00b0ff 100%);
    padding: 160px 0 100px;
    /* Adjust for fixed header */
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: 30px 30px;
    pointer-events: none;
}

.page-title-en {
    font-family: 'Outfit', sans-serif;
    /* Or sans-serif if not loaded */
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 1.2rem;
    margin-bottom: 15px;
    opacity: 0.9;
    display: block;
    text-transform: uppercase;
}

.page-title-jp {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .page-header {
        padding: 140px 0 80px;
    }

    .page-title-jp {
        font-size: 2rem;
    }
}

/* Basic Services Section */
.basic-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background: #eef9ff;
    /* Light blue from reference */
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon-wrapper {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(0, 96, 255, 0.1);
}

.service-icon-svg {
    width: 40px;
    height: 40px;
    fill: #0060ff;
}

.service-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    position: relative;
    display: inline-block;
}

.service-card h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: #0060ff;
    margin: 10px auto 0;
    border-radius: 2px;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666;
    text-align: left;
    /* Per reference image usually text is left aligned if long */
}

/* Force center text if short, but description is long so maybe left or justify? Reference image shows centered text actually? Let's assume standard center for cards, adjust if needed. Reference excerpt says 'Text-align: center' for wrapper but text looks justified? I will try left aligned text for readability. */
.service-card p {
    text-align: left;
}


/* Responsive Fix for Basic Services */
.service-card {
    border-top: 5px solid #0060ff;
    /* Add top border from reference */
}

@media (max-width: 768px) {
    .basic-services-grid {
        grid-template-columns: 1fr;
        /* Force 1 column on mobile */
        gap: 20px;
    }

    .service-card {
        padding: 30px 20px;
        text-align: left;
        /* Ensure text is readable */
    }

    .service-card h3 {
        text-align: center;
        display: block;
    }
}

/* Refined Features Section */
.features-grid-refined {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.feature-card-refined {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    border-left: 5px solid #0060ff;
    /* Accent line */
    transition: transform 0.3s ease;
}

.feature-card-refined:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.feature-number {
    position: absolute;
    top: -15px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: #f0f0f0;
    z-index: 0;
    line-height: 1;
}

.feature-content {
    position: relative;
    z-index: 1;
}

.feature-card-refined h3 {
    font-size: 1.25rem;
    color: #0060ff;
    margin-bottom: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-card-refined p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}


/* Enhanced Basic Services Background */
.section-basic-services {
    background-color: #f7fbff;
    /* Very light blue */
    background-image: radial-gradient(#d0e6ff 2px, transparent 2px);
    background-size: 24px 24px;
    position: relative;
}

.section-basic-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, #f7fbff 100%);
    /* Fade edges */
    pointer-events: none;
}

/* Update cards to pop against patterned bg */
.section-basic-services .service-card {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 96, 255, 0.08);
    border: 1px solid rgba(0, 96, 255, 0.1);
    border-top: 5px solid #0060ff;
    /* Keep top border */
}
/* Blue CTA Section (Pricing Page) */
.blue-cta-section {
    background: linear-gradient(135deg, #00b0ff 0%, #0060ff 100%);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.blue-cta-section::before {
    content: '���₢���킹 CONTACT';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    line-height: 1;
    z-index: 0;
}

.blue-cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.blue-cta-content {
    flex: 1;
    max-width: 600px;
}

.blue-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
    text-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.blue-cta-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

.blue-cta-phone {
    font-size: 3.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-family: 'Outfit', sans-serif;
}

.blue-cta-phone i {
    font-size: 2.5rem;
}

.btn-cta-yellow {
    background: #ffe600;
    color: #333;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 15px 50px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s;
    text-decoration: none;
}

.btn-cta-yellow:hover {
    transform: translateY(-3px);
    background: #ffea2e;
}

.blue-cta-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-right: -50px; /* Slight overlap or push right */
}

.blue-cta-image img {
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.2));
}

@media (max-width: 900px) {
    .blue-cta-container {
        flex-direction: column;
        text-align: center;
    }
    .blue-cta-content {
        max-width: 100%;
        margin-bottom: 40px;
    }
    .blue-cta-phone {
        justify-content: center;
        font-size: 2.5rem;
    }
    .blue-cta-image {
        margin-right: 0;
        justify-content: center;
    }
    .blue-cta-image img {
        max-width: 300px;
    }
    .blue-cta-title {
        font-size: 1.8rem;
    }
}

/* Refined Options Table */
.options-table-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    background: #fff;
}

.options-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    margin-bottom: 0;
}

.options-table th {
    background: #0060ff; /* Primary Blue */
    color: #fff;
    padding: 20px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.options-table th:last-child {
    border-right: none;
}

.options-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    color: #444;
    vertical-align: middle;
}

.options-table tr:last-child td {
    border-bottom: none;
}

.options-table tr:nth-child(even) {
    background-color: #f8fbff; /* Zebra striping */
}

.options-table tr:hover {
    background-color: #f0f7ff;
}

.options-table td:nth-child(1) {
    font-weight: 700;
    color: #0060ff;
}

.options-table td:nth-child(2) {
    font-weight: 700;
    white-space: nowrap;
}

.options-table td:nth-child(3) {
    text-align: center;
    font-size: 0.9rem;
}

.options-table .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    background: #eee;
    color: #666;
}

.options-table .badge.spot {
    background: #fff4e6;
    color: #ff9900;
    border: 1px solid #ffeoc;
}

.options-table .badge.monthly {
    background: #e6f4ff;
    color: #0060ff;
    border: 1px solid #cceeff;
}


/* Usage Flow Card */
.usage-flow-section {
    padding-bottom: 50px;
}

.usage-flow-card {
    background: #fff;
    border: 3px solid #0060ff; /* Blue border */
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 10px 30px rgba(0, 96, 255, 0.1);
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.usage-flow-img {
    width: 150px;
    flex-shrink: 0;
}

.usage-flow-img img {
    width: 100%;
    height: auto;
}

.usage-flow-content {
    flex: 1;
    text-align: left;
}

.usage-flow-title {
    color: #0060ff;
    font-weight: 900;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.usage-flow-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    font-weight: 700;
}

.usage-flow-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00b0ff 0%, #0060ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 96, 255, 0.3);
    transition: transform 0.3s;
    text-decoration: none;
    flex-shrink: 0;
}

.usage-flow-btn:hover {
    transform: scale(1.1) rotate(0deg);
}

@media (max-width: 768px) {
    .usage-flow-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .usage-flow-content {
        text-align: center;
    }
    .usage-flow-btn {
        transform: rotate(90deg); /* Point down on mobile? Or just keep right? Let's keep right implies next step */
        transform: rotate(0);
    }
}


/* Header Redesign - Blue Dots */
.page-header {
    background: linear-gradient(135deg, #00b0ff 0%, #0060ff 100%);
    color: #fff;
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#ffffff 2px, transparent 2px);
    background-size: 30px 30px;
    opacity: 0.2;
    pointer-events: none;
}

.page-title-jp {
    font-size: 2.5rem;
    font-weight: 900;
    position: relative;
    z-index: 2;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.page-title-en {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}


/* Trouble Section Redesign (Cards) */
.trouble-section {
    position: relative;
    padding-top: 50px;
    padding-bottom: 80px;
}

.trouble-bg-shape {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    max-width: 1100px;
    height: 75%;
    background-color: #e0f7ff; /* Light blue */
    border-radius: 30px;
    z-index: 0;
}

.trouble-card-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.trouble-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 25px;
    box-shadow: 0 10px 40px rgba(0, 96, 255, 0.1);
    text-align: center;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trouble-card:hover {
    transform: translateY(-5px);
}

.case-badge {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0060ff; /* Primary Blue */
    display: block;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
    font-family: 'Outfit', sans-serif;
}

.trouble-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    width: 100%;
}

.trouble-img img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.trouble-desc {
    font-weight: 700;
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}


/* Solution Section Redesign */
.solution-wrapper {
    margin-top: 80px;
    position: relative;
    padding: 20px;
}

.solution-title-box {
    background: #fff;
    border: 4px solid #0060ff;
    border-radius: 50px;
    padding: 30px 40px;
    display: inline-block;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 96, 255, 0.15);
}

.solution-title-box::before {
    content: 'SOLUTION';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0060ff;
    color: #fff;
    padding: 5px 30px;
    font-weight: 900;
    border-radius: 20px;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.solution-title-main {
    font-size: 2.2rem;
    font-weight: 900;
    color: #0060ff;
    margin: 0;
    line-height: 1.4;
}

.solution-title-main .highlight {
    color: #003366;
    font-size: 2.5rem;
}


/* Text Highlight Marker */
.text-marker {
    background: linear-gradient(transparent 60%, #fff566 60%);
    font-weight: 900;
    color: #333;
    padding: 0 4px;
}


/* Reasons Section Redesign (Grid) */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.reason-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s;
}

.reason-card:hover {
    transform: translateY(-5px);
}

.reason-img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.reason-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.reason-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #0060ff;
    margin-bottom: 15px;
}

.reason-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
    flex-grow: 1;
    text-align: left;
}

.reason-btn {
    background: #0060ff;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: background 0.3s;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

.reason-btn:hover {
    background: #0040aa;
}


/* User Preference Override: Darker & Thicker Text */
:root {
    --text-color: #050505;
    --text-light: #333333;
}

body {
    font-weight: 500;
    color: var(--text-color);
}

p, li, a, td, th {
    font-weight: 500;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-weight: 800; /* Extra bold */
}

/* Ensure muted text is also darker */
small, .text-muted {
    color: #555555 !important;
}


/* CTA Section Redesign */
.cta-section-blue {
    background: linear-gradient(135deg, #0099ff 0%, #0060ff 100%);
    color: #fff;
    padding: 80px 0 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
    color: #fff !important; /* Force white over global black override */
}

.cta-desc {
    font-size: 1.0rem;
    margin-bottom: 30px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500;
}

.cta-phone-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.cta-phone-number {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: sans-serif;
    line-height: 1;
    color: #fff !important;
}

.cta-btn-yellow {
    background: #ffe600;
    color: #050505 !important;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 20px 60px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.cta-btn-yellow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    background: #fff200;
}

.cta-operator-container {
    height: 380px;
    position: relative;
    margin-top: 30px;
    z-index: 1;
    overflow: hidden;
}

.cta-operator-img {
    height: 100%;
    width: auto;
    display: block;
    margin: 0 auto;
    transform: translateY(10px);
}


/* Fix for Headers on Blue Background */
.page-header h1,
.page-header h2,
.page-header .page-title-jp,
.cta-section-blue h2,
.section-title.text-white {
    color: #ffffff !important;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


/* Refined Navigation Menu for Desktop */
@media (min-width: 769px) {
    .nav-menu {
        gap: 15px !important; /* Tighter gap */
    }
    .nav-link {
        font-size: 0.9rem !important; /* Smaller text */
        padding: 5px !important; /* Reduced touch target visual */
    }
    .header .btn-accent {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}


/* FAQ Accordion Styles */
.faq-item {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.faq-header {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
    background: #fff;
    position: relative;
}

.faq-header.active {
    background: #d0eaff;
}

.faq-q-icon {
    background: #0099ff;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-right: 15px;
}

.faq-question {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    flex-grow: 1;
    color: #333;
    margin-right: 15px;
}

.faq-toggle {
    font-size: 1.5rem;
    color: #0099ff;
    font-weight: 300;
    transition: transform 0.3s;
    width: 20px;
    text-align: center;
}

.faq-header.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
}

.faq-body-inner {
    padding: 20px 25px;
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #eee;
}

.faq-a-icon {
    background: #a6d4ff;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-right: 15px;
}

.faq-answer {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    padding-top: 5px; /* Align with icon */
}


.faq-answer {
    color: #333 !important;
    flex: 1;
}


/* Strong Override for FAQ Visibility */
.faq-body .faq-body-inner .faq-answer {
    padding: 15px 0 !important;
    color: #333 !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}


/* Fix squashed text */
.faq-answer {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}


/* Chatbot Widget */
.chatbot-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s;
}
.chatbot-icon:hover {
    transform: scale(1.1);
}
.chatbot-icon img {
    width: 30px;
    height: 30px;
    filter: invert(1);
}
.chatbot-window {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 300px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}
.chatbot-window.active {
    display: flex;
}
.chatbot-header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chatbot-close {
    cursor: pointer;
    font-size: 1.2rem;
}
.chatbot-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9;
}
.chat-message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    font-size: 0.9rem;
}
.chat-message.bot {
    background-color: #e0e0e0;
    align-self: flex-start;
    border-radius: 15px 15px 15px 0;
}
.chat-message.user {
    background-color: var(--primary-color);
    color: #fff;
    align-self: flex-end;
    margin-left: auto;
    border-radius: 15px 15px 0 15px;
}
.chatbot-input-area {
    padding: 10px;
    border-top: 1px solid #eee;
    display: flex;
}
.chatbot-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 20px;
    margin-right: 5px;
}
.chatbot-send {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Stylish Worry Card Update */
.worry-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.worry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.worry-img {
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


/* Pop-out Effect for Worry Card */
.worry-card {
    overflow: visible !important; /* Allow image to pop out */
    position: relative;
    margin-top: 30px; /* Space for pop-out */
}
.worry-img {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 140px;
    height: auto;
    transform: scale(1.1);
    transition: transform 0.3s ease;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.worry-card:hover .worry-img {
    transform: scale(1.2) translateY(-10px);
}


/* Center Hero Devices Image */
.hero-devices {
    text-align: center;
    margin-bottom: 30px;
}
.hero-img-devices {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Adjust Worry Card Image Natural Position */
.worry-img {
    bottom: 5px;
    right: 5px;
    width: 120px;
    transform: none;
}
/* Adjust hover effect to be less aggressive */
.worry-card:hover .worry-img {
    transform: scale(1.05) translateY(-5px);
}

/* Further adjusment to align to corner */
.worry-img {
    bottom: 0px;
    right: 0px;
}

/* Force alignment to the corner with !important to ensure it takes effect */
.worry-img {
    bottom: 0px !important;
    right: 0px !important;
    margin: 0 !important; /* Reset any margin */
}

/* Fix for Left Hand Sticking Out */
/* Ensure left is unset to prevent stretching or wrong alignment */
.worry-img {
    left: auto !important;
    right: 5px !important; /* Move it slightly inward as '0' was problematic */
    bottom: 0 !important;
    width: 100px !important; /* Reduce size slightly to fit better if space is tight */
}

/* Restore Alternating Layout Support */
/* layout-left: image on right (default) - handled by above rules */

/* layout-right: image on left */
.worry-card.layout-right .worry-img {
    right: auto !important;
    left: 5px !important;
    bottom: 0 !important;
    /* Ensure transformation matches the left-side positioning style */
    transform-origin: bottom left; 
}

/* Hover effect for layout-right */
.worry-card.layout-right:hover .worry-img {
    transform: scale(1.05) translateY(-5px);
}

/* User Request: Move ALL icons to LEFT and make bigger */
/* Global Override for Worry Images */
.worry-img,
.worry-card.layout-right .worry-img {
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 150px !important; /* Increased from 100px */
    transform-origin: bottom left !important;
}

/* Ensure default hover works for left-aligned images */
.worry-card:hover .worry-img,
.worry-card.layout-right:hover .worry-img {
    transform: scale(1.05) translateY(-5px) !important;
}

/* Ensure text doesn't overlap - Text needs to be on the Right for all cards now? 
   The user didn't explicitly ask to move text, but if image is on left, text should probably be on right 
   or allow overlap. For now, assuming image is "behind" or positioned such that it fits. 
   Existing layouts push text to sides. layout-left pushes text to left (conflict). 
   Let's see if we need to force text to right. */
   
/* Force text to align right slightly or at least ensure padding on left */
.worry-content {
    padding-left: 20px; /* Add some space if needed */
    z-index: 10; /* Ensure text is above image */
}

/* Fix Text Alignment Issue */
/* Force all card content to be centered, overriding any flex-start/end from layout classes */
.worry-card {
    justify-content: center !important;
    text-align: center !important;
}

.worry-content {
    text-align: center !important;
    padding-left: 0 !important; /* Remove the padding added in previous step if it causes shift */
    width: 100%; /* Ensure it spans full width */
}

/* Fix lopsided padding that was causing "center" to look left-shifted */
/* Since all images are now on the LEFT (absolute or float), we should equalize padding */
/* Actually, since image is left:0 bottom:0 absolute, we might want padding-left to clear it, 
   OR just center the text and let it overlap if that's the design (User asked for center text).
   However, 100px right padding is definitely wrong now. */

.worry-card,
.worry-card.layout-left,
.worry-card.layout-right {
    padding: 40px 20px !important; /* Reset to symmetrical padding */
    /* Add bottom padding to prevent text from overlapping the large bottom-left image too much? 
       The image is 150px width, bottom 0. 
       If text is long, it might overlap. 
       Let's add some padding-left if we want to avoid overlap, but user asked for "Center alignment".
       If I just make it symmetrical, it will be centered in the card, but might overlap the image on the left.
       For now, let's just fix the lopsidedness as requested. */
}