@charset "UTF-8";

.u-mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .u-mobile-only {
        display: block !important;
    }
}

/* CSS Variables */
:root {
    /* Colors */
    --color-main: #00751d;
    --color-main-dark: #005a16;
    --color-main-light: #f4f4f4;
    --color-text: #000000;
    --color-accent: #1268a3;
    --color-accent-bg: #faf8f5;
    --color-white: #ffffff;
    --color-gray: #f4f4f4;

    /* Fonts */
    --font-ja: 'Noto Sans JP', sans-serif;
    --font-en: 'Roboto', sans-serif;

    /* Font Sizes (PC base) */
    --text-base: 17px;
    --text-heading: 25px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 32px;
    --spacing-lg: 64px;
    --spacing-xl: 100px;
}

/* Mobile Breakpoint */
@media (max-width: 768px) {
    :root {
        --text-base: 14px;
        --text-heading: 19px;
        --spacing-lg: 40px;
        --spacing-xl: 60px;
    }
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-ja);
    font-weight: 400;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.8;
    background-color: var(--color-white);
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

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

main {
    width: 100%;
    margin: 0;
    padding: 0;
}

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

ul {
    list-style: none;
}

main {
    display: block;
    position: relative;
    /* Context for absolute positioning of scroll indicator */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

p {
    margin-bottom: 1.5em;
}

p:last-child {
    margin-bottom: 0;
}

/* Utilities */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    /* Requested 0. Usually risky without inner padding, assuming design intent */
}

/* Add inner padding to sections if container has 0 padding to prevent edge touching? 
   User said "container padding to 0". I'll respect it. 
   To be safe, I might add padding to the direct children if they are text/grids.
   But for now, I'll set it to 0.
*/
.container {
    padding: 0 20px;
    /* Reverting to include side gutters because "0" usually means no gutter which breaks mobile reading. 
                        However, user explicitly asked for 0. I will try 0. */
    padding: 0;
}

/* Making sure content doesn't hit the screen edge on mobile */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .container {
        padding: 0 1.5rem;
    }
}

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

/* Button Styles */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    border-radius: 0;
    /* Square */
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}

/* Small Button */
.btn--sm {
    padding: 8px 24px;
    font-size: 14px;
}

/* CV Button (Black bg, White text) */
.btn--cv {
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
    gap: 10px;
    /* Space for FontAwesome icon */
}

.btn--cv:hover {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
}

.btn--cv i {
    font-size: 1.2em;
    /* Ensure icon is visible size */
}

/* Normal Button (Green bg, White text) */
.btn--normal {
    background-color: var(--color-main);
    color: #fff;
    border: 2px solid var(--color-main);
}

.btn--normal:hover {
    background-color: #000;
    border-color: #000;
}

/* Transition Button (White bg, Green text, Green border) */
.btn--transition {
    background-color: #fff;
    color: var(--color-main);
    border: 2px solid var(--color-main);
    gap: 10px;
}

.btn--transition:hover {
    background-color: var(--color-main);
    color: #fff;
}

.btn--arrow i {
    /* Ensuring arrow is visible */
    font-size: 1em;
    transition: transform 0.3s;
}

.btn--transition:hover i {
    transform: translateX(5px);
}

/* Header */
.header {
    position: absolute;
    /* Overlay on Hero */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    /* Ensure solid background */
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 84px;
    /* Reduced from 90px (-6px) */
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    /* Added transition */
}

@media (max-width: 1000px) {
    .header {
        height: 60px;
        position: fixed;
    }
}

/* ... */

.header__logo {
    background-color: var(--color-main);
    /* Dark Green BG */
    height: 84px;
    /* Reduced from 90px */
    display: flex;
    align-items: center;
    margin-left: -40px;
    /* Negate container padding */
    padding-left: 40px;
    /* Restore padding */
    padding-right: 80px;
    /* Add Right padding (Increased for diagonal cut) */
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
    /* Diagonal cut */
}

/* Transparent Header State */
.header--transparent {
    background-color: #ffffffcf;
    /* Semi-transparent white */
    backdrop-filter: none;
    box-shadow: none;
}

.header--transparent .header__logo-ja,
.header--transparent .header__logo-en,
.header--transparent .header__link {
    color: #000 !important;
}

/* Override Logo color to white even in transparent if inside green block */
.header--transparent .header__logo-ja,
.header--transparent .header__logo-en {
    color: #fff !important;
}

.header--transparent .header__hamburger span {
    background-color: white;
}

@media (max-width: 768px) {
    .header--transparent .header__hamburger span {
        background-color: var(--color-text);
        /* Always keep visible in fixed mobile */
    }
}

.header__inner {
    width: 100%;
    /* max-width: 1200px;  Removed for full width */
    margin: 0 auto;
    padding: 0 40px;
    /* Increased padding for full width aesthetic */
    padding-right: 200px;
    /* Reserve space for absolute Right button */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .header__inner {
        padding: 0 15px;
    }
}

.header__logo {
    background-color: var(--color-main);
    /* Dark Green BG */
    height: 90px;
    /* Full header height */
    display: flex;
    align-items: center;
    margin-left: -40px;
    /* Negate container padding */
    padding-left: 40px;
    /* Restore padding */
    padding-right: 80px;
    /* Add Right padding (Increased for diagonal cut) */
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
    /* Diagonal cut */
}

