/* ===================================================================== ニーハオ会話ラボ — Visual Redesign 2026 Signature: 声調（tone contour）/ Flat palette: 墨・紙・朱・青磁・石 Loaded LAST. Overrides styles.css + home.css. Remove this file + its to fully revert. ===================================================================== */ :root { --rd-ink: #1b1a17; /* 墨 — text */ --rd-ink-soft: #3a3833; /* softer ink */ --rd-graphite: #4d4942; /* 鼠 — warm grey for dark panels */ --rd-paper: #f2efe7; /* 紙 — page background */ --rd-paper-2: #ece7da; /* warm alt section */ --rd-surface: #fbfaf5; /* card paper */ --rd-accent: #ce3b2b; /* 朱 — cinnabar seal red */ --rd-accent-dark: #ad2e20; --rd-celadon: #3f6b5e; /* 青磁 — pine/celadon */ --rd-celadon-dark: #2c5048; /* footer */ --rd-celadon-soft: #e3e9e2; /* tinted section */ --rd-stone: #8c8578; /* 石 — muted text / captions */ --rd-line: #d9d3c4; /* warm hairline */ --rd-sans: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; --rd-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif; /* Re-point legacy tokens so inherited rules recolor cleanly */ --ink: var(--rd-ink); --muted: #6e695e; --line: var(--rd-line); --paper: var(--rd-paper); --surface: var(--rd-surface); --accent: var(--rd-accent); --accent-dark: var(--rd-accent-dark); --soft: var(--rd-celadon-soft); /* was pink #fff1ef */ --mist: var(--rd-paper-2); /* was blue #eef7ff */ } /* ---------- Base ---------------------------------------------------- */ /* Clip horizontal overflow on so is not promoted to a scroll container (keeps sticky/scroll behaviour predictable). */ html { overflow-x: hidden; } body { overflow-x: visible; background: var(--rd-paper); color: var(--rd-ink); font-family: var(--rd-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, .section-heading h2, .final-cta h2 { font-family: var(--rd-sans); font-weight: 900; letter-spacing: 0.01em; line-height: 1.28; } /* ---------- Header -------------------------------------------------- */ .site-header { background: rgba(242, 239, 231, 0.86); border-bottom: 1px solid var(--rd-line); box-shadow: none; backdrop-filter: blur(12px); } .brand span { font-weight: 900; letter-spacing: 0.02em; } .site-nav { color: var(--rd-ink-soft); font-weight: 700; } .site-nav a { position: relative; } .site-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--rd-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--rd-ink); } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); } .nav-toggle span { background: var(--rd-ink); } /* ---------- Buttons ------------------------------------------------- */ .btn-rd, .button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; font-family: var(--rd-sans); font-weight: 700; border-radius: 4px; transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease; } .btn-rd { min-height: 54px; padding: 0 28px; font-size: 1rem; } .btn-rd-primary, .button-primary, .header-cta { background: var(--rd-accent); color: #fff; box-shadow: none; border: none; } .btn-rd-primary:hover, .button-primary:hover, .header-cta:hover { background: var(--rd-accent-dark); transform: translateY(-2px); box-shadow: none; } .header-cta { border-radius: 4px; font-weight: 700; } .btn-rd-ghost, .button-secondary { background: transparent; color: var(--rd-ink); border: 1.5px solid var(--rd-ink); } .btn-rd-ghost:hover, .button-secondary:hover { background: var(--rd-ink); color: var(--rd-paper); transform: translateY(-2px); } /* ---------- Section kicker (bilingual 中 / pinyin) ----------------- */ .section-kicker { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--rd-mincho); color: var(--rd-accent); text-transform: none; letter-spacing: 0.04em; } .section-heading:not(.align-left) .section-kicker { justify-content: center; } .k-cn { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.1em; } .k-py { font-family: var(--rd-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; color: var(--rd-stone); } .section-heading h2 { color: var(--rd-ink); } /* =================================================================== HERO — pronunciation card with animated tone contour =================================================================== */ .hero-rd { background: var(--rd-paper); border-bottom: 1px solid var(--rd-line); padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 104px); overflow: hidden; } .hero-rd-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-rd-eyebrow { margin: 0 0 18px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; color: var(--rd-celadon); } .hero-rd-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--rd-celadon); } .hero-rd-text h1 { margin: 0 0 22px; font-size: clamp(1.9rem, 4.6vw, 3.3rem); line-height: 1.3; letter-spacing: 0.005em; } .hero-rd-text h1 em { font-style: normal; color: var(--rd-accent); position: relative; white-space: nowrap; } .hero-rd-text h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 8px; background: rgba(206, 59, 43, 0.16); z-index: -1; } .hero-rd-lead { margin: 0 0 30px; max-width: 30em; font-size: 1.05rem; line-height: 1.95; color: var(--rd-ink-soft); } .hero-rd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; } .hero-rd-note { margin: 0 0 26px; font-size: 0.86rem; color: var(--rd-stone); } .hero-rd-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--rd-line); } .hero-rd-trust li { position: relative; padding-left: 20px; font-size: 0.9rem; font-weight: 500; color: var(--rd-ink-soft); } .hero-rd-trust li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--rd-celadon); } /* Pronunciation card */ .phrase-card { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 10px; padding: clamp(26px, 3vw, 38px); box-shadow: 0 26px 60px -38px rgba(27, 26, 23, 0.55); } .phrase-card-head { margin: 0 0 18px; padding-bottom: 16px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--rd-stone); border-bottom: 1px dashed var(--rd-line); } .phrase-main { text-align: center; margin-bottom: 22px; } .tone-stroke { display: block; width: 116px; height: 42px; margin: 0 auto 4px; } .tone-stroke path { stroke-dasharray: 280; stroke-dashoffset: 280; animation: rd-draw-tone 0.95s ease 0.35s forwards; } @keyframes rd-draw-tone { to { stroke-dashoffset: 0; } } .phrase-cn { margin: 0; font-family: var(--rd-mincho); font-weight: 700; font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: 1; color: var(--rd-ink); letter-spacing: 0.08em; } .phrase-pinyin { margin: 14px 0 6px; font-family: var(--rd-mincho); font-size: 1.5rem; color: var(--rd-accent); letter-spacing: 0.04em; } .phrase-ja { margin: 0; font-size: 0.92rem; color: var(--rd-stone); } .phrase-list { list-style: none; margin: 0; padding: 0; } .phrase-list li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--rd-line); } .pl-cn { grid-row: span 2; align-self: center; font-family: var(--rd-mincho); font-weight: 700; font-size: 1.5rem; color: var(--rd-ink); letter-spacing: 0.06em; } .pl-py { font-family: var(--rd-mincho); font-size: 0.98rem; color: var(--rd-accent); } .pl-ja { font-size: 0.82rem; color: var(--rd-stone); } @media (prefers-reduced-motion: reduce) { .tone-stroke path { animation: none; stroke-dashoffset: 0; } .btn-rd:hover, .button-primary:hover, .button-secondary:hover { transform: none; } } /* =================================================================== HOME SECTIONS — flat surfaces =================================================================== */ .section { background: var(--rd-paper); } .section-light { background: var(--rd-celadon-soft); } .section-accent { background: var(--rd-paper-2); } .home-entry, .home-service, .home-column, .home-journey { border: none; } .section-heading p { color: var(--rd-ink-soft); } /* Numbered markers (real sequences): mincho + cinnabar + tone tick */ .home-entry-number, .home-service-points li > span, .home-journey-steps li > span { font-family: var(--rd-mincho); color: var(--rd-accent); font-weight: 700; } .home-service-points li > span, .home-journey-steps li > span { position: relative; display: inline-block; padding-bottom: 8px; } .home-service-points li > span::after, .home-journey-steps li > span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px; background: var(--rd-accent); } /* Purpose-path link cards */ .home-entry-link { padding: 22px 26px; background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 8px; transition: border-color 0.16s ease, transform 0.16s ease; } .home-entry-link:hover { border-color: var(--rd-accent); transform: translateX(4px); } .home-entry-arrow { color: var(--rd-accent); } .home-entry-feature { background: var(--rd-graphite); color: var(--rd-paper); border-radius: 10px; } .home-entry-feature h3 { color: #fff; } .home-entry-feature > p:not(.home-entry-label), .home-entry-feature .home-entry-facts li { color: rgba(255, 255, 255, 0.88); } .home-entry-feature .home-entry-label { color: #f0d9b8; } .home-entry-feature .home-text-link { color: #fff; } .home-entry-feature .home-entry-facts li::before { background: var(--rd-accent); } .home-text-link { color: var(--rd-accent); font-weight: 700; } .home-text-link:hover { color: var(--rd-accent-dark); } .home-column-link, .home-column-article { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 8px; } .home-column-link { padding: 22px 26px; } .home-column-article { padding: 28px 26px; } .home-column-category { color: var(--rd-celadon); font-weight: 700; } /* ---------- Pricing ------------------------------------------------ */ .price-panel { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 10px; box-shadow: none; } .price-row { border-color: var(--rd-line); } .price { font-family: var(--rd-sans); color: var(--rd-ink); font-weight: 900; } .price span { color: var(--rd-stone); } .plan-name { color: var(--rd-ink); font-weight: 700; } .plan-detail { color: var(--rd-stone); } .price-row.trial .plan-name::after { content: "おすすめ"; margin-left: 10px; padding: 2px 9px; font-size: 0.66rem; font-weight: 700; color: #fff; background: var(--rd-celadon); border-radius: 3px; vertical-align: middle; } .discount-note { color: var(--rd-stone); } /* ---------- FAQ ---------------------------------------------------- */ .faq-list details { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 6px; } .faq-list summary { color: var(--rd-ink); font-weight: 700; } .faq-list summary::marker, .faq-list summary::-webkit-details-marker { color: var(--rd-accent); } .faq-more-link { color: var(--rd-accent); } /* ---------- Final CTA (dark ink band) ------------------------------ */ .final-cta { background: var(--rd-graphite); color: var(--rd-paper); } .final-cta h2 { color: #fff; } .final-cta > .container > p, .final-note { color: rgba(242, 239, 231, 0.78); } .section-kicker-on-dark { color: #fff; } .section-kicker-on-dark .k-py { color: rgba(242, 239, 231, 0.6); } .final-cta .button-primary { background: var(--rd-accent); } .final-cta .button-primary:hover { background: #e8543f; } /* =================================================================== FOOTER — flat celadon (replaces purple gradient) =================================================================== */ .site-footer { background: var(--rd-celadon-dark); } .footer-nav-label { color: rgba(255, 255, 255, 0.95); border-bottom-color: rgba(255, 255, 255, 0.2); } .footer-tagline { color: rgba(255, 255, 255, 0.62); } .mobile-nav-apply { background: var(--rd-accent); box-shadow: none; } /* Mobile drawer — flat warm grey */ .mobile-nav { background: var(--rd-graphite); } /* Floating mobile CTA — flat cinnabar */ .mobile-sticky-cta { background: var(--rd-accent); box-shadow: 0 12px 28px -10px rgba(206, 59, 43, 0.6); } /* =================================================================== PAGE-SPECIFIC — flatten remaining heroes & components (service / beginner / legal / column pages) =================================================================== */ /* --- Service-page hero (.hero on 出張/赴任/レッスン pages) --------- */ .hero { min-height: 0; padding: clamp(48px, 7vw, 88px) 0; background: var(--rd-paper); border-bottom: 1px solid var(--rd-line); color: var(--rd-ink); } .hero::before, .hero::after { content: none; display: none; } .hero-inner { max-width: 760px; } .eyebrow { display: inline-block; margin-bottom: 16px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; color: var(--rd-celadon); } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--rd-celadon); } .hero h1 { color: var(--rd-ink); font-size: clamp(1.9rem, 4.4vw, 3rem); } .hero-lead { color: var(--rd-ink); font-weight: 700; } .hero-lead span { color: var(--rd-ink); -webkit-text-fill-color: var(--rd-ink); } .hero-copy { color: var(--rd-ink-soft); } .hero-note { color: var(--rd-stone); } .hero-trust { border-top: 1px solid var(--rd-line); } .hero-trust span { position: relative; min-height: 0; padding: 0 0 0 18px; background: none; border: none; border-radius: 0; box-shadow: none; color: var(--rd-ink-soft); font-weight: 500; } .hero-trust span::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rd-celadon); } /* --- Beginner intro hero ------------------------------------------ */ .intro-hero { background: var(--rd-celadon-soft); border-bottom: 1px solid var(--rd-line); } .intro-lead { color: var(--rd-ink-soft); } .intro-goal { background: var(--rd-surface); border: 1px solid var(--rd-line); border-left: 3px solid var(--rd-accent); border-radius: 6px; } .intro-goal span { color: var(--rd-accent); font-weight: 700; } /* --- Legal pages (about / privacy / 特商法 / faq hero / column hero) */ .legal-main { background: var(--rd-paper); } .legal-hero { background: var(--rd-celadon-soft); border-bottom: 1px solid var(--rd-line); } .legal-hero h1 { color: var(--rd-ink); } .legal-panel { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 10px; box-shadow: none; } .legal-table dt { background: none; color: var(--rd-accent); font-weight: 700; } .legal-table dd { color: var(--rd-ink-soft); } .legal-meta { color: var(--rd-stone); } /* --- Trial price row highlight ------------------------------------ */ .price-row.trial { background: var(--rd-celadon-soft); } /* --- Roadmap markers (beginner / column / 赴任) ------------------- */ .roadmap li::before { background: var(--rd-accent); } /* --- Column article CTA box --------------------------------------- */ .article-cta-box { background: var(--rd-celadon-soft); border: 1px solid var(--rd-line); border-radius: 10px; } /* =================================================================== RESPONSIVE =================================================================== */ @media (max-width: 880px) { .hero-rd-grid { grid-template-columns: 1fr; gap: 40px; } .phrase-card { max-width: 440px; } } @media (max-width: 680px) { .hero-rd { padding: 36px 0 44px; } .hero-rd-text h1 { font-size: clamp(1.75rem, 7vw, 2.3rem); } .phrase-cn { font-size: 3.4rem; } .section-kicker { gap: 8px; } .k-cn { font-size: 1.05rem; } }