@charset "UTF-8";

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

Custom Properties CSS

・カスタムプロパティ

上記はここに記述する

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

/* Custom Properties
============================================================================= */
:root {
  --pc-size:640px;

	/* ScrollBar Width *JavascriptOverwrite */
	--scrollbar-w:0px;

  /* Color Code * rgba Example green-A/50% : rgb(from var(--cc-green-A) r g b / .5) */
  --cc-black-A:#00203D; /* 黒 */
  --cc-white-A:#F4F4F4; /* 白 */
  --cc-gray_text-A:#5E5E5E; /* グレー文字色 */
  --cc-gray_back-A:#E6E6E6; /* グレー背景 */
  --cc-gray_line-A:#DADADA; /* 線色 */
  --cc-green-A:#d2ff37;
  --cc-blue-A:#0080FF;
  --cc-red-A:#702020; /* 重要度の高いボタン・テキスト色 */
  --cc-red-B:#B90000; /* 緊急・重大なお知らせで使用する色 */

  /* Font Family */
  --ff-default:"Noto Sans JP", sans-serif;
  --ff-roboto:"Roboto Condensed", sans-serif;

  --fw-default-regular:400;
  --fw-default-bold:700;

  /* Typography Set */
  /* text level */
  --tg-text-A-fs:1.4rem;
  --tg-text-A-fw:500;
  --tg-text-A-lh:2;
  --tg-text-A-ls:.18em;
  @media (width <= 640px) {
  }

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

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

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

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

  @media (width <= 640px) {
    --header-height-base:50;
    --header-height-base-scrolled:var(--header-height-base);
  }
  &:has(body.is-scrolled) {
    --header-height-scrolled:calc(var(--header-height-base-scrolled) * .1rem);
    @media (width <= 640px) {
    }
  }

  /* Color Base */
  --base-color:var(--cc-black-A);
  --base-bg:var(--cc-white-A);

  /* Reverse Color Base */
  --base-color-reverse:var(--cc-white-A);
  --base-bg-reverse:var(--cc-black-A);

  /* Topicpath Height */
  --topicpath-height:0;
  @media (width <= 640px) {
    --topicpath-height:0;
  }

  /* Body Padding Block */
  --body-pd:2.4rem;
  @media (width <= 640px) {
    --body-pd:1.2rem;
  }

  /* PC Min Width */
  --pc-min-width:1000px;

  /* Margin Block */
  --mb-A:20.0rem; /* ■マージン極大 */
  --mb-B:16.0rem; /* ■マージン大 */
  --mb-C:14.4rem; /* ■マージン中 */
  --mb-D:12.0rem; /* ■マージン小 */
  --mb-E:10.4rem; /* ■マージン極小 */
  --mb-F:5.6rem; /* 見出し+テキスト間のマージン */
  --mb-G:3.6rem; /* ボタンと要素間が56pxのときのマージン（ボタンpadding-top分を差し引いた値） */
  --mb-H:5.6rem; /* 子ブロック間のマージン */
  @media (width <= 640px) {
    --mb-A:10.4rem;
    --mb-B:8.0rem;
    --mb-C:6.4rem;
    --mb-D:8.0rem;
    --mb-E:8.0rem;
    --mb-F:3.2rem;
    --mb-G:3.2rem;
    --mb-H:4.8rem;
  }

  /* Timing Function */
  --ttf-linear:cubic-bezier(0.250, 0.250, 0.750, 0.750);
  --ttf-default:cubic-bezier(0.250, 0.100, 0.250, 1.000);

  --ttf-ei:cubic-bezier(0.420, 0.000, 1.000, 1.000);
  --ttf-eo:cubic-bezier(0.000, 0.000, 0.580, 1.000);
  --ttf-eio:cubic-bezier(0.420, 0.000, 0.580, 1.000);

  --ttf-ei-quad:cubic-bezier(0.550, 0.085, 0.680, 0.530);
  --ttf-eo-quad:cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --ttf-eio-quad:cubic-bezier(0.455, 0.030, 0.515, 0.955);

  --ttf-ei-cubic:cubic-bezier(0.550, 0.055, 0.675, 0.190);
  --ttf-eo-cubic:cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --ttf-eio-cubic:cubic-bezier(0.645, 0.045, 0.355, 1.000);

  --ttf-ei-quart:cubic-bezier(0.895, 0.030, 0.685, 0.220);
  --ttf-eo-quart:cubic-bezier(0.165, 0.840, 0.440, 1.000);
  --ttf-eio-quart:cubic-bezier(0.770, 0.000, 0.175, 1.000);

  --ttf-ei-quint:cubic-bezier(0.755, 0.050, 0.855, 0.060);
  --ttf-eo-quint:cubic-bezier(0.230, 1.000, 0.320, 1.000);
  --ttf-eio-quint:cubic-bezier(0.860, 0.000, 0.070, 1.000);

  --ttf-ei-sine:cubic-bezier(0.470, 0.000, 0.745, 0.715);
  --ttf-eo-sine:cubic-bezier(0.390, 0.575, 0.565, 1.000);
  --ttf-eio-sine:cubic-bezier(0.445, 0.050, 0.550, 0.950);

  --ttf-ei-expo:cubic-bezier(0.950, 0.050, 0.795, 0.035);
  --ttf-eo-expo:cubic-bezier(0.190, 1.000, 0.220, 1.000);
  --ttf-eio-expo:cubic-bezier(1.000, 0.000, 0.000, 1.000);

  --ttf-ei-circ:cubic-bezier(0.600, 0.040, 0.980, 0.335);
  --ttf-eo-circ:cubic-bezier(0.075, 0.820, 0.165, 1.000);
  --ttf-eio-circ:cubic-bezier(0.785, 0.135, 0.150, 0.860);

  --ttf-ei-back:cubic-bezier(0.600, -0.280, 0.735, 0.045);
  --ttf-eo-back:cubic-bezier(0.175, 0.885, 0.320, 1.275);
  --ttf-eio-back:cubic-bezier(0.680, -0.550, 0.265, 1.550);

  @media (width <= 640px) {

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

    /* Navigation Button Size */
    --navigation-button-size:var(--header-height);

    /* SP fixed conversion Height */
    --sp-fixed-height:calc(0rem + env(safe-area-inset-bottom));

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