@charset "utf-8";
/* CSS Document */

.section-subtitle {
	margin-bottom:40px;
}

       /* カスタムスタイル */
        body {
            font-family: 'Noto Sans JP', sans-serif;
            color: #333;
            scroll-behavior: smooth;
        }
        .font-prata {
            font-family: 'Prata', serif;
        }
        
     /* ▼▼▼▼▼ FVスライドショーのスタイル ▼▼▼▼▼ */
        .hero-section {
            position: relative;
            height: 100vh;
            color: white;
            overflow: hidden; /* 拡大時に画像がはみ出ないように */
        }

        @media (max-width: 768px) {
        .hero-section {
            eight: 80vh;
        }}		
			
			


        .hero-slide {
            position: absolute;
            top: 75px;
            left: 0;
            width: 100%;
            height: 100vh;
            background-size: cover;
            background-position: center;
            opacity: 0;
            /* 変更点: activeクラスが外れた際も滑らかに縮小させるため、transformにもtransitionを設定 */
            transition: opacity 1.5s ease-in-out, transform 1.5s ease-out;
            z-index: 1;
            transform: scale(1.0); /* 初期スケール */
        }
		
        @media (max-width: 768px) {
        .hero-slide {
			top: 20px!important;}}
		
        .hero-slide.active {
            opacity: 1;
            z-index: 2;
            /* 変更点: animationからtransitionに変更し、ゆっくり拡大する効果を再現 */
            transform: scale(1.03);
            transition: opacity 1.5s ease-in-out, transform 8s ease-in-out;
        }
		
        /* ▲▲▲▲▲ FVスライドショーのスタイル ▲▲▲▲▲ */
		

        /* タイトルスタイル */
        .section-title-base {
    font-family: "Cinzel", serif;
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    color: #374151;
    letter-spacing: 1px;
    margin-bottom: 20px;
    }
        @media (min-width: 768px) {
            .section-title-base {
                font-size: 4.5rem; /* 72px */
            }
        }
        .section-subtitle {
            @apply text-center text-gray-500 mb-16;
        }

        /* タイトルスタイル 1: 左寄せ＋ライン */
        .title-style-1 .header {
            display: flex;
            align-items: center;
            width: 100%;
        }
        .title-style-1 .circle {
            width: 12px;
            height: 12px;
            background-color: #f472b6; /* pink-400 */
            border-radius: 50%;
            margin-right: 1rem;
        }
        .title-style-1 .title {
            margin-right: 1.5rem;
        }
        .title-style-1 .line {
            flex-grow: 1;
            height: 1px;
            background-color: #fbcfe8; /* pink-200 */
        }

        /* タイトルスタイル 2: 中央寄せ */
        .title-style-2 {
            text-align: center;
        }

        /* タイトルスタイル 3: 縦書き */
        .title-style-3 {
            display: flex;
            grid-template-columns: auto 1fr;
            /* gap: 2rem; */
            flex-direction: column;
        }
        .title-style-3 .title-wrapper {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .title-style-3 .title {
            /* writing-mode: vertical-rl; */
            /* transform: rotate(180deg); */
            white-space: nowrap;
            font-size: 2.5rem;
        }
        @media (min-width: 768px) {
            .title-style-3 .title {
                font-size: 3rem;
            }
        }
        
        .gradient-text {
            @apply bg-gradient-to-r from-pink-500 to-violet-500 text-transparent bg-clip-text;
        }
        .hero-title {
            text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
        }
        
        /* スクロールアニメーション用のスタイル */
        .scroll-animation {
            opacity: 0;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-animation.fade-in-up {
            transform: translateY(40px);
        }
        .scroll-animation.slide-in-left {
            transform: translateX(-50px);
        }
        .scroll-animation.slide-in-right {
            transform: translateX(50px);
        }
        .scroll-animation.zoom-in {
            transform: scale(0.9);
        }
        .scroll-animation.is-visible {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
        /* ハンバーガーメニューの変形アニメーション */
        .hamburger-button {
            width: 24px;
            height: 24px;
            position: relative;
            cursor: pointer;
        }
        .hamburger-button .bar {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #333;
            position: absolute;
            left: 0;
            transition: all 0.3s ease-in-out;
        }
        .hamburger-button .bar1 { top: 4px; }
        .hamburger-button .bar2 { top: 11px; }
        .hamburger-button .bar3 { top: 18px; }

        .hamburger-button.is-open .bar1 {
            top: 11px;
            transform: rotate(45deg);
        }
        .hamburger-button.is-open .bar2 {
            opacity: 0;
        }
        .hamburger-button.is-open .bar3 {
            top: 11px;
            transform: rotate(-45deg);
        }
        /* セクション区切り */
        .section-divider {
            color: #f9a8d4; /* pink-300 */
            background-color: #ffffff; /* 区切りの下のセクションの背景色に合わせる */
        }
        .bg-pink-50.section-divider {
             background-color: #fdf2f8;
        }
        .bg-gray-100.section-divider {
            background-color: #f3f4f6;
        }
        .bg-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fbcfe8' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        /* 店舗一覧アニメーション用スタイル */
        .prefecture-content {
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
            will-change: opacity, transform;
			max-width: 1200px;
			margin: 0 auto;
        }
        .prefecture-content.is-active {
            opacity: 1;
            transform: translateY(0);
        }
		
		.px-4{padding: 4!important;}
		.pt-16 {padding-top: 0!important;}
		
/* ===== レスポンシブ対応 ===== */

	.sp{
		display: none!important;
	}
	
	.pc{
		display: block!important;
	}


@media (max-width: 768px) {
	.sp{
		display: block!important;
	}
	
	.pc{
		display: none!important;
	}
}

        /* ▼▼▼▼▼ FV画像出し分け用スタイル ▼▼▼▼▼ */
        /* PC用の画像 */
        #hero-slide-1 { background-image: url("../images/top-pc.webp"); }
        #hero-slide-2 { background-image: url("../images/top-pc2.webp"); }
        #hero-slide-3 { background-image: url("../images/top-pc3.webp"); }

        /* SP用の画像 (画面幅が768px以下の場合) */
        @media (max-width: 768px) {
            #hero-slide-1 { background-image: url("../images/top-sp.jpg"); }
            #hero-slide-2 {  background-image: url("../images/top-sp2.jpg"); }
            #hero-slide-3 {  background-image: url("../images/top-sp.jpg"); }
			.pt-16{    
				display: flex;
    justify-content: flex-start;
    padding-top: 3rem !important;}
        }
        /* ▲▲▲▲▲ FV画像出し分け用スタイル ▲▲▲▲▲ */
		
		.hero-img{
			max-width: 100% !important;
			height: 100vh;
			top: 70px;
			position: relative;
			padding: 0;
			}
        @media (max-width: 768px) {
			.hero-img{
			top: 0!important;
			padding: 0;
			display: flex;
			justify-content: flex-end;
		    height: 100vh;
			}}
		
		.hero-img a{position: absolute; bottom: 30vw; background-color: #ec4899;}
		
		
@media (min-width: 769px) {.hero-img a{display: none;}}

.point-txt {
--tw-text-opacity: 1;
    color: rgb(219 39 119 / var(--tw-text-opacity, 1));
    font-size: 1.7rem;
    position: absolute !important;
    width: 100%!important;
}

.instructors-wrap{
	max-width: 1200px;
	margin: 0 auto;
}


.logo{
    width: 42vw;
    max-width: 300px;
}