/* =============================================
   Design System – 護身拳法 一心
   ============================================= */
:root {
    --primary-red: #D32F2F;
    --primary-yellow: #FFD600;
    --secondary-yellow: #FFF176;
    --text-black: #212121;
    --text-gray: #616161;
    --pure-white: #FFFFFF;
    --bg-light: #FAFAFA;
    --shadow-mui: 0px 4px 20px rgba(0, 0, 0, .08);
    --font-main: 'Noto Sans JP', sans-serif;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #c00;
    transform: translateY(-5px);
}

@media (max-width: 767px) {
    .back-to-top {
        bottom: 90px; /* Above sticky bar */
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

body {
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--text-black);
    line-height: 1.7;
    overflow-x: hidden;
    background: var(--pure-white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

body.no-scroll {
    overflow: hidden;
}

/* ---- Section baseline ---- */
section {
    padding-top: 70px;
    padding-bottom: 70px;
}

/* =============================================
   Typography – text-only stylish titles
   ============================================= */
.section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    letter-spacing: .04em;
    margin-bottom: 1.6rem;
    display: block;
    position: relative;
}

/* underline accent */
.section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    background: var(--primary-red);
    border-radius: 2px;
    margin-top: 10px;
}

/* centered titles: shift bar to center */
.section-title.center {
    text-align: center;
}

.section-title.center::after {
    margin-left: auto;
    margin-right: auto;
}

/* label above title */
.title-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-red);
    border: 1.5px solid var(--primary-red);
    padding: 2px 12px;
    border-radius: 2px;
    margin-bottom: 10px;
}

/* =============================================
   Moving Gradient Utility
   ============================================= */
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }

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

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

.moving-gradient {
    background: linear-gradient(-45deg, #FFF9C4, #FFFFFF, #FFECB3, #FFFFFF, #FFFDE7);
    background-size: 400% 400%;
    animation: moveGradient 15s cubic-bezier(.4, 0, .2, 1) infinite;
    position: relative;
}

.moving-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(211, 47, 47, .03), transparent);
    pointer-events: none;
}

/* =============================================
   Layout
   ============================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sp-only {
    display: none !important;
}

.pc-only {
    display: block !important;
}

@media (max-width: 991px) {
    .sp-only {
        display: block !important;
    }

    .pc-only {
        display: none !important;
    }
}

/* 40 / 60 split */
.split-section {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

.split-section.reverse {
    flex-direction: row-reverse;
}

.split-text {
    flex: 0 0 40%;
    padding: 70px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split-image {
    flex: 0 0 60%;
    min-height: 550px;
    overflow: hidden;
    position: relative;
}

.split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.split-image:hover img {
    transform: scale(1.04);
}

/* =============================================
   Section-specific image styles
   ============================================= */
/* ABOUT – floating character style */
#about .split-image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: transparent !important;
    overflow: visible;
}

#about .split-image::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    background: var(--primary-yellow);
    opacity: 0.2;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: aboutBlob 12s infinite linear alternate;
    z-index: 0;
}

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

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

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

#about .split-image img {
    width: auto;
    max-width: 70%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    position: relative;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#about:hover .split-image img {
    transform: translateY(-15px) scale(1.03);
}

/* SERVICE-BUS – zoomed crop with warm overlay */
#service-bus .split-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(211, 47, 47, .08), transparent);
    pointer-events: none;
}

#service-bus .split-image img {
    object-position: center top;
}

/* SERVICE-UNLIMITED – grayscale tint lifted on hover */
#service-unlimited .split-image img {
    filter: saturate(.85) contrast(1.05);
    transition: filter .5s ease, transform .6s ease;
}

#service-unlimited .split-image:hover img {
    filter: saturate(1.1) contrast(1.05);
}

/* SERVICE-DEFENSE – rounded inset corners */
#service-defense .split-image {
    padding: 20px;
}

#service-defense .split-image img {
    border-radius: 0px;
    height: calc(100% - 0px);
}

/* MESSAGE – portrait style with bottom fade */
#message .split-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(to top, rgba(26, 26, 26, .3), transparent);
    pointer-events: none;
}

/* =============================================
   Buttons
   ============================================= */
.btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-family: var(--font-main);
    text-decoration: none;
    transition: all .3s ease;
    text-align: center;
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-mui);
    letter-spacing: .03em;
}

.btn-primary {
    background: var(--primary-red);
    color: #fff;
}

.btn-primary:hover {
    background: #B71C1C;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(211, 47, 47, .3);
}

.btn-secondary {
    background: var(--primary-yellow);
    color: var(--text-black);
}

