@charset "UTF-8";
        @import url("global_202405.css");

        /* ========================================
   MAIN CONTENT BOX LAYOUT
   - 2-column split layout with image and text
   - Left/right alternating sections
======================================== */
        .content .box {
            width: 100%;
            height: 460px;
            position: relative;
            margin-bottom: 40px;
        }

        .content .box .wrapper {
            height: 460px;
        }

        /* Main text area (50% width) */
        .content .box .mainarea {
            width: 50%;
            margin: 0 50% 0 0;
            height: 100%;
            box-sizing: border-box;
            position: relative;
        }

        /* Text content - centered vertically */
        .content .box .mainarea .txt {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            text-align: center;
            color: #fff;
        }

        /* Subtitle styling */
        .content .box .mainarea .txt .sub {
            font-family: "Quattrocento", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            font-size: 24px;
            line-height: 1.4;
        }

        /* Main heading */
        .content .box .mainarea .txt h2 {
            font-size: 52px;
            font-family: "はんなり明朝", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            line-height: 1.2;
        }

        /* Body text */
        .content .box .mainarea .txt .text {
            font-size: 20px;
            margin-top: 30px;
            line-height: 1.5;
        }

        /* "More" button/link */
        .content .box .mainarea .txt .more {
            border: 2px solid #fff;
            font-size: 20px;
            font-family: "Quattrocento", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            padding: 10px 80px;
            margin-top: 40px;
            display: inline-block;
        }

        /* Right column variant - flips layout */
        .content .box.rightcol .mainarea {
            margin: 0 0 0 50%;
        }

        .content .box.rightcol .mainarea .txt {
            right: 0;
            left: inherit;
        }

        /* ========================================
   IMAGE AREA WITH HOVER EFFECTS
   - Border animation on hover
   - Opacity transition
======================================== */
        .content .box .img {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            overflow: hidden;
        }

        .content .box .img .bg {
            width: 100%;
            height: 100%;
            transition: all .5s ease;
            -webkit-transition: all .5s ease;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Even boxes - image on left side */
        .content .box.box:nth-of-type(even) .img {
            left: 0;
            right: auto;
        }

        /* Hover effect - opacity change */
        .content .box a:hover .bg {
            opacity: .7;
        }

        /* Hover effect - animated border expansion */
        .content .box a:hover .img span::after,
        .content .box a:hover .img span::before {
            width: 100%;
            height: 100%;
        }

        .content .box a:hover .img span::before {
            border-bottom-color: #fff;
            border-left-color: #fff;
            transition: height .3s, width .3s .3s;
        }

        .content .box a:hover .img span::after {
            border-top-color: #fff;
            border-right-color: #fff;
            transition: height .3s, width .3s .3s;
        }

        /* Border frame setup */
        .content .box a .img span {
            position: absolute;
            top: 10px;
            right: 10px;
            bottom: 10px;
            left: 10px;
            display: block;
        }

        .content .box a .img span::after,
        .content .box a .img span::before {
            position: absolute;
            z-index: 2;
            content: '';
            width: 0;
            height: 0;
            border: 2px solid transparent;
        }

        .content .box a .img span::before {
            top: -2px;
            left: -2px;
        }

        .content .box a .img span::after {
            bottom: -2px;
            right: -2px;
        }

        /* ========================================
   THEME SECTIONS - cute & hiraya
   - Background colors and images
======================================== */
        /* cute section - blue theme */
        .content .cute {
            background-color: #38b6ff;
        }

        .content .cute .bg {
            width: 50%;
            background: url(http://fujisou-ainos.sub.jp/ainos-2f-planning/img/white-house-ext.png) no-repeat center center;
            background-size: cover;
            position: absolute;
            right: 0;
            top: 0;
        }

        /* hiraya  section - red theme */
        .content .hiraya {
            background-image: linear-gradient(to right, #e8c745, #ff6200);
        }

        .content .hiraya .bg {
            width: 50%;
            background: url(http://fujisou-ainos.sub.jp/ainos-2f-planning/img/smart-black.png) no-repeat center center;
            background-size: cover;
            position: absolute;
            right: 0;
            top: 0;
        }

        /* ========================================
   FLAT PLAN INTRODUCTION SECTION
   Added: 2025-07-31
   - Features list
   - Plan items with pricing
======================================== */
        /* Button spacing */
        .btn_space {
            margin-bottom: 80px;
        }

        /* Features section */
        .features .wrapper {
            text-align: center;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .features .wrapper h2 {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .features .wrapper .txt h3 {
            font-family: "はんなり明朝", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            font-size: 25px;
            line-height: 1.4em;
            margin-bottom: 30px;
        }

        /* Features box with list */
        /* Base Styles */
        .choice {
          
            /* bg-gray-50 */
            font-family: 'Inter', sans-serif;
            /* font-sans */
            padding: 1rem;
            /* p-4 */
            min-height: 100vh;
            /* min-h-screen */
            display: flex;
            align-items: flex-start;
            justify-content: center;
            margin: 0;
        }

        /* Responsive Padding for Larger Screens */
        @media (min-width: 640px) {
            .choice {
                padding: 2rem;
                /* sm:p-8 */
            }
        }

        /* Container */
        .container {
            width: 100%;
            /* w-full */
            max-width: 64rem;
            /* max-w-5xl */
        }

        /* Grid Layout */
        .feature-grid {
            display: grid;
            grid-template-columns: 1fr;
            /* grid-cols-1 */
            gap: 1rem;
            /* gap-4 */
        }

        /* Responsive Grid Columns for Larger Screens */
        @media (min-width: 768px) {
            .feature-grid {
                grid-template-columns: repeat(2, 1fr);
                /* md:grid-cols-2 */
            }
        }

        /* Feature Card Base Style */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 50px;
        }

        .feature-box {
            padding: 15px 20px;
            text-align: center;
            font-size: 13px;
            font-weight: bold;
            color: white;
        }

        .feature-orange {
            background: linear-gradient(90deg, rgb(255, 111, 0) 0%, rgb(255, 111, 0) 100%);
        }

        .feature-red {
            background: linear-gradient(90deg, #ef5350 0%, #e53935 100%);
        }

        .feature-gray {
            background: linear-gradient(90deg, #78909c 0%, #607d8b 100%);
        }

        .feature-purple {
            background: linear-gradient(90deg, #9575cd 0%, #7e57c2 100%);
        }

        .feature-green {
            background: linear-gradient(90deg, #66bb6a 0%, #4caf50 100%);
        }

        /* Plan items section */

         .ainos-layout-container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
        }

        .ainos-grid-wrapper {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            grid-template-rows: auto auto auto;
            gap: 10px;
            padding: 10px;
        }

        .ainos-grid-item {
            border: none;
            padding: 0;
            background-color: #f0f0f0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ainos-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: fit;
            display: block;
        }

        .ainos-text-content {
            background-color: white;
            padding: 20px;
            justify-content: flex-start;
            font-size: 25px;
            justify-content: center;
            text-align: center;
        }

        .ainos-grid-header {
            grid-column: 1;
            grid-row: 1;
            min-height: 120px;
        }

        .ainos-grid-main-image {
            grid-column: 2;
            grid-row: 1 / 4;
            min-height: 500px;
        }

        .ainos-grid-secondary-image {
            grid-column: 1;
            grid-row: 2;
            min-height: 190px;
        }

        .ainos-grid-tertiary-image {
            grid-column: 1;
            grid-row: 3;
            min-height: 190px;
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .ainos-grid-wrapper {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }

            .ainos-grid-header {
                grid-column: 1;
                grid-row: 1;
                min-height: 100px;
            }

            .ainos-grid-main-image {
                grid-column: 1;
                grid-row: 4;
                min-height: 300px;
            }

            .ainos-grid-secondary-image {
                grid-column: 1;
                grid-row: 2;
                min-height: 200px;
            }

            .ainos-grid-tertiary-image {
                grid-column: 1;
                grid-row: 3;
                min-height: 200px;
            }
        }

        /* Tablet responsive */
        @media (min-width: 769px) and (max-width: 1024px) {
            .ainos-grid-wrapper {
                grid-template-columns: 1fr 1.3fr;
            }
            
            .ainos-grid-main-image {
                min-height: 450px;
            }
        }
        .read-more-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid black;
            color: white;
            padding: 12px 30px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            width: fit-content;
            margin-bottom: 15px;
        }

        .read-more-btn:hover {
            background: white;
            color: #29b6f6;
        }


        /* Image Scaling */
        .main-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .house-image,
        .floorplan-image,
        .small-image {
            max-width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
            /* Ensures floor plans are fully visible */
        }

        .house-image {
            flex-grow: 1;
            /* Allows the image to fill the remaining space below the title */
        }

        /* Text Styling */
        .title {
            text-align: left;
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .brand-text {
            /* Center the multi-line text vertically and horizontally */
            font-size: 0.8em;
            font-weight: bold;
            color: #a00;
            line-height: 1.4;
            text-align: center;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        /* ========================================
   RESPONSIVE BREAKPOINT 1: 960px
======================================== */
        @media only screen and (max-width: 959px) {

            /* Main content box adjustments */
            .content .box {
                height: 400px;
            }

            .content .box .wrapper {
                height: 400px;
            }

            .content .box .mainarea .txt {
                padding-right: 10px;
                box-sizing: border-box;
            }

            .content .box .mainarea .txt .sub {
                font-size: 20px;
            }

            .content .box .mainarea .txt h2 {
                font-size: 40px;
            }

            .content .box .mainarea .txt .text {
                font-size: 16px;
                margin-top: 25px;
                line-height: 1.8;
            }

            .content .box .mainarea .txt .more {
                font-size: 18px;
                font-family: "Quattrocento", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
                padding: 10px 80px;
                margin-top: 40px;
                display: inline-block;
            }

            .content .box.rightcol .mainarea .txt {
                padding-right: 0px;
                padding-left: 10px;
            }

            .content .box.box:nth-of-type(even) .img {
                left: 0;
                right: auto;
            }

            /* Flat plan section - tablet adjustments */
            .features {
                margin-top: 20px;
            }

            .features .wrapper .txt h3 {
                font-size: 24px;
            }

            .features .wrapper .box {
                width: 80%;
            }

            .features .wrapper .box ul li {
                font-size: 16px;
            }

            .item h2 {
                font-size: 28px;
                margin-bottom: 70px;
            }

            .item .box {
                padding: 30px;
                margin-top: 40px;
            }

            .item .box h3 {
                font-size: 32px;
                margin-bottom: 70px;
            }

            .item .box h3 span {
                font-size: 18px;
            }

            .item .box h3::after {
                content: "";
                height: 3px;
                bottom: -25px;
            }

            .item .box .image {
                width: 80%;
            }
        }

        /* ========================================
   RESPONSIVE BREAKPOINT 2: 645px (Mobile)
======================================== */
        @media only screen and (max-width: 644px) {

            /* Main content - mobile stacked layout */
            .content {
                margin-top: 40px;
            }

            .content .box {
                height: auto;
            }

            .content .box .wrapper {
                height: auto;
            }

            /* Full width text area on mobile */
            .content .box .mainarea {
                width: 100%;
                margin: 0 0% 0 0;
                height: auto;
            }

            .content .box .mainarea .txt {
                width: 100%;
                padding: 40px 10px 40px 10px;
                box-sizing: border-box;
                position: relative;
                top: inherit;
                left: inherit;
                transform: inherit;
                -webkit-transform: inherit;
                display: block;
            }

            .content .box .mainarea .txt .sub {
                font-size: 20px;
            }

            .content .box .mainarea .txt h2 {
                font-size: 32px;
            }

            .content .box .mainarea .txt .more {
                font-size: 18px;
                padding: 10px 60px;
                margin-top: 30px;
            }

            .content .box.rightcol .mainarea {
                width: 100%;
                margin: 0 0 0 0;
                height: auto;
            }

            .content .box.rightcol .mainarea .txt {
                padding-right: 0px;
                padding-left: 0px;
            }

            /* Full width image on mobile */
            .content .box .img {
                position: relative;
                width: 100%;
                height: 240px;
                margin-bottom: 10px;
            }

            /* Flat plan section - mobile adjustments */
            .features {
                margin-top: 20px;
            }

            .features .wrapper h2 {
                font-size: 16px;
            }

            .features .wrapper .txt h3 {
                font-size: 18px;
            }

            .features .wrapper .box {
                width: 80%;
            }

            .features .wrapper .box ul li {
                font-size: 14px;
            }

            .item {
                padding-top: 60px;
                padding-bottom: 60px;
            }

            .item h2 {
                font-size: 20px;
                margin-bottom: 50px;
            }

            .item .box {
                padding: 8px;
                margin-top: 30px;
            }

            .item .box h3 {
                font-size: 24px;
                margin-bottom: 30px;
                margin-top: 10px;
            }

            .item .box h3 span {
                font-size: 16px;
            }

            .item .box h3::after {
                content: "";
                width: 90%;
                right: 0;
                margin: 0 auto;
            }

            .item .box .wrap {
                display: block;
                margin-top: 5px;
            }

            .item .box .wrap .text {
                margin-right: 0px;
                margin-top: 5px;
            }

            .item .box .image {
                width: 80%;
                float: none;
                margin: 0 auto;
                text-align: center;
            }

            /* Stack columns on mobile */
            .item .box .container {
                display: block;
            }

            .item .box .container .col-L {
                width: 100%;
            }

            .item .box .container .col-R {
                width: 100%;
                margin-top: 50px;
            }
        }

        /* ========================================
   FLOW SECTION - Building Process Steps
   Added: 2025-09-11
   - Numbered steps with vertical timeline
   - Images with descriptive text
======================================== */
        .flow_overview_wrap .flow {
            margin-top: 80px;
            position: relative;
            z-index: 2;
        }

        .flow_overview_wrap .flow .wrap {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .flow_overview_wrap .flow dl {
            position: relative;
        }

        /* Vertical timeline line */
        .flow_overview_wrap .flow dl::before {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            content: "";
            display: block;
            width: 10px;
            height: 100%;
            background: #663300;
        }

        /* Step header */
        .flow_overview_wrap .flow dl dt {
            display: flex;
        }

        /* Step number circle */
        .flow_overview_wrap .flow dl dt .number {
            background-color: #663300;
            width: 60px;
            height: 60px;
            font-family: "Quattrocento", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            font-size: 28px;
            line-height: 1.1;
            color: #fff;
            text-align: center;
            padding-top: 9px;
            box-sizing: border-box;
            margin-left: 10px;
        }

        .flow_overview_wrap .flow dl dt .number span {
            display: block;
            font-size: 14px;
        }

        /* Step title */
        .flow_overview_wrap .flow dl dt h3 {
            font-family: "はんなり明朝", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            font-size: 28px;
            margin-left: 20px;
            color: #663300;
        }

        /* Step description */
        .flow_overview_wrap .flow dl dd {
            font-size: 16px;
            padding-bottom: 40px;
            margin-left: 90px;
            text-align: left;
            overflow: hidden;
        }

        /* Step image (floated right) */
        .flow_overview_wrap .flow dl dd .image {
            float: right;
            margin-left: 40px;
            margin-top: 10px;
            width: 200px;
            box-shadow: 0 0 4px rgba(100, 100, 100, 0.1);
        }

        .flow_overview_wrap .flow dl dd .image img {
            vertical-align: bottom;
        }

        .flow_overview_wrap .flow dl dd .text {
            margin-top: 10px;
        }

        .flow_overview_wrap .flow dl dd a {
            color: #663300;
        }

        /* Flow section - tablet (960px) */
        @media only screen and (max-width: 959px) {
            .flow_overview_wrap .flow {
                margin-top: 70px;
            }

            .flow_overview_wrap .flow dl dt {
                display: flex;
            }

            .flow_overview_wrap .flow dl dt .number {
                width: 50px;
                height: 50px;
                font-size: 24px;
                padding-top: 6px;
            }

            .flow_overview_wrap .flow dl dt .number span {
                display: block;
                font-size: 12px;
            }

            .flow_overview_wrap .flow dl dt h3 {
                font-size: 24px;
                margin-left: 20px;
            }

            .flow_overview_wrap .flow dl dd {
                padding-bottom: 40px;
                margin-left: 80px;
            }
        }

        /* Flow section - mobile (644px) */
        @media only screen and (max-width: 644px) {
            .flow_overview_wrap .flow {
                margin-top: 70px;
            }

            .flow_overview_wrap .flow dl dt {
                display: block;
            }

            .flow_overview_wrap .flow dl dt .number {
                width: 80px;
                height: 80px;
                font-size: 34px;
                padding-top: 11px;
                margin-left: 10px;
            }

            .flow_overview_wrap .flow dl dt .number span {
                display: block;
                font-size: 20px;
            }

            .flow_overview_wrap .flow dl dt h3 {
                font-size: 20px;
                margin: 20px 0 5px 30px;
                text-align: left;
            }

            .flow_overview_wrap .flow dl dd {
                padding-bottom: 50px;
                margin-left: 30px;
            }

            .flow_overview_wrap .flow dl dd .image {
                width: 100%;
                max-width: 320px;
                margin: 10px auto 0;
                float: none;
            }

            .flow_overview_wrap .flow dl:last-child dd {
                padding-bottom: 30px;
            }
        }

        /* ========================================
   FLOW OVERVIEW TITLE SECTION
======================================== */
        #flow_overview {
            margin-top: 100px;
        }

        #flow_overview .wrapper {
            text-align: center;
        }

        /* Title box with bottom border */
        #flow_overview .title_box {
            border-bottom: 1px solid #D6D6D6;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-bottom: 10px;
        }

        #flow_overview .title_box h2 {
            font-family: "はんなり明朝", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            font-size: 26px;
            text-align: left;
            line-height: 1.6;
        }

        #flow_overview .title_box h2 span {
            padding-right: 10px;
        }

        #flow_overview .title_box h2 span img {
            vertical-align: baseline;
            width: 22px;
        }

        /* Flow overview - tablet (960px) */
        @media only screen and (max-width: 959px) {
            #flow_overview {
                margin-top: 80px;
            }

            #flow_overview .title_box h2 {
                font-size: 22px;
            }

            #flow_overview .title_box h2 span {
                height: 20px;
            }
        }

        /* Flow overview - mobile (644px) */
        @media only screen and (max-width: 644px) {
            #flow_overview {
                margin-top: 70px;
            }

            #flow_overview .wrapper {
                display: block;
            }

            #flow_overview .title_box h2 {
                font-size: 22px;
                padding-bottom: 0px;
            }

            #flow_overview .title_box h2 span {
                width: 18px;
                padding-right: 7px;
            }

            #flow_overview .title_box h2 span img {
                height: 18px;
            }
        }

        /* ========================================
   GALLERY SECTION - Project Examples
   Added: 2025-09-11
   - Grid layout for project images
   - Hover effects
======================================== */
        #gallery {
            margin-top: 100px;
        }

        #gallery .wrapper {
            max-width: 1200px;
            position: relative;
            overflow: visible;
        }

        /* Gallery title box */
        #gallery .title_box {
            border-bottom: 1px solid #D6D6D6;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-bottom: 10px;
        }

        #gallery .title_box h2 {
            font-family: "はんなり明朝", YuMincho, "游明朝", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
            font-size: 22px;
            text-align: left;
            line-height: 1.6;
        }

        #gallery .title_box h2 span {
            padding-right: 10px;
        }

        #gallery .title_box h2 span img {
            vertical-align: baseline;
        }

        /* Gallery grid - 3 columns */
        #gallery .gallery_box {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-top: 40px;
        }

        #gallery .gallery_box .box {
            width: calc(100% / 3);
            padding: 0 20px 40px 20px;
            box-sizing: border-box;
        }

        #gallery .gallery_box .box a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        #gallery .gallery_box .box a h3 {
            font-size: 18px;
            line-height: 1.2 !important;
            margin-top: 5px;
        }

        /* Gallery image with hover effect */
        #gallery .gallery_box .box a .image {
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            position: relative;
            z-index: 2;
            height: auto;
            overflow: hidden;
        }

        #gallery .gallery_box .box a .image img {
            aspect-ratio: 1.54 / 1;
            width: 100%;
            height: auto;
            object-fit: cover;
            position: relative;
            z-index: 2;
        }

        #gallery .gallery_box .box a:hover .image {
            opacity: 0.8;
        }

        #gallery .gallery_box .box a:hover h3 {
            color: #663300;
        }

        /* "View all" link positioned at top right */
        #gallery .gallery_box .link {
            position: absolute;
            right: 0;
            top: -35px;
        }

        /* Gallery - tablet (960px) - 2 columns */
        @media only screen and (max-width: 959px) {
            #gallery {
                margin-top: 80px;
            }

            #gallery .wrapper {
                max-width: 100%;
            }

            #gallery h2 {
                font-size: 24px;
            }

            #gallery h2 span {
                height: 18px;
            }

            #gallery .gallery_box .box {
                width: calc(100% / 2);
            }

            /* Hide last item on tablet */
            #gallery .gallery_box .box:last-child {
                display: none;
            }

            #gallery .gallery_box .box a .image {
                height: auto;
            }

            #gallery .gallery_box .box a h3 {
                font-size: 18px;
            }
        }

        /* Gallery - mobile (644px) - 2 columns */
        @media only screen and (max-width: 644px) {
            #gallery {
                margin-top: 70px;
            }

            #gallery h2 {
                font-size: 24px;
            }

            #gallery h2 span {
                height: 18px;
                padding-right: 5px;
            }

            #gallery .gallery_box {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
            }

            #gallery .gallery_box .link {
                top: 10px;
            }

            #gallery .gallery_box .box {
                width: calc(100% / 2);
            }

            #gallery .gallery_box .box a .image {
                height: auto;
            }

            #gallery .gallery_box .box a h3 {
                font-size: 18px;
            }
        }

        /* ========================================
   CUSTOM OVERRIDE
   Added: 2025-10-01
   - Remove top margin for common flow
======================================== */
        .cmn_flow.flow_overview_wrap#flow_overview {
            margin-top: 0px;
        }