@charset "utf-8";
/* Reset */
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;background: #000;color: #fff;overflow-x: hidden;position: relative;}

.japanese-text {font-family: 'Noto Sans JP', sans-serif; }
.japanese-serif {font-family: 'Noto Serif JP', serif;}

/* Variables */
:root {
    --color-primary: #00b7a7;
    --color-primary-light: #1ad9c8;
    --color-primary-dark: #008f84;
    --color-bg: #000;
    --color-text: #fff;
    --color-text-secondary: #cccccc;
    --color-bg-dark: rgba(0, 0, 0, 0.3);
    --color-border: rgba(255, 255, 255, 0.1);
    --shadow-primary: 0 10px 30px rgba(0, 0, 0, 0.3);
    --tran: 0.5s;
    --transition-primary: all var(--tran);
    --border-radius: 10px;
  }
.wrap {width: 100%;max-width: 1400px;margin: 0 auto;overflow: hidden;}
.pc{display:block}
.sp {display:none;}
@media (max-width: 768px) {
    .pc{display:none}
    .sp {display:block;}
}

/* デスクトップとモバイルの表示制御 */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
}

/* Modern Navigation */
.header {position: fixed;width: 100%;padding: 1.5rem 3rem;z-index: 1000;transition: all 0.5s ease;}
.header::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);backdrop-filter: blur(5px);z-index: -1;opacity: 0;transition: opacity 0.5s ease;}
.header_scroll {padding: 0.5rem 3rem;}
.header_scroll::before {opacity: 1;background: rgba(0, 0, 0, 0.85);backdrop-filter: blur(10px);}
.nav-container {margin: 0 auto;width: 100%;max-width: 1400px;display: flex;justify-content: space-between;align-items: center;}
.logo {font-family: 'Cinzel', serif;/* font-size: 2rem; */font-weight: 700;letter-spacing: 0.1em;opacity: 0;transform: translateY(-20px);animation: fadeInDown 1s ease forwards 0.5s;display: flex;align-items: center;transition: all 0.5s ease;}
.logo img {width: 120px;height: auto;transition: all 0.5s ease;}
.header_scroll .logo img {width: 65px;}

