/*
Theme Name: Salon Star Sakai
Theme URI: 
Author: Suginii
Author URI: 
Description: カスタムレンタルサロンテーマ
Version: 1.0.33
License: 
License URI: 
Text Domain: salon-star-sakai
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');
        /* CSS Reset & Variables */
        :root {
            --main-bg: #e7e2db;
            --primary: #ffffff;
            --text-main: #333333;
            --text-light: #666666;
            --border: #e2e2e2;
            --bg-alt: #f1efe9;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            color: var(--text-main);
            line-height: 1.8;
            background-color: var(--main-bg);
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, .en-text {
            font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
            font-weight: 400;
            letter-spacing: 0.15em;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 0;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-padding {
            padding: 120px 0;
        }

        /* Buttons */
        .btn {
            display: inline-block;
            background-color: transparent;
            color: var(--text-main);
            padding: 18px 50px;
            border: 1px solid var(--text-main);
            border-radius: 0;
            font-size: 13px;
            font-weight: 400;
            letter-spacing: 0.15em;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

        .btn:hover {
            background-color: var(--text-main);
            color: var(--primary);
        }

        /* Header */
        header {
            background: var(--main-bg);
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid var(--border);
            transition: all 0.3s;
        }

        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .logo {
            font-family: 'Montserrat', sans-serif;
            font-size: 20px;
            color: var(--text-main);
            letter-spacing: 0.15em;
            font-weight: 500;
        }

        
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            z-index: 1000;
        }
        .hamburger span {
            width: 28px;
            height: 2px;
            background-color: var(--text-main);
            transition: all 0.3s ease;
            display: block;
        }

        .nav-links {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .nav-links a {
            font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.15em;
            transition: opacity 0.3s;
        }

        .nav-links a:hover {
            opacity: 0.6;
        }

        .header-btn {
            border: 1px solid var(--text-main);
            padding: 12px 30px;
            font-size: 11px;
            letter-spacing: 0.1em;
            transition: background 0.3s, color 0.3s;
        }

        .header-btn:hover {
            background-color: var(--text-main);
            color: var(--primary);
        }

        /* Hero */
        .hero {
            position: relative;
            background-color: var(--text-main);
            height: 80vh;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            overflow: hidden;
        }

        .hero-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .hero-slider .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation: fadeSlider 18s infinite;
            will-change: transform, opacity;
            image-rendering: -webkit-optimize-contrast; /* 画像をくっきりさせる */
            backface-visibility: hidden; /* アニメーション中のぼやけ防止 */
            transform: translateZ(0);
        }

        .hero-slider .slide1 {
            background-image: url('images/hero01.jpg');
            animation-delay: 0s;
        }

        .hero-slider .slide2 {
            background-image: url('images/hero02.jpg');
            animation-delay: 6s;
        }

        .hero-slider .slide3 {
            background-image: url('images/hero03.jpg');
            animation-delay: 12s;
        }

        @keyframes fadeSlider {
            0% { opacity: 0; transform: scale(1); animation-timing-function: ease-in; }
            8% { opacity: 1; transform: scale(1.02); animation-timing-function: ease-out; }
            33% { opacity: 1; transform: scale(1.05); }
            41% { opacity: 0; transform: scale(1.06); }
            100% { opacity: 0; transform: scale(1); }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 1100px;
            margin: 0 auto;
            width: 100%;
            padding: 0 20px;
            text-align: left;
            animation: fadeIn 1.2s ease-out 2.0s backwards;
        }

        .hero h1 {
            font-size: 32px;
            line-height: 1.6;
            margin-bottom: 30px;
            color: #333333;
            font-weight: 500;
            letter-spacing: 0.05em;
            /* 白い壁の上に暗い文字を置くため、白枠のようなシャドウを薄く入れて視認性を高める */
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.8);
        }

        .hero p.sub-copy {
            font-size: 14px;
            color: #4a4a4a;
            margin-bottom: 60px;
            letter-spacing: 0.1em;
            line-height: 2;
            font-weight: 500;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        .btn-white {
            border-color: rgba(255, 255, 255, 0.8);
            color: #ffffff;
        }

        .btn-white:hover {
            background-color: #ffffff;
            color: var(--text-main);
            border-color: #ffffff;
        }

        .btn-hero {
            background-color: #ffffff;
            color: #333333;
            border-color: #ffffff;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            font-weight: 600;
        }

        .btn-hero:hover {
            background-color: #333333;
            color: #ffffff;
            border-color: #333333;
        }

        /* Intro */
        .intro-text {
            text-align: center;
            max-width: 700px;
            margin: 0 auto;
            font-size: 16px;
            line-height: 2.2;
            letter-spacing: 0.08em;
        }
        
        /* Section Title */
        .section-title {
            text-align: center;
            font-size: 28px;
            margin-bottom: 80px;
            letter-spacing: 0.15em;
            font-weight: 300;
        }

        /* Cards - 3 Reasons */
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .card {
            background: var(--primary);
            padding: 60px 40px;
            border-radius: 0;
            text-align: left;
            border: 1px solid var(--border);
            transition: transform 0.4s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-number {
            font-family: 'Montserrat', sans-serif;
            font-size: 36px;
            color: var(--text-main);
            margin-bottom: 20px;
            display: block;
            font-weight: 300;
        }

        .card h3 {
            font-size: 16px;
            margin-bottom: 20px;
            line-height: 1.6;
            letter-spacing: 0.05em;
        }

        .card p {
            font-size: 13px;
            color: var(--text-light);
            line-height: 1.8;
        }

        /* Media / Image Text section */
        .media-text {
            display: flex;
            align-items: center;
            gap: 80px;
            margin-bottom: 80px;
        }

        .media-text.reverse {
            flex-direction: row-reverse;
        }

        .media-img {
            flex: 1;
            min-height: 450px;
            background-size: cover;
            background-position: center;
        }

        .img-room { background: url('images/room.jpg') center/cover; }
        .img-equip { background: url('images/img04.jpg') center/cover; }

        .media-content {
            flex: 1;
        }

        .media-content h3 {
            font-size: 20px;
            margin-bottom: 25px;
            letter-spacing: 0.1em;
            font-weight: 300;
        }

        .media-content p {
            font-size: 14px;
            color: var(--text-light);
            line-height: 2;
        }

        .check-list {
            list-style: none;
            margin-top: 30px;
            margin-bottom: 40px;
        }

        .check-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 15px;
            font-size: 13px;
            color: var(--text-light);
        }

        .check-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            width: 12px;
            height: 1px;
            background-color: var(--text-main);
        }

        /* Gallery */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .gallery-item {
            overflow: hidden;
            background: var(--bg-alt);
        }

        .gallery-item img {
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.05); /* subtle zoom */
        }

        /* Steps */
        .steps {
            background: var(--bg-alt);
        }

        .step-wrapper {
            display: flex;
            gap: 40px;
            margin-top: 60px;
        }

        .step-box {
            flex: 1;
            background: transparent;
            text-align: center;
        }

        .step-num {
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            font-size: 24px;
            color: var(--text-main);
            margin-bottom: 20px;
            border-bottom: 1px solid var(--text-main);
            padding-bottom: 5px;
        }

        .step-box h4 {
            margin-bottom: 20px;
            font-size: 15px;
            letter-spacing: 0.1em;
            font-weight: 300;
        }
        
        .step-box p {
            font-size: 13px;
            color: var(--text-light);
            line-height: 1.8;
        }

        /* FAQ Accordion */
        .faq-box {
            background: transparent;
            border-bottom: 1px solid var(--border);
            padding: 25px 0;
            cursor: pointer;
        }
        
        .faq-box summary {
            font-size: 15px;
            color: var(--text-main);
            list-style: none;
            position: relative;
            padding-right: 30px;
            letter-spacing: 0.05em;
        }

        .faq-box summary::-webkit-details-marker {
            display: none;
        }

        .faq-box summary::after {
            content: '+';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-main);
            font-family: 'Montserrat', sans-serif;
            font-size: 20px;
            font-weight: 300;
        }

        .faq-box[open] summary::after {
            content: '-';
        }

        .faq-answer {
            margin-top: 20px;
            color: var(--text-light);
            line-height: 1.8;
            font-size: 13px;
            letter-spacing: 0.05em;
        }

        /* Final CTA */
        .final-cta {
            background: var(--text-main);
            color: var(--primary);
            text-align: center;
            padding: 120px 20px;
        }

        .final-cta h2 {
            color: var(--primary);
            font-size: 28px;
            margin-bottom: 30px;
            letter-spacing: 0.15em;
            font-weight: 300;
        }

        .final-cta p {
            font-size: 14px;
            letter-spacing: 0.1em;
        }

        .final-cta a.btn {
            background-color: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
            margin-top: 20px;
        }

        .final-cta a.btn:hover {
            background-color: var(--primary);
            color: var(--text-main);
        }

        .final-cta .sub-link {
            text-decoration: none;
            margin-top: 15px;
            display: inline-block;
            border-bottom: 1px solid rgba(255,255,255,0.3);
            color: var(--primary);
            transition: opacity 0.3s;
        }

        .final-cta .sub-link:hover {
            opacity: 0.6;
        }

        /* True Footer */
        .site-footer {
            background: var(--main-bg);
            color: var(--text-main);
            padding: 80px 0 40px;
            text-align: center;
            font-size: 12px;
            letter-spacing: 0.1em;
        }
        .footer-links {
            margin-bottom: 40px;
        }
        .footer-links a {
            margin: 0 20px;
            color: var(--text-main);
            transition: opacity 0.3s;
        }
        .footer-links a:hover {
            opacity: 0.6;
            border-bottom: 1px solid var(--text-main);
        }
        .copyright {
            font-family: 'Montserrat', sans-serif;
            margin-top: 40px;
            color: var(--text-light);
        }

        /* Floating CTA (PC) */
        .floating-cta {
            position: fixed;
            bottom: 40px;
            right: 40px;
            background-color: #40916c; /* Vibrant Emerald Green */
            color: #ffffff;
            padding: 16px 36px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.15em;
            z-index: 999;
            box-shadow: 0 8px 25px rgba(64, 145, 108, 0.4);
            transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        }
        .floating-cta:hover {
            transform: translateY(-5px);
            background-color: #2b7a56;
            color: #ffffff;
            box-shadow: 0 12px 30px rgba(64, 145, 108, 0.6);
        }
        @media (max-width: 768px) {
            .floating-cta { display: none; }
        }

        /* Mobile Fixed CTA */
        .mobile-cta {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: var(--primary);
            border-top: 1px solid var(--border);
            z-index: 1000;
        }

        .mobile-cta a {
            flex: 1;
            text-align: center;
            padding: 18px 0;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.1em;
        }
        .mobile-cta a.main-btn {
            background: var(--text-main);
            color: var(--primary);
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive */
        @media (max-width: 900px) {
            .grid-3 { grid-template-columns: 1fr; }
            .media-text, .media-text.reverse { flex-direction: column; gap: 40px;}
            .media-img { width: 100%; min-height: 300px; }
            .step-wrapper { flex-direction: column; gap: 60px; }
            .section-padding { padding: 80px 0; }
            .gallery-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            z-index: 1000;
        }
        .hamburger span {
            width: 28px;
            height: 2px;
            background-color: var(--text-main);
            transition: all 0.3s ease;
            display: block;
        }

        
            .hamburger { display: flex; }
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 250px;
                height: 100vh;
                background-color: #ffffff;
                flex-direction: column;
                justify-content: flex-start;
                padding-top: 100px;
                gap: 20px;
                box-shadow: -5px 0 15px rgba(0,0,0,0.1);
                transition: right 0.4s ease;
                z-index: 999;
            }
            .nav-links a {
                font-size: 14px;
                padding: 10px 30px;
                width: 100%;
                box-sizing: border-box;
            }
            .nav-links.active {
                right: 0;
            }
            .hamburger.active span:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }
            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }
            .hamburger.active span:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }
            .header-btn {
                margin: 0 30px;
                width: calc(100% - 60px);
                text-align: center;
                margin-top: 20px;
            }
    
            .hero { height: auto; padding: 120px 0 80px; }
            .hero h1 { font-size: 24px; }
            .hero p.sub-copy { font-size: 13px; margin-bottom: 40px; }
            .mobile-cta { display: flex; }
            body { padding-bottom: 60px; } /* Footer space */
            .section-title { font-size: 20px; margin-bottom: 50px; }
        }


