/* =========================================================
   ESTHE ZERO EASY  ─  サイト全体の「強弱」レイヤー
   各ページのインラインCSSの後に読み込み、文字の大きさ・太さ、
   アクセントカラー(ゴールド)、カードや帯の立体感を足す。
   (デモサイト /demo/ には読み込まない)
========================================================= */

:root {
    --accent: #c49a4f;
    --accent-dark: #a27a34;
    --accent-light: #e6c98f;
    --accent-soft: #f7f0e3;
    --ink: #0f1a28;
    --body: #3f4853;
}

/* ---------- 見出しラベル:小さく薄い → 太く・ゴールドで目立たせる ---------- */
.section-label,
.hero-eyebrow {
    color: var(--accent-dark) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
}

.section-label::before {
    width: 40px !important;
    height: 2px !important;
    background: var(--accent) !important;
}

.price-head .section-label,
.sv-navy .section-label,
.zk-navy .section-label,
.maker .section-label,
.cta .section-label,
.contact .section-label {
    color: var(--accent-light) !important;
}

.point-copy .point-label,
.pv-tag,
.col-cat,
.sv-card .ico {
    border-color: var(--accent) !important;
}

.point-copy .point-label,
.col-cat {
    padding: 8px 14px !important;
    background: var(--accent-soft) !important;
    color: var(--accent-dark) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.pv-tag {
    color: var(--accent-dark) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* ---------- 見出し:太さとアクセントの下線で「主役」をはっきり ---------- */
.section-title,
.point-copy h2,
.price-head h2,
.features-head h2,
.works-head h2,
.flow-head h2,
.faq-side h2,
.intro h2,
.section-head h2,
.sv-title,
.zk-intro h2,
.zk-studio h2,
.maker h2,
.page-hero-copy strong {
    font-weight: 600 !important;
}

.section-title::after,
.sv-title::after,
.intro h2::after,
.section-head h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 24px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.intro h2::after,
.section-head.center h2::after,
.price-head h2::after,
.intro-inner h2::after,
.trouble-head .section-title::after,
.price-head .section-title::after {
    margin-left: auto;
    margin-right: auto;
}

.page-hero h1 {
    font-weight: 700 !important;
}

.page-hero h1 span {
    color: var(--accent-dark) !important;
    font-weight: 600 !important;
}

/* ---------- 本文:小さく薄い文字 → 読める大きさ・濃さに ---------- */
.hero-text,
.section-description,
.point-copy p,
.trouble-item p,
.quick-item p,
.feature p,
.flow-item p,
.faq-answer p,
.features-head p,
.faq-side p,
.integration-note,
.diagram-box span,
.hero-card span {
    color: var(--body) !important;
    font-size: 14px !important;
    line-height: 1.95 !important;
}

/* 料金・制作実績・FAQ・お問い合わせなど下層ページの本文 */
.page-hero-copy p,
.section-head p:not(.section-label),
.intro-inner p:not(.section-label),
.included-item p,
.media-copy p:not(.section-label),
.media-row p,
.custom-copy p:not(.section-label),
.custom-row,
.price-block p,
.contact-head-text,
.contact-box-right p,
.contact-benefits li,
.section-text,
.consultation-card p,
.message-copy p:not(.section-label),
.message-example p,
.why-demo-copy p,
.why-item p,
.work-description,
.work-meta-row dd {
    color: var(--body) !important;
    font-size: 14px !important;
    line-height: 1.95 !important;
}

.included-item small,
.price-block-label,
.price-card-head small,
.work-type,
.work-category,
.work-style {
    font-size: 11px !important;
    color: var(--accent-dark) !important;
    font-weight: 700 !important;
}

.media-row strong,
.included-item h3,
.why-item h3,
.consultation-card h3 {
    color: var(--ink) !important;
    font-weight: 700 !important;
}

.media-row strong {
    font-size: 14px !important;
}

.price-head p,
.price-item p,
.price-note,
.price-card .price-note {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .78) !important;
}

.quick-item strong,
.trouble-item strong,
.feature h3,
.flow-item strong,
.faq-item summary strong,
summary > strong {
    color: var(--ink) !important;
    font-weight: 700 !important;
}

summary > strong {
    font-size: 15px !important;
}

.integration-item strong,
.marquee-group span {
    font-size: 13px !important;
}

.integration-item span,
.feature-en,
.hero-price-item small,
.diagram-box small,
.integration-column-head span,
.media-strip-title {
    font-size: 10px !important;
}

/* 本文中の強調はマーカーで */
section p b,
section p strong,
.col-check li b,
.col-body p b {
    background: linear-gradient(transparent 62%, rgba(196, 154, 79, .32) 62%);
}

/* 箇条書きの小見出し(1行全体を占める太字)はマーカーではなく色で強調 */
.col-list li b,
.col-steps li b {
    background: none;
    color: var(--ink) !important;
}

.col-box p b {
    background: none;
    color: var(--accent-dark) !important;
}

.col-body h2 b,
.sv-lead b {
    background: none;
}

/* ---------- 番号:大きく・ゴールドで強弱をつける ---------- */
.trouble-item > span,
.feature-number,
.flow-item > span,
.quick-item > span,
.faq-q,
.faq-a,
summary > span,
.faq-answer > span,
.sv-step::before {
    color: var(--accent-dark) !important;
    font-weight: 700 !important;
}

.trouble-item > span,
.feature-number {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
}

.flow-item > span,
.quick-item > span {
    font-size: 12px !important;
    letter-spacing: .14em !important;
}

.point-visual::before {
    color: rgba(196, 154, 79, .18) !important;
}

.hero-price-item strong,
.price-number {
    color: var(--ink);
}

.price-number,
.zk-stat strong,
.sn-stats strong,
.maker-stats strong,
.st-plan .price {
    background: linear-gradient(180deg, #fff 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.st-plan .price {
    background: none;
    color: var(--ink) !important;
}

.st-plan .price small {
    color: var(--body) !important;
}

/* ---------- カード:平坦 → 白地+影+上辺のアクセントで立体感 ---------- */
.quick-item,
.trouble-item,
.feature,
.sv-card,
.zk-feature,
.col-card,
.st-plan,
.sn-col,
.zk-point,
.policy-item {
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(13, 24, 38, .07) !important;
}

.quick-item,
.trouble-item,
.sv-card,
.zk-feature,
.col-card {
    border-top: 3px solid var(--accent) !important;
}

.zk-point {
    border-top-color: var(--accent) !important;
}

/* 「まとめて解決できます」を紺の帯にして、ページの山場をつくる */
.trouble-answer {
    padding: 60px 30px !important;
    border: 0 !important;
    background:
        radial-gradient(circle at 15% 20%, rgba(196, 154, 79, .25), transparent 45%),
        var(--navy) !important;
    color: #fff !important;
    box-shadow: 0 30px 60px rgba(13, 24, 38, .2);
}

.trouble-answer small {
    color: var(--accent-light) !important;
    font-size: 12px !important;
    letter-spacing: .22em !important;
}

.trouble-answer strong {
    color: #fff !important;
    font-weight: 600 !important;
}

/* 流れ(STEP)を太い区切りで */
.flow-item {
    border-bottom-width: 1px;
    transition: background .3s;
}

.flow-item:hover {
    background: var(--accent-soft);
}

/* ---------- ボタン:主役ボタンは塗り+ゴールドのホバー ---------- */
.btn-primary,
.cta-button.primary,
.zk-btn.fill,
.sv-btn.fill,
.col-cta a.fill {
    position: relative;
    box-shadow: 0 12px 26px rgba(13, 24, 38, .18);
    font-weight: 700 !important;
    transition: background .3s, border-color .3s, color .3s, transform .3s, box-shadow .3s !important;
}

.btn-primary:hover,
.cta-button.primary:hover,
.zk-btn.fill:hover,
.sv-btn.fill:hover,
.more-link:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(196, 154, 79, .35);
}

.btn-outline,
.more-link,
.zk-btn,
.sv-btn {
    border-width: 2px !important;
    font-weight: 700 !important;
}

/* ---------- 記事(コラム):見出しを帯に、要所にゴールド ---------- */
.col-body h2 {
    padding: 18px 22px !important;
    border: 0 !important;
    border-left: 6px solid var(--accent) !important;
    background: var(--navy) !important;
    color: #fff !important;
}

.col-body h3 {
    border-left-color: var(--accent) !important;
}

.col-lead {
    border-left-color: var(--accent) !important;
    background: var(--accent-soft) !important;
}

.col-check li::before {
    background: var(--accent) !important;
}

.col-steps li::before {
    background: var(--accent-soft) !important;
    color: var(--accent-dark) !important;
}

.col-box {
    border-left: 4px solid var(--accent) !important;
}

.col-table th {
    border-bottom: 3px solid var(--accent);
}

/* ---------- FAQ ---------- */
.faq summary > span:first-child,
.faq-q {
    display: inline-grid !important;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-soft);
    font-size: 13px !important;
}

