@charset "UTF-8";

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Zen+Old+Mincho:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap');

/* Base Styles */
:root {
    --color-primary: #1a1a1a;
    --color-secondary: #333333;
    --color-text: #1a1a1a;
    --color-gray: #f2f2f2;
    --font-sans: 'Zen Old Mincho', serif;
    --font-serif: 'Zen Old Mincho', serif;
    --font-display: 'Cinzel', serif;
    --font-zen: 'Zen Old Mincho', serif;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 2.0;
    /* ゆとりを持たせる */
    letter-spacing: 0.08em;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    overflow-x: hidden;
}


/* Typography (Becolourful Style) */
.font-display {
    font-family: var(--font-display);
    font-weight: 700;
}

.font-zen {
    font-family: var(--font-zen);
}

.font-display-italic {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
}

/* 巨大な背景文字 */
.big-typography {
    font-family: var(--font-display);
    font-size: clamp(4rem, 15vw, 12rem);
    line-height: 1;
    opacity: 0.05;
    position: absolute;
    z-index: 0;
    white-space: nowrap;
    pointer-events: none;
    font-style: italic;
    font-weight: 700;
}

/* FV Section (New Full Screen Slider) */
.fv-section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.swiper-fv {
    width: 100%;
    height: 100%;
}

.swiper-fv .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-fv .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 768px) {
    .swiper-fv .swiper-slide img {
        /* 全体的なデフォルト設定 */
        object-position: center center;
    }

    .fv-img-1 {
        object-position: 50% 50% !important;
    }

    .fv-img-2 {
        object-position: 50% 50% !important;
    }

    .fv-img-3 {
        object-position: 50% 50% !important;
    }

    .img-free-09 {
        object-position: 50% 50% !important;
    }
}

/* Circular Text (Becolourful Style Refined) */
.circular-text-container {
    position: absolute;
    bottom: 50px;
    right: 50px;
    /* 右下に配置 */
    width: 140px;
    height: 140px;
    z-index: 20;
    pointer-events: none;
    animation: rotateText 15s linear infinite;
    mix-blend-mode: difference;
    /* 背景となじませつつ視認性確保 */
    color: #fff;
}

@media (max-width: 768px) {
    .circular-text-container {
        width: 80px;
        height: 80px;
        bottom: 15px;
        right: 15px;
    }
}

.circular-text-container svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

@keyframes rotateText {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Marquee Animation (Perenoel Online Store Style) */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.marquee-content {
    display: inline-block;
    animation: marquee 30s linear infinite;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3rem;
    font-style: italic;
    color: #e0e0e0;
    /* 薄いグレーで上品に */
}

@media (max-width: 768px) {
    .marquee-content {
        font-size: 2rem;
    }
}

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

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

/* Image Marquee Styles */
.image-marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    background: #fff;
    padding: 2rem 0;
    /* Add vertical breathing room */
}

.image-marquee-content {
    display: flex;
    animation: imageMarquee 60s linear infinite;
    /* Slower for smooth visual */
}

.image-marquee-content.reverse {
    animation-direction: reverse;
}

.image-marquee-item {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    margin-right: 1rem;
    /* Gap between images */
    border-radius: 8px;
    /* Slight rounded corners for modern feel */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

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

.image-marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .image-marquee-item {
        width: 140px;
        height: 140px;
        margin-right: 0.5rem;
    }

    .image-marquee-container {
        padding: 1rem 0;
    }
}

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

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

/* About Section Background */
#about {
    position: relative;
    z-index: 1;
    /* モバイルでの背景固定を clip-path で実現 */
    clip-path: inset(0);
}

#about::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('../img/aboutback.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Amrta Style (Precautions List) */
.precautions-list {
    border-top: 1px solid #ccc;
}

.precautions-item {
    border-bottom: 1px solid #ccc;
    padding: 2rem 0;
    color: #333;
    font-weight: 500;
}

