/* CSS Variables & Reset */
:root {
    --color-primary: #895b00;
    /* Text Color */
    --color-accent: #895b00;
    /* Accent Color (Same as text) */
    --color-accent-secondary: #caab5d;
    /* Base Emphasis */

    --color-bg-body: #e0dcbd;
    /* Base Color */
    --color-bg-secondary: #fefdf5;
    /* Slightly lighter for contrast sections if needed, or stick to base? Let's use a very light version of base or white for cards */
    --color-white: #ffffff;
    --color-placeholder: #dddddd;

    --font-base: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;

    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 32px;
    --spacing-lg: 60px;
    --spacing-xl: 100px;
}

/* Scoped Reset & Base Styles */
.feature-solo-scope * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
}

.feature-solo-scope {
    font-family: var(--font-base);
    color: var(--color-primary);
    background-color: var(--color-bg-body);
    line-height: 1.8;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    /* Ensure internal links don't inherit weird theme styles */
}

/* Scoped anchor styles to avoid affecting theme global links */
.feature-solo-scope a {
    text-decoration: none;
    transition: opacity 0.3s;
}

.feature-solo-scope a:hover {
    opacity: 0.7;
}

.feature-solo-scope img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* Utilities */
/* Global Frame Lines (BEAMS Style) */
.page_frame_left,
.page_frame_right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-primary);
    z-index: 100;
    pointer-events: none;
}

.page_frame_left {
    left: 70px;
}

.page_frame_right {
    right: 70px;
}

.container {
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 100px;
}

/* Visibility helpers with higher specificity to override theme styles */
.feature-solo-scope .sp-only {
    display: none;
}

.feature-solo-scope .pc-only {
    display: block;
}

.feature-solo-scope .sp-svg-only {
    display: none;
}

.section-header .section-subtitle {
    text-align: center;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .feature-solo-scope .sp-only {
        display: block;
    }

    /* Ensure desktop SVG stays visible until 630px */
    .feature-solo-scope .pc-only {
        display: block !important;
    }

    /* Hide side labels on mobile if space is tight, or adjust */
    .technical-label-left,
    .technical-label-right {
        display: none;
    }
}

/* Technical Side Labels */
.technical-label-left,
.technical-label-right {
    
    position: fixed;
    top: 63%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    opacity: 0.6;
    z-index: 100;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* or sideways */
    pointer-events: none;
}

.technical-label-left {
    left: 20px;
    transform: translateY(-50%) rotate(180deg);
    /* Rotate to read bottom-to-top if desired, or standard vertical */
}

.technical-label-right {
    right: 20px;
}

.placeholder-img {
    background-color: var(--color-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-weight: bold;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Header */
.site-header {
    padding: var(--spacing-sm) 0;
    text-align: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Sections */
.section {
    padding: var(--spacing-xl) 0;
    position: relative;
    /* Ensure section content sits above lines if needed */
}

/* Technical Divider Line with Cross Marks */
.section-divider-line {
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    position: relative;
    margin: 0;
}

/* Cross marks at intersection with vertical frame (40px) */
.section-divider-line::before,
.section-divider-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 1px;
    background-color: var(--color-primary);
    /* Horizontal part of cross - actually the line itself is horizontal.
       We need the VERTICAL part of the cross.
    */
    width: 1px;
    height: 10px;
    transform: translateY(-50%);
}

.section-divider-line::before {
    left: 40px;
}

.section-divider-line::after {
    right: 40px;
}

/* Horizontal part of cross is the line itself, but to make it a distinct '+' 
   we might want a small horizontal dash crossing the vertical frame?
   Visual: The vertical frame is a line. The divider is a line. They cross.
   A '+' mark implies emphasizing that intersection.
   The vertical frame is Fixed. The divider is Static (scrolls).
   When the divider scrolls past a certain point, it forms a cross with the fixed line.
   Technically, we don't need to add anything if the lines just cross.
   But if we want a PERMANENT '+' on the divider line that travels with it, 
   it creates a "tick mark" effect.
   Let's create a "Tick" mark (vertical dash) on the horizontal line at 40px.
*/

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

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 3.2rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-accent);
    position: relative;
    display: inline-block;
}

.section-subtitle {
    font-size: 0.9rem;
    color: #666;
}

/* Hero Section - Magazine Style */
.hero-section {
    padding: var(--spacing-md) 0 var(--spacing-md);
    background-color: var(--color-bg-body);
}

