/* えびすさんち デザイン・システム */

        /* 0. グローバルフォント設定 */
        h1, h2, h3, h4 {
            font-family: 'Zen Maru Gothic', sans-serif !important;
        }

        .signature-title {
            font-family: 'Noto Serif JP', serif !important;
            color: #A5CA5B !important;
        }

        .en-font {
            font-family: 'Cormorant Garamond', serif !important;
            font-style: italic;
            font-weight: 500;
        }

        /* 1. リセット & ベース */
        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            font-size: 16px;
        }

        @media (max-width: 768px) {
            body, p, li, .text-base {
                font-size: 14px !important;
            }
        }

        /* 3. セクション見出し */
        .section-title-wrap {
            position: relative;
            width: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100px;
        }

        @media (max-width: 640px) {
            .section-title-wrap {
                width: 80%;
                height: 80px;
            }
        }

        /* 5. インタラクション & 装飾 */
        #scroll-top.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-10px);
        }

        #mobile-menu.open {
            opacity: 1;
            pointer-events: auto;
        }

        img {
            vertical-align: bottom;
            object-fit: cover;
        }

        .bg-service-gradient {
            position: relative;
            background-color: #F5F2EB;
            overflow: hidden;
        }

        .bg-service-gradient > *:not(.pointer-events-none) {
            position: relative;
            z-index: 1;
        }

        /* 11. Signature Drawing Title */
        .signature-title {
            font-family: 'Cormorant Garamond', serif !important;
            font-style: italic;
            font-size: 4rem;
            font-weight: 500;
            background: none !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: #A5CA5B !important;
            color: #A5CA5B !important;
            display: inline-flex;
            flex-direction: column;
            line-height: 1.2;
            letter-spacing: 0.1em;
            padding: 0.1em 0.3em;
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
            white-space: nowrap;
        }

        .signature-title .sub-title {
            font-family: 'Zen Maru Gothic', sans-serif !important;
            font-style: normal;
            font-size: 1.8rem;
            letter-spacing: 0.1em;
            margin-top: 8px;
            opacity: 0.8;
            -webkit-text-fill-color: #A5CA5B !important;
            background: none !important;
        }

        .signature-title.is-visible {
            animation: premium-reveal 1.5s ease-in-out forwards;
        }

        @media (max-width: 1024px) {
            .signature-title {
                font-size: clamp(2.5rem, 6vw, 4rem);
            }
            .signature-title .sub-title {
                font-size: clamp(1.2rem, 2.5vw, 1.8rem);
            }
        }

        @media (max-width: 640px) {
            .signature-title {
                font-size: clamp(1.8rem, 9vw, 2.5rem);
                letter-spacing: 0.05em;
                padding: 0.1em 0.2em;
            }
            .signature-title .sub-title {
                font-size: clamp(1rem, 4.5vw, 1.4rem);
            }
        }

        @keyframes premium-reveal {
            0% { opacity: 0; transform: translateY(20px); filter: blur(2px); }
            100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        .stitch-border {
            padding: 6px;
            background-color: #fff;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border: 1px solid #A5CA5B;
        }

        h3:not(.signature-title):not(.section-title):not(.text-accent) {
            color: #A5CA5B !important; 
        }

        #recommendations h3,
        #recommendations span {
            color: #A5CA5B !important;
        }

        #menu h3,
        #voice h4,
        .service-point-title {
            color: #A5CA5B !important;
        }

        /* 12. Voice Readmore Style */
        .readmore-content {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .readmore-content.is-open {
            display: inline;
            opacity: 1;
        }
        .readmore-btn {
            outline: none;
            margin-top: 12px;
        }

        /* 13. 3D Card Flip Animation */
        .flip-container {
            perspective: 1200px;
        }
        .flip-card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .flip-card.flipped {
            transform: rotateY(180deg);
        }
        .flip-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .flip-face-back {
            transform: rotateY(180deg);
        }

        /* 14. 水彩アニメーション */
        .watercolor-bleed-element {
            transform-origin: center center;
            animation: ink-bleed-in 4s cubic-bezier(0.15, 0.85, 0.35, 1) forwards,
                       ink-bleed-float 10s infinite ease-in-out 4s;
        }
        .ink-delay-1 { animation-delay: 0s, 4s; }
        .ink-delay-2 { animation-delay: 0.6s, 4.6s; }
        .ink-delay-3 { animation-delay: 1.2s, 5.2s; }
        .ink-delay-center { animation-delay: 0.3s, 4.3s; }

        @keyframes ink-bleed-in {
            0% { transform: scale(0.2); opacity: 0; filter: blur(12px); }
            40% { filter: blur(4px); }
            100% { transform: scale(1); opacity: 1; filter: blur(0px); }
        }

        @keyframes ink-bleed-float {
            0% { transform: scale(1) rotate(0deg); filter: blur(0px); }
            50% { transform: scale(1.05) rotate(1.5deg); filter: blur(0.5px); }
            100% { transform: scale(1) rotate(0deg); filter: blur(0px); }
        }

        @media (max-width: 768px) {
            #main-header, #main-header.h-20, #main-header.h-16 {
                height: 50px !important;
            }
            #main-header>div {
                height: 100% !important;
            }
        }

        .about-komorebi-beam {
            opacity: 0;
            transform: translateY(-80px) scaleY(0.5);
            transform-origin: top center;
            transition: transform 2.0s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.8s ease;
        }
        .about-komorebi-beam.is-visible {
            opacity: 0.95;
            transform: translateY(0) scaleY(1);
        }

        .about-reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .about-reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .char-reveal span {
            display: inline-block;
            opacity: 0;
            transform: translateX(-15px);
        }
        .char-reveal.is-visible span {
            animation: char-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes char-fade-in {
            100% { opacity: 1; transform: translateX(0); }
        }

        html body .service-slide-in-left {
            opacity: 0 !important;
            transform: translateX(-80px) !important;
            transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            will-change: opacity, transform;
        }
        html body .service-slide-in-left.is-visible {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }
        html body .service-slide-in-right {
            opacity: 0 !important;
            transform: translateX(80px) !important;
            transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            transition-delay: 0.15s !important;
            will-change: opacity, transform;
        }
        html body .service-slide-in-right.is-visible {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }
        html body .service-slide-in-up {
            opacity: 0 !important;
            transform: translateY(40px) !important;
            transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            will-change: opacity, transform;
        }
        html body .service-slide-in-up.is-visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .gallery-vertical-container {
            perspective: 1000px;
        }
        .gallery-vertical-card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .gallery-vertical-card.flipped {
            transform: rotateX(180deg);
        }
        .gallery-vertical-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        #fv .flip-card {
            background-color: transparent;
            perspective: 1000px;
            cursor: pointer;
        }
        #fv .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
        }
        #fv .flip-card:hover .flip-card-inner,
        #fv .flip-card-inner.flipped {
            transform: rotateY(180deg);
        }
        #fv .flip-card-front,
        #fv .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        #fv .flip-card-front {
            background-color: #F5F2EB;
            color: #2F2621;
            z-index: 2;
            overflow: hidden;
        }
        #fv .flip-card-back {
            background-color: #F5F2EB;
            color: #A5CA5B;
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        /* --- 案3: 幾何学ポップ背景（アドベンチャー風） --- */

        /* サービスセクション全体の背景：黄緑と黄色のポップなドット柄 */
        .pop-adventure-bg {
            background-color: #F5F2EB;
            background-image: 
                radial-gradient(rgba(165, 202, 91, 0.12) 15%, transparent 16%),
                radial-gradient(rgba(246, 213, 89, 0.15) 15%, transparent 16%);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
            position: relative;
        }

        /* セクションの上下の境界にギザギザ（ジグザグ）を描画 */
        .pop-zigzag-top {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 16px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20'%3E%3Cpolygon points='0,0 20,20 40,0 40,20 0,20' fill='%23A5CA5B'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            background-size: 24px 12px;
            z-index: 10;
        }

        .pop-zigzag-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 16px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20'%3E%3Cpolygon points='0,20 20,0 40,20 40,0 0,0' fill='%23A5CA5B'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            background-size: 24px 12px;
            z-index: 10;
        }

        /* ポップな2Dベタシャドウカード */
        .pop-card {
            background-color: #ffffff;
            border: 3px solid #A5CA5B !important;
            border-radius: 16px !important;
            box-shadow: 8px 8px 0px 0px #F6D559 !important;
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
        }

        .pop-card:hover {
            transform: translate(-4px, -4px) !important;
            box-shadow: 12px 12px 0px 0px #C86B45 !important;
        }

        /* カード内のアイコン/バッジ装飾：スタンプ風 */
        .pop-badge {
            display: inline-block;
            background-color: #F6D559;
            color: #2F2621;
            border: 2.5px solid #C86B45 !important;
            padding: 4px 12px;
            font-weight: 900;
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transform: rotate(-2deg);
            border-radius: 8px;
            box-shadow: 2.5px 2.5px 0px 0px #73A9C2 !important;
            margin-bottom: 1rem;
        }

        .pop-badge-alt {
            background-color: #A5CA5B;
            color: #ffffff;
            border-color: #F6D559 !important;
            box-shadow: 2.5px 2.5px 0px 0px #C86B45 !important;
            transform: rotate(1deg);
        }

        /* 画像側のアドベンチャー風フォトフレーム（ポラロイド・ステッカー風） */
        .pop-photo-frame {
            border: 3.5px solid #C86B45 !important;
            border-radius: 16px !important;
            box-shadow: 8px 8px 0px 0px #73A9C2 !important;
            overflow: hidden;
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
        }

        .pop-photo-frame:hover {
            transform: translate(-4px, -4px) !important;
            box-shadow: 12px 12px 0px 0px #F6D559 !important;
        }

        /* 宿泊プランセクション全体の背景：オレンジと黄緑 of ポップなドット柄 */
        .pop-plans-bg {
            background-color: #F5F2EB;
            background-image: 
                radial-gradient(rgba(200, 107, 69, 0.1) 15%, transparent 16%),
                radial-gradient(rgba(166, 203, 97, 0.1) 15%, transparent 16%);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
            position: relative;
        }

        /* 宿泊プランセクションの下部にオレンジ（#C86B45）のギザギザを描画 */
        .pop-zigzag-bottom-orange {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 16px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20'%3E%3Cpolygon points='0,20 20,0 40,20 40,20 0,0' fill='%23C86B45'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            background-size: 24px 12px;
            z-index: 10;
        }

        /* ポップなプランカード（通常） */
        .pop-plan-card {
            background-color: #ffffff;
            border: 3.5px solid #73A9C2 !important;
            box-shadow: 8px 8px 0px 0px #F6D559 !important;
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
        }

        .pop-plan-card:hover {
            transform: translate(-4px, -4px) !important;
            box-shadow: 12px 12px 0px 0px #C86B45 !important;
        }

        /* ポップなプランカード（おすすめ） */
        .pop-plan-card-featured {
            background-color: #ffffff;
            border: 3.5px solid #A6CB61 !important;
            box-shadow: 8px 8px 0px 0px #C86B45 !important;
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
        }

        .pop-plan-card-featured:hover {
            transform: translate(-4px, -4px) !important;
            box-shadow: 12px 12px 0px 0px #F6D559 !important;
        }

        /* --- 案B: FVスプリット＆ステッカーレイアウト用スタイル --- */

        /* 訴求タグ用のバッジ（ステッカー・ワッペン風） */
        .pop-tag {
            display: inline-block;
            white-space: nowrap; /* タグ内での改行を防止 */
            background-color: #A5CA5B;
            color: #ffffff;
            border: 2px solid #C86B45 !important;
            border-radius: 9999px;
            padding: 6px 18px;
            font-weight: 700;
            font-size: 0.85rem;
            box-shadow: 3px 3px 0px 0px #F6D559 !important;
            transform: rotate(-1.5deg);
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease !important;
        }
        .pop-tag:nth-child(even) {
            background-color: #F6D559;
            color: #2F2621;
            border-color: #A5CA5B !important;
            box-shadow: 3px 3px 0px 0px #73A9C2 !important;
            transform: rotate(2deg);
        }
        .pop-tag:hover {
            transform: scale(1.08) rotate(0deg) !important;
            background-color: #C86B45 !important;
            color: #ffffff !important;
        }

        /* メインビジュアル用のポップフレーム */
        .fv-main-frame {
            border: 4.5px solid #C86B45 !important;
            border-radius: 24px !important;
            box-shadow: 12px 12px 0px 0px #A5CA5B !important;
            overflow: hidden;
            transition: transform 0.3s ease !important;
        }
        .fv-main-frame:hover {
            transform: scale(1.02) !important;
        }

        /* サブのステッカー風丸型画像 */
        .fv-sticker-img {
            position: absolute;
            width: 170px;
            height: 170px;
            border-radius: 50%;
            border: 3.5px solid #2F2621; /* フォールバック */
            overflow: hidden;
            z-index: 20;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        }
        .fv-sticker-img:hover {
            transform: scale(1.15) rotate(6deg) !important;
            z-index: 30;
        }

        /* 個別カラフル枠＆影 */
        .fv-sticker-1 {
            border-color: #A5CA5B !important;
            box-shadow: 4px 4px 0px 0px #C86B45 !important;
        }
        .fv-sticker-2 {
            border-color: #C86B45 !important;
            box-shadow: 4px 4px 0px 0px #73A9C2 !important;
        }
        .fv-sticker-3 {
            border-color: #73A9C2 !important;
            box-shadow: 4px 4px 0px 0px #F6D559 !important;
        }

        @media (max-width: 768px) {
            .fv-sticker-img {
                width: 90px;
                height: 90px;
            }
        }

        /* ふわふわ浮遊アニメーション */
        @keyframes float-slow {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(2deg); }
        }
        @keyframes float-mid {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-16px) rotate(-3deg); }
        }
        @keyframes float-fast {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-8px) rotate(1.5deg); }
        }

        .animate-float-1 {
            animation: float-slow 6s ease-in-out infinite;
        }
        .animate-float-2 {
            animation: float-mid 5s ease-in-out infinite;
        }
        .animate-float-3 {
            animation: float-fast 7s ease-in-out infinite;
        }

        /* FVロード時のアニメーション */
        @keyframes fv-fade-in-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fv-left {
            animation: fv-fade-in-up 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
            opacity: 0;
        }

        .animate-fv-right {
            animation: fv-fade-in-up 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
            opacity: 0;
            animation-delay: 0.25s;
        }

        /* コピー・テキスト選択防止 */
        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }