@charset "utf-8";
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 *
 *
	Base for CSS
   :root, body, h1-h6, a, img
 *
 *
 * ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

:root {
  /* color */
  --color-blue: #005cca;
  --color-deep-blue: #003D86;
  --color-sky-blue: #79c4d8;
  --color-dark-blue: #1d2348;
  --color-yellow: #f7d776;
  --color-off-white: #fafbfd;
  --color-black: #333333;
  --color-gray: #efefef;
  --color-pale-light-blue: #d1f4f9;
  --color-red: #a91919;
  --color-box-shadow: #b4b4b4;

  --color-off-white-trans089: rgba(250, 251, 253, 0.89);
  --color-off-white-trans050: rgba(250, 251, 253, 0.50);

  --color-gray-trans080: rgba(250, 251, 253, 0.80);
  --color-pale-light-trans080: rgba(232, 248, 250, 0.80);
  --color-sub-blue-trans080: rgba(230, 239, 250, 0.80);

  /* font-size */
  /* pc */
  --fs-base--pc: 18px;
  --fs-s--pc: 16px;
  --fs-m--pc: 20px;
  --fs-l--pc: 26px;
  --fs-xl--pc: 35px;
  --fs-xxl--pc: 44px;
  --fs-lead--pc: 22px;
  --fs-h2--top-pc: 36px;
  --fs-h2--sub-pc: 36px;
  --fs-h3--sub-pc: 30px;
  --fs-h4--sub-pc: 24px;

  /* sp */
  --fs-base--sp: 16px;
  --fs-xs--sp: 12px;
  --fs-s--sp: 14px;
  --fs-m--sp: 18px;
  --fs-l--sp: 24px;
  --fs-xl--sp: 33px;
  --fs-xxl--sp: 42px;
  --fs-lead--sp: 20px;
  --fs-h2--top-sp: 24px;
  --fs-h2--sub-sp: 26px;
  --fs-h3--sub-sp: 22px;
  --fs-h4--sub-sp: 20px;

  /* spacing */
  --space-s--pc: 8px;
  --space-m--pc: 16px;
  --space-l--pc: 32px;
  --space-xl--pc: 48px;
  --space-xxl--pc: 64px;
  --space-max--pc: 80px;

  --space-s--sp: 4px;
  --space-m--sp: 15px;
  --space-l--sp: 28px;
  --space-xl--sp: 40px;
  --space-xxl--sp: 54px;
  --space-max--sp: 70px;

  /* spacing */
  --container--pc: 1200px;
  --container--pc--workplace: 910px;
  --container-padding--pc: 2rem;
  --container-padding--sp: 0.75rem;

  /* border-radius */
  --border-radius--20: 20px;
  --border-radius--30: 30px;
  --border-radius--40: 40px;
  --border-radius--50: 50px;
  --border-radius--60: 60px;

  /* font */
  --font-ja: "Noto Sans JP", YuGothic, "Material Symbols Outlined", sans-serif;
  --font-signature: "Yuji Mai", "Noto Sans JP", YuGothic, "Material Symbols Outlined", sans-serif;
  --font-en: "Inter", "Noto Sans JP", YuGothic, "Material Symbols Outlined", sans-serif;

  /* 飾りサイズのベース（カードの幅に追従） */
  --deco-large-w: clamp(180px, 38%, 380px);
  --deco-large-h: clamp(220px, 45%, 460px);
  --deco-dot-size: clamp(48px, 10%, 100px)
}

html {
  font-size: var(--fs-base--pc);
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* ヘッダーの高さ分設定 */
}

body {
  font-family: var(--font-ja);
  color: #333333;
  line-height: 1.8rem;
  box-sizing: border-box;
  background: url("/img/common/body__bg.png") no-repeat 50% 0/cover;
  background-attachment: fixed;
  background-color: var(--color-off-white-trans050);
  background-blend-mode: lighten;

}

h2,
h3 {
  text-align: center;
}

/* <= 768px */
@media screen and (max-width: 768px) {
  html {
    font-size: var(--fs-base--sp);
    scroll-padding-top: 65px;  /* ヘッダーの高さ分設定 */
  }

  body {
    background: transparent;
    background-color: var(--color-off-white);
    line-height: 1.7rem;

  }

  body::before {
    display: block;
    content: '';
    position: fixed;
    background-image: url(/img/common/body__bg--sp.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    z-index: -999;
  }


}