/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 3rem;
    background: var(--color-primary-red);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 4px;
    /* Slight roundness */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: #a00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}

.btn-blue {
    background: var(--color-primary-blue);
}

.btn-blue:hover {
    background: #004494;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
}

.btn-navy {
    background: var(--color-primary-navy);
}

.btn-navy:hover {
    background: #000051;
}

.btn-outline {
    background: transparent;
    border: 2px solid currentColor;
}

/* Hero Section */
.hero {
    height: 60vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-sub {
    height: 30vh !important;
    min-height: 300px !important;
    background-position: center center;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Overlay */
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 1rem;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Cards (Service/Feature) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: #fff;
    border-bottom: 4px solid var(--color-gray-200);
    /* Default neutral bottom border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    overflow: hidden;
}

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

.feature-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.feature-body {
    padding: 2rem;
}



/* Link Card (Image Top, Text Bottom, Icon) */
.link-card {
    display: block;
    background: #fffbf5;
    /* Light warm background */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

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

.link-card-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.link-card-body {
    padding: 1.5rem 2rem;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.link-card-label {
    font-size: 0.9rem;
    font-family: 'Teko', sans-serif;
    /* English Font */
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.link-card-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.link-card-icon {
    position: absolute;
    bottom: 50%;
    right: 2rem;
    transform: translateY(50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

/* Specific Colors */
.text-green {
    color: #006400;
}

.bg-green {
    background-color: #006400;
}

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

.bg-dark {
    background-color: #333;
}


/* Section Common */
.section {
    padding: var(--spacing-xl) 0;
}

@media (max-width: 768px) {
    .section {
        padding: 4rem 0;
    }
}

.section-head {
    margin-bottom: 4rem;
    padding-top: 2rem;
}

/* New Bold Section Title */
.section-title {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-black);
    text-transform: uppercase;
}

.section-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary-red);
    letter-spacing: 0.1em;
}

/* Remove old decorative lines */
.section-title::before,
.section-title::after,
.section-head::after {
    display: none;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 3rem;
    }
}

/* Re-thinking the structure:
   We have:
   <div class="section-head">
       <h2 class="section-title">Japanese</h2>
       <p>English</p>
   </div>
   
   If we want Japanese Left, English Right, we just need flex.
   The separator can be a border-right on the title or a pseudo element.
*/

/* Vertical Layout with Serif */
.section-head {
    display: block;
    /* Stack vertically */
    text-align: left;
    /* Alignment */
    margin-bottom: 4rem;
    padding-top: 2rem;
}

.section-head .section-title {
    /* Large English Text */
    font-family: "Times New Roman", Times, serif;
    /* Serif Font */
    font-size: 5rem;
    font-weight: 400;
    /* Regular weight often looks better for big serif */
    margin-bottom: 0;
    padding: 0;
    line-height: 1;
    color: #444;
    /* Slightly softer black, or stick to theme color */
    border: none;
    /* Remove previous border */
}

/* If the H2 contains Japanese, we might need to handle it.
   But assuming we follow the "English Big" pattern: */

.section-head p {
    /* Small Japanese Text */
    font-size: 1.2rem;
    font-family: var(--font-body);
    /* Noto Sans JP */
    font-weight: 700;
    color: #555;
    margin-top: 0.5rem;
    letter-spacing: 0.1em;
}

/* Remove previous pseudo elements */
.section-head::after {
    display: none;
}

.section-title::before,
.section-title::after {
    display: none;
}

/* Adjusting specifically for when English is P and Japanese is H2 
   (e.g., "住宅内装工事" H2, "Interior Construction" P)
   This is tricky. The CSS can't know which language is which without classes.
   For now, we'll style H2 as Big Serif and P as Small Sans.
   
   If the user has H2=Japanese, it will look like Big Serif Japanese.
   This might be acceptable or we might need to swap content in HTML later.
*/

/* Bracket Card Style (Interior "Why Choose Us") */
.bracket-card {
    display: flex;
    flex-direction: column;
    /* Vertical Layout */
    align-items: center;
    /* Center content */
    margin-bottom: 3rem;
    position: relative;
    padding: 3rem 2rem;
    /* More padding inside brackets */
}

.bracket-card-img {
    width: 100%;
    max-width: 400px;
    /* Limit width */
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    background: #eee;
    margin-right: 0;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    /* Above bracket if needed */
}

.bracket-card-content {
    flex: 1;
    position: relative;
    padding-bottom: 1rem;
}

.bracket-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.bracket-card-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1rem;
}

/* The Bracket Border Effect */
.bracket-card-inner {
    position: relative;
    width: 100%;
    /* This wraps the Right side content in visual logic */
}

/* Top Bracket */
.bracket-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100px;
    /* Start from middle of image roughly? Or wraps whole thing? Image shows wrapping whole card context. */
    left: 0;
    right: 0;
    height: 20px;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 1;
}

/* Bottom Bracket */
.bracket-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0px;
    /* Account for label gap if needed, or overlay label */
    height: 20px;
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1;
}

