@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:#1A1B12; /* 黒 */
  --cc-white-A:#ECECEC; /* 白 */
  --cc-white-B:#D9D9D9; /* 白 */
  --cc-gray-A:#8D8D8D; /* 灰色 */

  /* 事業用プリミティブカラー */
  --cc-shinshu-A:#AB3B3A; /* 真朱 サイン・ディスプレイ事業 */
  --cc-green-A:#227D51; /* 緑 昇華転写プリント事業 */
  --cc-natane-A:#A28C37; /* 菜種 シルクスクリーン・加工・縫製事業 */
  --cc-ruri-A:#005CAF; /* 瑠璃 藍染・アパレル事業 */
  --cc-seiheki-A:#A36336; /* 青碧 EC・デザイン・マーケティング事業 */
  --cc-taisha-A:#268785; /* 代赭 WEB・CGデザイン事業 */
  --cc-ayame-A:#6F3381; /* 菖蒲 建築デザイン・宿泊事業 */

  &:has(body.site_recruit) {
    --cc-black-A:#121F2E; /* 黒 */
    --cc-white-A:#fff; /* 白 */
    --cc-gray-A:#CDCDCD; /* 灰色 */
    --cc-gray-B:#6A6A6A; /* 灰色 */
  }

  /* Gradient color */
  /*--grad-A:linear-gradient(90deg, #4BA0E6 0%, #011475 100%);  アクセントカラー */
  --grad-A: url(/assets/images/common/textmask_blue.webp);  /* アクセントカラー */
  /* --grad-B:linear-gradient(90deg, #FFFC40 0%, #FF5917 100%); 採用アクセントカラー */
  --grad-B: url(/assets/images/common/textmask_orange.webp); /* 採用アクセントカラー */

  /* Font Family */
  --ff-default:dnp-shuei-gothic-kin-std, sans-serif; /* DNP 秀英角ゴシック金 */
  --ff-sgk: dnp-shuei-gothic-kin-std, sans-serif; /* DNP 秀英角ゴシック金 , 400 / 500 */
  --ff-nhgdp:neue-haas-grotesk-display, sans-serif; /* Neue Haas Grotesk Display Pro , 55 / 65 */
  --ff-ttcp:"tt-commons-pro", sans-serif; /* TT Commons Pro , 400 / 500 / 600 */

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

  /* 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:.25em;
  @media (width <= 640px) {
    --tg-text-A-fs:1.4rem;
    --tg-text-A-lh:2.2;
  }
  &:has(body.site_recruit) {
    --tg-text-A-fs:1.4rem;
    --tg-text-A-fw:500;
    --tg-text-A-lh:2.2;
    --tg-text-A-ls:.24em;
    @media (width <= 640px) {
      --tg-text-A-fs:1.3rem;
      --tg-text-A-lh:2;
    }
  }

  /* 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:128;
  --header-height-base-scrolled:80;
  --header-height:calc(var(--header-height-base) * .1rem);
  --header-height-scrolled:calc(var(--header-height-base) * .1rem);

  @media (width <= 640px) {
    --header-height-base:90;
    --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) {
    }
  }

  /* PC Global Menu open width */
  --pc-gm-open-width:96.0rem;
  &:has(body.site_recruit) {
    --pc-gm-open-width:60.0rem;
  }

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

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

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

  /* Margin Block */
  --mb-A:16.0rem;
  --mb-B:14.0rem;
  --mb-C:6.0rem;
  --mb-D:6.4rem;
  --mb-E:2.8rem;
  --mb-F:6.0rem;
  --mb-G:4.8rem;
  @media (width <= 640px) {
    --mb-A:10.0rem;
    --mb-B:10.0rem;
    --mb-C:8.0rem;
    --mb-D:4.0rem;
    --mb-E:3.2rem;
    --mb-F:3.0rem;
    --mb-G:3.2rem;
  }

  /* Shadow */
  --shadow-A:0 0 1.0rem hsl(from var(--cc-black-A) h s l / .3);
  @media (width <= 640px) {
    --shadow-A:0 0 .5rem hsl(from var(--cc-black-A) h s l / .3);
  }

  /* radius *recruit */
  --radius-A:2.8rem;
  @media (width <= 640px) {
   --radius-A:1.2rem;
  }

  /* 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:390;

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