/* Adjust Hero to be fully wide within the frame */
.hero-container {
    max-width: calc(100% - 220px);
    /* Match frame lines gap exactly */
    margin: 0 auto;
    padding: 0;
}

a:visited {
    color: #895b00;
}

.hero_visual_frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 770px;
    border: 1px solid var(--color-primary);
    /* Thin border if needed, or remove based on image */
}

/* Slider */
.hero_slide_list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero_slide_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.hero_slide_item.active {
    opacity: 1;
    z-index: 1;
}

.hero_slide_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero_copy_vertical {
    position: absolute;
    top: 7%;
    right: 4%;
    z-index: 10;
    writing-mode: vertical-rl;
    text-orientation: upright;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
}

.hero_copy_vertical .copy_line {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin: 0 0 0 -1px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1.5rem 1.1rem 0rem;
    height: fit-content;
    max-height: 100%;
}

/* Previous comments removed for clarity */


/* Bottom Bar */
.hero_bottom_bar {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 10;
    width: auto;
    border: 1px solid var(--color-primary);
    /* Main border around the whole block */
    background-color: var(--color-bg-body);
}

/* Title Group (Left part) */
.hero_title_group {
    padding: 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--color-primary);
    /* Divider line */
    min-width: 350px;
}

.hero_subtitle_row {
    display: flex;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-primary);
    /* Separator line inside left box */
    color: var(--color-primary);
}

.deco-line {
    display: block;
    width: 30px;
    height: 1px;
    background-color: var(--color-primary);
    position: relative;
}

/* Double line effect for deco-line from image? Image shows 3 lines icon style.
   Let's simulate the 'hamburger' menu icon style lines if needed, or just simple lines.
   The image shows: == Text == style.
*/
.deco-line::before,
.deco-line::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
}

.deco-line::before {
    top: -4px;
}

.deco-line::after {
    top: 4px;
}


.hero_subtitle {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.hero_main_title {
    font-size: 3.5rem;
font-family: "Roboto Condensed", sans-serif;

    letter-spacing: 0.15em;
    padding: 10px 0 5px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    text-align: center;
    margin: 0;
}

/* Tag Group (Right part "For ONE ROOM") */
.hero_tag_group {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Left align content inside right box */
    min-width: 180px;
}

.tag_sub {
    font-family: "Brush Script MT", cursive;
    /* Handwriting style for "For" */
    font-size: 2.0rem;
    font-weight: 400;
    /* Script fonts usually don't need bold */
    color: #f6ad3c;
    /* Orange accent from image */
    line-height: 1;
    margin-bottom: -5px;
    transform: rotate(-10deg) translate(-5px, 5px);
    /* Tilted slightly */
}

.tag_main {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
    .hero_visual_frame {
        aspect-ratio: auto;
        height: 500px;
    }

    .hero_copy_vertical {
        right: 0;
        top: 0;
        padding: 1.5rem 0.8rem;
    }

    .hero_copy_vertical p {
        font-size: 1.1rem;
    }

    .hero_bottom_bar {
        bottom: 0;
        left: 0;
        width: 100%;
        border: none;
        border-top: 1px solid var(--color-primary);
    }





    .hero_tag_group {
        width: 100%;
        flex-direction: row;
        align-items: center;
        padding: 1rem;
        gap: 1rem;
    }

    .tag_main {
        font-size: 1.2rem;
    }

    .tag_sub {
        transform: none;
        margin: 0;
    }
}

/* 630px Mobile layout for Hero */
@media (max-width: 630px) {
    .hero-container {
        max-width: calc(100% - 100px);
        /* Adjust for side frames */
    }

    .hero_bottom_bar {
        flex-direction: column;
        width: 100%;
        border-right: 1px solid var(--color-primary);
        /* Close the box */
    }

    .hero_title_group {
        border-right: none;
        border-bottom: 1px solid var(--color-primary);
        padding: 1rem;
        min-width: unset;
    }

    .hero_tag_group {
        width: 100%;
        padding: 1rem;
        min-width: unset;
        justify-content: center;
        background: #895b00;
    }

    /* Toggle images correctly at 630px */
    .feature-solo-scope .pc-only {
        display: none !important;
    }

    .feature-solo-scope .sp-svg-only {
        display: block !important;
    }
}

/* Section 1: Categories & Product Grid */
.category-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.cat-btn {
    background: none;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    padding: 10px 24px;
    border-radius: 50px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.cat-btn:hover,
.cat-btn.active {
    background-color: var(--color-accent);
    color: var(--color-white);
}


.product-grid {
    display: none;
    /* Hidden by default */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-grid.active {
    display: grid;
    /* Clicked active grid */
    opacity: 1;
    transform: translateY(0);
}


.product-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s;
}

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

.product-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Force square aspect ratio */
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-sm);
    object-fit: cover;
    /* Ensure image covers the square area */
}

