/* === ヘッダーのカスタムスタイル === */
        
       /* スムーススクロールを有効化 */
        html {
            scroll-behavior: smooth;
        }

        /* index.htmlからの継承スタイル */
        body {
            font-family: 'Inter', "游ゴシック", "YuGothic", "游ゴシック体", "Noto Sans JP", "BIZ UDPGothic", "Meiryo", "Helvetica Neue", "Arial", sans-serif;
            background-color: #f8f8f8;
            color: #433f37;
            overflow-x: hidden;
        }

        body.noscroll {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }




		p{
			font-size: 1rem;
			text-align: left;
			line-height: 1.9;
		}
		
        @media (max-width: 768px) {
			p{
				font-size: 0.9rem;
				line-height: 1.9;
			}
		}
		
		.pc{
			display: block;
		}
		
		.sp{
			display: none!important;
		}
		
		
        @media (max-width: 768px) {
		.pc{
			display: none!important;
		}
		
		.sp{
			display: block!important;
		}
		
        }
        
        main{ position: relative; padding-top:  7rem;}

        @media (max-width: 768px) {main{ position: relative; padding-top: 3.5rem!important }}

        /* 1. ヘッダー全体のスタイル調整 */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 50;
            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            /* モバイルヘッダーの高さに合わせて調整 */
            min-height: 80px; 
        }

        @media (max-width: 1023px) {.header-content{display: none!important;}}


        /* PCサイズでは常に白ヘッダーを強制  */
        @media (min-width: 1024px) {
            #main-header {
                background-color: white !important;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            }
            #main-header .header-logo-text, 
            #main-header .header-logo-subtext, 
            #main-header .header-sns-icon {
                color: #2e2b25 !important;
            }
            #main-header .header-top-row {
                border-bottom-color: #ddd !important;
				border: none;
            }
			
			#header-logo-container-pc img{
				width: 9rem;
				filter: brightness(0) saturate(100%) invert(23%) sepia(8%) saturate(543%) hue-rotate(5deg) brightness(95%) contrast(89%);
			}
        }

		
        /* --- スマホ版ヘッダーの色制御 --- */

        /* スクロール前 (FV上): 透明背景 */
        .transparent-header {
            background-color: transparent;
            box-shadow: none;
        }

        /* スクロール後 (FV通過後): 白背景 */
        .scrolled-header {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        /* モバイルメニュー展開時: 強制的に白背景・黒文字 */
        #main-header.is-menu-open {
            background-color: white !important;
            box-shadow: none !important;
        }
        #main-header.is-menu-open .header-logo-text, 
        #main-header.is-menu-open .header-logo-subtext, 
        #main-header.is-menu-open .header-sns-icon {
            color: #2e2b25 !important;
        }
        #main-header.is-menu-open .hamburger-button .bar {
            background-color: #2e2b25 !important;
        }

        /* ロゴとアイコンのトランジション */
        .header-logo-text, .header-logo-subtext, .header-sns-icon, .hamburger-button .bar {
            transition: color 0.3s ease, background-color 0.3s ease;
        }

        /* === スマホ版: スクロール前 (white-logoクラスがある時) === */
        /* ロゴ: 白 */
        .white-logo .header-logo-text { color: white; }
        .white-logo .header-logo-subtext { color: rgba(255, 255, 255, 0.9); }
        
        /* SNSアイコン: 白 */
        .white-logo .header-sns-icon { color: white; }
        
        /* ハンバーガーボタン: 白 */
        .white-logo .hamburger-button .bar { background-color: white; }

		#header-logo-container-mobile img{width: 8rem;}
		
        /* === スマホ版: スクロール後 (scrolled-headerクラスがある時) === */
        /* ロゴ: 黒 */
        .scrolled-header .header-logo-text { color: #2e2b25; }
        .scrolled-header .header-logo-subtext { color: #555; }
        
        /* SNSアイコン: 黒 */
        .scrolled-header .header-sns-icon { color: #2e2b25; }
        
        /* ハンバーガーボタン: 黒 */
        .scrolled-header .hamburger-button .bar { background-color: #2e2b25; }

		/* 1. スクロール前（背景が透明な時）：ロゴを白くする */
		.white-logo #header-logo-container-mobile img {
		    filter: brightness(0) invert(1);
		}

		/* 2. スクロール後（背景が白くなった時）：ロゴを濃いグレー（#2e2b25に近い色）にする */
		.scrolled-header #header-logo-container-mobile img,
		#main-header.is-menu-open #header-logo-container-mobile img {
		    filter: brightness(0) saturate(100%) invert(23%) sepia(8%) saturate(543%) hue-rotate(5deg) brightness(95%) contrast(89%);
		}
		
        /* PCナビゲーションのスタイル調整  */
        .scrolled-header .nav-item-desktop {
             border-right: 1px solid #ddd;
        }
        .scrolled-header .nav-item-desktop:first-child {
             border-left: 1px solid #ddd;
        }

        .nav-item-desktop {
            flex-shrink: 0;
            padding: 0 1.5rem;
            border-right: 1px solid #ddd;
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: color 0.3s ease, background-color 0.2s;
            position: relative;
			color: #433f37;
        }
        .nav-item-desktop:first-child {
            border-left: 1px solid #ddd;
        }
        /* ホバー時のテキスト色をゴールドにする */
        .nav-item-desktop:hover,
        .nav-item-desktop.active {
            color: #a67c34; /* ゴールドに変更 */
            background-color: rgba(255, 255, 255, 0.9);
        }
        .nav-item-desktop.active {
            font-weight: 700;
        }
        .nav-item-desktop::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 0;
            height: 3px;
            background-color: #a67c34;
            transition: width 0.3s ease-out;
        }
        .nav-item-desktop:hover::after,
        .nav-item-desktop.active::after {
            width: 100%;
        }

        .header-top-row {
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 1.5rem;
            position: relative;
        }
        .header-sns {
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
        }
        
        /* 1. ハンバーガーボタン */
        .hamburger-button {
            width: 44px;
            height: 44px;
            padding: 10px;
            position: relative;
            cursor: pointer;
            z-index: 960; 
            box-sizing: border-box; 
            display: flex; 
            flex-direction: column;
            justify-content: space-around; 
        }
        
        .hamburger-button .bar {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #2e2b25; /* デフォルト色 */
            position: relative; 
            left: 0;
            border-radius: 1px;
            transition: all 0.3s ease-in-out;
        }

        /* 閉じるボタン (X) の状態 */
        .hamburger-button.is-open .bar {
            background-color: #2e2b25 !important; /* メニューが開いているときは常に黒 */
        }
        .hamburger-button.is-open .bar1 {
            transform: translateY(8px) rotate(45deg); 
        }
        .hamburger-button.is-open .bar2 {
            opacity: 0;
        }
        .hamburger-button.is-open .bar3 {
            transform: translateY(-8px) rotate(-45deg);
        }

        /* 4. モバイルヘッダー内の SNS アイコンの調整 */
        .header-mobile-sns-group {
             margin-right: 0.5rem;
             display: flex;
             align-items: center;
             gap: 0.6rem;
        }
        .mobile-buttons-wrapper {
             display: flex;
             align-items: center;
             flex-shrink: 0;
             margin-left: auto;
        }
        .header-sns-icon {
            width: 2rem;
            height: 2rem;
        }
        
        /* === モバイルメニュー本体のカスタムスタイル (#mobile-nav-overlay) === */
        #mobile-nav-overlay {
            position: fixed;
            /* ヘッダーの下から表示されるように top: 80px に変更 */
            top: 80px; 
            left: 0;
            width: 100%;
            /* ヘッダーの高さを引いた高さ */
            height: calc(100% - 80px); 
            background-color:#fefefe; 
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* ヘッダーのz-index(50)より高く、ハンバーガーボタン(960)より低く */
            z-index: 950; 
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
            padding: 0.5rem 1.5rem 1rem;
            display: flex;
            flex-direction: column;
        }
        #mobile-nav-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }

        #mobile-nav-overlay {
            /* メニュー自体はスクロールできるようにする */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* モバイルメニューヘッダーは不要になったため削除 */
        #mobile-nav-header {
            display: none; 
        }
        
        #mobile-menu {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            width: 100%;
            overflow-y: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
            /*padding-top: 1rem;*/
        }
        #mobile-menu::-webkit-scrollbar {
            display: none;
        }
        
        /* ナビゲーションリンクのスタイル */
        #mobile-menu a {
            color: #2e2b25;
            text-decoration: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.9rem 0.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }
        #mobile-nav-overlay.is-open #mobile-menu a {
            opacity: 1;
            transform: translateX(0);
        }
        
        #mobile-menu a .menu-text {
            display: flex;
            align-items: center!important;
			flex-direction: row!important;
        }
        
        #mobile-menu a .menu-text .en {
            display: block;
            /*font-family: 'Prata', serif;*/
            font-size: 1.2rem;
            font-weight: bold;
            color: #2e2b25 ;
            margin-right: 1rem;
        }

        @media (max-width: 768px) {
        #mobile-menu a .menu-text .en {
            font-size: 1.1rem;
        }}

        #mobile-menu a .menu-text .ja {
            display: block;
            font-size: 0.75rem;
            color: #69645a;
            margin-top: 0.2rem;
        }
        #mobile-menu a .arrow-icon {
            font-size: 0.8rem;
            color: #aaa;
        }
        
        .menu-text img{
            margin-right: 10px;	
        }

        .menu-text span{
        	color: #2e2b25;
			margin-top: 0!important;
        }

        /* CTAボタンのスタイル  */
        #mobile-menu a.contact-button {
		    background: #a67c34;
            /*background:linear-gradient(135deg, #2e2b25, #5a564d);*/
            border-radius: 5px;
		    background: #2e2b25;
            margin-top: 1.5rem;
            padding: 1.5rem 1.5rem;
            justify-content: center;
            border: none;
            text-align: center;
            /*box-shadow: 0 4px 15px rgba(0,0,0,0.1);*/
        }
        #mobile-menu a.contact-button .menu-text {
            flex-direction: column;
            align-items: center;
			line-height: 1.2rem;
			/*padding-top: 5px;*/
        }
        #mobile-menu a.contact-button .menu-text .en,
        #mobile-menu a.contact-button .menu-text .ja {
            color: white;
            margin-right: 0;
        }
        #mobile-menu a.contact-button .menu-text .en {
            font-size: 1.3rem;
            /*font-family: 'Noto Sans JP', sans-serif;*/
            font-weight: 700;
        }
        #mobile-menu a.contact-button .menu-text .ja {
            font-size: 1rem;
            /*margin-top: 0.25rem;*/
        }
        #mobile-menu a.contact-button .arrow-icon {
            display: none;
        }

        #mobile-nav-footer {
			display: none;
            flex-shrink: 0;
            padding-top: 1.5rem;
            text-align: center;
        }
		
        .mobile-nav-sns {
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
        }
        .mobile-nav-sns a {
            color: #888;
            font-size: 1.5rem;
            transition: color 0.2s;
        }
        .mobile-nav-sns a:hover {
            color: #2e2b25;
        }

        .tel-botton{
            margin-top: 0.5rem!important;
        	border: solid 1px!important;
            color: #2e2b25!important;
            background-color: #fff!important;
        }

        .tel-botton span{
            color: #2e2b25!important;
        }


        .footer-links-mobile a {
            color: #999;
            font-size: 0.8rem;
            text-decoration: none;
        }
        
        /* アニメーション遅延  */
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(1) { transition-delay: 0.1s; }
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(2) { transition-delay: 0.15s; }
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(3) { transition-delay: 0.2s; }
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(4) { transition-delay: 0.25s; }
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(5) { transition-delay: 0.3s; }
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(6) { transition-delay: 0.35s; }
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(7) { transition-delay: 0.4s; }
        #mobile-nav-overlay.is-open #mobile-menu a:nth-child(8) { transition-delay: 0.45s; }
        #mobile-nav-overlay.is-open #mobile-menu a.contact-button { transition-delay: 0.5s; }

		.footer-inner{
		    padding: 0 2.2rem;
		}

		
		.copy p{
			font-size: 0.8rem;
			text-align: center;
		}

		/* LINEのブランドカラー（緑）を適用する場合 */
		.fab.fa-line {
			/*color: #2e2b25;*/
		    font-size: 2rem; 
		    vertical-align: middle;
		    position: relative;
			padding-right: 0.2rem;	
		}
		
		/* LINEアイコンの色切り替え設定 */
		.white-logo .fab.fa-line {
			color: white !important;
		}

		.scrolled-header .fab.fa-line,
		#main-header.is-menu-open .fab.fa-line {
		    color: #2e2b25 !important;
		}

		/* ついでにマウスホバー時の透過も他のアイコンと合わせる */
		.fab.fa-line {
		    transition: color 0.3s ease;
		}
		
		.fa-line-ft{
			color: #fff!important;
			font-size: 1.95rem!important;
		    padding-bottom: 0.1rem;
			padding-right: 0 !important;
		}

		/* 電話アイコンの色を適用する場合 */
		.fas.fa-phone-alt {
		    color: #2e2b25; /* サイトのメインカラー */
		    font-size: 1rem;
		    vertical-align: middle;
			padding-left: 8px;
			transform: scaleX(-1);
		}
		
		.fas.fa-phone-alt-wh {
		    color: #fff; 
			padding-left: 0;
		}		
		

		/* ボタンとしてデザインを整える場合 */
		.btn-line {
		    background-color: #06C755;
		    color: #ffffff;
		    padding: 10px 20px;
		    border-radius: 50px;
 		   text-decoration: none;
		    display: inline-block;
		}


