/* === ヘッダーのカスタムスタイル === */
        
       /* スムーススクロールを有効化 */
        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:before {
            content: '';
            width: 100vw;
            height: 4px;
            background: #2e2b25;
            z-index: 11;
            position: fixed;
            top: 0;
            left: 0;
        }


        body:after {
            content: '';
            width: 100vw;
            height: 4px;
            background: #2e2b25;
            z-index: 11;
            position: fixed;
            bottom: 0;
            left: 0;
        }


        @media (max-width: 767px) {
        body:after {
            display: none;
        }}
			
			
        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:  8rem;}
        @media (max-width: 768px) {main{ position: relative; padding-top: 5rem;!important}}



       main:before {
           content: '';
           width: 4px;
           height: 100vh;
           background: #28272d;
           z-index: 11;
           position: fixed;
           top: 0;
           keft 0;
       }


       main:after {
           content: '';
           width: 4px;
           height: 100vh;
           background: #28272d;
           z-index: 11;
           position: fixed;
           top: 0;
           right: 0;
       }

        /* 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; 
		    background: #2e2b25;
			color: #fff;
        }

        /* PCサイズでは常に白ヘッダーを強制  */
        @media (min-width: 768px) {
            #main-header {
               background-color: #2e2b25; !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: #fff !important;
            }
            #main-header .header-top-row {
                border-bottom-color: #ddd !important;
				border: none;
            }
			
			#header-logo-container-pc img{
				width: 8rem;
				/*filter: brightness(0) saturate(100%) invert(23%) sepia(8%) saturate(543%) hue-rotate(5deg) brightness(95%) contrast(89%);*/
			}
        }

        .header-wrap{
        	background: #2e2b25;
        }

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

        /* スクロール前 (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: #fff !important;
        }
        #main-header.is-menu-open .hamburger-button .bar {
            background-color: #fff !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: #fff; }
        .scrolled-header .header-logo-subtext { color: #555; }
        
        /* SNSアイコン: 黒 */
        .scrolled-header .header-sns-icon { color: #fff; }
        
        /* ハンバーガーボタン: 黒 */
        .scrolled-header .hamburger-button .bar { background-color: #fff; }

		/* 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 #fff;
        }
        .scrolled-header .nav-item-desktop:first-child {
             border-left: 1px solid #fff;
        }

        .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: #fff
        }
        .nav-item-desktop:first-child {
            border-left: 1px solid #fff;
        }
        /* ホバー時のテキスト色をゴールドにする */
        .nav-item-desktop:hover,
        .nav-item-desktop.active {
            color:#b19a38; /* ゴールドに変更 */
            /*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:#b19a38;
            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);
        }


        .nav-item-desktop[target="_blank"] .text-xs::after {
			display: none!important;
            font-family: "Font Awesome 5 Free";
            content: "\f35d"; /* 斜め右上矢印のUnicode */
            font-weight: 900;
            font-size: 0.6rem;
            margin-left: 4px;
            display: inline-block;
            vertical-align: middle;
        }
        /* 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: #252422eb;
            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: 1rem 0.5rem;
            border-bottom: 0.5px solid #fff;
            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: #fff ;
            margin-right: 1rem;
        }

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

        #mobile-menu a .menu-text .ja {
            display: block;
            font-size: 0.75rem;
            color: #fff;
            margin-top: 0.2rem;
        }

        .menu-btn span{
        	font-weight: bold;
			font-size: 1.05rem !important;
        }
        #mobile-menu a .arrow-icon {
            font-size: 0.8rem;
            color: #aaa;
        }
        
        .menu-text img{
            margin-right: 10px;	
        }

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

        /* CTAボタンのスタイル  */
        .contact-button{
        	background: #917f30;
        }
        #mobile-menu a.contact-button {
		    background: #b19a38;
            /*background:linear-gradient(135deg, #2e2b25, #5a564d);*/
            border-radius: 5px;
            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 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: #fff !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);
		}

		.fa-phone-recruit {
		    font-size: 2rem!important;
		}

		.fas.fa-phone-alt-wh {
		    color: #fff; 
			padding-left: 0;
		}		
		
		.fa-paper-plane {
		    padding-right: 8px;

		}	

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

		.fa-line-recruit {
		    font-size: 2.5rem!important;
		    color: #2e2b25; /* サイトのメインカラー */
		}

		.fa-instagram-recruit {
		    color: #2e2b25; /* サイトのメインカラー */
		}

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

     /* 固定CTAバナー用CSS (FV通過後に出現、ふわっとアニメーション) */
        #fixed-cta-bar {
			margin: 0 auto;
            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; 
        }

        .fixed-margin{
			padding: 0 4px;
        }
        @media (min-width: 768px) {
            #fixed-cta-bar {
                display: none;
            }
			
			.fixed-margin{
				margin: 0;
			}
        }
		
        #fixed-cta-bar a{
            padding: 1rem;
        }	
		
        /* 表示状態を定義 */
        #fixed-cta-bar.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

	/* トップに戻るボタンのベーススタイル修正 */
		#scrollToTopBtn {
		    position: fixed;
		    bottom: 4rem; /* 16相当 */
 		   right: 0.9rem; /* 6相当 */
		    z-index: 40;
		    background-color: black;
		    color: white;
		    padding: 0.75rem; /* 3相当 */
		    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: 4px; /* スクロールバーとの干渉防止 */
		        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: #b19a38; }
    .cta-side-item.web-reserve:hover {
        color: #b19a38 !important; /* ホバー時に白背景の上でこの色になる */
        border-color: #b19a38;
    }
	
	.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{
            background-color: #2e2b25;
        }
			
        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: 3rem;
            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;
			}
		}	

        .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-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;
		}
        

        /* スライダー固有のスタイル */
        .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;
		}


     /* アニメーション */
        .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); }



     /* 応募するセクション */
        .section-title{display: flex; flex-direction: column;  align-items: center; margin-bottom: 3.5rem;}
        .section-title span{ text-align: center;  font-size: 3.8rem;  font-weight: 800;}
         @media (max-width: 768px) { .section-title span{ font-size: 3.5rem!important;}}
         .section-title h2{ font-size: 1.1rem!important; font-family: 'Inter', "游ゴシック", "YuGothic", "游ゴシック体", "Noto Sans JP", "BIZ UDPGothic", "Meiryo", "Helvetica Neue", "Arial", sans-serif!important;}
        .contact-section { background-color: #eee; padding: 8rem 0;}
         @media (max-width: 768px) { .contact-section  { padding: 6rem 0!important;}}
        .application-container { display: grid; grid-template-columns: 2fr 1fr; gap: 1.3rem; align-items: flex-start; }

        @media (max-width: 1047px) {
            .application-container {
                flex-direction: column;
                display: flex;
				gap:20px;
            }
        }

        .application-form-wrapper { width: 100%;  background: #fff; padding:60px 40px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); }

         @media (max-width: 768px) {.application-form-wrapper { padding:60px 30px;}}
        .application-form-wrapper h3 { font-size: 1.8rem; text-align: center; margin-bottom: 70px; font-weight: bold;font-family: 游明朝, YuMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, HG明朝E, MS P明朝, MS 明朝, serif; position:relative;}
        .application-form-wrapper h3:after {content: '';position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 50px; height: 2px;background-color: #b19a38;}
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; }
        .form-group input, .form-group textarea,.form-group input[type="date"] { width: 100%; padding: 12px; border: 1px solid #696255; border-radius: 5px;  font-size: 1rem; transition: border-color 0.3s; }
        .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #696255; }
        .form-submit-btn { width: 100%; padding: 15px; font-size: 1.1rem; }
        .other-methods { display: flex; flex-direction: column; gap: 20px; height: 100%; justify-content: space-between; width: 100%;}
        .method-card { background: #fff; padding: 40px; border-radius: 8px; text-align: center; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); height: calc(100% / 3);}
        @media (max-width: 768px) {.method-card { padding: 30px; }}

        .method-card .icon { font-size: 2.5rem; color:#696255; margin-bottom: 15px; }
        .method-card h4 { font-weight: bold;font-size: 1.4rem; margin-bottom: 10px; font-family: 游明朝, YuMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, HG明朝E, MS P明朝, MS 明朝, serif;}
        .method-card p { font-size: 0.9rem; margin-bottom: 20px; text-align:center; }
        .method-card .phone-number { font-size: 2rem; font-weight: bold; display: block; }
        .btn.btn-line:hover { background-color: #05a546; }
        .btn.btn-instagram { 
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
        }
        .btn.btn-instagram:hover { opacity: 0.9; }
        .btn {
			display: inline-block;
    		background-color:#b19a38;
    		color:#fff !important;
    		padding: 15px 40px !important;
    		border-radius: 50px;
    		transition: background-color 0.3s, opacity 0.3s;
    		text-decoration: none;
    		border: none;
    		cursor: pointer;
    		font-weight: 700;
    		text-align: center;
    		font-size: 16px;
		}

		.insta-icon{margin-bottom: 0!important;}

	    @media (max-width: 768px) {
input[type="date"] {
    width: 100%;
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    box-sizing: border-box;
    font-size: 1.2rem!important;
    -webkit-appearance: none;
    appearance: none;
    text-align: left!important;
    background-color: #fff;
	height: 50px;
}
			
input[type="area"] {
    background-color: #fff!important;
    -webkit-appearance: none;
    appearance: none;
}
			
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
	padding:0 3px 0;
}
}