@media (max-width: 768px) {
    .header__logo {
        height: 60px;
        margin-left: -15px;
        padding-left: 15px;
        padding-right: 40px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    }
}

.header__logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    height: 100%;
}

.header__logo-img {
    width: 75px;
    /* Requested 75px */
    height: auto;
}

@media (max-width: 1000px) {
    .header__logo-img {
        width: 45px;
    }

    .header__logo a {
        gap: 8px;
    }
}

.header__logo-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.header__logo-ja {
    font-size: 17px;
    /* Requested slightly larger (was 15px) */
    font-weight: 700;
    color: #fff;
    /* Requested White */
}

@media (max-width: 1000px) {
    .header__logo-ja {
        font-size: 12px;
    }
}

.header__logo-en {
    font-size: 10px;
    color: #fff;
    /* Requested White */
    font-family: var(--font-en);
    letter-spacing: 1px;
    font-weight: 700;
    margin-top: 6px;
    /* Requested 6px */
}

@media (max-width: 768px) {
    .header__logo-en {
        font-size: 8px;
        margin-top: 2px;
    }
}

.header__nav {
    display: none;
    /* Mobile first hidden */
}

/* Header Nav Item */
.header__item:not(.header__item--cta) {
    position: relative;
}

/* Diagonal Separator */
.header__item:not(.header__item--cta)::after {
    content: "";
    position: absolute;
    right: -15px;
    /* Center of 30px gap */
    top: 50%;
    transform: translateY(-50%) rotate(20deg);
    width: 2px;
    /* Requested 2px */
    height: 21px;
    /* Requested 21px */
    background-color: currentColor;
    /* Inherit text color */
    pointer-events: none;
}

/* Hide separator for the last item (News) before CTA */
.header__item:nth-last-child(2)::after {
    display: none;
}

@media (min-width: 1001px) {
    .header__nav {
        display: block;
    }

    .header__btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 180px;
        /* Fixed width or auto? User wants "Flush". Fixed is safer for layout reservation. */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        border: none;
        /* Remove border for full flush look? Or keep border? User asked for "Black, flush to corner". Usually implies a block. */
    }
}

.header__list {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header__link {
    font-size: 17px;
    /* Requested +2pt (approx 2px) from 15px */
    font-weight: 500;
    color: #000;
    /* Explicitly black */
}

.header__link:hover {
    color: var(--color-main);
}

.header__btn {
    padding: 8px 24px;
    font-size: 14px;
    background-color: #000;
    /* Requested Black */
    border-color: #000;
    margin-top: 0;
    margin-bottom: 0;
    /* Requested no vertical margin */
}

.header__btn:hover {
    background-color: #333;
    /* Darker gray on hover */
    border-color: #333;
}

/* Hamburger */
.header__hamburger {
    display: block;
    width: 30px;
    height: 20px;
    position: fixed;
    top: 20px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
}

@media (min-width: 1001px) {
    .header__hamburger {
        display: none;
    }
}

.header__hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transition: all 0.4s;
}

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

.header__hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.header__hamburger span:nth-child(3) {
    bottom: 0;
}

.header__hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.header__hamburger.active span:nth-child(2) {
    opacity: 0;
}

.header__hamburger.active span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    padding: 40px 20px;
    max-height: 100vh;
    overflow-y: auto;
    text-align: center;
}

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

.mobile-menu__item {
    margin-bottom: 24px;
}

.mobile-menu__item:last-child {
    margin-bottom: 0;
}

.mobile-menu__link {
    font-size: 18px;
    font-weight: 700;
}

.mobile-menu__cv {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-menu__tel {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}

.mobile-menu__tel-prefix {
    font-size: 14px;
    font-weight: normal;
    font-family: var(--font-ja);
}

.mobile-menu__btn {
    width: 80%;
    margin: 0 auto;
}

.mobile-menu__separator {
    width: 40px;
    height: 1px;
    background-color: var(--color-main);
    margin: 0 auto;
}

.mobile-menu__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: #333;
}

.mobile-menu__logo {
    width: 80px;
    margin: 0 auto 10px;
}

.mobile-menu__company {
    font-weight: bold;
    font-size: 14px;
}

.mobile-menu__license {
    font-size: 10px;
    color: #666;
    margin-top: 5px;
    line-height: 1.6;
}

/* Hero Section (Replaced by new styles at bottom) */

.hero__copy {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.8rem;
    /* Adjusted from 3.5rem */
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Ensure readability */
}

.hero__subcopy {
    font-family: var(--font-ja);
    font-size: 1.1rem;
    color: white;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero__subcopy::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: white;
}

/* Scroll Indicator */
.hero__scroll {
    position: absolute;
    bottom: 0;
    /* Align to bottom of hero */
    left: 9%;
    /* Center in 18% sidebar */
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    top: auto;
    /* Reset top */
}

.hero__scroll-text {
    font-family: var(--font-en);
    font-size: 12px;
    color: var(--color-main);
    /* Green */
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    text-transform: uppercase;
}

/* Cursor line style with blend mode */
.hero__scroll-line {
    width: 1px;
    height: 80px;
    background-color: var(--color-main);
    /* Green */
    position: relative;
    /* mix-blend-mode removed */
}