.nav-links {display: flex;gap: 2rem;padding: 0;position: relative;}
.nav-links::after {/* content: ''; */position: absolute;/* bottom: -10px; */left: 0;width: 0;height: 1px;background: var(--color-primary);transition: width 0.5s ease, transform 0.5s ease;transform-origin: center;}
.nav-links:hover::after {width: 100%;}
.nav-links a {color: #fff;text-decoration: none;font-family: 'Montserrat';font-size: 1rem;font-weight: 500;letter-spacing: 0.15em;position: relative;opacity: 0;transform: translateY(-20px);animation: fadeInDown 1s ease forwards;animation-delay: calc(0.1s * var(--nav-item-no));transition: color 0.3s ease, transform 0.3s ease;padding: 0.5rem 0;white-space: nowrap;}
.nav-links a:hover {color: var(--color-primary);transform: translateY(-3px);}
.nav-links a::before {content: '';position: absolute;bottom: 0;left: 50%;width: 0;height: 1px;background: var(--color-primary);transition: width 0.3s ease, left 0.3s ease;}
.nav-links a:hover::before {width: 100%;left: 0;}

/* Modern Mobile Menu Button */
.mobile-menu-btn {display: none;background: none;border: none;color: #fff;cursor: pointer;transition: all 0.3s ease;z-index: 1200;width: 30px;height: 25px;position: relative;}
.mobile-menu-btn .bar {display: block;width: 100%;height: 2px;background: #fff;position: absolute;left: 0;transition: all 0.3s ease;pointer-events: none;}
.mobile-menu-btn .bar:nth-child(1) {top: 0;}
.mobile-menu-btn .bar:nth-child(2) {top: 50%;transform: translateY(-50%);}
.mobile-menu-btn .bar:nth-child(3) {bottom: 0;}
.mobile-menu-btn.active .bar:nth-child(1) {transform: translateY(11px) rotate(45deg);background: var(--color-primary);}
.mobile-menu-btn.active .bar:nth-child(2) {opacity: 0;}
.mobile-menu-btn.active .bar:nth-child(3) {transform: translateY(-11px) rotate(-45deg);background: var(--color-primary);}


/* Responsive Styles */
@media (max-width: 1024px) {
    .header {padding: 1rem 2rem;}
    .header_scroll {padding: 0.8rem 2rem;}
    .nav-links {gap: 1.5rem;}
    }
    
    @media (max-width: 768px) {
    .header {padding: 1rem;}
    .header_scroll {padding: 0.4rem 1rem;}
    .header_scroll .logo img {width: 50px;}
    .nav-container {margin: 0 auto;width: 100%; max-width: 768px;display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;}
    .nav-links{display:none;position:fixed;top: 0;left:0;width:100%;height: 100vh;padding: 30% 0 0;box-sizing: border-box;background:rgba(0,0,0,0.95);backdrop-filter:blur(10px);flex-direction:column;justify-content: flex-start;align-items:center;gap: 2rem;z-index:999;opacity:0;transition:opacity .3s ease}
    .nav-links.active {display: flex;opacity: 1;z-index: 1100;overflow-y: auto; -webkit-overflow-scrolling: touch; 
    }
    .nav-links a {font-size: 1.2rem;}
    .logo {grid-column: 2;margin: 0;text-align: center;}
    .logo img {width: 90px;}
    .mobile-menu-btn {display: block;grid-column: 3;justify-self: end;}
    .mobile-menu-btn.active { position: relative; z-index: 1200;}
    }

 
    
    @media (max-width: 480px) {
    }

/* Navigation Wrapper */
.nav-wrapper {display: flex;align-items: center;gap: 2rem;}

/* Language Selector */
.lang-selector {position: relative;opacity: 0;transform: translateY(-20px);animation: fadeInDown 1s ease forwards 0.6s;}
.lang-btn {background: none;border: none;cursor: pointer;padding: 0.5rem;transition: transform 0.3s ease, opacity 0.3s ease;display: flex;align-items: center;}
.lang-btn:hover {transform: translateY(-3px);opacity: 0.8;}
.lang-btn img {width: 30px;height: 30px;filter: brightness(0) invert(1);transition: all 0.3s ease;}
.header_scroll .lang-btn img {width: 25px;height: 25px;}
.lang-dropdown {position: absolute;top: calc(100% + 10px);right: 0;min-width: 150px;background: rgba(0, 0, 0, 0.95);backdrop-filter: blur(10px);border-radius: 8px;overflow: hidden;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;z-index: 1001;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);}
.lang-dropdown.active {opacity: 1;visibility: visible;transform: translateY(0);}
.lang-dropdown a {display: block;padding: 1rem 1.5rem;color: #fff;text-decoration: none;font-family: 'Montserrat';font-size: 0.9rem;font-weight: 500;letter-spacing: 0.05em;transition: all 0.3s ease;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.lang-dropdown a:last-child {border-bottom: none;}
.lang-dropdown a:hover {background: rgba(255, 255, 255, 0.1);color: var(--color-primary);padding-left: 2rem;}

/* デスクトップとモバイルの表示制御 */
.lang-selector.mobile-only {display: none;}
.lang-selector.desktop-only {display: block;}

/* Responsive Navigation Wrapper */
@media (max-width: 1024px) {
.nav-wrapper {gap: 1.5rem;}
}

@media (max-width: 768px) {
.nav-wrapper {display: contents;}
/* デスクトップ用のlang-selectorを非表示 */
.lang-selector.desktop-only {display: none;}
/* モバイル用のlang-selectorを表示 */
.lang-selector.mobile-only {display: block;position: relative;margin: 2rem auto 0;z-index: 998;opacity: 1;transform: none;animation: none;text-align: center;}
/* nav-links内でのlang-btn調整 */
.nav-links .lang-btn {background: transparent;border: 1px solid var(--color-primary);border-radius: 5px;padding: 0.8rem 1.5rem;box-shadow: none;display: inline-flex;align-items: center;gap: 0.5rem;}
/* Languageテキストを追加 */
.nav-links .lang-btn::after {content: 'Language';color: #fff;font-size: 1rem;font-weight: 500;letter-spacing: 0.05em;}
.nav-links .lang-btn img {width: 20px;height: 20px;}
/* ドロップダウンの位置調整 */
.nav-links .lang-dropdown {position: absolute;top: calc(100% + 10px);left: 50%;right: auto;transform: translateX(-50%) translateY(-10px);}
.nav-links .lang-dropdown.active {transform: translateX(-50%) translateY(0);}
/* 削除: .nav-links.active ~ .lang-selector {display: none;} */
}

@media (max-width: 480px) {
/* 削除: .lang-selector {bottom: 20px;right: 20px;} */
}




/* Enhanced Hero Section */
.hero {/* height: 100vh; */position: relative;display: flex;align-items: center;justify-content: center;/* overflow: hidden; */z-index: 1;padding-top: 6rem; /* Added padding to prevent overlap with nav */padding: 0 0 0%;}
.hero-content {position: relative;text-align: center;opacity: 0;transform: translateY(30px);animation: fadeInUp 1.5s ease forwards 1s;max-width: 1000px;width: 100%;padding: 200px 2rem 100px;}
.hero-title {font-family: 'Cinzel', serif;font-size: clamp(2.5rem, 2.5vw, 5rem);margin-bottom: 0.5rem;letter-spacing: 0.4rem;padding: 0 2%;color: #fff;text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);animation: textGlow 3s ease-in-out infinite;transform: translateZ(0);}
.logo-kanji {width: 180px;height: auto;margin: 1rem 0;animation: softPulse 3s ease-in-out infinite;filter: drop-shadow(0 0 10px rgba(0, 183, 167, 0.5));}
.hero-subtitle {font-size: clamp(1rem, 2vw, 1.5rem);font-weight: 500;color: var(--color-primary);margin: 1rem 0 3rem;letter-spacing: 0.2em;text-shadow: 0 0 7px rgba(0, 183, 167, 0.7), 0 0 10px rgba(0, 183, 167, 0.5), 0 0 20px rgba(0, 183, 167, 0.3);animation: neonPulse 3s ease-in-out infinite;background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light), var(--color-primary));background-size: 300% 100%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: gradient 5s ease infinite;}

/* Enhanced Image Slideshow */
.hero-image-container {width: 100%;max-width: 900px;height: 450px;position: relative;margin: 0 auto;overflow: hidden;border-radius: 5px;box-shadow: 0 0 30px rgba(0, 183, 167, 0.2);}
.hero-image-container::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0, 183, 167, 0.3) 0%, transparent 70%);z-index: 2;pointer-events: none;}
.hero-image-container::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);z-index: 2;pointer-events: none;}
.hero-slider {width: 100%;height: 100%;}
.hero-slider .slick-slide {position: relative;height: 450px;}
.hero-image {width: 100%;height: 100%;object-fit: cover;filter: brightness(0.9) contrast(1.1);}

