@charset "UTF-8";

/* ------------------------------------------------------------
	設定
------------------------------------------------------------ */
/* アセット
-------------------------------------------------------*/
:root {
  --color-main: #DB1F28;
  --color-sub: #333658;
  --color-sub2: #EC721A;
  --color-sub3: #AB927F;
  --color-bg1: #F8F3EF;
  --color-bg2: #F7F7F7;
  --color-grad: linear-gradient(90deg, rgba(236, 114, 26, 1), rgba(219, 31, 40, 1));
  --color-txt: #333;
  --color-wh: #fff;
  --font-base: "Noto Sans JP", Meiryo, sans-serif;
  --font-sub: "Lato", sans-serif;
  --lineHeight-xs: 1.2;
  --lineHeight-s: 1.4;
  --lineHeight-m: 1.6;
  --lineHeight-l: 2;
  --trans-min02: all .2s ease-out;
  --header-height-pc: 105px;
  --header-height-sp: 60px;
  --boxShadow: 0 6px 15px rgba(0, 0, 0, 0.16);
}


/* 汎用アニメーション
-------------------------------------------------------*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100px);
  }

  100% {
    transform: translateX(0);
  }
}


/* ------------------------------------------------------------
	全体
------------------------------------------------------------ */
/* html
-------------------------------------------------------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height-pc);
}

body {
  position: relative;
  max-width: 1920px;
  min-width: 1200px;
  width: 100%;
  margin: 0 auto;
  color: var(--color-txt);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  font-feature-settings: "palt";
  line-height: var(--lineHeight-l);
  letter-spacing: 0.1em;
  word-break: break-all;
}

@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 0;
  }

  body {
    min-width: 0;
  }
}


/* マテリアルアイコン
-------------------------------------------------------*/
.material-symbols-outlined {
  font-size: inherit;
}

.material-fill {
  font-variation-settings: 'FILL' 1,
}

.material-light {
  font-variation-settings: 'wght' 200,
}


/* inview
-------------------------------------------------------*/
.js-inview {
  opacity: 0;
}

.js-inview.is-show {
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}