@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
    --primary-green: #2fa771;
    --primary-dark: #1f7a50;
    --bg-light: #f9fbf9;
    --text-main: #333333;
    --text-light: #666666;
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    color: var(--text-main);
    background-color: #fafdfb;
}

h1, h2, h3, h4, h5, p, a, span, div, li {
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* Header refinement */
.siteHeader {
    box-shadow: 0 2px 20px rgba(47, 167, 113, 0.08) !important;
    border-bottom: none !important;
}

/* Navigation items */
.global-nav-list li a {
    transition: color 0.3s ease;
    font-weight: 500;
}
.global-nav-list li a:hover {
    color: var(--primary-green) !important;
}

/* Sections/Areas refinement */
.area {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(47, 167, 113, 0.06);
    border: 1px solid rgba(47, 167, 113, 0.1) !important;
    padding: 35px !important;
    margin-bottom: 35px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.area:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(47, 167, 113, 0.12);
}

/* Headings */
.area h2 {
    border-bottom: 2px solid rgba(47, 167, 113, 0.3) !important;
    padding-bottom: 12px;
    margin-bottom: 25px;
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
}

.area h2 span {
    font-size: 0.6em !important;
    color: var(--primary-green) !important;
    opacity: 0.8;
    margin-left: 10px;
}

/* Elegant Buttons */
a.btnArea span.btnGreen, .btnGreen, .btn {
    background: linear-gradient(135deg, var(--primary-green), var(--primary-dark)) !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 6px 15px rgba(47, 167, 113, 0.25);
    transition: all 0.3s ease !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

a.btnArea:hover span.btnGreen, .btnGreen:hover, .btn:hover {
    box-shadow: 0 8px 25px rgba(47, 167, 113, 0.4);
    transform: translateY(-3px);
    background: linear-gradient(135deg, #35ba7e, var(--primary-green)) !important;
}

/* Cards (Info / Blog sets) */
.set {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.set:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(47, 167, 113, 0.1);
}

.set .pic {
    overflow: hidden;
}

.set .pic img {
    border-radius: 12px 12px 0 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.set:hover .pic img {
    transform: scale(1.08);
}

.set .date {
    font-size: 0.85em;
    color: #888;
    padding: 10px 15px 0;
}

.set .title {
    padding: 5px 15px 15px;
    font-weight: 500;
}

/* Image rounding */
img {
    border-radius: 8px;
}

/* Footer refinement */
.siteFooter {
    background-color: var(--primary-dark) !important;
    color: #ffffff !important;
    border-top: none !important;
}

/* Fix for static top visual */
.swiper-container {
    width: 100%;
    height: 70vh !important;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.swiper-wrapper {
    height: 100%;
}
.swiper-slide {
    height: 100%;
    position: relative;
}
.slide-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

/* Fix position for floating contact badge */
#slideArea {
    position: relative;
}

.swiperItem {
    position: absolute;
    right: 5%;
    bottom: 50px; /* Adjust so it sits on top of the image near the bottom right */
    z-index: 100;
    width: 280px; 
    transition: transform 0.3s ease;
}

.swiperItem a {
    display: block;
}

.swiperItem:hover {
    transform: scale(1.05) translateY(-5px);
}

.swiperItem img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(47, 167, 113, 0.3);
}

@media (max-width: 768px) {
    .swiperItem {
        width: 160px;
        right: 15px;
        bottom: 20px;
    }
}

/* Fix Read More Button Styling */
#area00 {
    line-height: 1.8;
}

a.btnArea {
    display: inline-block !important;
    text-decoration: none !important;
    margin-top: 20px !important;
    margin-left: 15px !important;
}

a.btnArea span.btnGreen {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 30px !important;
    font-size: 14px !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.5 !important;
    letter-spacing: 2px !important;
    position: relative !important;
    overflow: visible !important;
}

/* Sleek arrow icon */
a.btnArea span.btnGreen::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: 15px;
    transition: transform 0.3s ease;
}

a.btnArea:hover span.btnGreen::after {
    transform: rotate(45deg) translate(3px, -3px);
}

/* --- Ultra Modern Enhancements --- */

/* 1. Luxurious Whitespace */
.site-body {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.area {
    padding: 60px 70px !important; /* Huge breathing room */
    margin-bottom: 70px !important;
}

@media (max-width: 768px) {
    .area {
        padding: 35px 25px !important;
        margin-bottom: 45px !important;
    }
}

p {
    line-height: 2.0 !important; /* Elegant typography spacing */
    letter-spacing: 0.5px;
    margin-bottom: 1.5em;
}

/* 2. Scroll Fade-in Animations */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.area.is-visible:hover {
    transform: translateY(-5px);
}

/* 3. Subtle Glassmorphism Background Blobs */
body {
    position: relative;
    z-index: 0;
    background-color: #fafdfb;
}

body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,167,113,0.04) 0%, rgba(250,253,251,0) 70%);
    z-index: -1;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    bottom: -20%;
    right: -10%;
    width: 70vw;
    height: 70vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,167,113,0.03) 0%, rgba(250,253,251,0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* Make header float beautifully */
.siteHeader {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Single Page LP Styles */
html {
    scroll-behavior: smooth;
}

.lp-section {
    scroll-margin-top: 80px !important;
}
@media (min-width: 992px) {
    .lp-section {
        scroll-margin-top: 100px !important;
    }
}

/* Some subpage content wrappers */
.lp-section {
    margin-bottom: 80px;
}

.lp-section .area {
    margin-bottom: 0 !important;
}

/* Section Titles for LP layout */
.lp-title-wrapper {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 20px;
}

h2.lp-main-title {
    display: inline-block;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    border-bottom: 3px solid var(--primary-green) !important;
    padding-bottom: 10px;
    margin-bottom: 0;
    letter-spacing: 2px;
}

h2.lp-main-title span {
    display: block;
    font-size: 14px !important;
    color: var(--primary-green) !important;
    opacity: 0.8;
    margin-top: 8px;
    margin-left: 0 !important;
    letter-spacing: 1px;
}

/* Add leaf icon to LP section titles */
h2.lp-main-title {
    position: relative !important;
    padding-top: 55px !important; /* Make room for the icon */
    margin-top: 10px !important;
}

h2.lp-main-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background-image: url('../img/leaf-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* =========================================================
   MITAKA ORIGINAL PREMIUM BRANDING
   ========================================================= */

body {
    overflow-x: hidden !important; /* Prevent horizontal scroll from watermarks */
}

/* 1. Arch Window Photos (Exclude logos, icons, and flow images) */
.lp-section img:not([src*="logo"]):not([src*="icon"]):not([src*="flow"]):not(.no-arch) {
    border-radius: 120px 120px 15px 15px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06) !important;
    transition: transform 0.5s ease;
}

.lp-section img:not([src*="logo"]):not([src*="icon"]):not([src*="flow"]):not(.no-arch):hover {
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .lp-section img:not([src*="logo"]):not([src*="icon"]):not([src*="flow"]):not(.no-arch) {
        border-radius: 80px 80px 10px 10px !important;
    }
}

/* 施術の流れ（四つ角丸にして右上の数字を綺麗に見せる） */
#area04 .photo img,
.area#area04 .photo img,
#pagePrice #area04 .photo img,
img[src*="price_flow"],
img.no-arch {
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease;
}
#area04 .photo img:hover,
img[src*="price_flow"]:hover {
    transform: translateY(-3px);
}

/* 2. Champagne Gold Accents (#C5A059) */
:root {
    --accent-gold: #C5A059;
}

/* Button Hover: Rich Brand Green */
a.btnArea:hover span.btnGreen, .btnGreen:hover, .btn:hover {
    background: linear-gradient(135deg, #248d5d, #1a6d46) !important;
    box-shadow: 0 8px 20px rgba(36, 141, 93, 0.35) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* H3 Heading: Pattern 2 - Left accent bar only (Brand Green) */
h3 {
    border-left: 5px solid #2fa771 !important;
    border-bottom: none !important;
    border-top: none !important;
    border-right: none !important;
    padding-left: 14px !important;
    border-radius: 2px !important;
}

/* 3. Background Watermark Typography */
.lp-section {
    position: relative;
    z-index: 1; /* Establish stacking context */
}

/* ABOUT section watermark */
#about::after {
    content: 'MITAKA';
    position: absolute;
    top: 10%;
    left: -2%;
    font-size: 18vw;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    color: var(--primary-green);
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
    letter-spacing: 0.1em;
}

/* PRICE section watermark */
#price::after {
    content: 'RELAX';
    position: absolute;
    bottom: 5%;
    right: -2%;
    font-size: 15vw;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    color: var(--accent-gold);
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
    letter-spacing: 0.1em;
}

/* STAFF section watermark */
#staff::after {
    content: 'GREEN';
    position: absolute;
    top: 20%;
    right: 0%;
    font-size: 14vw;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    color: var(--primary-green);
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
    letter-spacing: 0.1em;
    transform: rotate(90deg);
    transform-origin: right center;
}

.lp-section > div {
    position: relative;
    z-index: 2;
}
.lp-section::after {
    z-index: 0 !important;
}

/* =========================================================
   FIX: COMPACT & OVERLAP LP LAYOUT
   ========================================================= */

/* 1. Compact the Section Titles to save vertical space */
.lp-title-wrapper {
    margin-bottom: 20px !important; /* Reduced from 40px */
    padding-top: 10px !important;
}

h2.lp-main-title {
    padding-top: 45px !important; /* Reduced from 55px */
    font-size: 26px !important; /* Slightly smaller for elegance */
}

h2.lp-main-title::before {
    width: 35px !important;
    height: 35px !important;
}

/* 2. Panoramic Crop for Main Visuals (Prevents giant square images) */
.lp-section .mainVisual img {
    width: 100% !important;
    height: 350px !important;
    object-fit: cover; /* Crops beautifully without distortion */
    border-radius: 80px 80px 10px 10px !important; /* Adjust arch for panorama */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .lp-section .mainVisual img {
        height: 220px !important;
        border-radius: 50px 50px 10px 10px !important;
    }
}

/* 3. Stylish Overlap (Pulls the text card UP over the bottom of the image) */
.lp-section .mainVisual + .area {
    margin-top: -60px !important; /* Overlap effect */
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    padding: 40px !important;
}

@media (max-width: 768px) {
    .lp-section .mainVisual + .area {
        margin-top: -30px !important;
        padding: 25px !important;
    }
}

/* =========================================================
   RADICAL COMPACT LAYOUT FIX
   ========================================================= */

/* 1. Horizontal Title (Icon + English + Japanese side-by-side) */
.lp-title-wrapper {
    margin-bottom: 20px !important;
    padding-top: 0 !important;
    display: flex;
    justify-content: center; /* Center the whole block */
}

h2.lp-main-title {
    display: flex !important;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important; /* Remove bottom line */
    font-size: 28px !important;
    margin: 0 !important;
}

h2.lp-main-title::before {
    position: static !important;
    transform: none !important;
    margin-right: 15px;
    width: 35px !important;
    height: 35px !important;
}

h2.lp-main-title span {
    display: inline-block !important;
    margin-top: 0 !important;
    margin-left: 15px !important;
    font-size: 16px !important;
    padding-left: 0;
}

/* 2. Ultra-Thin Panoramic Images */
.lp-section .mainVisual img {
    height: 200px !important; /* Drastically reduced from 350px */
    border-radius: 60px 60px 10px 10px !important;
}

@media (max-width: 768px) {
    /* Stack title on mobile if it doesn't fit, but keep it compact */
    h2.lp-main-title {
        font-size: 22px !important;
    }
    h2.lp-main-title span {
        font-size: 14px !important;
        margin-left: 10px !important;
        padding-left: 10px !important;
    }
    .lp-section .mainVisual img {
        height: 150px !important;
        border-radius: 40px 40px 5px 5px !important;
    }
}

/* =========================================================
   FULL WIDTH BAND TITLES & REMOVE MAIN VISUALS
   ========================================================= */

/* 1. Hide all main visuals */
.lp-section .mainVisual {
    display: none !important;
}

/* 2. Reset the overlap area styles */
.lp-section .mainVisual + .area,
.lp-section .area {
    margin-top: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 3. Full-width title band */
.lp-title-wrapper {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background: linear-gradient(135deg, #1f7a50, #2fa771) !important; /* Premium Green Gradient */
    padding: 25px 20px !important;
    margin-bottom: 60px !important;
    margin-top: 60px !important; /* Space between sections */
    box-shadow: 0 4px 15px rgba(47, 167, 113, 0.2);
}

/* Make sure the first section title isn't pushed down too far */
#about .lp-title-wrapper {
    margin-top: 20px !important;
}

/* 4. Title Text & Icon Colors (White on Green) */
h2.lp-main-title {
    color: #ffffff !important;
}



/* Turn the SVG leaf icon perfectly white */
h2.lp-main-title::before {
    filter: brightness(0) invert(1) !important;
}

/* =========================================================
   LIGHTER BAND TITLES
   ========================================================= */

/* Soft pale green background for the title band */
.lp-title-wrapper {
    background: linear-gradient(135deg, #eaf5eb, #f2f9f2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    border-top: 1px solid #dcf2e3 !important;
    border-bottom: 1px solid #dcf2e3 !important;
}

/* Change text back to dark green for readability */
h2.lp-main-title {
    color: var(--primary-green) !important;
}



/* Revert the SVG leaf icon to its original green color */
h2.lp-main-title::before {
    filter: none !important;
}

/* =========================================================
   MEDIUM "SAGE GREEN" BAND TITLES
   ========================================================= */

/* A calming, elegant medium "sage/mint" green */
.lp-title-wrapper {
    background: linear-gradient(135deg, #7dbd9a, #95d2b0) !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 0 4px 15px rgba(125, 189, 154, 0.3) !important;
}

/* White text for good contrast against the medium green */
h2.lp-main-title {
    color: #ffffff !important;
}



/* White SVG leaf icon */
h2.lp-main-title::before {
    filter: brightness(0) invert(1) !important;
}

/* =========================================================
   SINGLE COLUMN LAYOUT FOR PRICE COURSES
   ========================================================= */

/* Force the price course columns to stack vertically (1 column instead of 2) */
#pagePrice .row > .area.col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 40px !important; /* Add space between stacked items */
}

/* Make sure the photos inside the courses look good when full width */
#pagePrice .area.col-md-6 .photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: cover !important;
    border-radius: 20px !important; /* Gentle rounded corners */
}

/* =========================================================
   CARD UI FOR ALL CONTENT AREAS
   ========================================================= */

/* Override previous transparent background and make all content blocks white cards */
.site-body .area,
.lp-section .area,
.lp-section .mainVisual + .area {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04) !important; /* Soft, elegant shadow */
    padding: 40px !important;
    margin-bottom: 40px !important;
    border: 1px solid rgba(0,0,0,0.02) !important;
}

/* Ensure mobile looks good with slightly tighter padding */
@media (max-width: 768px) {
    .site-body .area,
    .lp-section .area {
        padding: 25px !important;
        border-radius: 15px !important;
        margin-bottom: 30px !important;
    }
}

/* =========================================================
   CHANGE CONTACT BADGE COLOR TO BLUE
   ========================================================= */

/* Use a hue-rotate filter to change the green PNG to a beautiful blue */
.swiperItem img {
    filter: hue-rotate(90deg) saturate(1.2) brightness(0.95) !important;
}

/* =========================================================
   TOP VISUAL COMPACT HEIGHT
   ========================================================= */

/* Reduce the massive height of the top visual */
.swiper-container {
    height: 50vh !important;
    min-height: 400px !important;
}

@media (max-width: 768px) {
    .swiper-container {
        height: 40vh !important;
        min-height: 300px !important;
    }
}

/* =========================================================
   TOP VISUAL KEN BURNS & PREMIUM CATCHPHRASE
   ========================================================= */

/* 1. Ken Burns Animation */
.swiper-container, .swiper-slide {
    overflow: hidden !important;
}

@keyframes kenburns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, 2%); }
}

