@charset "UTF-8";

/* =============================================================================

Custom Properties CSS

・カスタムプロパティ

上記はここに記述する

============================================================================= */

/* Custom Properties
============================================================================= */
:root {
  /* ScrollBar Width *JavascriptOverwrite */
  --scrollbar-w: 0px;

  /* Color Code */
  --cc-green-A-hex: #15a38f;
  --cc-green-A-rgb: 21, 161, 141;
  --cc-green-B-hex: #00aa95;
  --cc-green-C-hex: #3cd9bf;
  --cc-green-D-hex: #51e6b9;
  --cc-green-E-hex: #32d6b6;
  --cc-blue-A-hex: #00aab9;
  --cc-blue-B-hex: #32c2d9;
  --cc-red-A-hex: #fa6464;
  --cc-red-A-rgb: 250, 100, 100;
  --cc-gray-A-hex: #1e1e1e;
  --cc-gray-B-hex: #525456;
  --cc-gray-C-hex: #a8a8a8;
  --cc-gray-C-rgb: 168, 168, 168;
  --cc-gray-D-hex: #e5e5e5;
  --cc-gray-E-hex: #f3f3f3;
  --cc-gray-F-hex: #999;
  --cc-gray-G-hex: #f4f4f4;
  --cc-yellow-A-hex: #E4BE14;

  --color-primary: #00AC97;
  --color-on-primary: #fff;
  --color-secondary: #7891FC;
  --color-tertiary: #f8f8f8;
  --color-on-tertiary: #1e1e1e;
  --color-background: #fff;
  --color-on-background: #1e1e1e;
  --color-surface: #162220;
  --color-border: #e5e5e5;
  --color-on-surface: #fff;
  --color-gradient: linear-gradient(135deg, #7891fc, #00ac97);
  --color-gradient-clear: linear-gradient(135deg, rgba(120, 145, 252, 0.8), rgba(0, 172, 151, 0.8));
  --color-gradient-multi: linear-gradient(135deg, #7891FC, #60E3D8, #60E39C, #D2F184);
  --color-gradient-multi-clear: linear-gradient(135deg,
      rgba(120, 145, 252, 0.7),
      rgba(96, 227, 216, 0.7),
      rgba(96, 227, 156, 0.7),
      rgba(210, 241, 132, 0.7));


  /* Category Color */
  --cat-cc-case: var(--cc-yellow-A-hex);
  /* --cat-cc-media:var(--cc-green-A-hex); */
  --cat-cc-knowledge: var(--cc-green-A-hex);
  --cat-cc-news: var(--cc-red-A-hex);
  --cat-cc-docs: var(--cc-blue-B-hex);

  /* Base Font Color */
  --base-font-color: var(--cc-gray-A-hex);

  /* Font Family */
  --ff-noto-sans: 'source-han-sans-japanese', "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", sans-serif;
  --ff-europa: 'europa', var(--ff-noto-sans);
  --font-jp: "BIZ UDPGothic", sans-serif;
  --font-en: "greycliff-cf", sans-serif;
  --font-en2: "Lato", sans-serif;

  /* Typography Set */
  /* text level */
  --tg-text-A-fs: 1.6rem;
  --tg-text-A-fw: 400;
  --tg-text-A-lh: 1.75;
  --tg-text-A-ls: .04em;

  /* Header Height */
  --header-height-base: 60;
  --header-height: calc(var(--header-height-base) * .1rem);

  /* Topicpath Height */
  --topicpath-height: 0;

  /* Transition Duration */
  --duration-hover-A: .5s;
  --duration-parallax-A: 1s;

  --duration-hover-B: 1s;

  /* Base Variable Width */
  --pc-min-size: 1000;
  --base-size: 1440;
  --variable-length: var(--base-size) * 100vw;

  /* PC Min Width */
  --pc-min-width: calc(var(--pc-min-size) * 1px);

  /* Shadow Base */
  --shadow-A: 0 0 .8rem rgba(0, 0, 0, .25);
  --shadow-B: .8rem 1.0rem 1.0rem rgba(var(--cc-gray-C-rgb), .10);
  --shadow-C: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);

  /* Margin Block */
  --mb-A: 19.0rem;
  --mb-B: 12.0rem;
  --mb-C: 10.0rem;
  --mb-D: 8.0rem;
  --mb-E: 6.0rem;
  --mb-F: 6.0rem;
  --mb-G: 4.8rem;

  /* Gap */
  --gap-A: 6.0rem;
  --gap-B: 4.0rem;
  --gap-C: 3.0rem;

  /*radius*/
  --radius-A: 1.0rem;

  /* Timing Function */
  --ttf-easeLinear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
  --ttf-easeDefault: cubic-bezier(0.250, 0.100, 0.250, 1.000);
  --ttf-easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000);
  --ttf-easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000);
  --ttf-easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000);

  --ttf-easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
  --ttf-easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --ttf-easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);

  --ttf-easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  --ttf-easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --ttf-easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);

  --ttf-easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
  --ttf-easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  --ttf-easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);

  --ttf-easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  --ttf-easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
  --ttf-easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);

  --ttf-easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
  --ttf-easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
  --ttf-easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);

  --ttf-easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
  --ttf-easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
  --ttf-easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);

  --ttf-easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
  --ttf-easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  --ttf-easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);

  --ttf-easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
  --ttf-easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  --ttf-easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

@media (width > 1024px) {
  :root.__scrolled {
    /* Scrolled Header Height */
    --header-height-base: 60;
  }
}

@media (width <=1024px) {
  :root {

    /* Header Height */
    --header-height-base: 40;

    /* Topicpath Height */
    --topicpath-height: 0;

    /* Base Variable Width */
    --base-size: 360;

    /* Typography Set */
    /* text level */
    --tg-text-A-fs: 1.2rem;
    --tg-text-A-fw: 400;
    --tg-text-A-lh: 1.75;
    --tg-text-A-ls: .12em;

    /* Shadow Base */
    --shadow-A: 0 0 .4rem rgba(0, 0, 0, .25);
    --shadow-B: .4rem .5rem .5rem rgba(var(--cc-gray-C-rgb), .10);

    /* Padding Inline */
    --pd-sp-10: 1.0rem;
    --pd-sp-15: 1.5rem;
    --pd-sp-20: 2.0rem;
    --pd-sp-25: 2.5rem;
    --pd-sp-30: 3.0rem;
    --pd-sp-35: 3.5rem;
    --pd-sp-40: 4.0rem;

    /* Margin Block */
    --mb-A: 10.0rem;
    --mb-B: 7.0rem;
    --mb-C: 7.0rem;
    --mb-D: 5.0rem;
    --mb-E: 4.0rem;
    --mb-F: 3.0rem;
    --mb-G: 3.0rem;

    /* Gap */
    --gap-A: 3.0rem;
    --gap-B: 3.0rem;
    --gap-C: 2.0rem;
  }
}