@charset "UTF-8";
@import url(reset.css);
@import url(layout/header.css);
@import url(layout/footer.css);
@import url(style_unit-cv.css);
@import url(basic.css);
@import url(jq_inview.css);
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Zen+Old+Mincho:wght@500;600;700;900&?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --main-color: #023266;
  --main-color-02: #273e84;
  --sub-color-01: #00336c;
  --sub-color-02: #001e4b;

  --color-set-01: #ffbf00; /*Yellow*/
  --color-set-02: #ff6b00; /*Orange 255,107,0*/
  --color-set-02-gradation: #ffa500;

  --color-red: #d90000;

  --bg-color-01: #e3f7ff;
  --bg-color-gray-01: #f6f6f6;
  --bg-color-gray-02: #1f1f1f; /*?*/
  --bg-color-sand: #fffaef;
  --bg-gradation-01: linear-gradient(-45deg, rgb(224, 237, 247), rgb(240, 247, 253)); /* Blue back : #E0EDF7-#F0F7FD */
  --bg-gradation-01-bold: linear-gradient(-45deg, rgb(225, 239, 252), rgb(235, 244, 253)); /* Blue back Bold : = #e1effc */
  --bg-gradation-01-bolder: linear-gradient(-45deg, rgb(218, 235, 251), rgb(225, 239, 252));
  --bg-gradation-02: linear-gradient(90deg, rgb(2, 50, 102), rgb(47, 74, 157)); /* Bolder Blue */
  --bg-blue: #e1effc;
  --bg-blue-bold: #daebfb;

  --text-color-bold: #151515;
  --text-color: #323232;
  --text-color-thin: #454545;
  --text-color-fog: #999;

  --font-family-minchou-01: "Zen Old Mincho", serif;
  --font-family-gothic-01: "Zen Kaku Gothic New", sans-serif;
  --font-family-robot: "Roboto", sans-serif;

  --border-radius-normal: 3px;
  --border-radius-bold: 5px;
  --border-radius-bolder: 8px;
  --border-radius-exbolder: 12px;

  --fillin-text-01: "仙台 社会保険・給与計算センター";

  --app-color-line: #06c755; /* LINE */

  --shadow-light-blue-rgba: rgba(19, 86, 95, 0.1); /*LightBlue*/
  --shadow-light-gray-rgba: rgba(100, 100, 100, 0.08); /*LightGlay*/
  --d-shadow-01: drop-shadow(0 0 10px rgb(0, 0, 0, 0.05));
  --b-shadow-01: 0 0 6px 3px var(--shadow-light-blue-rgba);
  --b-shadow-01-thin: 0 0 3px 2px var(--shadow-light-blue-rgba);
  --b-shadow-02: 0 0 6px 3px var(--shadow-light-gray-rgba);
  --bottom-shadow-01: 0px 4px 4px 1px rgba(19, 86, 95, 0.1); /*LightBlue*/
  --t-shadow-01: 0 0 10px rgba(0, 0, 0, 0.2);
  --t-shadow-02: 0 0 10px rgba(255, 255, 255, 1);

  --case-studies-color-shadow-01: rgba(210, 210, 210, 1);
  --case-studies-color-shadow-02: rgba(225, 225, 225, 1);

  --contents-padding-px-sp: 40px;
  --contents-padding-px-tb: 50px;
  --contents-padding-px-tbw: 60px;
  --contents-padding-px-pc: 80px;
  --contents-padding-px-pcw: 100px;
}
/*===============================================
 STYLES.CSS
=================================================
 Brake Points for Media Query
-------------------------------------------------
     ～419px                      : SP
  430～744px  (min-width: 430px)  : TB・WideSP
  745～959px  (min-width: 745px)  : WideTB
  960～1279px (min-width: 960px)  : PC
 1280px ～    (min-width: 1280px) : WidePC
===============================================*/
* {
  word-break: break-all;
}
html {
  overflow: auto;
  font-size: 62.5%;
}
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--text-color);
  font-size: 1.5rem;
  line-height: 1.7; /*
  overflow: hidden;*/
}

a {
  text-decoration: none;
  transition: 0.25s ease-in-out;
}

p {
  margin-bottom: 1em;
}
p:last-child {
  margin-bottom: 0;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* Zen Kkaku Gothic New @GoogleFont
---------------------------------*/ /*
.zen-kaku-gothic-new-light,
.zen-kaku-gothic-new-regular,
.zen-kaku-gothic-new-medium,
.zen-kaku-gothic-new-bold,
.zen-kaku-gothic-new-black {
 font-family: "Zen Kaku Gothic New", sans-serif;
 font-style: normal;
}
.zen-kaku-gothic-new-light  { font-weight: 300;}
.zen-kaku-gothic-new-regular{ font-weight: 400;}defult
.zen-kaku-gothic-new-medium { font-weight: 500;}****
.zen-kaku-gothic-new-bold   { font-weight: 700;}**
.zen-kaku-gothic-new-black  { font-weight: 900;}*
*/

/* Zen Old Mincho @GoogleFont
---------------------------------*/ /*
.zen-old-mincho-regular,
.zen-old-mincho-medium,
.zen-old-mincho-semibold,
.zen-old-mincho-bold,
.zen-old-mincho-black {
  font-family: "Zen Old Mincho", serif;
  font-style: normal;
}
.zen-old-mincho-regular { font-weight: 400;}
.zen-old-mincho-medium  { font-weight: 500;}*
.zen-old-mincho-semibold{ font-weight: 600;}**
.zen-old-mincho-bold    { font-weight: 700;}*
.zen-old-mincho-black   { font-weight: 900;}*
*/

/* Roboto @GoogleFont
---------------------------------*/ /*
// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name
.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
*/

/*-------------------------*/
@media screen and (min-width: 430px) /* TB・WideSP */ {
} /*-----------------------*/
@media screen and (min-width: 745px) /* WideTB */ {
  body {
    font-size: 1.7em;
  }
} /*-----------------------*/
@media screen and (min-width: 960px) /* PC */ {
} /*-----------------------*/
@media screen and (min-width: 1280px) /* WidePC */ {
  body {
    font-size: 1.8em;
  }
} /*=======================*/



/*-------------------------------------
  モーダルスクリプト用CSS読み込み
-------------------------------------*/
#modalOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}
#modalBox {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2em;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  text-align: center;
  min-width: 250px;
}
#modalBox p {
  margin-bottom: 1.5em;
  font-size: 1.2em;
}
#closeModal {
  background: #333;
  color: #fff;
  padding: 0.5em 1.2em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#closeModal:hover {
  background: #666;
}