.slide-img {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important; height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    animation: kenburns 20s ease-in-out infinite alternate !important;
}

/* Dark green overlay to make white text pop */
.swiper-slide::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 40, 20, 0.3) !important;
    z-index: 5;
    pointer-events: none;
}

/* 2. Premium Catchphrase Styling */
.slide-text.premium-catchphrase {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center;
    z-index: 10 !important;
    width: 90%;
    display: block !important;
}

.premium-catchphrase .main-copy {
    color: #ffffff !important;
    font-size: 42px !important;
    font-family: 'Noto Serif JP', 'Times New Roman', serif !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 25px !important;
    text-shadow: 0 4px 25px rgba(0,0,0,0.6) !important;
    opacity: 0;
    animation: textFadeUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards !important;
}

.premium-catchphrase .sub-copy {
    color: #f1f8f0 !important;
    font-size: 16px !important;
    letter-spacing: 0.15em !important;
    line-height: 2.0 !important;
    text-shadow: 0 2px 15px rgba(0,0,0,0.8) !important;
    opacity: 0;
    animation: textFadeUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1s forwards !important;
}

@keyframes textFadeUp {
    from { opacity: 0; transform: translateY(40px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 768px) {
    .premium-catchphrase .main-copy {
        font-size: 26px !important;
        letter-spacing: 0.1em !important;
    }
    .premium-catchphrase .sub-copy {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }
}

/* =========================================================
   FURTHER REDUCE TOP VISUAL HEIGHT & ADJUST TEXT
   ========================================================= */

/* Further reduce the height to make it a narrower banner */
.swiper-container {
    height: 38vh !important;
    min-height: 320px !important;
}

/* Adjust text size so it doesn't feel cramped in the narrower banner */
.premium-catchphrase .main-copy {
    font-size: 36px !important;
    margin-bottom: 15px !important;
}

.premium-catchphrase .sub-copy {
    font-size: 15px !important;
    line-height: 1.8 !important;
}

@media (max-width: 768px) {
    .swiper-container {
        height: 28vh !important;
        min-height: 220px !important;
    }
    .premium-catchphrase .main-copy {
        font-size: 22px !important;
        margin-bottom: 10px !important;
        letter-spacing: 0.05em !important;
    }
    .premium-catchphrase .sub-copy {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
}

/* =========================================================
   FIX CLIPPING AND CENTER THE BLUE BADGE
   ========================================================= */

/* Allow the blue circle to overflow the container without being clipped */
.swiper-container {
    overflow: visible !important;
    margin-bottom: 80px !important; /* Make room for the overlapping circle */
}

/* Keep the images inside slides clipped so Ken Burns effect works perfectly */
.swiper-slide {
    overflow: hidden !important;
}

/* Move the blue circle to the absolute center of the bottom edge */
.swiperItem {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: -100px !important; /* Push it down so it straddles the edge */
    transform: translateX(-50%) !important;
    width: 200px !important; /* Refined size to fit center perfectly */
    z-index: 1000 !important;
}

.swiperItem:hover {
    /* Preserve the horizontal centering while scaling on hover */
    transform: translateX(-50%) scale(1.05) translateY(-5px) !important;
}

@media (max-width: 768px) {
    .swiperItem {
        width: 140px !important;
        bottom: -70px !important;
    }
    .swiper-container {
        margin-bottom: 60px !important;
    }
}

/* =========================================================
   REPOSITION BLUE BADGE TO RIGHT-CENTER
   ========================================================= */

/* Move the badge to the vertical center, aligned to the right */
.swiperItem {
    position: absolute !important;
    left: auto !important;
    right: 5% !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Perfect vertical center */
    width: 180px !important; /* Slightly smaller so it doesn't block text */
    z-index: 1000 !important;
}

.swiperItem:hover {
    transform: translateY(-50%) scale(1.05) !important;
}

/* Ensure the text doesn't stretch too far right and hit the badge */
.slide-text.premium-catchphrase {
    width: 75% !important;
}

@media (max-width: 768px) {
    .swiperItem {
        width: 120px !important;
        right: 10px !important;
    }
    .slide-text.premium-catchphrase {
        width: 90% !important; /* On very small screens, some overlap is inevitable */
    }
}

/* =========================================================
   FIX EXCESSIVE GAP BELOW MAIN VISUAL
   ========================================================= */

/* Remove the large bottom margin that was added for the old badge position */
.swiper-container {
    margin-bottom: 0 !important;
}

/* Remove any extra top padding from the site body */
.site-body {
    padding-top: 0 !important;
}

/* Give the first section title a standard, beautiful spacing from the visual */
#about .lp-title-wrapper {
    margin-top: 40px !important;
}

/* =========================================================
   ADJUST GAP BELOW MAIN VISUAL
   ========================================================= */

/* Increase the gap to 80px for a more relaxed, premium feel */
#about .lp-title-wrapper {
    margin-top: 80px !important;
}

@media (max-width: 768px) {
    #about .lp-title-wrapper {
        margin-top: 50px !important;
    }
}