@media (min-width: 768px) {
    .precautions-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.precautions-title {
    font-family: var(--font-serif);
    font-weight: 500;
    margin-bottom: 1rem;
    min-width: 200px;
}

@media (min-width: 768px) {
    .precautions-title {
        font-size: 20px;
    }
}

/* Broken Grid & Layout Utilities */
.broken-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.broken-grid-image {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.broken-grid-image img {
    transition: transform 1s ease;
}

.broken-grid-image:hover img {
    transform: scale(1.05);
}

.broken-grid-content {
    width: 100%;
    padding: 2rem;
    background: #fff;
}

@media (min-width: 768px) {
    .broken-grid {
        /* Becolourful風の大胆なレイアウトのためグリッドを使用せずFlexとPositionで調整 */
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }

    .broken-grid.reverse {
        flex-direction: row-reverse;
    }

    .broken-grid-image {
        width: 55%;
    }

    .broken-grid-content {
        width: 40%;
        padding: 0;
        background: transparent;
    }

    /* 重ね合わせなどの調整 */
    .overlap-content {
        margin-left: -8%;
        background: #fff;
        padding: 5rem 4.5rem;
        z-index: 10;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
    }

    .reverse .overlap-content {
        margin-left: 0;
        margin-right: -10%;
    }
}



/* Service Images - Organic Shapes (Blob) */
.style-gradient-bg .broken-grid-image {
    padding: 1rem;
    /* Add space for shadow */
}

.style-gradient-bg .broken-grid-image img {
    /* Base Organic Shape */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    /* box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.1); */
    transition: all 0.5s ease;
}

/* Vary the shapes */
.style-gradient-bg .broken-grid:nth-child(odd) .broken-grid-image img {
    border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
}

.style-gradient-bg .broken-grid:nth-child(even) .broken-grid-image img {
    border-radius: 35% 65% 60% 40% / 55% 40% 60% 45%;
}

.style-gradient-bg .broken-grid-image:hover img {
    border-radius: 50%;
    /* Hover to perfect circle or another shape */
    transform: scale(1.02);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content img {
    max-width: 90vw;
    max-height: 90vh;
}

/* Hamburger */
.hamburger-menu {
    position: fixed;
    inset: 0;
    background: var(--color-primary);
    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);
}

/* Scroll Animation */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

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

/* Mobile CTA */
.mobile-cta {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

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

/* Gradient Background Animation */
.style-gradient-bg {
    background: linear-gradient(120deg, #000000, #1a1a1a, #333333, #000000);
    background-size: 300% 300%;
    animation: gradientShift 15s ease infinite;
    position: relative;
    /* Ensure positioning context */
}

/* Blur edges for Gradient Background - Refined for seamless transition */
.style-gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18rem; /* Increased for smoother fade-in */
    background: linear-gradient(to bottom, #FAF8F5 0%, rgba(250, 248, 245, 0.8) 20%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

.style-gradient-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18rem; /* Increased for smoother fade-out */
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.8) 20%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Wa-Modern Background (Premium) */
.wa-modern-bg {
    background-color: #1a1a1a;
    background-image:
        /* Washi Texture from About section - Maximizing Material Feel */
        linear-gradient(rgba(15, 15, 15, 0.7), rgba(15, 15, 15, 0.7)),
        url('../img/aboutback.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: multiply;
    position: relative;
    overflow: hidden;
}

.wa-modern-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Large-scale Abstract Geometric Pattern - Increased Visibility */
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='208' viewBox='0 0 120 208' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0 L120 34.64 L120 103.92 L60 138.56 L0 103.92 L0 34.64 Z' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    background-size: 480px 832px;
    /* Very large scale for an editorial, modern feel */
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
    animation: patternMove 180s linear infinite;
    /* Slow movement for elegance */
}

/* Breathing Golden Glow */
.wa-modern-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    animation: breathingGlow 15s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes patternMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 160px 160px;
    }
}

@keyframes breathingGlow {
    from {
        opacity: 0.4;
        transform: scale(1);
    }

    to {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

/* Top and Bottom Fades for Wa-Modern Section */
.wa-modern-bg-fade-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15rem;
    background: linear-gradient(to bottom, #fff, transparent);
    z-index: 5;
    pointer-events: none;
}

.wa-modern-bg-fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15rem;
    background: linear-gradient(to top, #f8f8f8, transparent);
    z-index: 5;
    pointer-events: none;
}

/* Asanoha Gradient Section Background */
.asanoha-gradient-section {
    position: relative;
    background-color: #f9fafb; /* Default bg-gray-50 */
    overflow: hidden;
}

.asanoha-gradient-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    
    /* Pattern Variables */
    --bg-base-color: transparent;
    --bg-line-color: rgba(0, 0, 0, 0.06); /* Slightly more visible for larger pattern */
    --bg-pattern-size: 5.196em 3.0em; /* Increased size (doubled) */

    background-image:
        linear-gradient(90deg, var(--bg-line-color) 1.5%, transparent 1.5%, transparent 98.5%, var(--bg-line-color) 98.5%, var(--bg-line-color) 100%),
        repeating-conic-gradient(at 33.33% 2.6%, transparent 0deg 270deg, var(--bg-line-color) 270deg 360deg),
        repeating-conic-gradient(at 33.33% 97.4%, transparent 0deg 180deg, var(--bg-line-color) 180deg 270deg, transparent 270deg 360deg),
        repeating-conic-gradient(at 66.66% 2.6%, var(--bg-line-color) 0deg 90deg, transparent 90deg 360deg),
        repeating-conic-gradient(at 66.66% 97.4%, transparent 0deg 90deg, var(--bg-line-color) 90deg 180deg, transparent 180deg 360deg),
        repeating-conic-gradient(at 15.7% 50%, transparent 0deg 210deg, var(--bg-base-color) 210deg 330deg, transparent 330deg 360deg),
        repeating-conic-gradient(at 19% 50%, transparent 0deg 210deg, var(--bg-line-color) 210deg 330deg, transparent 330deg 360deg),
        repeating-conic-gradient(at 84.3% 50%, transparent 0deg 30deg, var(--bg-base-color) 30deg 150deg, transparent 150deg 360deg),
        repeating-conic-gradient(at 81% 50%, transparent 0deg 30deg, var(--bg-line-color) 30deg 150deg, transparent 150deg 360deg),
        linear-gradient(60deg, transparent 0%, transparent 48.7%, var(--bg-line-color) 48.7%, var(--bg-line-color) 51.3%, transparent 51.3%, transparent 100%),
        linear-gradient(-60deg, transparent 0%, transparent 48.7%, var(--bg-line-color) 48.7%, var(--bg-line-color) 51.3%, transparent 51.3%, transparent 100%),
        linear-gradient(30deg, transparent 0%, transparent 48.5%, var(--bg-line-color) 48.5%, var(--bg-line-color) 51.5%, transparent 51.5%, transparent 100%),
        linear-gradient(-30deg, transparent 0%, transparent 48.5%, var(--bg-line-color) 48.5%, var(--bg-line-color) 51.5%, transparent 51.5%, transparent 100%),
        linear-gradient(0deg, transparent 0%, transparent 47.4%, var(--bg-line-color) 47.4%, var(--bg-line-color) 52.6%, transparent 52.6%, transparent 100%),
        linear-gradient(90deg, transparent 0%, transparent 48.5%, var(--bg-line-color) 48.5%, var(--bg-line-color) 51.5%, transparent 51.5%, transparent 100%);

    background-repeat: repeat;
    background-size: var(--bg-pattern-size);
    
    /* Fade out effect */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

/* Asanoha Gold Diagonal Section (Top-White to Bottom-Black Gradient) */
.asanoha-gold-diagonal-section {
    position: relative;
    /* Gradient: White at top to blend with previous section, Black at bottom-left */
    background: linear-gradient(200deg, #ffffff 30%, #000000 100%);
    overflow: hidden;
}

.asanoha-gold-diagonal-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    
    /* Pattern Variables */
    --bg-base-color: transparent;
    --bg-line-color: rgba(197, 160, 89, 0.25);
    --bg-pattern-size: 5.196em 3.0em;

    background-image:
        linear-gradient(90deg, var(--bg-line-color) 1.5%, transparent 1.5%, transparent 98.5%, var(--bg-line-color) 98.5%, var(--bg-line-color) 100%),
        repeating-conic-gradient(at 33.33% 2.6%, transparent 0deg 270deg, var(--bg-line-color) 270deg 360deg),
        repeating-conic-gradient(at 33.33% 97.4%, transparent 0deg 180deg, var(--bg-line-color) 180deg 270deg, transparent 270deg 360deg),
        repeating-conic-gradient(at 66.66% 2.6%, var(--bg-line-color) 0deg 90deg, transparent 90deg 360deg),
        repeating-conic-gradient(at 66.66% 97.4%, transparent 0deg 90deg, var(--bg-line-color) 90deg 180deg, transparent 180deg 360deg),
        repeating-conic-gradient(at 15.7% 50%, transparent 0deg 210deg, var(--bg-base-color) 210deg 330deg, transparent 330deg 360deg),
        repeating-conic-gradient(at 19% 50%, transparent 0deg 210deg, var(--bg-line-color) 210deg 330deg, transparent 330deg 360deg),
        repeating-conic-gradient(at 84.3% 50%, transparent 0deg 30deg, var(--bg-base-color) 30deg 150deg, transparent 150deg 360deg),
        repeating-conic-gradient(at 81% 50%, transparent 0deg 30deg, var(--bg-line-color) 30deg 150deg, transparent 150deg 360deg),
        linear-gradient(60deg, transparent 0%, transparent 48.7%, var(--bg-line-color) 48.7%, var(--bg-line-color) 51.3%, transparent 51.3%, transparent 100%),
        linear-gradient(-60deg, transparent 0%, transparent 48.7%, var(--bg-line-color) 48.7%, var(--bg-line-color) 51.3%, transparent 51.3%, transparent 100%),
        linear-gradient(30deg, transparent 0%, transparent 48.5%, var(--bg-line-color) 48.5%, var(--bg-line-color) 51.5%, transparent 51.5%, transparent 100%),
        linear-gradient(-30deg, transparent 0%, transparent 48.5%, var(--bg-line-color) 48.5%, var(--bg-line-color) 51.5%, transparent 51.5%, transparent 100%),
        linear-gradient(0deg, transparent 0%, transparent 47.4%, var(--bg-line-color) 47.4%, var(--bg-line-color) 52.6%, transparent 52.6%, transparent 100%),
        linear-gradient(90deg, transparent 0%, transparent 48.5%, var(--bg-line-color) 48.5%, var(--bg-line-color) 51.5%, transparent 51.5%, transparent 100%);

    background-repeat: repeat;
    background-size: var(--bg-pattern-size);
    
    /* Diagonal Fade matching the background (Bottom-Left visible, Top-Right transparent) */
    -webkit-mask-image: linear-gradient(20deg, black 0%, transparent 70%);
    mask-image: linear-gradient(20deg, black 0%, transparent 70%);
}

.service-text-light {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.service-text-dark {
    color: #1a1a1a;
}

.service-big-type {
    opacity: 0.5 !important;
    color: #C5A059 !important;
    mix-blend-mode: normal;
}

.service-num {
    color: #C5A059 !important;
    opacity: 0.6 !important;
}

.unified-black-section {
    position: relative;
    /* Sharp transition */
    border-bottom: 2px solid #C5A059; /* Clear gold border line */
    overflow: hidden; /* Ensure glow stays within bounds */
}

/* Golden Breathing Glow - High Visibility Version for verification */
.unified-black-section::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Boosted opacity and brightness */
    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.4) 0%, transparent 80%);
    animation: menuGlow 5s ease-in-out infinite alternate;
    z-index: 5; /* Ensure it sits between background and content */
    pointer-events: none;
}

@keyframes menuGlow {
    from {
        opacity: 0.6;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* Sparkle Element */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.4);
    animation: sparkleAnim linear forwards;
}

@keyframes sparkleAnim {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Retro Pop Menu Background */
.retro-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.1;
    z-index: 0;
    background-color: #000;
}

.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 150px;
}

/* Voice Section Pattern */
/* More Mature Voice Pattern (Diagonal Lines) */
/* Voice Section Pattern */
/* More Mature Voice Pattern (Diagonal Lines) */
.voice-section-pattern {
    background-color: #000;
}

/* Photo Scatter Styles */
.photo-scatter-section {
    padding: 6rem 0;
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 10;
}

.scatter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.scatter-item {
    position: relative;
    width: 240px;
    /* Increased from 180px */
    height: 240px;
    /* Increased from 180px */
    background: #fff;
    padding: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.scatter-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scatter-item:hover {
    transform: scale(1.15) rotate(0deg) !important;
    z-index: 20;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Variation 1: Zigzag & Rotate (Playful) */
.scatter-container.scatter-type-1 .scatter-item:nth-child(odd) {
    transform: rotate(-3deg) translateY(-20px);
}

.scatter-container.scatter-type-1 .scatter-item:nth-child(even) {
    transform: rotate(2deg) translateY(20px);
}

.scatter-container.scatter-type-1 .scatter-item:nth-child(3) {
    transform: rotate(4deg) translateY(-10px);
}

/* Variation 2: Organic Cluster (Centered focus) */
.scatter-container.scatter-type-2 .scatter-item {
    border-radius: 4px;
}

.scatter-container.scatter-type-2 .scatter-item:nth-child(1) {
    transform: rotate(-5deg) translate(10px, 10px);
}

.scatter-container.scatter-type-2 .scatter-item:nth-child(2) {
    transform: rotate(3deg) translate(-10px, -20px);
}

.scatter-container.scatter-type-2 .scatter-item:nth-child(3) {
    transform: scale(1.1);
    z-index: 5;
}

/* Center highlighted */
.scatter-container.scatter-type-2 .scatter-item:nth-child(4) {
    transform: rotate(-3deg) translate(10px, -20px);
}

.scatter-container.scatter-type-2 .scatter-item:nth-child(5) {
    transform: rotate(5deg) translate(-10px, 10px);
}

/* Variation 3: Clean Grid (Instagram style) */
.scatter-container.scatter-type-3 {
    gap: 1rem;
}

.scatter-container.scatter-type-3 .scatter-item {
    width: 200px;
    /* Increased from 160px */
    height: 200px;
    /* Increased from 160px */
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transform: none !important;
    /* Reset transforms */
}

.scatter-container.scatter-type-3 .scatter-item img {
    border-radius: 12px;
    transition: transform 0.5s ease;
}

.scatter-container.scatter-type-3 .scatter-item:hover img {
    transform: scale(1.1);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .scatter-item {
        width: 150px;
        /* Increased from 120px */
        height: 150px;
        /* Increased from 120px */
    }

    .scatter-container {
        gap: 1rem;
    }

    /* Tame the transforms on mobile for better layout */
    .scatter-container.scatter-type-1 .scatter-item:nth-child(odd),
    .scatter-container.scatter-type-1 .scatter-item:nth-child(even),
    .scatter-container.scatter-type-2 .scatter-item {
        transform: none;
        margin: 0;
    }

    /* Allow horizontal scroll for type 3 on mobile? Or wrap? Let's wrap 3 cols */
    .scatter-container.scatter-type-3 .scatter-item {
        width: 140px;
        /* Increased from 100px */
        height: 140px;
        /* Increased from 100px */
    }
}

/* Base Fade Up (Ensure it's available for new sections) */
.fade-up {
    opacity: 0;
    /* Default hidden for JS to animate */
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

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

/* =========================================
   Large Photo Designs (User Request)
   ========================================= */

/* Design A: Horizontal Large Scroll (Modern & Big) */
.large-scroll-section {
    padding: 4rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    display: flex;
    gap: 2rem;
    padding-left: 5vw;
    /* Start with some offset */
    padding-right: 5vw;
}

.large-scroll-section::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.large-card {
    flex: 0 0 80vw;
    /* Mobile: Very large */
    height: 80vw;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .large-card {
        flex: 0 0 400px;
        /* Desktop: Fixed large size */
        height: 400px;
    }

    .large-scroll-section {
        justify-content: center;
        /* Center on desktop if few items, or start if many */
        padding-left: 0;
        padding-right: 0;
    }
}

.large-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.large-card:hover img {
    transform: scale(1.1);
}

/* Design B: Asymmetric Large Grid */
.asym-grid-section {
    padding: 6rem 0;
}

.asym-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 768px) {
    .asym-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    /* Stagger effect */
    .asym-grid-item:nth-child(even) {
        margin-top: 4rem;
    }
}

.asym-grid-item {
    position: relative;
    border-radius: 4px;
    /* Sharper, more editorial */
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

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

.asym-grid-item:hover img {
    transform: scale(1.05);
}

/* Design C: Full Width Gallery Strip */
.full-width-gallery {
    display: flex;
    width: 100%;
    height: 40vh;
    /* Prominent height */
    overflow: hidden;
}

.fw-item {
    flex: 1;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 0;
    /* Flexbox fix */
    transition: flex 0.5s ease;
    cursor: pointer;
}

.fw-item:last-child {
    border-right: none;
}

.fw-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Hover Effect: Expand */
.fw-item:hover {
    flex: 2;
    /* Expands width */
}

.fw-item:hover img {
    filter: brightness(1.1);
}

@media (max-width: 768px) {
    .full-width-gallery {
        flex-direction: column;
        height: auto;
    }

    .fw-item {
        height: 250px;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .fw-item:hover {
        flex: 1;
        /* Disable expand on mobile */
    }
}

/* =========================================
   Mixed Masonry Design (Sumu Hotel Style) - Grid Layout
   ========================================= */
.mixed-masonry-section {
    padding: 0;
    padding-bottom: 4rem;
    background: #fff;
    width: 100%;
}

/* Default (Mobile): 3 columns */
.mixed-masonry-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Tablet/Desktop: 6 columns */
@media (min-width: 768px) {
    .mixed-masonry-container {
        grid-template-columns: repeat(6, 1fr);
        /* Override to 6 columns */
        gap: 1rem;
        padding: 0 1rem;
        max-width: 1600px;
        margin: 0 auto;
    }
}

.masonry-item {
    position: relative;
    overflow: hidden;
    background: #f4f4f4;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Default to square for regularity */
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.wa-modern-pebble {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.wa-modern-pebble-alt {
    border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
}

/* Span Classes */
.masonry-item.span-2 {
    grid-column: span 2 !important;
    aspect-ratio: 2 / 1 !important;
    /* Force wide rectangle */
}

.masonry-item.span-row-2 {
    grid-row: span 2;
    aspect-ratio: 1 / 2;
    /* Tall rectangle */
}

/* Mobile: Reset spans if needed, or keep them. 
   Span 2 on mobile means full width (1/1 ratio or 2/1). 
   Let's keep span-2 as full width on mobile. */

.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    display: block;
}

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

/* Text Card Variations */
.masonry-text {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 100%;
    background-color: #fafafa;
}

.masonry-text.primary-bg {
    background-color: var(--color-primary);
    color: #fff;
}

.masonry-text.primary-bg h4,
.masonry-text.primary-bg p {
    color: #fff;
}

.masonry-text h4 {
    font-family: var(--font-display-italic);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
    line-height: 1.1;
}

.masonry-text p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    font-family: var(--font-sans);
}

.masonry-text .line {
    width: 40px;
    height: 1px;
    background-color: var(--color-primary);
    margin-bottom: 1rem;
}

.masonry-text.primary-bg .line {
    background-color: #fff;
}

/* Writing Vertical (Wa-Modern) */
.writing-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Mobile Adjustments for Text Cards */
@media (max-width: 767px) {
    .masonry-text {
        padding: 0.5rem 0.2rem;
        /* Reduced padding as requested */
        padding-left: 0.5rem;
    }

    .writing-vertical {
        writing-mode: horizontal-tb;
        /* Reset on mobile for readability? or keep? Let's keep small vertical */
    }

    .masonry-text h4 {
        font-size: 1rem;
        /* Smaller heading */
        margin-bottom: 0.25rem;
    }

    .masonry-text p {
        font-size: 0.75rem;
        /* Approx 12px */
        line-height: 1.4;
    }

    .masonry-text .line {
        margin-bottom: 0.5rem;
        width: 20px;
    }

    /* Image Alignment Override */
    .mobile-bottom-align {
        object-position: bottom !important;
    }

    /* Order Reversal for Original Section */
    .mobile-order-1 {
        order: 1;
    }

    .mobile-order-2 {
        order: 2;
    }
}

/* Language Switcher */
.lang-btn.active {
    background-color: var(--color-primary);
    color: #fff;
}

.lang-btn:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.lang-btn-mobile.active {
    background-color: #fff;
    color: var(--color-primary);
}

.lang-btn-mobile:not(.active) {
    color: rgba(255, 255, 255, 0.6);
}

/* Base style for translatable elements */
/* We control visibility by the data-lang attribute on the body or html tag */
body[data-lang="en"] .t-jp {
    display: none;
}

body[data-lang="jp"] .t-en {
    display: none;
    /* =================================================================
   Service Design Concepts (Demonstration)
   ================================================================= */

    /* Concept 1: Luxury Overlap */
    .service-concept-1 .concept-image-wrapper {
        position: relative;
        padding-bottom: 2rem;
    }

    .service-concept-1 .concept-content {
        background: white;
        padding: 3rem;
        box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.05);
        z-index: 10;
        position: relative;
        margin-top: -4rem;
        margin-left: 2rem;
    }

    /* Concept 2: Organic Circle */
    .service-concept-2 .concept-image-wrapper {
        border-radius: 60% 40% 70% 30% / 40% 50% 60% 70%;
        overflow: hidden;
        aspect-ratio: 1/1;
        animation: morph 10s ease-in-out infinite;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.1);
        border: 1px solid rgba(212, 175, 55, 0.2);
        position: relative;
    }

    .service-concept-2 .concept-image-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, rgba(212, 175, 55, 0.1), transparent);
        pointer-events: none;
    }

    @keyframes morph {
        0% {
            border-radius: 60% 40% 70% 30% / 40% 50% 60% 70%;
        }

        50% {
            border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        }

        100% {
            border-radius: 60% 40% 70% 30% / 40% 50% 60% 70%;
        }
    }

    /* Concept 3: Full Background Card */
    .service-concept-3 {
        height: 500px;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        color: white;
        display: flex;
        align-items: flex-end;
    }

    .service-concept-3 .concept-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        transition: transform 0.8s ease;
    }

    .service-concept-3:hover .concept-bg {
        transform: scale(1.1);
    }

    .service-concept-3 .concept-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        z-index: 1;
    }

    .service-concept-3 .concept-content {
        position: relative;
        z-index: 2;
        padding: 3rem;
    }

    /* Concept 4: Zen Minimalism */
    .service-concept-4 {
        border-top: 1px solid #eee;
        padding-top: 4rem;
    }

    .service-concept-4 .concept-title {
        font-size: 3rem;
        letter-spacing: 0.2em;
        font-weight: 300;
    }

    .service-concept-4 .concept-image {
        filter: grayscale(100%);
        transition: filter 0.5s ease;
    }

    .service-concept-4:hover .concept-image {
        filter: grayscale(0%);
    }
}

