/* @importではブラウザがキャッシュし更新が反映されないため一時的にコメントアウト @import url("./layout.css"); @import url("./components.css"); @import url("./responsive.css"); */ /* =========================================== Font Import =========================================== */ @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap'); /* =========================================== CSS Variables =========================================== */ :root { /* フォントファミリー */ --font-family-serif: var(--wp--preset--font-family--serif-base); --font-family-sans: var(--wp--preset--font-family--sans-serif-base); --font-family: var(--font-family-sans); --font-family-heading: var(--font-family-serif); --font-family-body: var(--font-family-sans); /* フォントウェイト */ --font-weight-normal: 400; --font-weight-bold: 700; /* フォントサイズ rem = px (1rem = 16px) Tiny: 0.75rem = 12px Small: 0.875rem = 14px Normal: 1rem = 16px Medium: 1.125rem = 18px Large: 1.25rem = 20px Huge: 1.5rem = 24px X-Large: 1.75rem = 28px */ /* フォントサイズ（タイトル系） */ --font-size-title-1: var(--wp--preset--font-size--x-large); --font-size-title-2: var(--wp--preset--font-size--huge); --font-size-title-3: var(--wp--preset--font-size--medium); --font-size-title-4: var(--wp--preset--font-size--normal); /* フォントサイズ（ボディ系） */ --font-size-body-1: var(--wp--preset--font-size--huge); --font-size-body-2: var(--wp--preset--font-size--large); --font-size-body-3: var(--wp--preset--font-size--medium); --font-size-body-4: var(--wp--preset--font-size--normal); --font-size-body-5: var(--wp--preset--font-size--small); --font-size-body-6: var(--wp--preset--font-size--tiny); /* 行間 */ --line-height-default: 1.5; --line-height-loose: 1.7; --line-height-tight: 1.3; /* レイアウト */ --header-height: 80px; /* Spacing Scale (theme.json プレセットを参照) */ --space-0: var(--wp--preset--spacing--space-0); --space-2: var(--wp--preset--spacing--space-2); --space-4: var(--wp--preset--spacing--space-4); --space-5: var(--wp--preset--spacing--space-5); --space-6: var(--wp--preset--spacing--space-6); --space-8: var(--wp--preset--spacing--space-8); --space-10: var(--wp--preset--spacing--space-10); --space-12: var(--wp--preset--spacing--space-12); --space-15: var(--wp--preset--spacing--space-15); --space-16: var(--wp--preset--spacing--space-16); --space-20: var(--wp--preset--spacing--space-20); --space-24: var(--wp--preset--spacing--space-24); --space-25: var(--wp--preset--spacing--space-25); --space-30: var(--wp--preset--spacing--space-30); --space-32: var(--wp--preset--spacing--space-32); --space-36: var(--wp--preset--spacing--space-36); --space-40: var(--wp--preset--spacing--space-40); --space-48: var(--wp--preset--spacing--space-48); --space-50: var(--wp--preset--spacing--space-50); --space-55: var(--wp--preset--spacing--space-55); --space-60: var(--wp--preset--spacing--space-60); --space-64: var(--wp--preset--spacing--space-64); --space-70: var(--wp--preset--spacing--space-70); --space-80: var(--wp--preset--spacing--space-80); --space-100: var(--wp--preset--spacing--space-100); --space-207: var(--wp--preset--spacing--space-207); --space-auto: auto; /* Spacing aliases */ --space-inline-container-sp: var(--space-16); --space-inline-container-pc: var(--space-40); --section-padding: var(--space-80); --section-padding-sp: var(--space-60); --content-gap: var(--space-40); --space-negative-10: calc(var(--space-10) * -1); --space-stack-xs: var(--space-16); --space-stack-sm: var(--space-24); --space-stack-md: var(--space-32); --space-stack-lg: var(--space-40); --space-stack-xl: var(--space-60); --space-stack-xxl: var(--space-80); /* Border Radius */ --radius-0: 0; --radius-3: 3px; --radius-4: 4px; --radius-5: 5px; --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-circle: 50%; /* Box Shadow */ --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.04); --shadow-sm: 0px 2px 4px 0px rgba(16, 24, 40, 0.10); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-lg: 0 2px 10px rgba(0, 0, 0, 0.10); --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.25); --shadow-focus-strong: 0 0 0 2px rgba(97, 33, 161, 0.30); --shadow-focus: 0 0 0 2px rgba(97, 33, 161, 0.20); --shadow-header: var(--shadow-lg); --shadow-box: var(--shadow-lg); /* Header alias */ --header-height-pc: 86px; /* PC: 79px + ボーダー1px */ --header-height-sp: 60px; /* SP: 固定60px */ --header-padding-pc-v: 20px; /* PC上下パディング */ --header-padding-pc-h: 160px; /* PC左右パディング */ --header-padding-sp: 20px; /* SPパディング */ --header-border: 1px; /* 下ボーダー */ } /* =========================================== Base Styles =========================================== */ html, body { overflow-x: clip; } body { min-height: 100vh; line-height: 1.6; font-family: var(--font-family-body); font-size: var(--font-size-body-4); font-weight: var(--font-weight-normal); color: var(--wp--preset--color--text-medium); line-height: var(--line-height-default); background-color: var(--wp--preset--color--mono-white); } /* =========================================== Title Styles (見出し系 - 明朝体) =========================================== */ h1 { font-family: var(--font-family-heading); /* 明朝体 */ font-size: var(--font-size-title-1); /* 28px */ font-weight: var(--font-weight-bold); /* 700 */ line-height: var(--line-height-tight); /* 1.3 */ color: var(--wp--preset--color--text-darkest); /* #3C3C3C */ } h2 { font-family: var(--font-family-heading); /* 明朝体 */ font-size: var(--font-size-title-2); /* 24px */ font-weight: var(--font-weight-bold); /* 700 */ line-height: var(--line-height-tight); /* 1.3 */ color: var(--wp--preset--color--text-darkest); /* #3C3C3C */ } h3 { font-family: var(--font-family-heading); /* 明朝体 */ font-size: var(--font-size-title-3); /* 18px */ font-weight: var(--font-weight-bold); /* 700 */ line-height: var(--line-height-default); /* 1.5 */ color: var(--wp--preset--color--text-dark); /* #363030 */ } h4 { font-family: var(--font-family-heading); /* 明朝体 */ font-size: var(--font-size-title-4); /* 16px */ font-weight: var(--font-weight-bold); /* 700 */ line-height: var(--line-height-default); /* 1.5 */ color: var(--wp--preset--color--text-dark); /* #363030 */ } /* =========================================== Body Styles (本文系 - ゴシック体) =========================================== */ p { font-family: var(--font-family-body); /* ゴシック体 */ font-size: var(--font-size-body-3); /* 18px */ font-weight: var(--font-weight-normal); /* 400 */ line-height: var(--line-height-loose); /* 1.7 */ color: var(--wp--preset--color--text-medium); /* #717171 */ } /* シンプルなモダンリセット */ /* =========================================== Base / Reset（必要最小限） =========================================== */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } table { border-collapse: collapse; border-spacing: 0; }