/* =========================================================
   RESTORE GAP FOR SITE BODY
   ========================================================= */

/* The content box was touching the image directly because padding was 0. 
   Adding 50px of breathing room here. */
.site-body {
    padding-top: 60px !important;
}

@media (max-width: 768px) {
    .site-body {
        padding-top: 40px !important;
    }
}

/* =========================================================
   STYLISH UPGRADE: "MITAKA PREMIUM SALON"
   ========================================================= */

/* 1. TYPOGRAPHY: Elegant Mincho for all headings */
h1, h2, h3, h4, h5, h6, .lp-main-title, .lp-sub-title {
    font-family: 'Noto Serif JP', 'Times New Roman', serif !important;
    letter-spacing: 0.1em !important;
}

/* 2. AREA HEADINGS: Pattern 2 - Left accent bar only (Brand Green, No underline) */
.area h3 {
    font-weight: 700 !important;
    color: #1a3c34 !important; /* Deep Slate Green */
    border-left: 5px solid #2fa771 !important;
    border-bottom: none !important;
    border-top: none !important;
    border-right: none !important;
    padding: 3px 0 3px 14px !important;
    margin-bottom: 25px !important;
    font-size: 22px !important;
    line-height: 1.4 !important;
    border-radius: 2px !important;
    position: relative;
}