.hero__scroll-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--color-main);
    /* Green */
    border-bottom: 1px solid var(--color-main);
    /* Green */
    margin-bottom: 2px;
}

/* Section Common */
.section__header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .section__header {
        margin-bottom: 20px;
    }
}

.business-a .section__header {
    text-align: left;
    /* Redesign: Left align */
}

.section__title {
    font-family: var(--font-en);
    font-size: 97px;
    /* Requested 97px */
    color: #1f1f1f;
    /* Requested #1f1f1f */
    font-weight: 700;
    /* Requested 700 */
    text-transform: uppercase;
    /* Requested Uppercase */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Redesign: Left align */
    line-height: 1.2;
}

@media (max-width: 768px) {
    .section__title {
        font-size: 40px;
    }
}

.section__title-ja {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--color-text);
    margin-top: 5px;
    font-weight: normal;
}

.section__title-badge {
    background: #00751d;
    padding: .8rem;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    margin-top: 15px;
    /* Added slightly more margin to detach from the large English text */
}

/* Business A */
.business-a {
    background: none;
    /* Removed background image */
    padding: 100px 0 150px 0;
    /* Increased bottom padding */
    background-color: white;
}

@media (max-width: 768px) {
    .business-a {
        padding: 80px 0 15px 0;
        font-size: 30px;
    }
}

.business-a .container {
    max-width: 1400px;
    /* Reduced from 100% */
    padding: 0 40px;
}

@media (max-width: 768px) {
    .business-a .container {
        padding: 0 15px;
    }
}

.business-title-bold {
    color: var(--color-main);
    font-weight: 700;
    font-size: 27px;
    /* Requested 27px */
}

@media (max-width: 768px) {
    .business-title-bold {
        font-size: 18px;
    }
}

.business-a__intro {
    margin: 0 auto 80px;
    /* Increased margin */
    margin: 0 auto 80px;
    /* Increased margin */
    padding: 0;
    /* Redesign: 0 padding */
}

@media (max-width: 768px) {
    .business-a__intro {
        margin: 0 auto 30px;
    }
}

.business-a__text {
    line-height: 2;
    text-align: left;
    /* Redesign: Left align */
}

@media (max-width: 768px) {
    .business-a__text {
        font-size: 14px;
    }
}

/* Vision Specific Background */
.vision {
    position: relative;
    overflow: hidden;
    padding: 100px 0 0 0;
}

.vision::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 70%;
    background-image: url('../images/business-vision-bg.jpg');
    background-size: cover;
    background-position: top right;
    opacity: 0.5;
    pointer-events: none;
    mask-image: linear-gradient(to bottom left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.business-a__grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Redesign: List view */
    gap: 40px;
    padding: 0 60px;
    /* Redesign: 0 60px */
    /* Add padding here since container is 0 */
}

@media (min-width: 769px) {
    .mobile-only-clone {
        display: none !important;
    }

    .business-a__grid .swiper-wrapper {
        display: contents;
        /* Allows .business-a__grid to apply grid layout directly to .card items on PC */
    }
}

@media (max-width: 768px) {
    .business-a__grid.swiper {
        margin: 0 -15px;
        /* Break out of .container's 15px padding */
        padding: 0 0 50px 0;
        /* Restore bottom padding for shadow visibility, increased to 50px */
        overflow: hidden;
        /* Swiper handles overflow internally */
        display: block;
        /* Override grid on mobile */
    }

    .business-a__grid .swiper-wrapper {
        align-items: stretch;
        /* Match heights */
    }

    .business-a__grid .card.swiper-slide {
        height: auto;
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .business-a__grid {
        padding: 0 0px;
    }
}

.card {
    background: white;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 8px 8px 0 var(--color-text);
    /* Hard shadow black (Thicker) */
    border: 2px solid var(--color-text);
    /* Black border (Thicker) */
    display: flex;
    flex-direction: column;
}

@media (min-width: 769px) {
    .card {
        flex-direction: row;
        align-items: stretch;
    }
}



.card__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    vertical-align: bottom;
    border-bottom: 1px solid var(--color-text);
}

