/*----------------------------------------変数----------------------------------------*/ :root { --theme-color: #6EAD1A; --theme-color-light: #A8D84A; --theme-color-deep: #4D7A0F; --hover-color: var(--theme-color-light); --color1: #8dc21f; --color2: #0093db; --a-color: var(--theme-color); --a-color-hover: var(--theme-color-light); --a-color-active: var(--theme-color-deep); --a-color-visited: var(--theme-color-deep); --a-color-focus: var(--theme-color-light); --font-color: #333; --font-size: 1.6rem; --inner: 1200px; --btn-color: #fff; --btn-bg: var(--theme-color); --side-padding: 0; --section-margin: 10rem; --content-margin: 3em; --text-margin: 2em; /* 固定ヘッダー下余白用。実測は js/js.js が インラインで上書き */ --header-height: 72px; } @media screen and (min-width: 1920px) { :root { --section-margin: 20rem; } } @media screen and (max-width: 1280px) { :root { --side-padding: 3%; } } @media screen and (max-width: 768px) { :root { --font-size: 1.4rem; --section-margin: 5rem; --side-padding: 5%; } }