/* 3. FULL WIDTH TITLE BANDS: Centered, Minimalist */
/* Hide the playful leaf icon */
.lp-title-wrapper::before {
    display: none !important;
}

/* Center and refine the title wrapper */
.lp-title-wrapper {
    justify-content: center !important;
    text-align: center !important;
    padding: 30px 0 !important;
    border-bottom: 1px solid rgba(47, 167, 113, 0.2) !important;
    margin-bottom: 40px !important;
}

/* Title Band: Crisp White English with Mint/Deep Green Japanese Pill */
.lp-main-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    color: #ffffff !important; /* Pure white on green band */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    letter-spacing: 0.15em !important;
}

h2.lp-main-title span, .lp-main-title span {
    color: #1a3c34 !important; /* Deep Slate Green - クッキリ読める濃緑 */
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    border: none !important;
    border-left: none !important; /* ゴールド縦棒の完全撤廃 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* 4. BUTTONS: Ghost Buttons */
.btnArea {
    text-align: center !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.btnArea .btnGreen, .btnArea a {
    background: transparent !important;
    color: #1a3c34 !important;
    border: 1px solid #1a3c34 !important;
    border-radius: 0 !important; /* Sharp, modern corners */
    padding: 16px 50px !important;
    font-size: 15px !important;
    transition: all 0.4s ease !important;
    box-shadow: none !important;
    display: inline-block !important;
    letter-spacing: 0.15em !important;
    font-family: 'Noto Serif JP', serif !important;
    text-decoration: none !important;
}

.btnArea .btnGreen:hover, .btnArea a:hover {
    background: #1a3c34 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(26, 60, 52, 0.15) !important;
}

/* 5. CONTACT / RESERVE BLUE BADGE */
/* Let's change the blue badge to a Slate Green to match the new theme */
.swiperItem img {
    filter: hue-rotate(140deg) saturate(0.5) brightness(0.6) !important; /* Turns bright green into dark slate green */
    box-shadow: 0 15px 30px rgba(26, 60, 52, 0.3) !important;
}

/* =========================================================
   RESTORE HORIZONTAL TITLES & GOLD ICON
   ========================================================= */

/* Ensure the wrapper is a horizontal flex row */
.lp-title-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

/* Restore the leaf icon and turn it Champagne Gold */
.lp-title-wrapper::before {
    display: block !important;
    /* CSS Filter approximation for Champagne Gold (#c5a059) */
    filter: invert(74%) sepia(43%) saturate(545%) hue-rotate(353deg) brightness(88%) contrast(88%) !important;
    margin: 0 !important;
}

/* Arrange English and Japanese horizontally and make them thinner */
.lp-main-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 300 !important; /* Very thin, elegant English */
}

@media (max-width: 768px) {
    .lp-title-wrapper {
        gap: 8px !important;
    }
    .lp-main-title {
        gap: 8px !important;
        font-size: 24px !important;
    }
    h2.lp-main-title span, .lp-main-title span {
        font-size: 12px !important;
        padding: 3px 10px !important;
    }
    h2.lp-main-title::before {
        width: 30px !important;
        height: 30px !important;
        margin-right: 10px !important;
    }
}

/* =========================================================
   FIX DOUBLE ICON & BLUE BADGE COLOR
   ========================================================= */

/* 1. Remove the duplicate icon on the wrapper */
.lp-title-wrapper::before {
    display: none !important;
}

/* 2. Official Brand Green Symbol for Section Title Bands */
h2.lp-main-title::before {
    content: '' !important;
    display: inline-block !important;
    width: 38px !important;
    height: 38px !important;
    position: static !important; /* Keep it perfectly inline with text */
    transform: none !important;
    margin-right: 15px !important;
    background-image: url('../img/logo-symbol.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    filter: none !important;
}

/* 3. Restore the Contact Badge to its original vibrant blue */
.swiperItem img {
    /* Override the murky slate green back to vibrant blue */
    filter: hue-rotate(90deg) saturate(1.2) brightness(0.95) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* =========================================================
   FIX MOBILE HAMBURGER MENU VISIBILITY
   ========================================================= */

/* Force visibility and stylish appearance for the hamburger menu */
.vk-mobile-nav-menu-btn {
    color: #1a3c34 !important; /* Deep Slate Green text */
    background-image: none !important; /* Remove default SVG which may be invisible/broken */
    background-color: rgba(255, 255, 255, 0.95) !important; /* Ensure high contrast against any header */
    border: 1px solid rgba(26, 60, 52, 0.15) !important; /* Subtle border */
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    padding-top: 36px !important; /* Make room for the CSS lines */
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 700 !important;
}

/* Draw a crisp, pure CSS 3-line hamburger icon */
.vk-mobile-nav-menu-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #1a3c34 !important; /* Top line */
    box-shadow: 0 7px 0 #1a3c34, 0 14px 0 #1a3c34 !important; /* Middle and bottom lines */
}

/* =========================================================
   ENLARGE BLUE BADGE
   ========================================================= */

/* Make the blue circle larger so the text is easily readable */
.swiperItem {
    width: 240px !important; 
}

@media (max-width: 768px) {
    .swiperItem {
        width: 170px !important; 
    }
}

/* =========================================================
   FIX MOBILE HAMBURGER MENU VISIBILITY
   ========================================================= */

/* Force visibility and stylish appearance for the hamburger menu */
.vk-mobile-nav-menu-btn {
    color: #1a3c34 !important; /* Deep Slate Green text */
    background-image: none !important; /* Remove default SVG which may be invisible/broken */
    background-color: rgba(255, 255, 255, 0.95) !important; /* Ensure high contrast against any header */
    border: 1px solid rgba(26, 60, 52, 0.15) !important; /* Subtle border */
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    padding-top: 36px !important; /* Make room for the CSS lines */
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 700 !important;
}

/* Draw a crisp, pure CSS 3-line hamburger icon */
.vk-mobile-nav-menu-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #1a3c34 !important; /* Top line */
    box-shadow: 0 7px 0 #1a3c34, 0 14px 0 #1a3c34 !important; /* Middle and bottom lines */
}

/* =========================================================
   ENLARGE BLUE BADGE
   ========================================================= */

/* Make the blue circle larger so the text is easily readable */
.swiperItem {
    width: 240px !important; 
}

@media (max-width: 768px) {
    .swiperItem {
        width: 170px !important; 
    }
}

/* =========================================================
   HEADER LAYOUT, LOGO & CONTACT BADGE
   ========================================================= */

/* 1. Header Container on PC (Fluid & Perfectly Spaced) */
@media (min-width: 992px) {
    .site-header--layout--nav-float .site-header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 1320px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    
    /* 2. Logo - cancel theme width:100% so it does not crush siblings */
    .site-header--layout--nav-float .site-header-logo {
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 8px 15px 8px 0 !important;
    }
    .site-header-logo img {
        max-height: 70px !important;
        width: auto !important;
    }
    
    /* 3. Global Nav - align neatly to right with balanced item spacing */
    .site-header--layout--nav-float .global-nav {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    .global-nav-list > li > a {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    .global-nav-name {
        font-size: 13px !important;
    }
    .global-nav-description {
        font-size: 10px !important;
    }
}

/* 4. Header Contact Badge (PC) - NEVER CRUSH */
.header-contact-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f4faf6 !important;
    border: 1px solid rgba(47, 167, 113, 0.25) !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(47, 167, 113, 0.06) !important;
}
.header-contact-badge .badge-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--primary-green) !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.header-contact-badge .badge-tel {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.header-contact-badge .badge-tel i {
    font-size: 13px !important;
    color: var(--primary-green) !important;
}
.header-contact-badge .badge-tel:hover {
    color: var(--primary-green) !important;
}
.header-contact-badge .badge-hours {
    font-size: 11px !important;
    color: #666 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 5. Responsive adjustment for narrow laptops (992px to 1180px) */
@media (min-width: 992px) and (max-width: 1180px) {
    .site-header--layout--nav-float .site-header-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .header-contact-badge .badge-hours {
        display: none !important;
    }
    .global-nav-list > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .site-header-logo img {
        max-height: 60px !important;
    }
}

@media (max-width: 991.98px) {
    .site-header-logo img {
        max-height: 55px !important; 
    }
    .header-contact-badge {
        display: none !important;
    }
}

/* Mobile Fixed CTA Bar */
.fixed-cta-bar {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: 65px !important;
    }
    .fixed-cta-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: #ffffff;
        box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.12);
        z-index: 99999;
        border-top: 1px solid rgba(47, 167, 113, 0.15);
    }
    .fixed-cta-bar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        transition: background 0.2s ease;
    }
    .fixed-cta-bar .cta-btn-tel {
        background: linear-gradient(135deg, #2fa771, #1f7a50);
        color: #ffffff !important;
    }
    .fixed-cta-bar .cta-btn-tel .cta-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
    .fixed-cta-bar .cta-btn-tel .cta-sub {
        font-size: 10px;
        opacity: 0.9;
        font-weight: 400;
    }
    .fixed-cta-bar .cta-btn-access {
        background: #f7fbf8;
        color: #2e624c !important;
        border-left: 1px solid rgba(47, 167, 113, 0.2);
    }
    .fixed-cta-bar .cta-btn-access .cta-icon {
        font-size: 18px;
        margin-bottom: 2px;
        color: var(--primary-green);
    }
    .fixed-cta-bar .cta-btn-reserve {
        background: #ffffff;
        color: #2fa771 !important;
        border-left: 1px solid rgba(47, 167, 113, 0.2);
    }
    .fixed-cta-bar .cta-btn-reserve .cta-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
}