/* Page Header */
.page-header {
    position: relative;
    height: 35vh;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 70px;
    image-rendering: -webkit-optimize-contrast;
}
.page-header-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); 
    pointer-events: none;
}
.page-header-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
    .page-header {
        margin-top: 60px;
        height: 20vh;
        min-height: 180px;
    }
    .page-header-title {
        font-size: 22px;
    }
}

/* Breadcrumbs */
.breadcrumbs {
    padding: 20px 20px 0 20px;
    font-size: 11px;
    color: var(--text-light);
    letter-spacing: 0.05em;
    max-width: 1000px;
    margin: 0 auto;
}
.breadcrumbs a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}
.breadcrumbs a:hover {
    color: var(--text-main);
}
.breadcrumbs span {
    color: var(--text-main);
}

/* Loading Screen */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--main-bg);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.loader.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.loader-logo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    opacity: 0;
    animation: fadeInLogo 1.5s ease forwards;
    transition: opacity 0.5s ease;
}

.loader-logo.hide {
    opacity: 0;
}

.loader-salon {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #bcaaa4;
    letter-spacing: 0.2em;
}

.loader-star {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 500;
    color: #bcaaa4;
    font-style: italic;
    margin-left: 2px;
    position: relative;
}

.loader-star span {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    position: absolute;
    top: 6px;
    right: -26px;
    font-style: normal;
}