.btn-secondary:hover {
    background: #FBC02D;
    transform: translateY(-2px);
}

.btn-line {
    background: #06C755;
    color: #fff;
}

.btn-line:hover {
    background: #05a847;
    transform: translateY(-2px);
}

/* =============================================
   Header & Navbar
   ============================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3000;
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.header .container {
    padding-left: 20px;
    padding-right: 20px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.header.scrolled {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
}

.nav-mobile {
    display: none;
}

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

.nav-btns {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nav-btns .btn {
    padding: 10px 20px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: var(--text-black);
    font-weight: 700;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: var(--primary-red);
}

/* Hamburger toggle button */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 20px;
    position: relative;
    z-index: 2001;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--text-black);
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger span:nth-child(3) {
    bottom: 0;
}

.hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* =============================================
   FV – Full-screen hero
   ============================================= */
#fv {
    padding: 0;
    padding-top: 72px;
    /* push below fixed header */
    overflow: hidden;
}

/* Hero wrapper: full viewport */
.fv-hero {
    position: relative;
    width: 100%;
    min-height: calc(100svh - 72px);
    display: flex;
    align-items: flex-end;
    /* content pushed to bottom half */
    overflow: hidden;
}

/* Background image layer */
.fv-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    animation: fvSlideshow 15s linear infinite;
}

.fv-bg:nth-child(1) {
    animation-delay: 0s;
}

.fv-bg:nth-child(2) {
    animation-delay: 5s;
}

.fv-bg:nth-child(3) {
    animation-delay: 10s;
}

.fv-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    /* Ken Burns effect */
    animation: fvZoom 15s linear infinite;
}

@keyframes fvSlideshow {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    5% {
        opacity: 1;
        visibility: visible;
    }

    33% {
        opacity: 1;
        visibility: visible;
    }

    38% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fvZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

/* Gradient overlay: bottom → top dark, keep top transparent */
.fv-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(10, 5, 5, .85) 0%,
            rgba(10, 5, 5, .55) 45%,
            rgba(10, 5, 5, .15) 75%,
            transparent 100%);
}

/* Red accent strip on left */
.fv-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--primary-red);
    z-index: 3;
}

/* Content block */
.fv-content {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 0 60px 80px;
    max-width: 900px;
}

/* Eyebrow badges */
.fv-eyebrow {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.fv-badge-pill {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 100px;
    border: 1.5px solid rgba(255, 255, 255, .5);
    color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
}

.fv-badge-pill.fv-badge-red {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
}

/* Headline */
.fv-headline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 20px;
}

.fv-headline-en {
    display: block;
    font-size: clamp(.7rem, 1.4vw, 1rem);
    font-weight: 700;
    letter-spacing: .35em;
    color: var(--primary-yellow);
    text-transform: uppercase;
}

.fv-headline-ja {
    display: block;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

/* Sub copy */
.fv-copy {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: rgba(255, 255, 255, .75);
    margin-bottom: 32px;
    letter-spacing: .03em;
}

/* CTA row */
.fv-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.fv-btn-main {
    font-size: 1.05rem;
    padding: 16px 40px;
    border-radius: 6px;
}

.fv-btn-tel {
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: 1.05rem;
    padding: 16px 32px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    text-decoration: none;
    font-weight: 700;
    transition: background .3s;
}

.fv-btn-tel:hover {
    background: rgba(255, 255, 255, .22);
}

/* Feature strips */
.fv-strips {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.fv-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .8);
    font-size: .9rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
    padding: 10px 18px;
    border-radius: 8px;
}

.fv-strip strong {
    color: var(--primary-yellow);
}

.fv-strip-icon {
    font-size: 1.2rem;
}

/* Scroll hint */
.fv-scroll-hint {
    position: absolute;
    bottom: 28px;
    right: 40px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .45);
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.fv-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .4));
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }
}

/* =============================================
   TV Section  – dark red BG, white text
   ============================================= */
#tv {
    position: relative;
    background: linear-gradient(rgba(26, 5, 5, 0.85), rgba(26, 5, 5, 0.85)), url('../img/1.jpg') center/cover no-repeat;
    color: #fff;
}

#tv .section-title {
    color: var(--primary-yellow);
}

#tv .section-title::after {
    background: var(--primary-yellow);
}

.tv-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 50px 40px;
    max-width: 860px;
    margin: 0 auto;
}

.tv-card li {
    list-style: none;
    font-size: 1.15rem;
    padding: 16px 0 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    border-left: 4px solid var(--primary-yellow);
    padding-left: 20px;
    color: rgba(255, 255, 255, .9);
}

