/* Noto Serif JP for headings (corporate, editorial tone) */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&display=swap'); /* ============================================================ Brand tokens（home-draft.html / pricing-howitworks.html と一致） ============================================================ */ :root { --teal:#004455; --teal2:#1C6E7C; --teal-deep:#003039; --gold:#C0962F; --gold-pale:#F5ECD3; --gold-soft:#E0C77E; --pale:#EAF1F2; --line:#AEC6CA; --ink:#1f2d31; --muted:#5E7378; --paper:#fcfdfd; --serif:'Noto Serif JP', serif; --sans:'Noto Sans JP', sans-serif; } /* ---- Corporate palette (#004455 teal + gold accent) ---- */ [data-md-color-primary="custom"] { --md-primary-fg-color: #004455; --md-primary-fg-color--light: #0a5567; --md-primary-fg-color--dark: #00333f; --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255,255,255,.7); } [data-md-color-accent="custom"] { --md-accent-fg-color: #C0962F; --md-accent-fg-color--transparent:rgba(192,150,47,.1); } /* Light scheme: warm paper background + teal links */ [data-md-color-scheme="default"] { --md-default-bg-color: #fcfbf8; --md-typeset-a-color: #0a5567; } /* Dark scheme keeps a lighter teal so headings stay readable */ [data-md-color-scheme="slate"] { --md-typeset-a-color: #7fb5c2; } /* ---- Serif teal headings ---- */ .md-typeset h1, .md-typeset h2, .md-typeset h3 { font-family: "Noto Serif JP", serif; color: var(--md-primary-fg-color); font-weight: 600; letter-spacing: .01em; } [data-md-color-scheme="slate"] .md-typeset h1, [data-md-color-scheme="slate"] .md-typeset h2, [data-md-color-scheme="slate"] .md-typeset h3 { color: #9ccad6; } .md-typeset h2 { border-bottom: 1px solid rgba(0,68,85,.14); padding-bottom: .25em; margin-top: 2.2em; } /* ---- Buttons (rounded, corporate) ---- */ .md-typeset .md-button { border-radius: 40px; border-color: var(--md-primary-fg-color); color: var(--md-primary-fg-color); } .md-typeset .md-button--primary { background-color: var(--md-primary-fg-color); border-color: var(--md-primary-fg-color); color: #fff; } .md-typeset .md-button:hover { background-color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); color: #fff; } /* ---- Cards ---- */ .md-typeset .grid.cards > ul > li, .md-typeset .grid.cards > ol > li { border: 1px solid rgba(0,68,85,.14); border-radius: 12px; } .md-typeset .grid.cards > ul > li:hover { border-color: var(--md-accent-fg-color); box-shadow: 0 8px 28px rgba(0,68,85,.10); } /* ---- Data figures (digests / pricing): fill the content column ---- Material sets `figure{width:fit-content}`, which collapses an inline SVG that has only a viewBox (no intrinsic width) to the ~300px CSS default. Force the figure (and its SVG) to span the full content width so the diagrams stay legible. */ .md-typeset figure { width: 100%; } .md-typeset figure svg { width: 100%; height: auto; display: block; } .md-typeset figure figcaption { font-size: .8rem; color: var(--md-default-fg-color--light); margin-top: .6rem; } /* Digest meta line under the title */ .dg-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: .4rem 0 1.6rem; padding: 0; list-style: none; color: var(--md-default-fg-color--light); font-size: .85rem; } .dg-meta b { color: var(--md-primary-fg-color); font-weight: 700; } /* Header wordmark logo (project lockup): taller than the default icon so the horizontal lockup + sub-line stay legible. Slightly smaller on mobile. */ .md-header__button.md-logo img, .md-nav__button.md-logo img { height: 2.2rem; width: auto; } @media screen and (max-width: 44.9375em) { .md-header__button.md-logo img { height: 1.9rem; } } /* Mobile drawer title: keep the site-name text as the drawer heading, but drop the wordmark logo there so it doesn't duplicate the header lockup. */ .md-nav--primary > .md-nav__title .md-logo { display: none; } /* Profile portrait */ .md-typeset img.profile-photo { border-radius: 10px; margin: 0 0 1rem 1.4rem; max-width: 220px; } /* ============================================================ 全ページ共通：お知らせバー CTA（overrides/main.html） ============================================================ */ .md-banner { background: var(--teal-deep); color: #fff; } .md-banner a.cta-announce { display: block; text-align: center; color: #fff; font-size: .72rem; letter-spacing: .02em; padding: .15rem 0; } .md-banner a.cta-announce:hover { text-decoration: underline; } .md-banner a.cta-announce b { color: #fff; font-weight: 700; } .cta-announce__sep { opacity: .5; margin: 0 .4em; } /* ============================================================ ホーム（縦長ランディング） overrides/home.html home-draft.html の