@charset "UTF-8";

/* =========================================
 * SITE-WIDE READABILITY
 * 本文は黒く、大きく。サブ見出しのみグレーを維持。
 * ========================================= */

html {
    font-size: 18px;
}

body {
    color: var(--text-color);
}

/* 白背景上の本文 */
.service-desc,
.about-desc,
.contact-desc,
.contact-note,
.profile-bio p,
.concept-body p,
.point-desc,
.work-list-desc,
.job-offer-text p,
.partners-title,
.partners-list li,
.privacy-block p,
.privacy-block li,
.concept-text,
.feature-desc,
.plan-list li,
.tab-text,
.ai-finishing-lead,
.ai-fix-reason-circles p,
.ai-fix-icon-list p,
.other-service-desc {
    color: var(--text-color) !important;
    font-size: 1rem !important;
}

/* 本文以外の小さな実用テキストも縮小しすぎない */
.work-cat,
.about-job,
.job-title,
.work-list-subtitle,
.plan-tag,
.ai-finishing-label,
.view-more-btn,
.breadcrumb,
.breadcrumb-list,
.copyright {
    font-size: 0.88rem !important;
}

.breadcrumb,
.breadcrumb a,
.breadcrumb-list,
.breadcrumb-list a {
    color: var(--text-color) !important;
}

/* セクション見出し直下のサブ見出しだけはグレーを維持 */
.section-header > p,
.page-header-desc {
    color: var(--sub-text-color) !important;
    font-size: 1rem !important;
}

/* 説明文はサブ見出しではなく通常本文として表示 */
.section-header > .service-desc,
.section-header > .contact-desc,
.section-header > .design-lead {
    color: var(--text-color) !important;
    -webkit-text-fill-color: currentColor;
    background: none;
    filter: none;
}

/*
 * SCROLL GRADIENT SUBTITLES
 * JSがページ内の登場順に固有色を割り当て、画面に入った時だけ光を走らせる。
 */
.scroll-gradient-subtitle {
    --shine-base: var(--sub-text-color);
    --shine-a: #e03a7d;
    --shine-b: #f08a24;
    max-width: 100%;
    background-image: linear-gradient(
        108deg,
        var(--shine-a) 0%,
        var(--shine-b) 18%,
        var(--shine-a) 36%,
        rgba(255, 255, 255, 0.98) 48%,
        var(--shine-b) 54%,
        var(--shine-base) 66%,
        var(--shine-base) 100%
    );
    background-size: 300% 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 1px 0.45px rgba(0, 0, 0, 0.58))
        drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
    will-change: background-position, filter;
}

/* 大見出しの下という元の縦並びを必ず維持する */
.section-header > .scroll-gradient-subtitle,
.page-header-desc.scroll-gradient-subtitle {
    display: block;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.scroll-gradient-subtitle.is-shining {
    animation: subtitle-gradient-shine 1.45s cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

@keyframes subtitle-gradient-shine {
    0% {
        background-position: 100% 50%;
        filter:
            brightness(1)
            drop-shadow(0 1px 0.45px rgba(0, 0, 0, 0.58))
            drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
    }
    48% {
        filter:
            brightness(1.16)
            drop-shadow(0 1px 0.45px rgba(0, 0, 0, 0.62))
            drop-shadow(0 0 0.24em color-mix(in srgb, var(--shine-a) 32%, transparent));
    }
    100% {
        background-position: 0% 50%;
        filter:
            brightness(1)
            drop-shadow(0 1px 0.45px rgba(0, 0, 0, 0.58))
            drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-gradient-subtitle,
    .scroll-gradient-subtitle.is-shining {
        animation: none;
        background-position: 0% 50%;
        filter:
            drop-shadow(0 1px 0.45px rgba(0, 0, 0, 0.58))
            drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
    }
}

.ai-fix-price-notes p {
    color: #cc3300 !important;
    font-size: 0.9rem !important;
}

/* 暗い背景はコントラストを優先 */
#lineup p,
#lineup li,
#lineup a,
#lineup .section-title-jp,
.bg-dark p,
.bg-dark li,
.bg-dark a {
    color: #ffffff !important;
}

footer,
footer p,
footer li,
footer a,
footer .copyright {
    color: #ffffff !important;
}

footer .footer-col h4,
footer .footer-links,
footer .copyright {
    font-size: 0.88rem !important;
}

@media screen and (max-width: 768px) {
    html {
        font-size: 17px;
    }
}