.tv-card li:last-child {
    border-bottom: none;
}

.tv-card .tv-lead {
    margin-top: 28px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-yellow);
    text-align: center;
}

/* =============================================
   ABOUT – white BG with decorative elements
   ============================================= */
#about {
    background: #fffdf5;
    /* Warm light cream */
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

#about::after {
    content: "ABOUT";
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
    font-size: 15rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.025);
    z-index: 0;
    pointer-events: none;
    letter-spacing: 0.1em;
}

#about .split-text {
    flex: 0 0 60%;
    background: transparent;
    z-index: 2;
    padding-left: 10px;
}

#about .split-image {
    flex: 0 0 40%;
}

#about .section-title {
    color: var(--primary-red);
}

/* =============================================
   SERVICES – Dark Theme for all items
   ============================================= */
#services {
    background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
}

.service-item {
    height: 550px;
}

.service-item .split-image {
    position: relative;
    overflow: hidden;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
    height: 100%;
}

.service-item.reverse .split-image {
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

.service-item .split-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.service-item:hover .split-image img {
    transform: scale(1.1);
}

.service-item .split-text {
    background: #1a1a1a;
    color: rgba(255, 255, 255, .88);
    position: relative;
    overflow: hidden;
    z-index: 2;
    height: 100%;
}

.service-item .split-text::after {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    font-size: 15rem;
    font-weight: 900;
    color: rgba(255, 214, 0, 0.035);
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

#service-bus .split-text::after {
    content: "01";
}

#service-unlimited .split-text::after {
    content: "02";
}

#service-defense .split-text::after {
    content: "03";
}

.service-item .section-title {
    color: var(--primary-yellow);
    position: relative;
    z-index: 1;
}

.service-item .section-title::after {
    background: var(--primary-yellow);
}

.service-item p {
    color: rgba(255, 255, 255, .75);
}

.service-item .title-label {
    color: var(--primary-yellow);
    border-color: var(--primary-yellow);
}



/* =============================================
   MENU / RECOMMEND – light slate BG (moving gradient variant)
   ============================================= */
#menu {
    background: linear-gradient(120deg, #fffcf0 0%, #fff6d6 100%);
}

/* =============================================
   FEE – deep red BG
   ============================================= */
#fee {
    background: linear-gradient(135deg, #B71C1C 0%, #D32F2F 60%, #c62828 100%);
    color: #fff;
}

#fee .section-title {
    color: var(--primary-yellow);
}

#fee .section-title::after {
    background: var(--primary-yellow);
}

.fee-card {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    backdrop-filter: blur(6px);
    transition: background .3s;
}

.fee-card:hover {
    background: rgba(255, 255, 255, .2);
}

.fee-card h3 {
    color: var(--primary-yellow);
    margin-bottom: 16px;
    font-size: 1rem;
}

.fee-card .price {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
}

.fee-card .price span {
    font-size: .9rem;
    font-weight: 400;
}

/* =============================================
   KEIKO – soft off-white with left highlight
   ============================================= */
#keiko {
    background: #FAFAFA;
}

#keiko .section-title {
    color: var(--primary-red);
}

.keiko-item {
    border-left: 5px solid var(--primary-red);
    padding: 20px 24px;
    margin-bottom: 28px;
    background: #fff;
    border-radius: 0 12px 12px 0;
    box-shadow: var(--shadow-mui);
}

.keiko-item h3 {
    color: var(--primary-red);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* =============================================
   VOICE – moving gradient yellow
   ============================================= */
#voice {
    background: linear-gradient(-45deg, #FFFDE7, #FFF9C4, #FFFDE7, #FFF8E1);
    background-size: 400% 400%;
    animation: moveGradient 12s ease infinite;
}

#voice .section-title {
    color: var(--text-black);
}

.poll-card {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 760px;
    margin: 0 auto;
    box-shadow: var(--shadow-mui);
}

.poll-bar-wrap {
    margin-bottom: 28px;
}

.poll-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: .95rem;
}

.poll-pct {
    font-weight: 700;
    color: var(--primary-red);
}

.poll-track {
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

.poll-fill {
    height: 100%;
    background: var(--primary-red);
    border-radius: 4px;
    transition: width 1s ease;
}

/* =============================================
   FAQ – clean white
   ============================================= */
#faq {
    background: var(--pure-white);
}

#faq .section-title {
    color: var(--text-black);
}