@media (min-width: 769px) {
    .card__img {
        width: 430px;
        /* Fixed width 430px */
        aspect-ratio: auto;
        border-bottom: none;
        border-right: 2px solid var(--color-text);
        /* Thicker border */
        flex-shrink: 0;
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .card__img {
        width: 30%;
    }
}

.card__body {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .card__body {
        padding: 20px;
        /* Overriding previous 32px request with new 20px request */
    }
}

.card__title {
    font-size: 24px;
    color: var(--color-text);
    margin-bottom: 15px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

@media (max-width: 768px) {
    .card__title {
        font-size: 20px;
    }
}

.card__title-en {
    font-size: 14px;
    color: var(--color-main);
    font-family: var(--font-en);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .card__title-en {
        font-size: 12px;
    }
}

.card__text {
    font-size: 16px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .card__text {
        font-size: 14px;
    }
}

.card__link-wrap {
    margin-top: 20px;
    /* Ensure spacing */
    text-align: right;
    /* Requested Right Align */
}

.card__link {
    display: inline-block;
    font-size: 14px;
    color: var(--color-main);
    font-weight: 700;
}

.card__facility {
    margin-top: auto;
    border-top: 1px dotted #ccc;
    /* Requested dotted line */
    padding-top: 15px;
    /* Spacing */
}

.card__facility-label {
    font-size: 13px;
    color: #666;
}

.card__facility-name {
    font-size: 14px;
    /* Slightly smaller as requested */
    display: inline-block;
    margin-top: 0;
    margin-left: 10px;
    /* Inline spacing */
}

/* Business B */
.business-b {
    background-color: #ffffff;
    /* Requested White */
    position: relative;
    /* overflow: hidden; Removed to allow decoration to overlap Business A */
    /* Point Color BG */
    padding: 0;
}

.business-b .container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: none;
    padding: 0;
}

@media (max-width: 768px) {
    .business-b .container {
        gap: 0;
    }
}

@media (min-width: 900px) {
    .business-b .container {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

.business-b__decoration {
    font-family: var(--font-en);
    font-size: 44px;
    /* Requested 44px */
    color: #fff;
    /* White Text */
    line-height: 1.1;
    font-weight: 700;
    padding: 60px;
    /* Add padding since container has none */
    display: flex;
    align-items: center;
    /* Center vertically if needed, or top */
    background: #000;
    /* Black BG */
}

@media (max-width: 768px) {
    .business-b__decoration {
        padding: 30px;
    }
}

@media (min-width: 900px) {
    .business-b__decoration {
        width: 25%;
        /* Adjusted width */
        flex-shrink: 0;
        text-align: left;
        position: sticky;
        top: 0;
        /* height: 100vh; Removed */
        display: flex;
        align-items: center;
    }
}

.business-b::before {
    content: "";
    position: absolute;
    top: 90%;
    /* Requested 90% */
    left: 0%;
    /* Requested 0% */
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    background-image: url('../images/logo.png');
    /* Requested logo.png */
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.05;
    /* Requested 0.05 */
    pointer-events: none;
}

@media (max-width: 768px) {
    .business-b::before {
        display: none;
    }
}

.business-b__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
}

@media (min-width: 769px) {
    .business-b__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.banner-link {
    display: block;
    position: relative;
    height: 400px;
    /* Reduced Height (4/5 of 500px) */
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid white;
    /* Optional detail */
}

@media (max-width: 768px) {
    .banner-link {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .vision::before {
        width: 100%;
    }
}

.banner-link:hover .banner-link__bg {
    transform: scale(1.05);
}

/* Image Tint */
.banner-link__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 105 30 / 66%);
    /* Requested tint */
    z-index: 1;
}

.banner-link:hover .banner-link__bg {
    transform: scale(1.05);
}

.banner-link__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-fit: cover;
    transition: transform 0.5s ease;
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.state-demolition {
    background-image: url('../images/business_b1.jpg');
}

.state-pest {
    background-image: url('../images/business_b2.jpg');
}

.state-zousei {
    background-image: url('../images/business_a1.jpg');
}

.state-hotel {
    background-image: url('../images/business_a3.jpg');
}

.state-fitness {
    background-image: url('../images/business_a2.jpg');
}

.banner-link__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 2;
    background: transparent;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.banner-link__title {
    border: 1px solid white;
    padding: 10px 30px;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
    display: inline-block;
}

@media (max-width: 768px) {
    .banner-link__title {
        font-size: 18px;
    }
}

.banner-link__text {
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}

@media (max-width: 1000px) {
    .header--transparent {
        background-color: #fff;
        /* Solid white on mobile to hide content scrolling under */
    }
}

/* Removed old title/text styles */

/* News Section */
.news {
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;
}

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

.news__item {
    border-bottom: 1px dotted #7a7a7a;
}

.news__link {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    transition: background-color 0.2s;
}

.news__link:hover {
    background-color: var(--color-main-light);
    /* Subtle highlight */
}

@media (min-width: 1001px) {
    .news__link {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
}

.news__date {
    font-family: var(--font-en);
    color: #888;
    font-size: 14px;
}

.news__tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--color-main);
    color: white;
    font-size: 12px;
    border-radius: 0;
    margin: 5px 0;
}

@media (max-width: 1000px) {
    .news__link {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "date tag"
            "title title";
        row-gap: 8px;
        column-gap: 15px;
        align-items: center;
    }

    .news__date {
        grid-area: date;
    }

    .news__tag {
        grid-area: tag;
        justify-self: flex-start;
        width: fit-content;
        margin: 0;
    }

    .news__title {
        grid-area: title;
    }
}

@media (min-width: 1001px) {
    .news__tag {
        margin: 0;
    }
}

.news__title {
    font-size: 16px;
    font-weight: 400;
    flex: 1;
}

.news__btn-wrapper {
    margin-top: var(--spacing-lg);
    text-align: center;
}

/* CTA Section */
.cta {
    background: url('../images/contact-bg.jpg') center/cover no-repeat, #87CEEB;
    /* Removed linear-gradient overlay */
    padding: 60px 20px;
    color: var(--color-text);
}

.cta__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    /* Vertically center items */
}

@media (min-width: 900px) {
    .cta__grid {
        grid-template-columns: 40fr 30fr 30fr;
        /* 40% 30% 30% ratio */
        gap: 40px;
    }
}