.product-name {
    font-size: 1rem;
    margin-bottom: 4px;
}

.product-price {
    color: var(--color-accent);
    font-weight: bold;
}

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

.mt-4 {
    margin-top: 32px;
}

.btn {
    display: inline-block;
    padding: 14px 40px;
    background-color: var(--color-accent);
    color: white;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(230, 103, 65, 0.3);
}

/* Section 2: Layout Guide */
.layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.layout-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
}

.layout-img {
    flex: 0 0 40%;
    height: 200px;
}

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

.layout-text {
    flex: 1;
}

.layout-name {
    font-size: 2.5rem;
    color: #fca800;
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ja-name {
    font-size: 1.5rem;
    color: #999;
}

/* Section 3: Must Buy */
.mustbuy-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.mustbuy-item {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.mustbuy-item.reverse {
    flex-direction: row-reverse;
}

.mustbuy-visual {
    flex: 1;
    height: 300px;
}

.mustbuy-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mustbuy-content {
    flex: 1;
}

.mustbuy-head {
    font-size: 2.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
    color: var(--color-primary);
}

.text-link {
    color: var(--color-accent);
    font-weight: bold;
    border-bottom: 1px solid var(--color-accent);
    display: inline-block;
    margin-top: var(--spacing-sm);
}

/* Section 4: Fail Proof */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.qa-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.qa-img {
    height: 200px;
    border-radius: 0;
}

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

.qa-content {
    padding: var(--spacing-md);
}

.qa-tag {
    display: inline-block;
    background-color: #eee;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
    color: #666;
}

.qa-content h4 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.9rem;
    font-weight: bold;
    color: #fca800;
}

.center-btn .btn-primary {
    color: #fff;
}

/* Background fix for the scoped container to ensure it fills the space if theme body has different color */
.feature-solo-scope {
    position: relative;
    overflow: hidden;
    /* Contain side frames if necessary, though they are fixed */
}

/* Header & Footer Adjustment - We only bring them to front if they exist inside OUR scope 
   But usually they are global. To stay safe, we only keep the z-index fix if it's 
   absolutely necessary for the lines. However, to avoid "changing style", 
   let's remove the broad header/footer selector and target specifically where lines cross.
*/

/* If frame lines need to go UNDER the global header/footer, we can give global header/footer a z-index 
   without changing their other styles. 
   But the user said they don't want style.css to change header/footer styles.
   So let's minimize global overrides.
*/

/* Only apply z-index to bring global header/footer forward without changing layout */
header,
#header,
.site-header,
footer,
#footer,
.site-footer {
    position: relative;
    z-index: 500;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

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

#footer_box {
    max-width: 1200px;
}

/* Responsive */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 40px;
        --spacing-xl: 60px;
    }

    /* Force 2 columns for product grid on mobile */
    .product-grid,
    .product-grid.active {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        /* Smaller gap for mobile */
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-image-placeholder {
        height: 250px;
    }

    .layout-item {
        flex-direction: column;
    }

    .layout-img {
        width: 100%;
        height: 180px;
    }

    .mustbuy-item,
    .mustbuy-item.reverse {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .mustbuy-visual {
        width: 100%;
        height: 200px;
    }

    .qa-grid {
        grid-template-columns: 1fr;
    }

    .page_frame_left {
        left: 15px;
    }

    .page_frame_right {
        right: 15px;
    }

    .container {
        padding: 0 30px;
    }

    .hero-container {
        max-width: calc(100% - 70px);
    }

    .hero_tag_group img {
        max-width: 40%;
    }

    .hero_main_title {
    font-size: 2.8rem;
    }

    .hero_copy_vertical .copy_line {
    font-size: 1.5rem;
    padding: 1.2rem 0.7rem 0rem;
    }

        .hero_copy_vertical {
        right: 6px;
        }


        .hero_slide_item {
    top: -80px;
        }

        .hero-section {
    padding: var(--spacing-md) 0 0;
        }

    .section-title {
text-align: center;
        line-height: 3rem;
        font-size: 2.5rem;
    }

.product-card {
    padding: 10px;
}   

    .product-grid, .product-grid.active {
        gap: 10px;
    }
.section p {
    font-size: 1.4rem;
}

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

.placeholder-img {
    background-color: #fff;
}

}