@charset "UTF-8";

        :root {
            --sidebar-width: 210px;
            --main-green: #337541;
            --main-bg: #f5f0e6;
            --bs-link-color: #337541;
            --bs-link-hover-color: #337541;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
            overflow-x: hidden;
        }

        /* =========================================
           レイアウト関連
        ========================================= */
        .wrapper {
            display: flex;
            min-height: 100vh;
        }

        .main-content {
            flex-grow: 1;
            min-width: 0;
        }

        /* =========================================
           サイドバー設定（PC・スマホ共通のベース）
        ========================================= */
        #sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            height: 100dvh; /* iOSのツールバー対策 */
            background-color:#eeeeee;
            display: flex !important;
            flex-direction: column !important;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1050;
        }

        .logo-mark {
            display: grid;
            place-items: center;
            background-color: var(--main-green);
            width: 100%;
            padding: 25px 20px 15px;
            flex-shrink: 0;
        }

        /* メニューをスクロールさせるためのエリア設定 */
        .sidebar-scroll-area {
            flex-grow: 1;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            min-height: 0; 
            scrollbar-width: thin;
        }

        /* フッター（お問い合わせ等）を最下部に固定 */
        .sidebar-footer {
            flex-shrink: 0;
            margin-top: auto;
            width: 100%;
            background-color: var(--main-bg);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .sidebar-contact {
            background-color: #a57c52;
            padding: 1rem;
            color: white;
            text-align: center;
        }

        .sidebar-contact p {
            font-size: 18px;
            margin: 0;
        }

        .sidebar-contact p a {
            text-decoration: none;
            display: block;
        }

        /* ナビゲーションリンクの装飾 */
        a.nav-link {
            font-size: 16px;
            font-weight: bold;
            color: black;
        }

        ul.list-unstyled a.nav-link {
            padding: 0px 0px 8px 18px;
        }

        .nav-link::before {
            content: "\F287"; 
            font-family: "bootstrap-icons";
            font-size: 10px;
            margin-right: 5px;
            color: var(--main-green);
            display: inline-block;
        }

        #exterior-menu .nav-link::before {
            content: none !important;
        }

        /* =========================================
           メインコンテンツ・パーツ
        ========================================= */
        .bg-hero {
            background-image: url('../images/bg-img-pc3.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 80vh;
            min-height: 580px;
            width: 100%;
            position: relative;
        }

        .logo-bg-fix {
            background-color: var(--main-green);
            padding: 20px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .logo-bg-fix img {
            width: 70px;
            height: 70px;
        }

        p.cp-top {
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-weight: 700;
            font-size: 27px;
            line-height: 2.1;
            margin-bottom: 0.25em;
            text-align: center;
        }

        h5.cp-read {
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-weight: 500;
            font-size: 26px;
            line-height: 1.45;
            margin-top: 30px;
            margin-bottom: 0.25em;
            color: var(--main-green);
        }

        .bg-col {
            background-color: var(--main-bg);
            border-radius: 30px;
            padding: 25px;
        }

        .bg-col-2nd {
            background-color: #FFF;
            border-radius: 30px;
            padding: 25px;
            border: 1px solid #999;
        }

        .bg-col-2nd h2, .bg-col-2nd h3 {
            font-size: 26px;
            font-weight: bold;
            text-align: center;
            color: var(--main-green);
        }

        .bg-col-2nd p {
            font-size: 20px;
            line-height: 1.6;
            margin-bottom: 0;
        }

        .service { padding: 25px 50px; }
        .service h2 { 
            font-size: 60px; 
            color: var(--main-green); 
            text-align: center; 
            font-family: "Cabin Sketch", sans-serif;
            font-weight: 700; 
        }
        .service h3 { font-size: 50px; color: var(--main-green); text-align: center; }
        .service h4 { font-size: 24px; text-align: center; margin-bottom: 20px;}
        .service p { font-size: 20px; line-height: 1.8; margin-bottom: 0; }

        .section-wrap {
            margin-top: 30px;
            border-radius: 30px;
            padding: 15px;
        }

        h5.select-deck {
            font-size: 19px;
            font-weight: bold;
            text-align: center;
            color: var(--main-green);
        }

        .btn-success {
            --bs-btn-bg: #337541;
            --bs-btn-border-color: #337541;
            --bs-btn-hover-bg: #a57c52;
            --bs-btn-hover-border-color: #a57c52;
        }

        /* 画像グリッド設定 */
        .grid-ratio-box {
            width: 100%;
            height: 100%;
            min-height: 180px;
            aspect-ratio: 16 / 9;
            border-radius: 16px !important;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .space-rb { border-radius: 16px !important; padding-right: 10px; padding-bottom: 10px; }
        .space-rt { border-radius: 16px !important; padding-right: 10px; padding-top: 10px; }
        .space-lb { border-radius: 16px !important; padding-left: 10px; padding-bottom: 10px; }
        .space-lt { border-radius: 16px !important; padding-left: 10px; padding-top: 10px; }

        .skydeck { position: relative; top: 0; left: 0; }
        img.pic-skydeck { position: absolute; bottom: 15px; right: 15px; }

        /* 画像の背景設定 */
        .box-deck1 { background-image: url('../images/img-deck1.jpg'); }
        .box-deck2 { background-image: url('../images/img-deck2.jpg'); }	
        .box-deck3 { background-image: url('../images/img-deck3.jpg'); }	
        .box-deck4 { background-image: url('../images/img-deck4.jpg'); }		
        .box-carport1 { background-image: url('../images/img-carport1.jpg'); }
        .box-carport2 { background-image: url('../images/img-carport2.jpg'); }	
        .box-carport3 { background-image: url('../images/img-carport3.jpg'); }	
        .box-carport4 { background-image: url('../images/img-carport4.jpg'); }	
        .box-entrance1 { background-image: url('../images/img-entrance1.jpg'); }
        .box-entrance2 { background-image: url('../images/img-entrance2.jpg'); }	
        .box-entrance3 { background-image: url('../images/img-entrance3.jpg'); }	
        .box-entrance4 { background-image: url('../images/img-entrance4.jpg'); }	
        .box-other1 { background-image: url('../images/img-other1.jpg'); }
        .box-other2 { background-image: url('../images/img-other2.jpg'); }	
        .box-other3 { background-image: url('../images/img-other3.jpg'); }	
        .box-other4 { background-image: url('../images/img-other4.jpg'); }	

        /* =========================================
           アニメーションテキスト (Textyle.js用)
        ========================================= */
        .text-animate-1 {
            opacity: 0; /* JS読み込み前のガタつき防止 */
/*            font-size: 1.5rem;
            line-height: 1.4;
            padding-bottom: 85px; 
            padding-left: 0;*/
        }

        .text-animate-1 span {
            display: inline-block;
            color: transparent; 
            transition: color 0.8s ease, font-size 0.3s ease; 
        }

        .text-animate-1 span.is-active {
            color: var(--main-green); 
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-weight: 700;
            line-height: 1.4;
            -webkit-text-stroke: 8px #FFF;
            paint-order: stroke;
        }

        /* =========================================
           フッター・お問い合わせ
        ========================================= */
        .footer-box {
            background-color: var(--main-green);
            width: 100%;
            padding-top: 50px;
            margin-top: 50px;
        }

        .contact-box {
            background-color: var(--main-bg);
            max-width: 1000px;
            color: #333;
        }

        .contact-box h2 { font-size: 38px; font-weight: bold; }
        .contact-box p { font-size: 20px; }

        .company-box { text-align: center; color: #FFF; }
        .company-box h2 { font-size: 20px; font-weight: bold; }
        .company-box p { font-size: 14px; margin-top: 15px;}
        .company-box p.copyright { font-size: 12px; margin-top: 40px; }

        .menu-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FFF;
            padding: 0;		
            margin: 0px;
            border: 1px solid #cccccc;
            position: fixed;
            top: 30px;
            right: 30px;
        }

        .txt-small {
            font-size: 16px!important;
            text-align: center;
            padding-top: 10px;
            margin-bottom: 0;
        }	

        p.tel-mail {
            font-size: 20px;
            line-height: 1.4;
            font-weight: bold;
            margin-bottom: 0;
            color: #2e7d32;
        }	

        /* =========================================
           モーダル関連
        ========================================= */
/* =========================================
   モーダル表示時のスクロールロック解除（超重要）
========================================= */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}		
        .modal-dialog-bottom-right {
            position: fixed;
            bottom: 15px;
            right: 15px;
            margin: 20px;
            max-width: 400px;
        }

        .btn-modal-close {
            position: absolute;
            top: -15px;
            right: -15px;
            z-index: 1060;
            width: 40px;
            height: 40px;
            background-color: #d97706;
            border-radius: 50%;
            border: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
            background-position: center;
            background-size: 14px;
            background-repeat: no-repeat;
            transition: transform 0.2s ease;
            cursor: pointer;
        }

        .btn-modal-close:hover {
            background-color: #b45309;
            transform: scale(1.1);
        }

        .modal-backdrop.show {
            display: none !important;
        }

        #PrivacyModal {
            z-index: 9999 !important;
        }

        /* =========================================
           レスポンシブ (メディアクエリ)
        ========================================= */
        /* 1400px未満 */
        @media (max-width: 1399.98px) {
            .section-wrap { margin-top: 30px; background-color: var(--main-bg); border-radius: 30px; padding: 15px; }
			
        }

        /* 1200px以上 */
        @media (min-width: 1200px) {
            .grid-ratio-box { aspect-ratio: 4 / 3; }
			            /* テキストアニメーションのPC用サイズ */
            .text-animate-1 {
                font-size: 45px;
                line-height: 1.6;
                padding-bottom: 120px;
                padding-left: 50px;
            }
        }

        /* 992px以上（PC） */
        @media (min-width: 992px) {
            .main-content { margin-left: var(--sidebar-width); }
            .content-wrapper { max-width: 1680px; padding: 0 40px; margin: 0 auto; }
            #exterior-menu { display: none !important; }
            #exterior-menu.show { display: block !important; }
            .brand-logo { width: 110px; }
            
            /* テキストアニメーションのPC用サイズ */
            .text-animate-1 {
                font-size: 38px;
                line-height: 1.6;
                padding-bottom: 100px;
                padding-left: 50px;
            }
        }

        /* 992px未満（タブレット・スマホ） */
        @media (max-width: 991.98px) {
            section { padding: 0 20px; }
            #exterior-menu { display: block !important; }
            .logo-mark { height: auto; padding: 20px; }
            .brand-logo { width: 70px; }
		            /* テキストアニメーションのPC用サイズ */
            .text-animate-1 {
                font-size:36px;
                padding-bottom: 160px;
                padding-left: 50px;
            }	
        }

        /* 576px未満（小さなスマホ） */
        @media (max-width: 575.98px) {
            .bg-hero {
                background-image: url('../images/bg-img-sp2.jpg');
                background-position: bottom center;
                height: 580px;
                min-height: 400px;
            }
            p.cp-top { font-size: 21px; line-height: 1.9; margin-bottom: 0em; text-align: center; }
            
            .service { padding: 0px; }
            .service h2 { font-size: 45px; padding-top: 15px;}
            .service h3 { font-size: 25px; }
            .service h4 { font-size: 16px; margin-bottom: 20px; }
            .service p { font-size: 17px; line-height: 1.7; margin-bottom: 0; }
            h5.cp-read { font-size: 22px; font-weight: bold; margin-bottom: 0.25em; }
            
            .bg-col-2nd h2, .bg-col-2nd h3 { font-size: 25px; }
            .bg-col-2nd p { font-size: 16px; line-height: 1.6; margin-bottom: 0; }
            
            .footer-box { padding-top: 30px; margin-top: 30px; }
            .contact-box h2 { font-size: 22px; font-weight: bold; }
            .contact-box p { font-size: 16px; }
            .company-box h2 { font-size: 17px; font-weight: bold; }
            .company-box p { font-size: 12px; }
			            /* テキストアニメーションのPC用サイズ */
            .text-animate-1 {
                font-size: 22px;
                padding-bottom: 100px;
                padding-left: 10px;
            }			
        }

/* カタログモーダルのベース設定 */
#catalogModal {
    transition: opacity 0.6s ease-in-out !important;
    pointer-events: auto;
}

/* 消える時の状態（スクロール中・ボタン押下後 共通） */
.modal-fade-hide {
    opacity: 0 !important;
    pointer-events: none !important;
}