.faq-item {
    border-bottom: 1px solid #eee;
    padding: 24px 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-q {
    font-weight: 700;
    color: var(--primary-red);
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.faq-a {
    color: var(--text-gray);
    line-height: 1.8;
}

/* =============================================
   GALLERY – dark BG, seamless marquee
   ============================================= */
#gallery {
    background: #1a1a1a;
    overflow: hidden;
    padding-top: 70px;
    padding-bottom: 0;
}

#gallery .section-title {
    color: var(--pure-white);
}

#gallery .section-title::after {
    background: var(--primary-yellow);
}

/* Marquee track */
.gallery-marquee-outer {
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
    padding-bottom: 70px;
    cursor: pointer;
}

.gallery-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: marqueeScroll 45s linear infinite;
    /* never stop */
}

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

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

.gallery-thumb {
    width: 420px;
    height: 280px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.gallery-thumb:hover img {
    transform: scale(1.08);
}

/* =============================================
   Lightbox
   ============================================= */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    z-index: 9000;
    justify-content: center;
    align-items: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-inner img {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    display: block;
}

/* Close button */
.lb-close {
    position: fixed;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9100;
    transition: background .2s;
}

.lb-close:hover {
    background: rgba(255, 255, 255, .25);
}

/* Prev / Next */
.lb-prev,
.lb-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .25);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9100;
    transition: background .2s;
}

.lb-prev:hover,
.lb-next:hover {
    background: rgba(255, 255, 255, .25);
}

/* =============================================
   VOICE – soft warm grey
   ============================================= */
#voice {
    background: #ffecec;
    /* Soft pinkish white */
}

/* =============================================
   MESSAGE – near-black BG
   ============================================= */
#message {
    background: #fffafa;
    /* Soft red-tinted white */
}

#message .split-text {
    background: #1a1a1a;
    color: rgba(255, 255, 255, .88);
    position: relative;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#message .split-image {
    min-height: 400px;
}

#message .split-text::before {
    content: "“";
    position: absolute;
    top: 20px;
    left: 40px;
    font-size: 15rem;
    color: rgba(255, 214, 0, 0.04);
    font-family: serif;
    line-height: 1;
    z-index: 0;
}

#message .section-title {
    color: var(--primary-yellow);
    position: relative;
    z-index: 1;
}

#message .sensei-name {
    color: var(--primary-yellow);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    letter-spacing: 0.05em;
    display: inline-block;
    border-bottom: 1.5px solid var(--primary-yellow);
    padding-bottom: 4px;
}

#message p {
    color: rgba(255, 255, 255, .8);
    line-height: 2;
    position: relative;
    z-index: 1;
}

/* =============================================
   CONTACT – soft grey BG
   ============================================= */
#contact {
    background: #fdfdfd;
    border-top: 1px solid #f0f0f0;
}

#contact .section-title {
    color: var(--text-black);
}

.contact-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-mui);
}

.contact-card h3 {
    font-size: 1.1rem;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-red);
    margin-bottom: 20px;
}

.contact-info-block h3 {
    border-bottom: none;
    color: var(--text-black);
    margin-bottom: 14px;
}

.contact-info-block p {
    color: var(--text-gray);
    margin-bottom: 8px;
    font-size: .95rem;
}

/* =============================================
   Glass Card utility
   ============================================= */
.glass-card {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    box-shadow: var(--shadow-mui);
}

/* =============================================
   Fade-in animation (scroll triggered)
   (NOT applied to FV / cover)
   ============================================= */
.fade-in-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease-out, transform .7s ease-out;
}

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

/* stagger children */
.fade-in-section>* {
    transition-delay: .1s;
}

.fade-in-section>*:nth-child(2) {
    transition-delay: .2s;
}

.fade-in-section>*:nth-child(3) {
    transition-delay: .3s;
}

/* =============================================
   CTA Strip (Banner)
   ============================================= */
.cta-strip {
    background: var(--bg-light);
    padding-top: 40px;
    padding-bottom: 40px;
}

.cta-strip-inner {
    background: #fff;
    border-radius: 16px;
    padding: 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    box-shadow: var(--shadow-mui);
    border: 1px solid rgba(211, 47, 47, .08);
}

.cta-strip-text {
    flex: 1;
}

.cta-strip-tel {
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--primary-red);
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: .05em;
}