/* Responsive Styles */
@media (max-width: 1024px) {
    .hero-image-container {height: 380px;}
    .hero-slider .slick-slide {height: 380px;}
    }
    
    @media (max-width: 768px) {
    .hero-content {padding: 180px 2rem 80px;}    
    .hero-title {font-size: 2rem;}
    .hero-subtitle {font-size: 1.3rem;margin: 1rem 0 2rem;}
    .hero-image-container {height: 300px;}
    .hero-slider .slick-slide {height: 300px;}
    .logo-kanji {width: 140px;margin: 0.5rem 0;}
    .section {padding: 2rem 1rem;}
    .about-section {flex-direction: column;}
    .section-title {font-size: 2rem;}
    .section-subtitle {font-size: 1.4rem;}
    }
    
    @media (max-width: 480px) {
    .hero-content {padding: 160px 1rem 20px;}    
    .hero-title {font-size: 1.5rem;letter-spacing: 0.2em;}
    .hero-subtitle {font-size: 1.2rem;}
    .hero-image-container {height: 250px;}
    .hero-slider .slick-slide {height: 250px;}
    }


/* Main Content Section */
.main-content {position: relative;z-index: 1;/* background-color: #00000038; */backdrop-filter: blur(10px);/* padding: 5rem 0; */}
.section {max-width: 1200px;margin: 0 auto;padding: 1rem 2rem 0;font-family: 'Noto Sans JP', sans-serif;}
.about-section {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;margin-bottom: 3rem;}
.about-image {flex: 0.7;/* min-width: 300px; *//* max-width: 400px; */width: 50%;position: relative;padding: 1rem;margin: 0 auto;}
.about-image img {width: 100%;max-width: 500px;object-fit: cover;height: auto;border-radius: 5px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);transition: transform 0.5s ease;border: 1px solid var(--color-primary);}
.about-image::before {/* content: ''; */position: absolute;top: 0;left: 0;width: 70%;height: 100%;border: 1px solid var(--color-primary);border-radius: 5px;transform: translate(15px, 15px);z-index: -1;transition: transform 0.5s ease;}
.about-image:hover img {transform: translate(-5px, -5px);}
.about-image:hover::before {transform: translate(20px, 20px);}
.about-content {flex: 1;/* min-width: 300px; */width: 40%;padding: 2rem;}
.section-title {color: var(--color-primary);font-family: 'Cinzel', serif;font-size: 1.3rem;margin-bottom: 0.3rem;text-shadow: 0 0 10px rgba(0, 183, 167, 0.3);}
.section-subtitle {/* font-family: none; */font-family: 'Noto Serif JP', serif;font-size: 1.8rem;font-weight: 600;margin-bottom: 2rem;color: #fff;letter-spacing: 0.25rem;}
.section-text {line-height: 2.1;margin-bottom: 2rem;color: #e7e6e6;font-family: 'Noto Sans JP';font-weight: 500;}
.btn {display: inline-block;padding: 0.8rem 2rem;background-color: transparent;color: var(--color-primary);border: 1px solid var(--color-primary);border-radius: 3px;font-size: 1rem;letter-spacing: 0.1em;text-decoration: none;transition: all 0.3s ease;cursor: pointer;position: relative;overflow: hidden;z-index: 1;/* max-width: 400px; */width: 200px;text-align: center;}
.btn::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background-color: var(--color-primary);z-index: -1;transition: all 0.3s ease;}
.btn:hover {color: #000;}
.btn:hover::after {left: 0;}
.btn_wrap {
    text-align: center;
}
.btn_wrap .btn{}


/* TOPページ用 About Container の調整 */
.section .about-container {
    width: 100%;
    background: transparent; /* about-section-page の背景を無効化 */
    padding: 0; /* about-section-page のパディングを無効化 */
}

/* TOPページでの About Block の調整 */
.section .about-block {
    margin-bottom: 60px; /* kaso.cssの100pxから調整 */
}

/* TOPページでの About Title の調整 */
.section .about-title {
    /* font-size: 2rem; */ /* kaso.cssの2.2remから調整 */
    /* margin-bottom: 15px; */ /* kaso.cssの20pxから調整 */
}


/* Responsive Styles */
@media (max-width: 1024px) {

    }
    
    @media (max-width: 768px) {
    .main-content {padding: 3rem 0;}
    .section {padding: 1rem 1rem;}
    .about-section {flex-direction: column;}
    .section-title {font-size: 2rem;}
    .section-subtitle {font-size: 1.4rem;}
.about-section {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;margin-bottom: 3rem;}
.about-image {flex: 1;/* min-width: 300px; *//* max-width: 400px; */width: 100%;position: relative;padding: 0rem;text-align: center;margin: 0 auto;}
.about-image img {width: 100%;max-width: 350px;object-fit: cover;margin-inline: auto;height: auto;border-radius: 5px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);transition: transform 0.5s ease;border: 1px solid var(--color-primary);}
.about-image::before {/* content: ''; */position: absolute;top: 0;left: 0;width: 70%;height: 100%;border: 1px solid var(--color-primary);border-radius: 5px;transform: translate(15px, 15px);z-index: -1;transition: transform 0.5s ease;}
.about-image:hover img {transform: translate(-5px, -5px);}
.about-image:hover::before {transform: translate(20px, 20px);}
.about-content {flex: 1;/* min-width: 300px; */width: 100%;padding: 0 10px;}
.section-title {color: var(--color-primary);font-family: 'Cinzel', serif;font-size: 1.3rem;margin-bottom: 1rem;text-shadow: 0 0 10px rgba(0, 183, 167, 0.3);}
.section-subtitle {font-family: 'Noto Sans JP';font-size: 1.7rem;font-weight: 600;margin-bottom: 2rem;color: #fff;letter-spacing: 0.25rem;}
.section-text {line-height: 1.6;margin-bottom: 2rem;color: #e7e6e6;font-family: 'Noto Sans JP';font-weight: 500;}
.btn {display: inline-block;padding: 1rem 2rem;background-color: transparent;color: var(--color-primary);border: 1px solid var(--color-primary);border-radius: 3px;font-size: 1rem;letter-spacing: 0.1em;text-decoration: none;transition: all 0.3s ease;cursor: pointer;position: relative;overflow: hidden;z-index: 1;}
.btn::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background-color: var(--color-primary);z-index: -1;transition: all 0.3s ease;}
.btn:hover {color: #000;}
.btn:hover::after {left: 0;}
    }
    
    @media (max-width: 480px) {
        .section-subtitle {font-size: 1.5rem;margin-bottom: 1.5rem;}
        .section-title {font-size: 1.3rem;margin: 1rem 0 0.6rem;}
        .section-text {margin-bottom:1rem;}
        .btn {padding: 1rem 2rem;font-size: 1rem;width: 90%;text-align: center;margin-inline: auto;display: block;margin-top: 1rem;}
         .main-content {padding: 1rem 0;}
        .about-image::before {transform: translate(10px, 10px);}
        .about-image:hover::before {transform: translate(15px, 15px);}
        }

        /* タブセクション */
        /* タブセクション */
        .menu_tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 0px;
        }
        
        .tab_button {
            padding: 12px 25px;
            background-color: #333333;
            border: 2px solid var(--color-primary);
            border-bottom: none;
            outline: none;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            color: #FFFFFF;
            transition: background-color 0.3s;
            margin: 0 5px;
        }
        
        .tab_button.active {
            background-color: var(--color-primary);
        }
        
        .tab_content {
            display: none;
        }
        
        .tab_content.active {
            display: block;
        }
        
        /* MENU Section */      
        .menu2_box {max-width: 1200px; margin: 50px auto; padding: 20px;}
        .menu2_box .headercont {margin-bottom: 40px;}
        .menu2_box .headercont .subtitle {font-size: 36px;font-family: 'Brush Script MT', cursive;color: var(--color-primary);margin-bottom: 10px;font-weight: normal;}
        .menu2_box .headercont .title {font-size: 48px; margin: 0 0 20px; font-weight: bold;}
        .menu2_box .headercont .description {font-size: 16px; line-height: 1.6; max-width: 1000px; color: #cccccc;}
        .menu2_box .menu_container {border: 2px solid var(--color-primary);padding: 40px;display: flex;flex-wrap: wrap;justify-content: space-between;}
        .menu2_box .menu_container .menu_column {width: 48%;}
        .menu2_box .menu_container .menu_item {margin-bottom: 10px;display: flex;flex-direction: column;}
        .menu2_box .menu_container .menu_item .item_header {display: flex; align-items: center;}
        .menu2_box .menu_container .menu_item .item_title {font-size: 1.2rem;font-weight: 600;/* color: #FFFFFF; */}
        .menu2_box .menu_container .menu_item .item_line {flex-grow: 1;margin: 0 10px;border-bottom: 1px solid var(--color-primary);}
        .menu2_box .menu_container .menu_item .item_price {font-size: 18px; font-weight: 600; color: #FFFFFF;}
        .menu2_box .menu_container .menu_item .item_description {font-size: 0.85rem;color: #C6C6C6;margin-top: 5px;font-family: 'Work Sans', sans-serif;}
        
        /* カテゴリヘッダー */
        .category_header {
            font-size: 1.2rem;
            /* font-weight: 600; */
            color: var(--color-primary);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--color-primary);
            padding-bottom: 8px;
        }
        
        /* シャンパンセクション */
        .champagne_section {
            margin-top: 40px;
        }
        
        /* コンパクト表示用 */
        .compact_menu {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .compact_menu .menu_item {
            margin-bottom: 15px;
        }
        
        @media (max-width: 768px) {
            .menu2_box {margin: 0px auto 0;padding: 20px 5px;}
            .menu2_box .menu_container .menu_column {width: 100%;}
            .menu2_box .menu_container {padding: 20px;}
            .tab_button {padding: 10px 15px;font-size: 16px;}
            .compact_menu {grid-template-columns: 1fr;}
            .menu2_box .menu_container .menu_item .item_title {font-size: 1.2rem;}
        }

@media (max-width: 480px) {
             .menu2_box {margin: 0px auto 0;padding: 20px 5px;}
            .menu2_box .menu_container .menu_column {width: 100%;}
            .menu2_box .menu_container {padding: 15px;}
            .tab_button {padding: 10px 10px;font-size: 13.5px;}
            .menu2_box .menu_container .menu_item .item_title {font-size: 1.0rem;}
    .category_header {font-size: 1.1rem;margin-bottom: 10px;padding-bottom: 5px;}
    .menu2_box .menu_container .menu_item .item_description {font-size: 0.8rem;}
        }
        
       /* Shop List Section */
/* Shop List Section */
.shoplist-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

.shoplist-section .section-title {
    text-align: center;
}

.shoplist-section .section-subtitle {
    text-align: center;
}

.shoplist-section .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.shop-item {
    width: calc(33.33% - 20px);
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 汎用アニメーションクラス */
.pop-anime {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s forwards;
    animation-delay: calc(var(--index) * 0.2s);
}

.shop-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 255, 191, 0.1);
}

.shop-item .shop-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.shop-item .shop-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.shop-item:hover .shop-image img {
    transform: scale(1.05);
}

.shop-item .shop-info {
    padding: 20px;
}

.shop-item .shop-name {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

.shop-item .shop-location {
    font-size: 14px;
    color: #ccc;
    padding: 15px 0 10px;
    display: flex;
    align-items: center;
}

.shop-item .shop-location i {
    color: var(--color-primary);
    margin-right: 8px;
}

.shop-item .shop-link {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    position: relative;
    transition: all 0.3s ease;
}

.shop-item .shop-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.shop-item .shop-link:hover::after {
    width: 100%;
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .shop-item {
        width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .shop-item {
        width: 47%;
    }
    .shoplist-section .content {
    gap: 12px;
}

    .shoplist-section {
    margin: 30px auto;
    padding: 0 0px;
}

    .shop-item .shop-info {
    padding: 10px;
}

    .shop-item .shop-name {
    font-size: 20px;
        text-align:center;
    margin-bottom: 10px;
}
    .shop-item .shop-link {text-align:center;margin-inline: auto;display: block;}

    .shop-item .shop-image {height: 180px;}
    
}

@media (max-width: 480px) {
    .shop-item {width: 95%; }
     .shoplist-section .content {gap: 15px;justify-content:center;}
}


/* FC Program Section */
.fc-program-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

.fc-program-section .section-title {
    text-align: center;

}

.fc-program-section .section-subtitle {
    text-align: center;

}

.fc-program-section .overview {
    text-align: center;
    color: #ccc;
    max-width: 800px;
    margin: 0 auto 60px;
    line-height: 1.8;
    font-size: 16px;
}

.fc-program-section .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.point-item {
    width: calc(33.33% - 20px);
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.point-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 255, 191, 0.1);
}

.point-item .point-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.point-item .point-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.point-item:hover .point-image img {
    transform: scale(1.05);
}

.point-item .point-info {
    padding: 20px;
}

.point-item .point-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.point-item .point-subtitle {
    font-size: 14px;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.point-item .point-text {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
}

.detail-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: #000;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 15px;
}

.detail-button:hover {
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 255, 191, 0.2);
}

.cta-container {
    text-align: center;
    margin-top: 50px;
}

/* Responsive */
@media (max-width: 992px) {
    .point-item {
        width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .point-item {
        width: 100%;
    }

    .fc-program-section {
    margin: 40px auto;
    padding: 0 10px;
}
    .shop-item .shop-location {
    font-size: 12px;

}
}

















/* 汎用アニメーションクラス - グローバルに使用可能 */
.pop-anime {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s forwards;
    animation-delay: calc(var(--index, 0) * 0.2s);
    animation-play-state: paused; /* 初期状態は停止 */
}

/* アニメーションのキーフレーム定義 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 複数要素をグループ化する場合に便利なクラス */
.pop-anime-container > * {
    --base-delay: var(--container-delay, 0s);
    animation-delay: calc(var(--base-delay) + (var(--index, 0) * 0.2s));
}

/* 異なるアニメーションバリエーション */
.pop-anime.fade-in {
    transform: translateY(0);
    animation-name: fadeIn;
}

.pop-anime.slide-left {
    transform: translateX(50px);
    animation-name: slideLeft;
}

.pop-anime.slide-right {
    transform: translateX(-50px);
    animation-name: slideRight;
}

.pop-anime.scale-in {
    transform: scale(0.8);
    animation-name: scaleIn;
}

/* 追加のアニメーションキーフレーム */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}



.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* 基本的な遅延オプション（data-delay属性でカスタマイズも可能） */
.fade-in.delay-1 { transition-delay: 0.2s; }
.fade-in.delay-2 { transition-delay: 0.4s; }
.fade-in.delay-3 { transition-delay: 0.6s; }
.fade-in.delay-4 { transition-delay: 0.8s; }
.fade-in.delay-5 { transition-delay: 1s; }



       
/* Footer Section */
.back-to-top{z-index:999;position:fixed;bottom:30px;right:30px;background-color:rgba(0,183,167,0.75);color:#fff;width:50px;height:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;text-decoration:none;font-weight:700;box-shadow:0 4px 15px rgba(0,183,167,0.5);opacity:0;visibility:hidden;transition:all .5s ease;font-size:20px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,0.3);backdrop-filter:blur(2px);border:1px solid rgba(0,183,167,0.3);animation:smoke-pulse 3s infinite alternate}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background-color:rgba(0,183,167,0.9);box-shadow:0 4px 20px rgba(0,183,167,0.7);transform:translateY(-2px)}
@keyframes smoke-pulse {
0%{box-shadow:0 4px 15px rgba(0,183,167,0.5);filter:blur(0.5px)}
100%{box-shadow:0 4px 25px rgba(0,183,167,0.7);filter:blur(1px)}
}

.footer {background-color: rgba(0, 0, 0, 0.9);padding: 4rem 0 2rem;position: relative;z-index: 1;}
.footer-content {max-width: 1400px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 2rem;}
.footer-logo {flex: 1;min-width: 250px;margin-bottom: 2rem;}
.footer-logo img {width: 120px;margin-bottom: 1rem;}
.footer-info {flex: 1;min-width: 250px;margin-bottom: 2rem;}
.footer-title {color: var(--color-primary);font-size: 1.2rem;margin-bottom: 1.5rem;position: relative;padding-bottom: 0.5rem;}
.footer-title::after {content: '';position: absolute;bottom: 0;left: 0;width: 50px;height: 2px;background: var(--color-primary);}
.footer-contact {flex: 1;min-width: 250px;margin-bottom: 2rem;}
.contact-list {list-style: none;}
.contact-list li {margin-bottom: 1rem;display: flex;align-items: flex-start;}
.contact-list i {color: var(--color-primary);margin-right: 1rem;font-size: 1rem;}
.social-links {display: flex;gap: 1rem;margin-top: 1.5rem;}
.social-links a {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background: rgba(255, 255, 255, 0.1);color: #fff;font-size: 1.2rem;transition: all 0.3s ease;}
.social-links a:hover {background: var(--color-primary);transform: translateY(-5px);}
.footer-bottom {text-align: center;padding-top: 2rem;margin-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);font-size: 0.9rem;color: #666;}

@media (max-width: 480px) {
    .footer {padding: 2rem 0 2rem;position: relative;z-index: 1;}
    .footer-content {flex-direction: column;}
    .footer-logo {flex: 1;min-width: 250px;margin-bottom: 2rem;text-align: center;}
    .footer-logo img {width: 80px;margin-bottom: 1rem;}
    .social-links {
    text-align: center;
    display: flex;
    justify-content: center;
}
    }


/* Slick Slider Custom Styles */
.slick-prev, .slick-next {z-index: 10;width: 40px;height: 40px;}
.slick-prev {left: 15px;}
.slick-next {right: 15px;}
.slick-prev:before, .slick-next:before {font-size: 30px;color: var(--color-primary);opacity: 0.8;}
.slick-dots {bottom: 15px;}
.slick-dots li button:before {color: var(--color-primary);opacity: 0.5;}
.slick-dots li.slick-active button:before {color: var(--color-primary);opacity: 1;}









/* パーティクルエフェクトは不要なので非表示または削除 */
.particles-container {display: none; /* または削除してHTML側も対応 */}

/* モクモク煙エフェクトのCSS */
.smoke {position: fixed;width: 100%;height: 100%;pointer-events: none;z-index: 1;overflow: hidden;}
.smoke-particle {position: absolute;bottom: -100px;width: 60px;height: 200px;background: linear-gradient(to top, rgba(0, 183, 167, 0) 0%, rgba(0, 183, 167, 0.05) 20%, rgba(0, 183, 167, 0.1) 40%, rgba(0, 183, 167, 0.15) 60%, rgba(0, 183, 167, 0.1) 80%, rgba(0, 183, 167, 0) 100%);border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;mix-blend-mode: screen;filter: blur(15px);transform-origin: center bottom;opacity: 0;/* デフォルトのriseアニメーションを使わずカスタムアニメーションを使用 */animation: mokomokoRise 10s ease-out infinite;}

/* 煙のモクモク舞い上がるアニメーション */
@keyframes mokomokoRise {
0% {opacity: 0;transform: translateY(0) scale(1);filter: blur(10px);}
5% {opacity: 0.1;}
20% {opacity: 0.4;transform: translateY(-100px) scale(1.3) rotate(5deg);border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%;filter: blur(12px);}
40% {opacity: 0.6;transform: translateY(-200px) scale(1.6) rotate(10deg);border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%;filter: blur(15px);}
60% {opacity: 0.4;transform: translateY(-300px) scale(2) rotate(15deg);border-radius: 60% 40% 70% 30% / 30% 70% 40% 60%;filter: blur(18px);}
80% {opacity: 0.2;transform: translateY(-400px) scale(2.2) rotate(20deg);border-radius: 30% 70% 40% 60% / 50% 50% 70% 30%;filter: blur(20px);}
100% {opacity: 0;transform: translateY(-500px) scale(2.5) rotate(25deg);filter: blur(25px);}
}

/* Particle Effects */
.particles-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: 0;}
.particle {position: absolute;border-radius: 50%;background: rgba(0, 183, 167, 0.1);box-shadow: 0 0 10px 2px rgba(0, 183, 167, 0.1);backdrop-filter: blur(1px);pointer-events: none;z-index: -1;mix-blend-mode: screen;}

/* Background Effects */
.background-effects {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}
.hero-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(/api/placeholder/1920/1080) center/cover;opacity: 0;animation: fadeInScale 2s ease forwards;}
.hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 30, 30, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%);}
.noise-texture {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1Ii8+PC9zdmc+');opacity: 0.3;mix-blend-mode: overlay;}



/* Animations */
@keyframes fadeInDown {
0% {opacity: 0;transform: translateY(-30px);}
100% {opacity: 1;transform: translateY(0);}
}

@keyframes fadeInUp {
0% {opacity: 0;transform: translateY(30px);}
100% {opacity: 1;transform: translateY(0);}
}

@keyframes fadeInScale {
0% {opacity: 0;transform: scale(1.1);}
100% {opacity: 0.3;transform: scale(1);}
}

@keyframes float {
0%, 100% {transform: translate(0, 0) scale(1);}
25% {transform: translate(100px, -50px) scale(1.2);}
50% {transform: translate(-50px, 100px) scale(0.8);}
75% {transform: translate(50px, 50px) scale(1.1);}
}

@keyframes textGlow {
0%, 100% {text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);}
50% {text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.3), 0 0 35px rgba(255, 255, 255, 0.2);}
}

@keyframes neonPulse {
0%, 100% {text-shadow: 0 0 7px rgba(0, 183, 167, 0.7), 0 0 10px rgba(0, 183, 167, 0.5), 0 0 20px rgba(0, 183, 167, 0.3);}
50% {text-shadow: 0 0 12px rgba(0, 183, 167, 0.8), 0 0 20px rgba(0, 183, 167, 0.6), 0 0 30px rgba(0, 183, 167, 0.4);}
}

@keyframes softPulse {
0%, 100% {opacity: 0.8;filter: drop-shadow(0 0 10px rgba(0, 183, 167, 0.5));}
50% {opacity: 1;filter: drop-shadow(0 0 15px rgba(0, 183, 167, 0.7));}
}

@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}

@keyframes rise {
0% {opacity: 0;transform: translateY(0) scaleX(1);}
15% {opacity: 1;}
50% {transform: translateY(-200px) scaleX(3);}
100% {opacity: 0;transform: translateY(-400px) scaleX(4);}
}