.faq-item[open] summary,
details[open] > summary {
    background: var(--accent-soft);
}

/* =========================================================
   背景の色分け
   クール(青系)=説明・機能 / ウォーム(シャンパン系)=悩み・FAQ
   深い紺のグラデーション=料金・機能一覧・お問い合わせなどの山場
========================================================= */
:root {
    --bg-cool: #eef3f8;
    --bg-cool-deep: #e2eaf3;
    --bg-warm: #faf5ec;
    --bg-warm-deep: #f3e9d7;
    --navy-grad: linear-gradient(150deg, #101d33 0%, #1a2f4f 55%, #23406a 100%);
    --glow-gold: radial-gradient(circle at 85% 15%, rgba(196, 154, 79, .28), transparent 42%);
    --glow-blue: radial-gradient(circle at 10% 90%, rgba(120, 160, 210, .22), transparent 45%);
}

/* ---- トップページ ---- */
.hero {
    background:
        radial-gradient(circle at 8% 18%, rgba(83, 109, 137, .14), transparent 38%),
        radial-gradient(circle at 45% 95%, rgba(196, 154, 79, .14), transparent 40%),
        #fff !important;
}

.media-strip {
    border: 0 !important;
    background: var(--navy-grad) !important;
}

.media-strip-title {
    color: var(--accent-light) !important;
}

.media-strip .marquee-group span,
.media-strip-list span {
    color: #fff !important;
}

.media-strip-list.is-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.quick {
    background: linear-gradient(180deg, var(--bg-cool) 0%, #fff 100%) !important;
}

.trouble {
    background:
        radial-gradient(circle at 90% 10%, rgba(196, 154, 79, .16), transparent 35%),
        var(--bg-warm) !important;
}

.points {
    background: #fff !important;
}

.point:nth-child(odd) {
    background: linear-gradient(120deg, var(--bg-cool) 0%, #fff 70%) !important;
}

.point:nth-child(even) {
    background: linear-gradient(240deg, var(--bg-warm) 0%, #fff 70%) !important;
}

.price,
.contact,
.cta,
.reserve-cta {
    background: var(--glow-gold), var(--glow-blue), var(--navy-grad) !important;
}

.integration {
    background: linear-gradient(180deg, #fff 0%, var(--bg-cool) 100%) !important;
}

/* 機能一覧は紺の背景に白いカードを浮かせて、ページ後半の山場に */
.features {
    background: var(--glow-gold), var(--navy-grad) !important;
}

.features .section-title,
.features-head h2 {
    color: #fff !important;
}

.features-head p,
.features-head p:not(.section-label) {
    color: rgba(255, 255, 255, .8) !important;
}

.features .section-label {
    color: var(--accent-light) !important;
}

.feature-grid {
    border-color: transparent !important;
    gap: 14px;
}

.works {
    background: linear-gradient(180deg, var(--bg-warm) 0%, #fff 60%) !important;
}

.flow {
    background:
        radial-gradient(circle at 5% 10%, rgba(83, 109, 137, .14), transparent 35%),
        var(--bg-cool) !important;
}

.flow-item {
    background: rgba(255, 255, 255, .7);
}

.faq {
    background: var(--bg-warm) !important;
}

/* ---- 下層ページ(料金・FAQ・お問い合わせ・運営者情報・ZUKAN関連・コラム) ---- */
.page-hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(83, 109, 137, .16), transparent 40%),
        radial-gradient(circle at 80% 85%, rgba(196, 154, 79, .16), transparent 40%),
        linear-gradient(160deg, var(--bg-cool) 0%, #fbf9f5 100%) !important;
}

.included,
.custom,
.consultation,
.why-demo,
.policy {
    background: var(--bg-cool) !important;
}

.works-intro,
.final {
    background: linear-gradient(180deg, var(--bg-cool) 0%, #fff 100%) !important;
}

.sample,
.more-works {
    background:
        radial-gradient(circle at 92% 8%, rgba(196, 154, 79, .14), transparent 35%),
        var(--bg-warm) !important;
}

.media,
.message,
.operator {
    background: linear-gradient(180deg, #fff 0%, var(--bg-warm) 100%) !important;
}

.zk-ivory,
.sv-ivory {
    background:
        radial-gradient(circle at 92% 8%, rgba(196, 154, 79, .14), transparent 35%),
        var(--bg-warm) !important;
}

.zk-section:not(.zk-ivory):not(.zk-navy),
.sv-section:not(.sv-ivory):not(.sv-navy) {
    background: linear-gradient(180deg, #fff 0%, var(--bg-cool) 100%) !important;
}

.zk-navy,
.sv-navy,
.maker {
    background: var(--glow-gold), var(--glow-blue), var(--navy-grad) !important;
}

.zk-stat,
.zk-studio-list div,
.st-media div,
.sn-stats div,
.maker-stats div {
    background: rgba(16, 29, 51, .55) !important;
}

.col-wrap {
    background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--bg-cool) 100%);
}

.col-index {
    background: var(--bg-warm);
}

/* ---------- スマホ ---------- */
@media (max-width: 700px) {
    .section-label,
    .hero-eyebrow {
        font-size: 11px !important;
    }

    .hero-text,
    .section-description,
    .point-copy p,
    .trouble-item p,
    .quick-item p,
    .feature p,
    .flow-item p,
    .faq-answer p,
    .features-head p,
    .faq-side p {
        font-size: 13px !important;
    }

    .trouble-item > span,
    .feature-number {
        font-size: 22px !important;
    }

    .trouble-answer {
        padding: 44px 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover,
    .cta-button.primary:hover,
    .zk-btn.fill:hover,
    .sv-btn.fill:hover {
        transform: none;
    }
}