/* Local SVG icons for mobile navigation */
:root {
    --g_nav_main_acc_icon_open_url: url(../img/icons/vk-menu-acc-icon-open-black.svg) !important;
    --g_nav_main_acc_icon_close_url: url(../img/icons/vk-menu-close-black.svg) !important;
    --g_nav_sub_acc_icon_open_url: url(../img/icons/vk-menu-acc-icon-open-white.svg) !important;
    --g_nav_sub_acc_icon_close_url: url(../img/icons/vk-menu-close-white.svg) !important;
    --vk-mobile-nav-menu-btn-bg-src: url(../img/icons/vk-menu-btn-black.svg) !important;
    --vk-mobile-nav-menu-btn-close-bg-src: url(../img/icons/vk-menu-close-black.svg) !important;
    --vk-menu-acc-icon-open-black-bg-src: url(../img/icons/vk-menu-acc-icon-open-black.svg) !important;
    --vk-menu-acc-icon-open-white-bg-src: url(../img/icons/vk-menu-acc-icon-open-white.svg) !important;
    --vk-menu-acc-icon-close-black-bg-src: url(../img/icons/vk-menu-close-black.svg) !important;
    --vk-menu-acc-icon-close-white-bg-src: url(../img/icons/vk-menu-close-white.svg) !important;
}

