/**
 * フォントのインポート
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');

/**
 * フォント変数の定義
 */
:root {
  /* フォントファミリー変数 */
  --font-family-primary: 'Noto Sans JP', sans-serif;
  --font-family-dancing: 'Dancing Script', cursive;
  --font-family-mincho: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --font-family-secondary: Arial, sans-serif;
  
  /* フォントサイズ変数 */
  --font-size-base: 16px;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;
  --font-size-4xl: 4rem;
}

/**
 * フォントユーティリティクラス
 */
.font-primary {
  font-family: var(--font-family-primary);
}

.font-dancing {
  font-family: var(--font-family-dancing);
}

.font-mincho {
  font-family: var(--font-family-mincho);
}

.font-secondary {
  font-family: var(--font-family-secondary);
}

.font-weight-light {
  font-weight: 300;
}

.font-weight-normal {
  font-weight: 400;
}

.font-weight-medium {
  font-weight: 500;
}

.font-weight-bold {
  font-weight: 700;
}

/**
 * 見出しのベーススタイル
 */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-family: var(--font-family-primary);
  font-weight: 500;
  line-height: 1.4;
}

/**
 * ブラウザ互換性対策
 */
@supports not (font-family: 'Noto Sans JP') {
  :root {
    --font-family-primary: sans-serif;
  }
}

/* -------------------------------------------------------------------------- */
/*	font
/* -------------------------------------------------------------------------- */
.headline {
  margin: 0 auto 30px;
  text-align: center;
  width: fit-content;
}

.headline2 {
  margin: 0 0 30px;
  text-align: left;
}

.headline3 {
  margin: 0 0 30px;
  text-align: right;
}
h1 {
  position: relative;
  height: 100%;
  
}
h2 {
  font-size: 2rem;
  font-weight: 500;
  color: var(--btn-text-color);
  width: fit-content;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1.5em;
}

h2 span {
  display: block;
  color: var(--primary-bg-color);
  font-family: var(--font-family-dancing);
  font-weight: 400;
  text-transform: capitalize;
  font-size: 2rem;
}

h3 {
  color: var(--border-color);
  font-size: 4em;
  font-family: var(--font-family-dancing);
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
}

h3 span {
  display: block;
  color: var(--secondary-color);
  font-size: 1.4rem;
  font-family: var(--font-family-mincho);
  font-weight: 300;
}

/* #Company h3 {
  color: var(--btn-text-color);
} */

#Customers h3 span {
  font-weight: 600;
  font-size: 2rem;
  color: var(--primary-text-color);
}

/* #Customers h3 {
  color: var(--color-blue2);
  line-height: 1.2;
} */

h4 {
  font-family: var(--font-family-mincho);
  font-weight: 600;
  font-style: normal;
  font-size: 1.8em;
}

h5 {
  font-weight: 500;
  font-size: 1.5em;
}
body.service .example-items h5 {
  font-weight: 400;
}
h6 {
  font-family: var(--font-family-dancing);
  font-weight: 600;
  font-size: 3em;
}

.font-sizeL {
  font-size: 1.8em;
}
.highlight01 {
  background: linear-gradient(
      transparent 50%, 
      rgba(var(--secondary-color-rgb), 0.7) 50%
  );
}