/* Base styles from previous version, adjusted for new design */
body {
    font-family: 'Noto Sans JP', sans-serif; /* Body text in Noto Sans JP */
    line-height: 1.8; /* Slightly increased line height for readability */
    color: #4A4A4A; /* Darker, warmer gray for text */
    background-color: #FDFCEF; /* Light cream background for washi feel */
    /* Washi paper texture background (placeholder) */
    background-image: url('https://placehold.co/1000x1000/FDFCEF/D0C0B0?text=Washi+Texture'); /* Subtle washi texture, darker text for more contrast */
    background-repeat: repeat;
    background-size: 400px; /* Adjust size for desired texture density */
    cursor: none !important;
}
/* ページ全体カスタムカーソル（chara.png） */
.custom-demo-cursor {
    position: fixed;
    left: 0; top: 0;
        width: 140px; height: 140px;
    pointer-events: none;
    z-index: 9999;
    display: none;
    opacity: 0.35;
}
.custom-demo-cursor .cursor-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 32px rgba(0,0,0,0.10);
    border: 2px solid #f59e42;
    background-image: url('./img/icon/chara.png');
    background-size: 72px 72px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.55;
}
.custom-demo-cursor-ripple {
    display: none;
}

h1, h2, h3, h4 {
    font-family: 'M PLUS Rounded 1c', sans-serif; /* Headings in M PLUS Rounded 1c */
}

/* Custom gradients and shadows for a pop and warm feel */
.gradient-hero {
    background: linear-gradient(135deg, #FFDAB9 0%, #F0E68C 100%); /* PeachPuff to Khaki */
}
.gradient-section-light {
    background: linear-gradient(135deg, #FFFBEB 0%, #FFF3CD 100%); /* Lighter warm gradient */
}
.gradient-section-dark {
    background: linear-gradient(135deg, #FFC0CB 0%, #FF8C00 100%); /* Pink to Dark Orange */
}
.gradient-footer {
    background: linear-gradient(90deg, #4A4A4A 0%, #2C3E50 100%); /* Dark gray to dark blue */
}
.gradient-cta-final {
    background: linear-gradient(135deg, #FF8C00 0%, #FF4500 100%); /* Dark Orange to Orange Red */
}
.br-sp{
    display:none;
}
/*ヘッダー*/
.logo{
    width:10rem;
    margin-right:2rem;
}
.drop-shadow-md{
    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.7)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* Enhanced shadows */
.shadow-pop {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.shadow-deep {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Animation for pop effect */
.hover-scale-pop:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}
.hover-scale-pop {
    transition: all 0.3s ease;
}

/* Specific styling for the phone mockups in the hero section */
.hero-phone-mockup {
    width: 180px; /* Adjusted width for hero phones */
    height: 360px; /* Adjusted height for hero phones */
    object-fit: cover;
    border-radius: 1.5rem; /* More rounded corners for phones */
    border: 8px solid #333; /* Phone frame */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Stronger shadow for phones */
}
.hero-phone-mockup-container {
    position: relative;
    transform: rotate(-5deg); /* Slight rotation for dynamic feel */
    margin: 0 1.5rem; /* Space between phones */
}
.hero-phone-mockup-container:nth-child(2) {
    transform: rotate(0deg) scale(1.1); /* Center phone slightly larger and straight */
    z-index: 10;
}
.hero-phone-mockup-container:nth-child(3) {
    transform: rotate(5deg); /* Slight rotation for dynamic feel */
}

/* Feature and Effect item styling */
.feature-item, .effect-item {
    background-color: #FFFFFF;
    border-radius: 1.5rem; /* More rounded corners */
    padding: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.feature-item:hover, .effect-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.feature-item img {
    border-radius: 50%; /* Circular icons */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Steps section phone mockups */
.steps-phone-mockup {
    width: 180px; /* Larger mockup for single display */
    height: 360px; /* Larger mockup for single display */
    object-fit: cover;
    border-radius: 1.5rem;
    border: 8px solid #333;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
/* Step Navigation Items */
.step-nav-item {
    width: 30px;
    height: 30px;
        width: 32px;
        height: 32px;
        background-size: 110px 110px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevent shrinking */
}
.step-nav-item:hover, .step-nav-item.active {
    background-color: #FF8C00; /* Darker orange on hover/active */
    color: white;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Dynamic Content Display Area */
#step-display-area {
    min-height: 500px; /* Ensure enough space for content */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition */
}

/* Animation classes for "ニュルっと" */
.fade-out {
    opacity: 0;
    transform: translateY(20px);
}
.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Footer specific styling */
.footer-logo {
    width: 100px;
    height: auto;
    margin-bottom: 1rem;
}

/* Problem/Solution Section Styling */
.problem-solution-section {
    background-color: #FDFCEF; /* Light cream background */
    border-radius: 2rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}
.problem-item {
    display: flex; /* Changed to flex */
    flex-direction: column; /* Stack children vertically */
    align-items: flex-start; /* Align items to the start (left) */
    margin-bottom: 2rem; /* More space between items */
    gap: 0.5rem; /* Space between problem and solution */
}
.problem-item .problem-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem; /* Space between header and description */
}
.problem-item .number-circle {
    width: 30px;
    height: 30px;
    background-color: #FFDAB9; /* Warm background */
    color: #4A4A4A;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.problem-item .problem-text-content {
    flex-grow: 1;
}
.problem-item .problem-text-content p:first-child {
    font-semibold text-lg text-gray-800; /* Problem title */
}
.problem-item .solution-box {
    background-color: #FF8C00; /* Darker orange */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    align-self: flex-end; /* Changed to flex-end for right alignment */
    /* margin-left: calc(30px + 1rem); */ /* Removed this margin */
}

/*フライヤー用CSS*/
.flyer-flex{
    display:flex;
}

/* Keyframe Animations for pop effect */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

.animated-dot {
    animation: pulse 2s infinite ease-in-out;
}

.button-pop:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.button-pop {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    /* ... モバイル向けのスタイル調整 ... */
    .logo{
        width:6rem;
        margin-right:2rem;
    }
    .company-text{
        display:none;
    }
    .hero-phone-mockup-container {
        position: relative;
        transform: rotate(-5deg);
        margin: -8em 0.5rem;
    }
    .hero-phone-mockup-container:nth-child(1) {
        transform: rotate(-14deg) scale(1) translateX(-5rem) translateY(7rem); /* Center phone slightly larger and straight */
        z-index: 10;
    }
    .hero-phone-mockup-container:nth-child(2) {
        transform: rotate(0deg) scale(1.1); /* Center phone slightly larger and straight */
        z-index: 10;
    }
    .hero-phone-mockup-container:nth-child(3) {
                transform: rotate(15deg) scale(1) translateX(1rem) translateY(-8rem); /* Slight rotation for dynamic feel */
    }
    .br-sp{
        display:block;
    }
    .flyer-flex{
        display:flex-column;
        flex-wrap: wrap;
    }
}