.cta__item {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 30px;
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta__item--left {
    background: transparent;
    /* Title area transparent? Or white? User said "composition", maybe implies 3 blocks. Keeping blocks consistent looks better usually, but title might stand out more if transparent or distinct. Given "shinseikomu", they often separate title. Let's try transparent for title to let sky show, but user might want boxes. Wait, "Left 40%". If I make it transparent text, it might be hard to read on sky. I will stick to white box for now to match the "row" feel. */
    padding: 20px;
    align-items: flex-start;
    /* Left align title */
}

.cta__item--center,
.cta__item--right {
    align-items: center;
    text-align: center;
}

.cta__heading {
    font-family: var(--font-en);
    font-size: 50px;
    font-weight: 700;
    color: white;
    /* Requested White */
    line-height: 1;
    display: flex;
    flex-direction: column;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Added text shadow for readability */
}

.cta__sub-heading {
    font-size: 16px;
    line-height: 1.6;
    color: white;
    /* Requested White */
    font-weight: 500;
    font-family: var(--font-ja);
    margin-top: 10px;
    margin-left: 5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    /* Added text shadow */
}

.cta__content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.cta__label {
    font-weight: 700;
    font-size: 18px;
    /* Requested 18px */
    color: var(--color-main-dark);
    /* Requested Dark Main Color */
    margin-bottom: 5px;
}

.cta__btn {
    width: 100%;
    max-width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* For icon */
}

.cta__tel-link {
    font-family: var(--font-en);
    font-size: 32px;
    /* Bigger phone number */
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.cta__tel-prefix {
    font-size: 16px;
    font-weight: 500;
}

/* Footer */
.footer {
    background-color: #000;
    color: white;
    padding: 60px 0 20px;
    /* Increased padding */
}

.footer .container {
    max-width: 1200px;
    /* Footer needs internal padding if main container is 0 */
    padding: 0 40px;
}

@media (max-width: 1000px) {
    .footer .container {
        padding: 0 15px;
    }
}

.footer__top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 900px) {

    /* 3 columns constraint */
    .footer__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }
}

/* Footer Left (Company Info) */
.footer__left {
    flex: 1;
    text-align: center;
    /* Centered as requested */
}

.footer__logo-wrap {
    margin-bottom: 10px;
}

.footer__logo-img {
    width: 90px;
    height: auto;
}

.footer__company-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.footer__address {
    font-style: normal;
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .footer__address {
        font-size: 13px;
    }
}

/* Footer Center (Nav) */
.footer__center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.footer__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 10px;
    max-width: 300px;
    justify-content: center;
    /* Ensure contents are centered if wrapping */
}

@media (min-width: 1001px) {

    /* Ensure 2 columns visually */
    .footer__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px 30px;
        text-align: left;
        /* Items left aligned in grid */
    }
}

.footer__item a {
    font-size: 15px;
    color: #ccc;
}

@media (max-width: 1000px) {
    .footer__item a {
        font-size: 13px;
    }
}

.footer__item a:hover {
    color: white;
}

/* Footer Right (Contact & Permits) */
.footer__right {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center for mobile default */
}

@media (min-width: 900px) {
    .footer__right {
        align-items: flex-end;
        /* Right align for desktop */
        text-align: right;
    }
}

.footer__contact-block {
    display: flex;
    flex-direction: column;
    /* Aligning button and TEL */
    width: 240px;
    /* Fixed width to align children */
    margin-bottom: 15px;
}

@media (min-width: 900px) {
    .footer__contact-block {
        align-items: flex-end;
        /* Align right edges */
    }
}

.footer__tel {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-en);
    margin-bottom: 10px;
    /* Increased margin */
    display: flex;
    justify-content: center;
    width: 100%;
    /* Fill container */
}



