/*
"g" 接頭辞を付けて衝突を回避する

原則readonly
*/

:root {
  --g-color--red: #e73c30;
  --g-color--blue: #9cd5e6;
  --g-color--gray: #4d4d4d;
  --g-color--gray-light: #e6e6e6;
  --g-color--shadow: rgba(0, 0, 0, 0.25);
  --g-color--overlay: rgba(0, 0, 0, 0.5);
  --g-color--overlay-white: hsla(0, 50%, 100%, 0.6);

  --g-font--oswald: 'Oswald';

  --g-font-size--base: 1.6rem;
  --g-font-size--root: 7.8125px; /* デザイン幅が480pxなため375pxで10pxとなるように調整 [1] */
  --g-font-size--body-base: 2.048rem; /* [2] [1]によりbodyの基本フォントサイズが16pxを下回らないように調整 */

  /* NOTE: 都度定義 */
  --g-font-size--x1p25: calc(var(--g-font-size--base) * 1.25);
  --g-font-size--x1p5: calc(var(--g-font-size--base) * 1.5);
  --g-font-size--x1p75: calc(var(--g-font-size--base) * 1.75);
  --g-font-size--x2: calc(var(--g-font-size--base) * 2);
  --g-font-size--x2p25: calc(var(--g-font-size--base) * 2.25);
  --g-font-size--x2p5: calc(var(--g-font-size--base) * 2.5);
  --g-font-size--x2p75: calc(var(--g-font-size--base) * 2.75);
  --g-font-size--x3: calc(var(--g-font-size--base) * 3);
  --g-font-size--x3p25: calc(var(--g-font-size--base) * 3.25);
  --g-font-size--x3p5: calc(var(--g-font-size--base) * 3.5);
  --g-font-size--x3p75: calc(var(--g-font-size--base) * 3.75);
  --g-font-size--x4: calc(var(--g-font-size--base) * 4);
  --g-font-size--x4p25: calc(var(--g-font-size--base) * 4.25);
  --g-font-size--x4p5: calc(var(--g-font-size--base) * 4.5);
  --g-font-size--x4p75: calc(var(--g-font-size--base) * 4.75);
  --g-font-size--x5: calc(var(--g-font-size--base) * 5);
  --g-font-size--x5p25: calc(var(--g-font-size--base) * 5.25);
  --g-font-size--x5p5: calc(var(--g-font-size--base) * 5.5);
  --g-font-size--x5p75: calc(var(--g-font-size--base) * 5.75);

  --g-width--max: 128rem;
  --g-width--side-cv: 26rem;
  --g-width--side-cv-peek: 6rem;
  --g-width--contents-menu: 28rem;
  --g-width--content-max: calc(
    var(--g-width--max) -
      ((var(--g-width--side-cv-peek) * 2) + (var(--g-padding--section-x) * 2))
  );
  --g-width--content-max-with-contents-menu: calc(
    var(--g-width--max) -
      (
        (var(--g-width--side-cv-peek) + var(--g-width--contents-menu)) +
          (var(--g-padding--section-x) * 2)
      )
  );

  --g-height--navbar: 9rem;
  --g-height--bottom-cv: 5.6rem;
  --g-height--header: 100svh;
  --g-height--header-2: 15rem;
  --g-height--header-3: 30rem;

  --g-padding--contents-top: 4rem;
  --g-padding--section-x: 1rem;
}
@media (min-width: 1280px) {
  :root {
    --g-font-size--root: 10px;
    --g-font-size--body-base: 1.6rem;

    --g-height--navbar: 10rem;

    --g-height--header-3: 61.2rem;
  }
}