.bracket-card-label {
    position: absolute;
    bottom: -12px;
    /* Center on line */
    right: 20px;
    background: #fff;
    /* Mask line */
    padding: 0 1rem;
    font-family: 'Teko', sans-serif;
    font-size: 1.2rem;
    color: #333;
    z-index: 2;
    letter-spacing: 0.05em;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .bracket-card {
        flex-direction: column;
        padding: 3rem 1rem;
        /* More padding inside brackets */
    }

    .bracket-card-img {
        margin: 0 auto 1.5rem;
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 4/3;
    }

    .bracket-card::before,
    .bracket-card::after {
        left: 0;
    }

    .section-head .section-title {
        font-size: 2.8rem;
        /* Smaller on mobile */
    }
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

form {
    max-width: 600px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--color-black);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    transition: all 0.3s;
    margin-bottom: 1.5rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--color-primary-red);
    outline: none;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.1);
}

button[type="submit"] {
    background: var(--color-primary-red);
    color: white;
    border: none;
    padding: 1em 4em;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    display: block;
    margin: 1rem auto 0;
    width: 100%;
    max-width: 300px;
}



/* Service Item Card (Interior Service Menu) */
.service-item-card {
    text-align: left;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* No hover animation */
.service-item-card:hover {
    /* No change */
}

.service-item-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Square looking */
    object-fit: cover;
    margin-bottom: 0;
    /* Remove margin as we use body padding */
    display: block;
}

.service-item-body {
    padding: 1.5rem;
}

.service-item-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: var(--color-black);
}

.service-item-desc {
    font-size: 0.85rem;
    font-weight: 700;
    /* Boldish description like the names in sample? */
    color: #333;
    margin-bottom: 0.25rem;
    line-height: 1.5;
}



/* Case Study Card (Interior Page) */
.case-study-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 2rem;
    /* Increased padding */
    display: flex;
    flex-direction: column;
}

/* No hover animation requested */
.case-study-card:hover {
    /* No change */
}

.case-study-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.case-study-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.case-study-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

.case-study-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.case-tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.8rem;
    border: 1px solid #333;
    border-radius: 50px;
    /* Pill shape */
    color: #333;
    background: transparent;
    color: #333;
    background: transparent;
    display: inline-block;
}

/* About Split Layout (Company Page) */
.about-split {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 768px) {
    .about-split {
        flex-direction: row;
        align-items: flex-start;
        /* Or center? Reference image text looks top aligned or distributed. */
        justify-content: space-between;
    }

    .about-split-text {
        flex: 0 0 35%;
        /* Text takes ~35% */
        text-align: left;
        /* Ensure left align */
        padding-top: 1rem;
    }

    .about-split-img {
        flex: 1;
        /* Image takes rest */
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 4px;
    }
}

.about-split-text p {
    font-size: 1rem;
    line-height: 2.2;
    /* Generous line height */
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    text-align: justify;
    /* Justify text for clean block look */
}

/* =========================================
   Modal Styles
   ========================================= */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    padding: 2.5rem;
    position: relative;
    z-index: 2001;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}

.modal-close-btn:hover {
    color: #333;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    font-family: 'Noto Sans JP', sans-serif;
}

/* Recruit List inside Modal */
.recruit-list {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
}

.recruit-list dt {
    font-weight: 700;
    color: #333;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.recruit-list dd {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .recruit-list {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .recruit-list dt {
        border-bottom: none;
        padding-bottom: 0;
        color: #666;
        font-size: 0.9rem;
    }

    .recruit-list dd {
        padding-top: 0;
        margin-bottom: 1rem;
    }
}