/* Theme Name: MVAS Theme URI: https://xs433314.xsrv.jp/ Description: マリアナ観光局（MVAS）公式サイト カスタムテーマ。Phase 1。 Author: MVAS Project Version: 0.1.0 Requires at least: 6.4 Requires PHP: 8.1 Text Domain: mvas */ /* ============================================= MVAS Design Tokens — generated from Figma ============================================= */ :root { /* ------------------------------------------- Color / Text ------------------------------------------- */ --color-text-default: #11232c; /* 本文デフォルト */ --color-text-heading: #00818f; /* 見出しアクセント */ --color-text-subtle: #4c6e80; /* サブテキスト */ --color-text-subtler: #ffffff; /* 反転テキスト（濃色背景上） */ --color-text-accent: #00a1b3; /* リンク・アクセント */ --color-text-brand: #002c5e; /* ブランドカラー（ネイビー） */ /* ------------------------------------------- Color / Background ------------------------------------------- */ --color-bg-default: #d3f4f7; /* ページ背景（水色） */ --color-bg-subtle: #dfeeff; /* セクション背景（薄青） */ --color-bg-card: #ffffff; /* カード背景 */ --color-bg-brand: #002c5e; /* ブランド背景（ネイビー） */ /* ------------------------------------------- Color / Secondary & Utility ------------------------------------------- */ --color-secondary: #00a6bc; /* セカンダリアクセント */ --color-secondary-bg: #e1f6ff; /* セカンダリ背景 */ --color-white: #ffffff; --color-body: #1d3a49; /* 本文テキスト（ダーク） */ /* ------------------------------------------- Color / Border ------------------------------------------- */ --color-border-default: #dfdfdf; /* ------------------------------------------- Font Family ------------------------------------------- */ --font-sans: 'Noto Sans JP', sans-serif; --font-serif: 'Noto Serif JP', serif; --font-en: 'Sora', sans-serif; /* 英字・数字・見出し英語表記 */ /* ------------------------------------------- Font Weight ------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* ------------------------------------------- Font Size ------------------------------------------- */ --fs-10: 0.75rem; /* 12px */ --fs-20: 0.875rem; /* 14px */ --fs-30: 1rem; /* 16px */ --fs-50: 1.5rem; /* 24px */ /* ------------------------------------------- Typography / Body ------------------------------------------- */ /* body/sm: 16px / Regular / lh30 / ls0.75 */ --type-body-sm-size: var(--fs-30); --type-body-sm-weight: var(--fw-regular); --type-body-sm-lh: 1.875; /* 30 / 16 */ --type-body-sm-ls: 0.047em; /* 0.75px / 16px */ /* body/md: 16px / Regular / lh30 / ls0.75 */ --type-body-md-size: var(--fs-30); --type-body-md-weight: var(--fw-regular); --type-body-md-lh: 1.875; --type-body-md-ls: 0.047em; /* body/md/bold: 16px / Bold / lh30 / ls0.75 */ --type-body-md-bold-weight: var(--fw-bold); /* body/xs: 12px / lh16 / ls0.75 */ --type-body-xs-size: var(--fs-10); --type-body-xs-lh: 1.333; /* 16 / 12 */ --type-body-xs-ls: 0.063em; /* 0.75px / 12px */ /* body/lg/bold: 20px / Bold / lh36 / ls0.75 */ --type-body-lg-bold-size: 1.25rem; /* 20px */ --type-body-lg-bold-weight: var(--fw-bold); --type-body-lg-bold-lh: 1.8; /* 36 / 20 */ --type-body-lg-bold-ls: 0.038em; /* 0.75px / 20px */ /* body/lg/medium: 24px / Medium / lh40 / ls0.75 */ --type-body-lg-med-size: var(--fs-50); --type-body-lg-med-weight: var(--fw-medium); --type-body-lg-med-lh: 1.667; /* 40 / 24 */ --type-body-lg-med-ls: 0.031em; /* 0.75px / 24px */ /* ------------------------------------------- Typography / Heading ------------------------------------------- */ /* heading/sm: 20px / Bold / Sans / lh30 / ls0.75 */ --type-heading-sm-family: var(--font-sans); --type-heading-sm-size: 1.25rem; /* 20px */ --type-heading-sm-weight: var(--fw-bold); --type-heading-sm-lh: 1.5; /* 30 / 20 */ --type-heading-sm-ls: 0.038em; /* heading/lg: 32px / Medium / Serif / lh48 / ls1.25 */ --type-heading-lg-family: var(--font-serif); --type-heading-lg-size: 2rem; /* 32px */ --type-heading-lg-weight: var(--fw-medium); --type-heading-lg-lh: 1.5; /* 48 / 32 */ --type-heading-lg-ls: 0.039em; /* 1.25px / 32px */ /* heading/md/subtle: 32px / Bold / Sans / lh48 / ls1.25 */ --type-heading-md-subtle-size: 2rem; --type-heading-md-subtle-weight: var(--fw-bold); --type-heading-md-subtle-lh: 1.5; --type-heading-md-subtle-ls: 0.039em; /* heading/xl: 40px / Medium / Serif / lh56 / ls1.25 */ --type-heading-xl-family: var(--font-serif); --type-heading-xl-size: 2.5rem; /* 40px */ --type-heading-xl-weight: var(--fw-medium); --type-heading-xl-lh: 1.4; /* 56 / 40 */ --type-heading-xl-ls: 0.031em; /* 1.25px / 40px */ /* ------------------------------------------- Spacing ------------------------------------------- */ --space-4xs: 0.25rem; /* 4px */ --space-3xs: 0.5rem; /* 8px */ --space-2xs: 0.75rem; /* 12px */ --space-xs: 1rem; /* 16px */ --space-sm: 1.25rem; /* 20px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 5rem; /* 80px */ --space-5xl: 7.5rem; /* 120px */ --space-6xl: 10rem; /* 160px */ /* ------------------------------------------- Border Radius ------------------------------------------- */ --radius-md: 0.75rem; /* 12px */ --radius-xl: 1.5rem; /* 24px */ /* ------------------------------------------- Layout / Breakpoint （Figmaフレーム実測値から定義） ------------------------------------------- */ --bp-sp: 390px; /* SP基準幅 */ --bp-pc: 1920px; /* PC基準幅 */ /* コンテンツ最大幅：PCフレームの実寸から1600px */ --container-max: 1600px; --container-pad: var(--space-xl); /* 左右パディング 40px */ /* ------------------------------------------- Z-index ------------------------------------------- */ --z-header: 100; --z-modal: 200; --z-toast: 300; } /* ------------------------------------------- Google Fonts 読み込み ※ functions.php の wp_enqueue_style で 本番読み込みするため、ここはコメントのみ @import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP:wght@400;500;700& family=Noto+Serif+JP:wght@500& family=Sora:wght@400;500;700& display=swap'); ------------------------------------------- */