/* =========================================================
   DYNAMIC NEWS CARD GRID STYLES
   ========================================================= */

.news-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    height: 100%;
}

.news-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(47, 167, 113, 0.15);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card-link:hover .news-card {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(47, 167, 113, 0.18);
    border-color: rgba(47, 167, 113, 0.35);
}

.news-card-thumb {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #f4faf6;
    position: relative;
}

.news-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform 0.5s ease !important;
}

.news-card-link:hover .news-card-thumb img {
    transform: scale(1.06);
}

.news-card-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-card-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-card-date i {
    color: var(--primary-green);
}

.news-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #2b3e36;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 45px;
}

.news-card-link:hover .news-card-title {
    color: var(--primary-green);
}

.news-card-more {
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================================
   FAQ ACCORDION STYLES
   ========================================================= */

#pageQa .area {
    margin-bottom: 20px;
    border-radius: 14px;
    border: 1px solid rgba(47, 167, 113, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

#pageQa .area:hover {
    border-color: var(--primary-green);
    box-shadow: 0 6px 20px rgba(47, 167, 113, 0.12);
}

#pageQa .question {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #1f7a50;
    margin: 0;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

#pageQa .question::before {
    content: 'Q';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #2fa771;
    color: #ffffff;
    border-radius: 50%;
    margin-right: 14px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(47, 167, 113, 0.3);
}