.cta-strip-info {
    font-size: .95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.cta-strip-btns {
    display: flex;
    gap: 16px;
    flex: 0 0 auto;
}

.cta-strip-btns .btn {
    padding: 14px 28px;
    font-size: 1rem;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .cta-strip-inner {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
        gap: 24px;
    }

    .cta-strip-btns {
        flex-direction: column;
        width: 100%;
    }

    .cta-strip-btns .btn {
        width: 100%;
    }
}

/* =============================================
   Footer
   ============================================= */
footer {
    background: #111;
    color: rgba(255, 255, 255, .6);
    padding: 32px 0;
    text-align: center;
    font-size: .85rem;
}

/* =============================================
   Responsive – Tablet (≤991px)
   ============================================= */
@media (max-width: 991px) {

    .split-text,
    .split-image {
        flex: 0 0 100%;
    }

    #about.split-section,
    .service-item.split-section {
        flex-direction: column-reverse;
    }

    .split-text {
        padding: 50px 20px;
    }

    .service-item {
        height: auto !important;
    }

    .split-image {
        height: 350px !important;
        /* Explicit height to force fill */
        min-height: 350px !important;
        clip-path: none !important;
        width: 100% !important;
    }

    .split-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    #about::after,
    .service-item .split-text::after {
        font-size: 8rem;
        right: -2%;
    }

    .service-item {
        height: auto;
    }

    #about .split-image,
    .service-item .split-image {
        min-height: 450px;
        clip-path: none;
    }

    #service-defense .split-image {
        padding: 0;
    }

    #service-defense .split-image img {
        border-radius: 0;
    }

    /* Navigation Mobile Styles */
    .hamburger {
        display: block;
    }

    .header-container {
        padding: 12px 20px;
    }

    .nav-desktop {
        display: none;
    }

    .nav-mobile {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100dvh;
        background: #ffffff !important;
        flex-direction: column;
        padding: 80px 24px 60px;
        box-shadow: none;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        /* Center links for full screen */
        justify-content: center;
        gap: 0;
        z-index: 10001;
        overflow-y: auto;
    }

    .nav-mobile.active {
        right: 0 !important;
    }

    .nav-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 2rem;
        color: var(--text-black);
        cursor: pointer;
        padding: 10px;
        line-height: 1;
        z-index: 10002;
    }

    .nav-links {
        text-align: center;
    }

    /* Backdrop Overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8) !important;
        /* Darker for better visibility */
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .nav-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-links li {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
    }

    .nav-links li a {
        display: block;
        padding: 18px 0;
        font-size: 1.1rem;
        color: var(--text-black);
    }

    .nav-btns {
        flex-direction: column;
        width: 100%;
        gap: 14px;
        margin-top: 32px;
    }

    .nav-btns .btn {
        width: 100%;
        text-align: center;
        padding: 16px 0;
        font-size: 1rem;
        border-radius: 12px;
    }
}

/* =============================================
   Responsive – SP (≤767px)
   ============================================= */
@media (max-width: 767px) {

    /* Global SP padding = 10px */
    .container,
    .split-text,
    .fv-content,
    .tv-card,
    .poll-card,
    .contact-card,
    .keiko-item,
    .glass-card {
        padding-left: 10px;
        padding-right: 10px;
    }

    section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    #recommend {
        padding: 36px 10px !important;
    }

    #message .split-text {
        padding: 60px 10px !important;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* FV hero on SP */
    .fv-hero {
        min-height: 110svh;
    }

    .fv-content {
        padding: 100px 10px 16px;
    }

    .fv-headline-ja {
        font-size: 2.2rem;
    }

    .fv-strips {
        gap: 10px;
    }

    /* Sticky CTA Bar */
    .sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100% !important;
        display: flex !important; /* Override .sp-only block */
        z-index: 9999;
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        padding: 0;
        gap: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sticky-btn {
        width: 50% !important;
        flex: 0 0 50%;
        text-align: center;
        padding: 18px 0;
        font-weight: 700;
        font-size: 1rem;
        border-radius: 0;
        text-decoration: none;
        display: block;
    }

    /* Add padding to body so content isn't hidden by sticky bar */
    body {
        padding-bottom: 80px;
    }

    .fv-strip {
        font-size: .8rem;
        padding: 8px 12px;
    }

    .fv-cta {
        flex-direction: column;
    }

    .fv-btn-main,
    .fv-btn-tel {
        width: 100%;
        text-align: center;
    }

    .fv-scroll-hint {
        right: 16px;
    }

    .fee-card .price {
        font-size: 1.9rem;
    }

    .gallery-thumb {
        width: 200px;
        height: 150px;
    }

    .lb-prev {
        left: 8px;
    }

    .lb-next {
        right: 8px;
    }

    .contact-card {
        padding: 28px 10px;
    }

    .nav .btn {
        padding: 8px 14px;
        font-size: .8rem;
    }
}