@keyframes fadeInLogo {
    0% {
        opacity: 0;
        transform: translateY(15px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 定期利用プラン用スタイル */
.plan-card {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    padding: 40px 30px;
    text-align: center;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.plan-card.recommended {
    border: 2px solid #536d58;
    position: relative;
}
.plan-card.recommended::before {
    content: '人気No.1';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #536d58;
    color: #ffffff;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
}
.plan-title {
    font-size: 20px;
    color: #333333;
    margin-bottom: 5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.plan-target {
    font-size: 13px;
    color: #555555;
    margin-bottom: 20px;
    display: block;
}
.plan-condition {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    background: #f9f9f9;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.plan-discount {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    color: #536d58;
    margin-bottom: 30px;
    font-weight: 500;
}
.plan-discount span {
    font-size: 14px;
    color: #555555;
    font-weight: normal;
}
.plan-features {
    text-align: left;
    margin-bottom: 30px;
    flex-grow: 1;
}
.plan-features li {
    font-size: 14px;
    color: #333333;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}
.plan-features li::before {
    content: '✓';
    color: #536d58;
    font-weight: bold;
}
.plan-features li.disabled::before {
    content: '−';
    color: #999999;
}

/* プレミアムプラン専用の高級感あるスタイル */
.premium-card {
    border: 2px solid #bcaaa4;
    background: linear-gradient(135deg, #ffffff 0%, #fcfbf9 100%);
    box-shadow: 0 10px 30px rgba(188, 170, 164, 0.2);
    position: relative;
}
.premium-card::before {
    content: 'VIP';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #c5b358 0%, #bcaaa4 100%);
    color: #ffffff;
    padding: 5px 30px;
    border-radius: 20px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.2em;
    box-shadow: 0 4px 10px rgba(188, 170, 164, 0.3);
}
.premium-card .plan-title {
    color: #a8948c;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-style: italic;
}
.premium-card .plan-condition {
    background: linear-gradient(to right, #bcaaa4, #a8948c);
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.premium-card .plan-discount {
    color: #a8948c;
    font-size: 36px;
    text-shadow: 2px 2px 8px rgba(188, 170, 164, 0.3);
}
.premium-card .plan-features li::before {
    color: #a8948c;
}

/* Device specific display utilities */
.pc-br { display: block; }
.sp-br { display: none; }
.text-center-pc { text-align: center; }
.text-left-pc { text-align: left; }

@media (max-width: 768px) {
    .pc-br { display: none; }
    .sp-br { display: block; }
    .text-center-pc { text-align: left; } /* Or whatever the default is, wait... the user wants "スマホ表示はそのまま維持でお願いします" (left-aligned) */
}


/* Responsive Utilities */
.pc-br { display: block; }
.sp-br { display: none; }
.text-center-pc { text-align: center !important; }

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