#pageQa .question::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
    color: #2fa771;
    transition: transform 0.3s ease;
    margin-left: auto;
    padding-left: 15px;
}

#pageQa .area.is-open .question::after {
    transform: rotate(180deg);
}

#pageQa .answer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(47, 167, 113, 0.2);
    display: none;
}

#pageQa .area.is-open .answer {
    display: flex;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   NEW POLISH STYLES (Q&A Links, Price List, Guide Box, CTA)
   ========================================================= */

/* 1. Q&A Related Links */
.qa-related-links {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qa-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #edf7f1;
    color: #1f7a50 !important;
    border: 1px solid rgba(47, 167, 113, 0.35);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.qa-link-pill i {
    font-size: 11px;
    color: #2fa771;
    transition: color 0.25s ease;
}

.qa-link-pill:hover {
    background: #2fa771;
    color: #ffffff !important;
    border-color: #2fa771;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(47, 167, 113, 0.25);
}

.qa-link-pill:hover i {
    color: #ffffff;
}

/* 2. PRICE: Refined Course Price Headers */
#pagePrice h4 {
    background: linear-gradient(90deg, #f2f8f4 0%, #ffffff 100%);
    border-left: 4px solid #2fa771 !important;
    border-radius: 4px;
    padding: 10px 16px !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a3c34 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

#pagePrice .badge-popular {
    display: inline-block;
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 8px;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* 3. ACCESS: Building & Elevator Safe Guide Box */
.access-guide-box {
    background: #ffffff;
    border: 1px solid rgba(47, 167, 113, 0.25);
    border-radius: 8px;
    padding: 18px 20px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.access-guide-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1f7a50;
    margin-bottom: 10px;
}

.access-guide-title i {
    font-size: 16px;
}

.access-guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
}

.access-guide-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
}

.access-guide-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #2fa771;
    font-weight: bold;
}

/* 4. SECTION CTA: Elegant Mid-page Conversion Box */
.section-cta-box {
    margin: 40px auto 15px;
    background: linear-gradient(135deg, #f4fbf7, #eaf5ee);
    border: 1px solid rgba(47, 167, 113, 0.25);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(47, 167, 113, 0.08);
}

.section-cta-lead {
    font-size: 16px;
    font-weight: 700;
    color: #1a3c34;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.section-cta-sub {
    font-size: 13px;
    color: #555;
    margin-bottom: 18px;
}

.section-cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.btn-cta-reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #2fa771, #1f7a50);
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(47, 167, 113, 0.35);
    transition: all 0.3s ease;
}

.btn-cta-reserve:hover {
    background: linear-gradient(135deg, #248d5d, #165e3c);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(47, 167, 113, 0.45);
    color: #ffffff !important;
}

.btn-cta-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #1f7a50 !important;
    border: 2px solid #2fa771;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.btn-cta-tel:hover {
    background: #edf7f1;
    transform: translateY(-2px);
    color: #165e3c !important;
}

.section-cta-note {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* =========================================================
   OCTOBER LIMITED SCHEDULE CALENDAR COMPONENT
   ========================================================= */

.schedule-section {
    padding: 30px 15px 50px;
    background: transparent;
}

.schedule-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(47, 167, 113, 0.08);
    border: 1px solid rgba(47, 167, 113, 0.2);
    overflow: hidden;
}