/* Wa-Modern Styling for SERVICE section */
/* =========================================
   Concept Gallery (Wa-Modern Luxury)
   ========================================= */
.concept-gallery-section {
    background-color: #FAF8F5;
    padding: 160px 0;
    overflow: hidden;
}

.concept-gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

/* Base Reveal Animation */
.reveal-item {
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1), transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* Image Slow Zoom (Ken Burns) */
.zoom-frame {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.zoom-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-item.active .zoom-frame img {
    transform: scale(1);
}

/* Fade In Up specific */
.fade-up-reveal {
    transform: translateY(60px);
}

/* Vertical Text Blocks */
.vertical-text-block {
    background-color: #1A1A1A;
    color: #FFFFFF;
    padding: 60px 40px;
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;
}

/* Washi Paper Background */
.washi-bg {
    background-color: #FAF8F5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Asanoha (Hemp Leaf) Pattern Overlay - Matched to Reference Image */
.asanoha-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='52' viewBox='0 0 30 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0l15 8.66v17.32L15 34.64 0 26V8.66L15 0zm0 8.66l15 8.66-15 8.66-15-8.66 15-8.66zM0 8.66h30m-15-8.66v34.64M0 26l30-17.32M0 8.66l30 17.32' stroke='%23ffffff' stroke-width='0.4' fill='none'/%3E%3C/svg%3E");
    background-size: 40px auto;
    pointer-events: none;
}

.bg-white.asanoha-pattern::before {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='52' viewBox='0 0 30 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0l15 8.66v17.32L15 34.64 0 26V8.66L15 0zm0 8.66l15 8.66-15 8.66-15-8.66 15-8.66zM0 8.66h30m-15-8.66v34.64M0 26l30-17.32M0 8.66l30 17.32' stroke='%23000000' stroke-width='0.4' fill='none'/%3E%3C/svg%3E");
    opacity: 0.05;
}

/* Gold Vertical Kasen Line */
.gold-vertical-line {
    position: absolute;
    right: 25px;
    top: 40px;
    bottom: 40px;
    width: 1px;
    background-color: #C5A059;
    opacity: 0.8;
    z-index: 5;
}

.vertical-text-block h3 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    letter-spacing: 0.5em;
    font-weight: 500;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

.vertical-text-block p {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    margin-right: 30px;
    opacity: 0.8;
    position: relative;
    z-index: 2;
}

/* PC Asymmetric Layout (New Unique Design) */
@media (min-width: 1024px) {
    .concept-grid-new {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 100px);
        gap: 0;
    }

    .vertical-text-block p .t-jp {
        font-size: 16px;
        line-height: 2.2;
    }

    .item-feature-img {
        grid-column: 5 / 13;
        grid-row: 1 / 9;
        z-index: 1;
    }

    .item-comfort-overlap {
        grid-column: 4 / 6;
        grid-row: 2 / 6;
        z-index: 5;
        margin-top: 40px;
    }

    .item-detail-img {
        grid-column: 1 / 5;
        grid-row: 5 / 9;
        z-index: 3;
        aspect-ratio: 4 / 5;
    }

    .item-healing-bottom {
        grid-column: 3 / 5;
        grid-row: 7 / 11;
        z-index: 5;
        margin-top: 20px;
    }
}