.footer__btn-cv {
    border-color: white;
    background: transparent;
    color: white;
    width: 100%;
    /* Fill container */
    padding: 10px 0px;
    font-size: 0.9em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer__btn-cv:hover {
    background: white;
    color: #333;
}

.footer__permits {
    font-size: 11px;
    color: #aaa;
    font-size: 11px;
    color: #aaa;
    line-height: 1.5;
    text-align: center;
    padding: 10px 10px;
}

@media (min-width: 900px) {
    .footer__permits {
        text-align: right;
    }
}

/* Footer Bottom (2nd Row) */
.footer__bottom {
    padding-top: 20px;
    display: flex;
    flex-direction: column-reverse;
    /* Default column-reverse puts bottom element top on mobile */
    align-items: center;
    gap: 10px;
}

@media (max-width: 1000px) {
    .footer__bottom {
        flex-direction: column;
        /* Putting order 1 (Sub nav/Privacy) on top, order 2 (Copyright) bottom */
    }
}

@media (min-width: 1001px) {
    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer__copyright {
    font-size: 12px;
    color: #666;
    font-family: var(--font-en);
    order: 2;
}

.footer__sub-nav {
    order: 1;
}

@media (min-width: 1001px) {
    .footer__copyright {
        order: 1;
    }

    .footer__sub-nav {
        order: 2;
    }
}

.footer__sub-nav a {
    font-size: 12px;
    color: #888;
}

/* Text Links within cards */
.text-link {
    color: var(--color-main);
    text-decoration: underline;
}

.text-link:hover {
    text-decoration: none;
}

/* Lower Pages/* Hero Section */
.hero {
    position: relative;
    /* No flex */
    height: auto;
    width: 100%;
    margin: 0;
    overflow: visible;
}

.hero__sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
    /* Taiyu reference: ~18% */
    height: 70vh;
    /* Requested 70vh */
    background-color: #ebebeb;
    /* Taiyu light gray */
    display: flex;
    align-items: flex-end;
    /* Move text to left (End of R-L axis) */
    justify-content: center;
    writing-mode: vertical-rl;
    z-index: 1;
    padding-bottom: 0;
    /* Reset if any */
    padding-left: 30px;
    /* Physical spacing from left edge */
}

@media (max-width: 1000px) {
    .header__logo-en {
        display: none;
    }
}

@media (max-width: 1000px) {
    .hero__sidebar {
        display: none;
    }
}

.hero__copyright {
    font-size: 12px;
    font-family: var(--font-en);
    color: #666;
    letter-spacing: 0.1em;
}

.hero__content {
    margin-left: 18%;
    /* Offset by sidebar width */
    width: 82%;
    /* Remaining width */
    height: 80vh;
    /* Requested 80vh */
    position: relative;
    background-image: url('../images/movieimage.jpg');
    background-size: cover;
    background-position: center;
    z-index: 2;
}

@media (max-width: 768px) {
    .hero__content {
        margin-left: 0;
        width: 100%;
        height: 70vh;
        /* Requested 70vh for mobile */
    }
}

/* Black Text Box */
.hero__text-box {
    position: absolute;
    bottom: 80px;
    left: -80px;
    /* Overlap sidebar */
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 30px 50px;
    width: auto;
    max-width: 600px;
    z-index: 10;
    /* High z-index to sit on top of everything */
}

@media (max-width: 768px) {
    .hero__text-box {
        left: 0;
        /* Reset negative margin on mobile because sidebar is gone */
        bottom: 20px;
        /* Positioned 20px from the bottom on mobile */
        width: 100%;
        /* Make full width on mobile or add margins */
        padding: 20px 15px;
        /* Adjust padding for mobile */
        box-sizing: border-box;
    }
}

.hero__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    font-family: var(--font-ja);
}

@media (max-width: 768px) {
    .hero__title {
        font-size: 24px;
        margin-bottom: 10px;
    }
}

.hero__subtitle {
    font-size: 13px;
    font-family: var(--font-ja);
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero__subtitle::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: #fff;
}

/* Logo Overlay */
.hero__logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-image: url('../images/logo-w.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
    border: 3px solid #fff;
    border-radius: 50%;
    /* Circle border if logo isn't circle */
    box-sizing: border-box;
    /* If logo is already circle, fine. References shows a circle badge-like look */
    display: flex;
    align-items: center;
    justify-content: center;
    /* If using bg image, this might be enough */
}

/* Hide old styles if not overridden */
.hero__bg,
.hero__copy,
.hero__subcopy {
    display: none;
}

/* Lower Pages Common */
.page-header {
    margin-top: 84px;
    height: 300px;
    background-color: var(--color-main-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .page-header {
        margin-top: 59px;
        height: 250px;
    }
}

.page-header__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/movieimage.jpg') center/cover;
}

.page-header__title {
    position: relative;
    z-index: 10;
    font-size: 36px;
    color: white;
    font-family: var(--font-en);
    text-align: center;
    display: flex;
    flex-direction: column;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-header__title-ja {
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
}

/* Breadcrumbs */
.breadcrumbs {
    background-color: var(--color-gray);
    padding: 15px 0;
}

.breadcrumbs__list {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: #666;
    flex-wrap: wrap;
    /* Safety for mobile */
}

.breadcrumbs__item:not(:last-child)::after {
    content: ">";
    margin-left: 10px;
    color: #999;
}

.breadcrumbs__item a:hover {
    color: var(--color-main);
    text-decoration: underline;
}

/* Service Page Blocks */
.service-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
    background: #fff;
    /* Explicit bg */
}

@media (min-width: 769px) {
    .service-block {
        flex-direction: row;
        align-items: center;
    }

    .service-block--reverse {
        flex-direction: row-reverse;
    }
}

.service-block__content {
    flex: 1;
}

.service-block__image {
    flex: 1;
}

.service-block__image .img-placeholder {
    height: 300px;
    background-color: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 0;
}

.service-block__title {
    font-size: 28px;
    color: var(--color-main);
    margin-bottom: 10px;
    border-bottom: 2px solid var(--color-main-light);
    padding-bottom: 10px;
    display: inline-block;
}

.service-block__subtitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.service-block__text {
    margin-bottom: 20px;
}

.service-block__list {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.service-block__list li {
    margin-bottom: 5px;
}

/* Service Detail Layout (New) */
.service-detail-wrapper {
    margin-top: 60px;
}

@media (max-width: 768px) {
    .service-detail-wrapper {
        margin-top: 30px;
    }
}

.service-detail {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 100px;
}

@media (min-width: 769px) {
    .service-detail {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
        margin-bottom: 120px;
    }

    .service-detail--reverse {
        flex-direction: row-reverse;
    }
}

.service-detail__image-wrap {
    position: relative;
    width: 100%;
}

@media (min-width: 769px) {
    .service-detail__image-wrap {
        width: 45%;
        flex-shrink: 0;
    }
}

.service-detail__img-main {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .service-detail__img-main {
        height: 350px;
        aspect-ratio: auto;
    }
}

.service-detail--short .service-detail__img-main {
    /* Slightly taller than 16/9 */
    aspect-ratio: 4 / 3;
}

/* Official Site Banner */
.official-banner-wrap {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Optional subtleness */
}

.official-banner-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-main);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .official-banner-text {
        font-size: 12px;
    }
}

