@charset "UTF-8";

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

Custom Properties CSS

・カスタムプロパティ

上記はここに記述する

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

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

  /* Color Code */
  --cc-black-A-hex:#1E1E28;
  --cc-black-A-rgb:30, 30, 40;
  --cc-black-B-hex:#464237;
  --cc-black-B-rgb:70, 66, 55;
  --cc-black-B-hex:#2C323F;
  --cc-black-B-rgb:44, 50, 63;
  --cc-green-A-hex:#224E40;
  --cc-green-A-rgb:34, 78, 64;
  --cc-green-B-hex:#396053;
  --cc-green-B-rgb:57, 96, 83;
  --cc-orange-A-hex:#D77850;
  --cc-orange-A-rgb:215, 120, 80;
  --cc-orange-B-hex:#DB8662;
  --cc-orange-B-rgb:219, 134, 98;
  --cc-red-A-hex:#D74A4A;
  --cc-red-A-rgb:215, 74, 74;

  --cc-gray-A-hex:#EBEBEB;
  --cc-gray-A-rgb:235, 235, 235;
  --cc-gray-B-hex:#d9d9d9; /* #EBEBEBに乗算を重ねた色 */
  --cc-gray-B-rgb:217, 217, 217; /* #EBEBEBに乗算を重ねた色 */
  --cc-gray-C-hex:#ccc;
  --cc-gray-C-rgb:204, 204, 204;
  --cc-gray-D-hex:#F3F3F3;
  --cc-gray-D-rgb:243, 243, 243;
  --cc-gray-E-hex:#b1b1b1;
  --cc-gray-E-rgb:177, 177, 177;
  --cc-gray-F-hex:#e1e1e1;
  --cc-gray-F-rgb:225, 225, 225;

  --cc-gold-A-hex:#A99F86;

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

  /* Font Family */
  --ff-noto-sans:'noto-sans-cjk-jp', "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", sans-serif;
  --ff-dnp_shuei-min:"dnp-shuei-mincho-pr6", sans-serif;
  --ff-bellefair:"bellefair", sans-serif;

  /* Typography Set */
  /* text level */
  --tg-text-A-fs:1.6rem;
  --tg-text-A-fw:500;
  --tg-text-A-lh:2.4;
  --tg-text-A-ls:.05em;

  /* Navigation Button Size */
  --navigation-button-size:calc(((100vw - var(--scrollbar-w)) - var(--body-line-size) * 12) * .5);

  /* Left Text Height */
  --left_text-height:84.0rem;

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

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

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

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

  /* Heade Logo Area Size */
  --logo-w:19.5rem;
  --logo-static-h:var(--logo-w);

  /* Body Padding */
  --body-padding:1.5rem;

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

  /* PC Min Width */
  --pc-min-width:calc(var(--pc-min-size) * 1px);
  --base-size:1440;
  --variable-length:var(--base-size) * 100vw;

  /* 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);

  /* Border Radius Base */
  --radius-A:1.0rem; /* KV / box big */
  --radius-B:.6rem; /* box small */
  --radius-C:2px; /* Button */

  /* Margin Block */
  --mb-A:20.0rem;
  --mb-B:16.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;

  /* 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) and (width <= 1000px) {
  :root {
    --navigation-button-size:calc(((var(--pc-min-width) - var(--scrollbar-w)) - var(--body-line-size) * 12) * .5);
  }
}
@media (width > 640px) {
  :root:has(body.is-scrolled) {
    --header-height-base:80;
  }
}
@media (width <= 640px) {
  :root {

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

    /* Heade Logo Area Size */
    --logo-w:14.0rem;
    --logo-static-h:11.0rem;

    /* Body Padding */
    --body-padding:1.0rem;

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

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

    /* Line Size */
    --body-line-size:7.5rem;

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

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

    /* Typography Set */
    /* text level */
    --tg-text-A-fs:1.4rem;
    --tg-text-A-lh:2.28;

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

    /* Border Radius Base */
    --radius-A:.6rem; /* KV */
    --radius-B:.4rem;

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

    /* Margin Block */
    --mb-A:11.2rem;
    --mb-B:8.0rem;
    --mb-C:8.0rem;
    --mb-D:4.0rem;
    --mb-E:4.0rem;
    --mb-F:3.0rem;
    --mb-G:3.2rem;

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