/* Tablet / SP Layout (Rhythmic Stack with Overlaps) */
@media (max-width: 1023px) {
    .concept-gallery-section {
        padding: 60px 0;
    }

    .concept-grid-new {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 20px;
    }

    /* 1. Feature Image */
    .item-feature-img {
        width: 90%;
        margin-left: 0;
        aspect-ratio: 4 / 5;
        z-index: 1;
    }

    /* 2. Comfort Text Overlap (Bottom Right) */
    .item-comfort-overlap {
        width: 80%;
        margin-left: auto;
        margin-top: -80px;
        /* Overlap upwards */
        z-index: 5;
    }

    /* 3. Detail Image (Centered/Shifted) */
    .item-detail-img {
        width: 85%;
        margin-top: 40px;
        margin-left: 0;
        aspect-ratio: 1 / 1;
        z-index: 2;
    }

    /* 4. Healing Text Overlap (Top Rightish) */
    .item-healing-bottom {
        width: 75%;
        margin-left: 10%;
        margin-top: -60px;
        /* Overlap upwards */
        z-index: 5;
        margin-bottom: 40px;
    }

    .vertical-text-block {
        writing-mode: horizontal-tb;
        padding: 40px 35px;
        align-items: flex-start;
        /* Aligned left for Kasen line on right */
        text-align: left;
    }

    .vertical-text-block h3 {
        font-size: 1.5rem;
        letter-spacing: 0.3em;
        margin-bottom: 15px;
    }

    .vertical-text-block p {
        margin-right: 0;
        margin-top: 0;
        font-size: 0.75rem;
    }

    .gold-vertical-line {
        display: block;
        /* Show on mobile too */
        right: 15px;
        top: 20px;
        bottom: 20px;
        opacity: 0.6;
    }

    .item-healing-bottom .vertical-text-block {
        background-color: #FFFFFF !important;
        color: #1A1A1A !important;
    }
}

#service {
    position: relative;
    overflow: hidden;
    background-color: #121212;
    /* Deep Charcoal */
}

@media (min-width: 768px) {
    #service p {
        font-size: 16px;
    }
}

#service .container {
    position: relative;
    z-index: 10;
}

@keyframes serviceVerticalShift {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.voice-user-icon {
    width: 60px;
    height: 60px;
    background-color: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #d1d5db;
    font-size: 1.5rem;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.voice-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 1rem;
    color: #FFD700;
}