.official-banner-link {
    display: block;
    width: 100%;
    max-width: 200px;
    transition: opacity 0.3s ease;
}

.official-banner-link:hover {
    opacity: 0.8;
}

.service-detail__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 24px;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .service-detail__title {
        font-size: 26px;
    }
}

.service-detail--short .service-detail__title {
    font-size: 20px;
    font-weight: 700;
    color: #292929;
}

.service-detail--short .service-detail__title span {
    font-size: 24px;
    font-weight: normal;
    color: var(--color-main);
    margin-top: 10px;
    display: block;
}

@media (max-width: 768px) {
    .service-detail--short .service-detail__title {
        font-size: 16px;
    }

    .service-detail--short .service-detail__title span {
        font-size: 20px;
    }
}

.service-detail__text {
    font-size: 16px;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 40px;
    text-align: justify;
}

@media (max-width: 768px) {
    .service-detail__text {
        font-size: 14px;
    }
}

/* Sub Section Title */
.sub-section-title {
    background-color: var(--color-gray);
    border-left: 8px solid var(--color-main);
    padding: 15px 20px;
    margin-top: 80px;
    margin-bottom: 40px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.sub-section-title__en {
    font-family: var(--font-en);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-main);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sub-section-title__ja {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--color-text);
    font-weight: 700;
}

@media (max-width: 768px) {
    .sub-section-title {
        line-height: 1;
    }
}

@media (max-width: 768px) {
    .sub-section-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        border-left-width: 6px;
    }

    .sub-section-title__en {
        font-size: 24px;
    }
}

/* Sub Services (Other Services) */
.sub-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
}

.sub-service-item {
    display: flex;
    flex-direction: column;
}

.sub-service-item__img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    margin-bottom: 20px;
}

.sub-service-item__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.sub-service-item__text {
    font-size: 16px;
    line-height: 1.8;
}

.company-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}

.company-table th,
.company-table td {
    border: 1px solid #ccc;
    padding: 1.5rem 20px;
}

.company-table th {
    width: 25%;
    text-align: left;
    background-color: #333;
    color: #fff;
    border-bottom: 1px solid #444;
}

.company-table td {
    font-size: 15px;
    line-height: 1.8;
    background-color: #fff;
}

@media (max-width: 768px) {

    .company-table th,
    .company-table td {
        display: block;
        width: 100%;
        border-bottom: none;
        padding: .5rem 20px;
        /* Merged from inline */
    }

    .company-table td {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 1.5rem;
    }

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

.map-wrapper {
    width: 100%;
    height: 400px;
    background-color: #eee;
    margin-bottom: 60px;
}

.greeting-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.greeting-img {
    text-align: center;
    flex-shrink: 0;
}

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

.greeting-text {
    flex: 1;
}

@media (min-width: 769px) {
    .greeting-wrap {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 60px;
    }

    .greeting-img {
        margin-top: 20px;
    }

    .greeting-text {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .greeting-img img {
        width: 250px;
    }
}

@media (max-width: 768px) {
    .sub-service-grid {
        display: block;
    }

    .sub-service-item {
        display: flex;
        flex-direction: row;
        /* CRITICAL FIX: Override column */
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 1px dotted #898383;
    }

    .sub-service-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .sub-service-item__img {
        width: 40%;
        margin: 0;
    }

    .sub-service-item__title {
        width: 55%;
        margin: 0;
        padding: 0;
        border-bottom: none;
    }

    .sub-service-item__text {
        width: 100%;
        margin: 15px 0 0 0;
        padding: 0;
        font-size: 14px;
    }
}

@media (min-width: 769px) {
    .sub-service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 80px;
    }
}



/* Manifest System Column */
.manifest-box {
    margin-top: 60px;
    padding: 40px;
    background-color: #00751d1a;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 768px) {
    .manifest-box {
        padding: 20px;
    }

    .manifest-box__text p {
        font-size: 14px;
    }
}

@media (min-width: 769px) {
    .manifest-box {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }
}

.manifest-box__img {
    width: 100%;
    max-width: 300px;
    flex-shrink: 0;
    aspect-ratio: 4/3;
    object-fit: cover;
}

@media (max-width: 768px) {
    .manifest-box__img {
        max-width: none;
    }
}

.manifest-box__content {
    flex: 1;
}

.manifest-box__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text);
}

.manifest-box__text {
    font-size: 15px;
    line-height: 1.8;
}

/* Service Contact Message */
.service-message {
    margin: 100px auto;
    text-align: center;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .service-message {
        padding: 0 15px;
    }
}

.service-message__text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .service-message__text {
        font-size: 15px;
        text-align: left;
    }
}

.service-detail__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}


.service-detail__sub-gallery {
    display: flex;
    gap: 20px;
}

.service-detail__sub-img {
    width: calc(50% - 10px);
    aspect-ratio: 1;
    object-fit: cover;
}

/* Contact Page Form Styles */
.contact-form-wrapper {
    background: #f4f4f4;
    padding: 0 0 3rem 0;
    border: 2px solid #015a1521;
}