.schedule-header {
    background: linear-gradient(135deg, #1f7a50, #2fa771);
    color: #ffffff;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.schedule-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.schedule-header-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Noto Serif JP', serif !important;
    font-size: 21px !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.badge-limited {
    background: #ffffff;
    color: #1f7a50;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.schedule-header-month {
    font-family: 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.schedule-body {
    padding: 28px;
}

.schedule-message {
    background: #f4fbf7;
    border-left: 4px solid #2fa771;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 25px;
    line-height: 1.85;
    font-size: 14.5px;
    color: #2c423b;
}

.schedule-message strong {
    color: #1a3c34;
}

/* Quick Summary Cards */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.summary-card {
    background: #ffffff;
    border: 1px solid #e1efe6;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-card.active {
    border-color: #2fa771;
    background: #fbfdfc;
}

.summary-day {
    font-size: 13px;
    font-weight: 700;
    color: #1a3c34;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-day.sun { color: #d9534f; }
.summary-day.sat { color: #337ab7; }

.summary-time {
    font-size: 15px;
    font-weight: 700;
    color: #2fa771;
}

.summary-note {
    font-size: 11.5px;
    color: #666;
}

/* Calendar Table */
.cal-table-wrap {
    overflow-x: auto;
    margin-bottom: 22px;
}

.cal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 13px;
}

.cal-table th {
    padding: 10px 4px;
    background: #edf6f0;
    color: #1a3c34;
    font-weight: 700;
    border: 1px solid #dbece0;
}

.cal-table th.sun { color: #d9534f; background: #fdf2f2; border-color: #f7d7d7; }
.cal-table th.sat { color: #337ab7; background: #f0f5fa; border-color: #dce7f2; }

.cal-table td {
    padding: 8px 4px;
    border: 1px solid #e5ede7;
    height: 60px;
    vertical-align: top;
    width: 14.28%;
}

.cal-table td.empty {
    background: #fcfcfc;
    color: #ddd;
}

.cal-date {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 3px;
    color: #444;
}

.cal-table td.sun .cal-date { color: #d9534f; }
.cal-table td.sat .cal-date { color: #337ab7; }
.cal-table td.holiday .cal-date { color: #d9534f; }

.cal-open {
    display: block;
    background: #eaf7ef;
    color: #1f7a50;
    border: 1px solid #c2e6d0;
    border-radius: 4px;
    padding: 3px 2px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.cal-open.night {
    background: #edf3fb;
    color: #24579c;
    border-color: #c9dbf2;
}

.cal-close {
    display: block;
    color: #bbb;
    font-size: 11px;
    padding-top: 5px;
}

.schedule-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 18px;
    border-top: 1px dashed #dbece0;
}

.schedule-footer-note {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

.btn-reserve-cal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2fa771, #1f7a50);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(47, 167, 113, 0.3);
    transition: all 0.3s ease;
}

.btn-reserve-cal:hover {
    background: linear-gradient(135deg, #248d5d, #165e3c);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(47, 167, 113, 0.4);
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .schedule-header {
        padding: 16px 20px;
    }
    .schedule-body {
        padding: 18px;
    }
    .summary-grid {
        grid-template-columns: 1fr;
    }
    .cal-table th, .cal-table td {
        padding: 6px 2px;
        font-size: 11px;
    }
    .cal-open {
        font-size: 9.5px;
        padding: 2px 1px;
    }
    .schedule-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .btn-reserve-cal {
        justify-content: center;
    }
}

/* =========================================================
   NEWS CARD BADGE & EXCERPT (Google Maps Feed)
   ========================================================= */
.news-card-thumb {
    position: relative;
}

.news-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #1f7a50;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.news-card-excerpt {
    font-size: 12.5px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Global Nav Spacing for 9 items */
@media (min-width: 992px) {
    .global-nav-list > li > a {
        padding: 14px 1.05em !important;
    }
    .global-nav-list > li .global-nav-name {
        font-size: 13px !important;
    }
    .global-nav-list > li .global-nav-description {
        font-size: 9.5px !important;
    }
}

/* News Card Modal Trigger Enhancements */
.news-card {
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(46, 98, 76, 0.15) !important;
}
.news-modal-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #2e624c;
    transition: color 0.2s ease, transform 0.2s ease;
}
.news-card:hover .news-modal-trigger-btn {
    color: #204b38;
    transform: translateX(4px);
}

/* =========================================================
   ARTICLE DETAIL MODAL POPUP STYLES
   ========================================================= */
.news-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.news-modal-overlay.is-active {
    opacity: 1;
}
.news-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 38, 28, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.news-modal-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 15px;
    box-sizing: border-box;
}
.news-modal-dialog {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 680px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    padding: 35px 30px;
    box-sizing: border-box;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    max-height: 90vh;
    overflow-y: auto;
}
.news-modal-overlay.is-active .news-modal-dialog {
    transform: scale(1) translateY(0);
}

/* Close Button */
.news-modal-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3f6f4;
    border: none;
    color: #444;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}
.news-modal-close-btn:hover {
    background: #2e624c;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Header */
.news-modal-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.news-modal-badge {
    background: #e8f5ee;
    color: #2e624c;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
}
.news-modal-date {
    font-size: 13px;
    color: #888;
}
.news-modal-title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.45;
    color: #222;
    margin: 0 0 20px;
    padding-right: 35px; /* Leave space for close button */
}

/* Body */
.news-modal-img-wrap {
    margin-bottom: 22px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    background: #f8f9fa;
    text-align: center;
}
.news-modal-img-wrap img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
}
.news-modal-content {
    font-size: 15px;
    line-height: 1.85;
    color: #333;
}
.news-modal-content p {
    margin-bottom: 16px;
}
.news-modal-content p:last-child {
    margin-bottom: 0;
}

/* Footer Actions */
.news-modal-footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #edf2ef;
}
.news-modal-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.news-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}
.news-modal-btn-gmap {
    background: #ffffff;
    color: #1a73e8;
    border: 1px solid #4285F4;
    box-shadow: 0 3px 10px rgba(66, 133, 244, 0.12);
}
.news-modal-btn-gmap:hover {
    background: #4285F4;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(66, 133, 244, 0.25);
}
.news-modal-btn-reserve {
    background: linear-gradient(135deg, #2e624c 0%, #204b38 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(46, 98, 76, 0.25);
}
.news-modal-btn-reserve:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 98, 76, 0.35);
}
.news-modal-btn-tel {
    background: #f4faf6;
    color: #2e624c;
    border: 1px solid #a3dac0;
}
.news-modal-btn-tel:hover {
    background: #e6f6ee;
}

@media (max-width: 767px) {
    .news-modal-container {
        padding: 20px 10px;
    }
    .news-modal-dialog {
        padding: 24px 18px;
        border-radius: 16px;
    }
    .news-modal-title {
        font-size: 17px;
        margin-bottom: 16px;
    }
    .news-modal-content {
        font-size: 14px;
        line-height: 1.75;
    }
    .news-modal-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }
}