.bg-\[\#3498db\]{--tw-bg-opacity:1;background-color:#a67c34!important;}

     /* 固定CTAバナー用CSS (FV通過後に出現、ふわっとアニメーション) */
        #fixed-cta-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            background-color: white;
            box-shadow: -2px 10px rgba(0, 0, 0, 0.1);
            /* 初期状態を非表示・透明に設定 */
            opacity: 0;
            visibility: hidden;
            transform: translateY(100%); /* 画面外に隠す */
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out; 
        }
        @media (min-width: 768px) {
            #fixed-cta-bar {
                display: none;
            }
        }
		
        #fixed-cta-bar a{
            padding: 1rem;
        }	
		
        /* 表示状態を定義 */
        #fixed-cta-bar.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

	/* トップに戻るボタンのベーススタイル修正 */
		#scrollToTopBtn {
		    position: fixed;
		    bottom: 4rem;
 		   right: 0.8rem; 
		    z-index: 40;
		    background-color: black;
		    color: white;
		    padding: 0.75rem; 
		    border-radius: 9999px;
		    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
		    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
		    opacity: 1;
		    visibility: visible;
		    transform: translateY(0);
		}

		/* 非表示状態（ふわっと消えるための設定） */
		#scrollToTopBtn.hidden {
		    display: block !important; /* display:noneにするとアニメーションしないのでblockのままにする */
			opacity: 0;
 		    visibility: hidden;
		    transform: translateY(20px); /* 消える時に少し下に下がる演出 */
		    pointer-events: none; /* クリックできないようにする */
		}

		@media (min-width: 768px) {
 		   #scrollToTopBtn {
		        bottom: 1.5rem;
		        right: 1.5rem;
		    }
		}
		
	

		/* --- サイド追従バナー全体のコンテナ --- */
		@media (min-width: 768px) {
		    #fixed-cta-side-pc {
		        position: fixed;
		        top: 60%;
		        right: 0; /* スクロールバーとの干渉防止 */
		        transform: translateY(-50%);
		        gap: 0.4rem;
		        z-index: 100;
		        display: flex;
		        flex-direction: column;
		        padding-right: env(safe-area-inset-right);
		    }

    /* 各バナー項目の基本設定 */
    .cta-side-item {
        padding: 2rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ffffff !important; /* 初期状態の文字・アイコン色を強制的に白にする */
        text-decoration: none;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
       /* border: 1px solid transparent;*/
        border: 1px solid #fff;		
    }

    /* アイコンの設定：常に親(cta-side-item)の文字色と同じにする */
    .cta-side-item i,
    .cta-side-item svg {
        width: 20px;
        height: 20px;
        font-size: 1.1rem;
        margin-bottom: 5px;
        color: inherit !important; /* これにより文字色が変わればアイコンも一緒に変わる */
        fill: currentColor; /* SVG用 */
        transition: color 0.3s ease;
		padding-left: 0!important;
    }

    /* ホバー時の共通挙動：背景を白にする */
    .cta-side-item:hover {
        background-color: #ffffff !important;
    }

    /* WEB予約ボタン：初期背景は金茶、ホバーで文字とアイコンを金茶に */
    .cta-side-item.web-reserve { background-color: #a67c34; }
    .cta-side-item.web-reserve:hover {
        color: #a67c34 !important; /* ホバー時に白背景の上でこの色になる */
        border-color: #a67c34;
    }
	
	.cta-side-item.web-reserve:hover img {
        /* brightness(0)で黒にし、sepiaなどのフィルターを組み合わせて金茶色に近づける */
        filter: invert(53%) sepia(35%) saturate(740%) hue-rotate(356deg) brightness(91%) contrast(88%);
    }

    /* 電話予約ボタン：初期背景は焦げ茶、ホバーで文字とアイコンを焦げ茶に */
    .cta-side-item.tel-reserve { 
        background-color: #2e2b25;
        border-top: 1px solid rgba(255, 255, 255, 0.2); 
    }
    .cta-side-item.tel-reserve:hover {
        color: #2e2b25 !important; /* ホバー時に白背景の上でこの色になる */
        border-color: #2e2b25;
    }

    /* テキスト設定（縦書き） */
    .cta-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 1.2rem;
        font-weight: 600;
        white-space: nowrap;
        letter-spacing: 0.13em;
    }

    /* WEBの文字間隔を狭くする */
    .cta-text .tight {
        letter-spacing: -0.25rem;
        display: inline-block;
        margin-bottom: 0.2em;
    }
}
		.cta-side-item.web-reserve img {
			filter: brightness(0) invert(1);
		}



      /* === フッターのカスタムスタイル  === */

        footer img{
        	filter: brightness(0) invert(1);
			max-width: 170px;
        }

        @media (max-width: 768px) {
        footer img{
            width: 90%;
            margin-bottom: 1rem;
        }
			
        footer{
            padding-top: 3.5rem!important;
            padding-bottom:5rem!important;
        }

        .footer-inner {
             padding: 0 1.5rem;
        }}


        .footer-logo-sns-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 3rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .footer-sns-group {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1.5rem;
		    justify-content: center;
			padding-top: 4rem;
        }
        .footer-sns-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            font-size: 0.75rem;
            font-weight: 700;
            transition: opacity 0.2s;
			width: 3.5rem;
        }
        .footer-sns-item:hover {
            opacity: 0.7;
        }
        .footer-sns-icon {
            width: 28px;
            height: 28px;
            margin-bottom: 4px;
        }



   
        /* ========================================================== */
        /* === スペシャルコンテンツセクションのカスタムスタイル=== */
        /* ========================================================== */
        

        .section-title-container {
			width: 100%;
            display: flex;
            align-items: flex-start; /* デフォルトを 'flex-start' に設定 */
            margin-bottom: 2rem;
            position: relative;
        }
		
        @media (max-width: 768px) {	
			.section-title-container {
				flex-direction: column!important;
			}
		}
		
		

     .main-title-en {
            font-size: 3rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: #2e2b25;
            line-height: 1;
            padding-right: 3.5rem;
			position: relative;
        }
		
        @media (max-width: 768px) {	
			.main-title-en {
				padding-right: 0;
				font-size: 2.5rem;
			}
		}	

        .main-title-jp {
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            color: #2e2b25;
            padding-bottom: 0.2rem;
            margin-left: 1.2rem;
            position: relative;
            z-index: 10;
			top: 1.5rem;
		    display: block;
        }
        .main-title-en::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 16rem;
            width: 3rem;
            height: 1px;
            background-color: #2e2b25;
        }


		/*--スマホタイトル共通---*/
		@media (max-width: 768px) {
			.main-title-jp {
				top: 0.8rem;
		        margin-left: 2.8rem;
		        font-size: 1rem;
		        padding-bottom: 0;
			}

			.main-title-en::after {
				top: 4.5rem;
				width: 2rem;
				left: 0!important;
			}
		}
		

		.main-title-en-contents::after{
			    left: 18.5rem;
		}

		#special-contents{
			padding-top: 8rem;
			padding-bottom: 7rem;
			/*background-color: #fff;*/
		}

		#dotsContainer-new{
			margin-top: 4rem;
		}

		@media (max-width: 768px) {
		#special-contents{
		    padding-top: 5.5rem;
			padding-bottom: 4rem;
		}
			
		#dotsContainer-new{
			width: 88%;
			margin: 0 auto;
		}}


        .slider-nav-bar {
            position: relative;
            width: 100%; /* スライドバーの長さ */
            max-width: 400px; /* バーの最大幅 */
            height: 4px;
            background-color: #e5e7eb; /* 薄いグレーのバー */
            border-radius: 2px;
            margin-top: 1.5rem;
            margin-bottom: 1rem;
        }

        .slider-indicator-button {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%); /* 中央寄せ */
            width: 18px; /* 丸ボタンのサイズ */
            height: 18px;
            background-color: #2e2b25; /* 黒い丸ボタン */
            border-radius: 50%;
            cursor: grab;
            transition: transform 0.3s ease; /* スナップ時のアニメーション */
            touch-action: none; /* インジケーターの縦移動を無効化 */
            user-select: none;
            z-index: 10;
        }

        .slider-indicator-button.grabbing {
             cursor: grabbing;
             transition: none; /* ドラッグ中はアニメーションを無効化 */
        }
		
		.slide-txt{
			padding: 2rem;
			background-color: #fff;
		}
		
		.slide-txt h3{
			font-size: 1.3rem;
		}
        
        @media (max-width: 767px) {
		.slide-txt h3{
			font-size: 1.1rem;
		}}

        /* スライダー固有のスタイル */
        .slider-container-new {
            overflow: hidden;
            touch-action: pan-y; /* 縦スクロールは許可しつつ、横スワイプを検知 */
            user-select: none; /* ドラッグ中のテキスト選択防止 */
            -webkit-user-drag: none;
        }

        .slider-track-new {
            display: flex;
            transition: transform 0.3s ease-out; /* 通常時の動き */
            cursor: grab; /* マウスカーソルを手の形に */
        }

        .slider-track-new.grabbing {
            cursor: grabbing; /* 掴んでいる時のカーソル */
            transition: none; /* ドラッグ中は遅延なしで追従させる */
        }

        .slide-new {
            min-width: 100%; /* モバイルは1枚表示 */
            /*padding: 0 10px;*/
            box-sizing: border-box;
            flex-shrink: 0;
            height: auto; /* コンテンツに合わせて高さを調整 */
			width: calc(100%/4);
        }
        
		
		
		
        .slide-new .slide-card {
             /* カード内の高さを揃えるための設定 */
            height: 100%; 
        }

        /* タブレット以上でスライド幅を調整 */
        @media (min-width: 768px) {
            .slide-new {
				padding: 0 1.5rem 0 0;
                min-width: 50%; /* 2枚表示 */
            }
        }

        @media (min-width: 1024px) {
            .slide-new {
                min-width: 33.333%; /* 3枚表示 */
            }
        }
		
        @media (max-width: 767px) {
            .slide-new {
				width: 100%;
            }
        }	

        .slide-new img {
            pointer-events: none; /* 画像のドラッグ挙動を無効化（スライダー自体のドラッグを優先） */
            -webkit-user-drag: none;
        }
        
        /* === NEW: スライダーナビゲーションバーのスタイル === */
        .slider-nav-bar {
            position: relative;
            width: 100%; /* スライドバーの長さ */
            max-width: 400px; /* バーの最大幅 */
            height: 4px;
            background-color: #e5e7eb; /* 薄いグレーのバー */
            border-radius: 2px;
            margin-top: 1.5rem;
            margin-bottom: 1rem;
        }

        .slider-indicator-button {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%); /* 中央寄せ */
            width: 18px; /* 丸ボタンのサイズ */
            height: 18px;
            background-color: #2e2b25; /* 黒い丸ボタン */
            border-radius: 50%;
            cursor: grab;
            transition: transform 0.3s ease; /* スナップ時のアニメーション */
            touch-action: none; /* インジケーターの縦移動を無効化 */
            user-select: none;
            z-index: 10;
        }

        .slider-indicator-button.grabbing {
             cursor: grabbing;
             transition: none; /* ドラッグ中はアニメーションを無効化 */
        }
		
		.slide-txt{
			padding: 2rem;
			background-color: #fff;
		}
		
		.slide-txt h3{
			font-size: 1.3rem;
		}


		/*#prevBtn{
			background: #fff;
		}

		#nextBtn{
			background: #fff;
		}

     /* アニメーション */
        .fade-in-section { opacity: 0; transform: translateY(40px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
        .fade-in-section.is-visible { opacity: 1; transform: translateY(0); }