/* Base Styles */
body {
    background-color: #FFFFFF;
    color: #4B5563;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

/* -------------------------------------
   斜め・スポーティーデザイン用ユーティリティ
-------------------------------------- */

/* ボタン等の斜め変形 */
.skew-btn {
    transform: skewX(-12deg);
}

.unskew-content {
    transform: skewX(12deg);
}

/* セクション背景の斜め区切り */
.skew-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewY(-3deg);
    transform-origin: top left;
}

/* Instagramセクション用の斜め背景 (下部はまっすぐ) */
.skew-bg-instagram {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -100px;
    z-index: -1;
    transform: skewY(-3deg);
    transform-origin: top left;
}

/* フッター上部の斜め区切り (逆向き) */
.skew-bg-reverse {
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewY(3deg);
    transform-origin: bottom right;
}

/* パララックス固定背景 (PC用) */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* スマートフォン・タッチ端末用の固定背景対応 */
@media (max-width: 767px),
       (max-width: 1024px) and (hover: none) and (pointer: coarse) {
    .parallax-bg {
        position: relative;
        background: none !important;
        isolation: isolate;
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }

    .parallax-bg::before {
        content: '';
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 0;
        pointer-events: none;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* 対象セクションの背景画像を疑似要素へ引き継ぐ */
    #about::before {
        background-image: url('../img/aboutbg.jpg');
    }

    /* セクション直下のコンテンツを前面へ配置する */
    .parallax-bg > * {
        position: relative;
        z-index: 1;
    }
}

/* FV (ファーストビュー) の斜めカット画像 */
.fv-clip {
    clip-path: none;
    /* SPは斜めカット無し */
}

@media (min-width: 768px) {
    .fv-clip {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
    }
}

/* 汎用の平行四辺形画像クリップ */
.img-clip-slant {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

/* FV店舗名 縁取り文字 */
.text-stroke {
    -webkit-text-stroke: 1.5px #F472B6;
    color: transparent;
}

@media (max-width: 767px) {
    .text-stroke {
        -webkit-text-stroke: 0px;
        color: #ffffff;
    }
}

/* 背景テキスト(巨大文字) */
.bg-typography {
    font-family: "Noto Sans", sans-serif;
    font-size: clamp(4rem, 15vw, 12rem);
    font-weight: 300;
    /* ライトに */
    font-style: italic;
    line-height: 0.8;
    opacity: 0.04;
    position: absolute;
    z-index: -1;
    white-space: nowrap;
    pointer-events: none;
    color: #F472B6;
    /* ピンク */
    text-transform: uppercase;
}

/* Marquee (流れる文字) */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(244, 114, 182, 0.15);
    border-bottom: 1px solid rgba(244, 114, 182, 0.15);
    display: flex;
    background-color: #FDF8F9;
}

.marquee-content {
    display: inline-flex;
    align-items: center;
    animation: marquee 40s linear infinite;
    font-family: "Noto Sans", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 2rem;
    letter-spacing: 0.2em;
    color: #F472B6;
    opacity: 0.4;
    text-transform: uppercase;
}

.marquee-content span {
    margin-right: 3rem;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* FV Animation */
.fv-fade-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    animation: fvFadeThree 15s infinite;
}

.fv-fade-img:nth-of-type(1) {
    animation-delay: 0s;
}

.fv-fade-img:nth-of-type(2) {
    animation-delay: 5s;
}

.fv-fade-img:nth-of-type(3) {
    animation-delay: 10s;
}

@keyframes fvFadeThree {
    0% {
        opacity: 0;
        z-index: 1;
        filter: blur(8px);
        transform: scale(1.03);
    }

    /* フェードイン完了・ブラー解消 */
    10% {
        opacity: 0.9;
        z-index: 2;
        filter: blur(0px);
        transform: scale(1);
    }

    /* 表示維持 */
    33.33% {
        opacity: 0.9;
        z-index: 2;
        filter: blur(0px);
        transform: scale(1);
    }

    /* フェードアウト完了・ブラー再発 */
    43.33% {
        opacity: 0;
        z-index: 1;
        filter: blur(8px);
        transform: scale(1.03);
    }

    100% {
        opacity: 0;
        z-index: 1;
        filter: blur(8px);
        transform: scale(1.03);
    }
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hamburger */
.hamburger-menu {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hamburger-menu.active {
    transform: translateY(0);
}

body.mobile-menu-open {
    overflow: hidden;
}

/* Mobile CTA */
.mobile-cta {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-top: 1px solid #FCE7F3;
}

.mobile-cta.visible {
    transform: translateY(0);
}

/* Swiper Pagination Customization */
.swiper-pagination-bullet {
    background-color: #FCE7F3 !important;
    opacity: 1 !important;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background-color: #F472B6 !important;
    transform: scale(1.2);
}

.swiper-results .swiper-pagination {
    position: relative;
    margin-top: 1.5rem;
}