.contact-form-wrapper .section-title {
    text-align: center;
    background: #005a16;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.5rem;
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    #demolition {
        border-bottom: 2px dotted #8f8f8f;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .contact-form-wrapper p,
    .contact-form {
        padding: 0 15px;
    }
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 30px;
}

.form-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

.form-label span {
    background: #ff4444;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 10px;
    vertical-align: middle;
}

.form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-main);
}

.form-submit {
    text-align: center;
    margin-top: 50px;
}

.form-submit .btn--cv {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* =========================================
   Utility & Refactored Component Classes
   ========================================= */

/* Spacing Utilities */
.mt-20 {
    margin-top: 20px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.py-80 {
    padding: 80px 0 !important;
}

.mr-8 {
    margin-right: 8px !important;
}

/* Display & Flex Utilities */
/* Scroll Animation Utilities */
.js-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.js-fade-in.is-show {
    opacity: 1;
    transform: translateY(0);
}

.d-flex {
    display: flex !important;
}

.flex-column {
    flex-direction: column !important;
}

.justify-content-center {
    justify-content: center !important;
}

.align-items-center {
    align-items: center !important;
}

.gap-10 {
    gap: 10px !important;
}

/* Typography Utilities */
.fw-bold {
    font-weight: bold !important;
}

.font-weight-normal {
    font-weight: normal !important;
}

.font-size-lg {
    font-size: 1.6rem !important;
}

.font-size-md {
    font-size: 1.1rem !important;
}

.font-size-sm {
    font-size: 0.95rem !important;
}

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

.text-right {
    text-align: right !important;
}

.line-height-2 {
    line-height: 2 !important;
}

.line-height-18 {
    line-height: 1.8 !important;
}

.color-gray {
    color: #666 !important;
}

.color-dark {
    color: #1a1a1a !important;
}

.border-0 {
    border: 0 !important;
}

/* Background Utilities */
.bg-gray-section {
    background-color: var(--color-gray) !important;
}

.bg-light-gray {
    background-color: #EBEBEB !important;
}

.bg-transparent {
    background: transparent !important;
}

/* Components */

.pagination {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pagination__list {
    display: flex;
    gap: 10px;
    list-style: none;
}

.pagination__item a,
.pagination__item--current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: var(--font-en);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination__item a {
    background: var(--color-gray);
    color: var(--color-text);
}

.pagination__item a:hover {
    background: #e2e2e2;
}

.pagination__item--current {
    background: var(--color-main);
    color: white;
}

.pagination__pos {
    font-family: var(--font-en);
    font-size: 14px;
    color: #666;
}

.pagination__btn--prev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-gray);
    color: var(--color-text);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.pagination__btn--prev:hover {
    background: #e2e2e2;
}

/* Container Constraint (news-detail.html) */
.container--narrow {
    max-width: 800px;
}

/* Dividers (services.html) */
.divider-thick {
    border: none;
    border-top: 4px solid #eee;
    margin: 80px 0;
}

.divider-dotted {
    border: none;
    border-top: 2px dotted #000000;
    margin: 40px 0;
}

/* Greeting Section (company.html) */
.greeting-image-lg {
    width: 100%;
    height: calc(100vw / 1920 * 261);
    background: url('../images/company-greeting.jpg') no-repeat center bottom / contain;
    margin-top: 40px;
}

/* Map Wrapper Adjustment (company.html) */
.map-wrapper-override {
    margin-top: -30px;
    margin-bottom: 20px;
}

/* Contact Intro & Phone (contact.html) */
.contact-intro-box {
    text-align: center;
    margin-bottom: 60px;
}

.contact-phone-box {
    background: #e9ecef;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    margin: 0 auto 50px;
}

.contact-phone-number {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    color: #1a1a1a;
}

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

.form-file-input {
    border: none;
    padding: 5px 0;
    background: transparent;
}

.form-notice-footer {
    margin-top: 40px;
    margin-bottom: 30px;
    padding-top: 30px;
    border-top: 2px dotted #999;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* Article Styles (news-detail.html) */
.article-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.article-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

.article-meta {
    display: flex;
    gap: 15px;
    align-items: center;
}

.article-date {
    color: #888;
    font-family: var(--font-en);
}

.article-tag {
    background-color: var(--color-main);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
}

.article-content {
    margin-bottom: 60px;
    line-height: 1.8;
}

.article-content p {
    margin-bottom: 20px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.article-content h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 40px 0 20px;
    padding-left: 15px;
    border-left: 5px solid var(--color-main);
}

.article-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

.article-nav a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s;
}

.article-nav a:hover {
    color: var(--color-main);
}

.article-nav__prev,
.article-nav__next {
    max-width: 40%;
}

.article-nav__back {
    font-weight: 700;
}

@media (max-width: 768px) {
    .article-title {
        font-size: 22px;
    }

    .article-nav {
        flex-direction: column;
        gap: 20px;
    }

    .article-nav__prev,
    .article-nav__next {
        max-width: 100%;
        text-align: center;
    }

    .article-nav__back {
        order: -1;
        margin-bottom: 20px;
    }
}

/* Privacy Policy Styles (privacy.html) */
.policy-content {
    max-width: 800px;
    margin: 0 auto;
}

.policy-content h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0 20px;
    border-left: 5px solid var(--color-main);
    padding-left: 15px;
}

.policy-content p {
    margin-bottom: 20px;
}