@charset "UTF-8";
/* ------------------------------------------------
共通のCSSを記入していくファイルです。

font-family: 'Zen Maru Gothic', serif;
--------------------------------------------------- */

:root {
  --color-primary: #000;
  --color-bg: #fff;
  --color-headerText: #fff
}

html {
  /*  16px:62.5%=10px 以降、1rem = 10px */
  font-size: 62.5%;
}

body {
  /* paddingとborderを要素のwidthとheightに含む */
  box-sizing: border-box;
  /*  上下の行間を０にする*/
  line-height: 1.0;
  /*  文字のアンチエイリアス設定（文字がぼやけたりする現象）Chromeやサファリ*/
  -webkit-font-smoothing: antialiased;
  /*  文字のアンチエイリアス設定firefox*/
  -moz-osx-font-smoothing: grayscale;
  /*  文字詰めの設定*/
  font-feature-settings: "palt";
  font-size: 1.6rem;
  /* Googleフォント追加する */
  font-family: 'Arial', YuGothic, 'Yu Gothic', sans-serif;
  color: var(--color-primary);
}

*,
*:before,
*:after {
  /* inherit 親要素の指定を引き継ぐ。ここではhtmlにborder-boxを指定してるのでそれを子要素にも引き継ぐ設定にしている。 */
  box-sizing: inherit;
}

a {
  /*  aタグの下線を消す*/
  text-decoration: none;
  color: var(--color-primary);
}

img {
  /*  最大幅＝画像の元サイズ、画面幅が元の画像サイズより狭くなったら画面幅に合わせて縮小*/
  width: 100%;
  height: auto;
  /*  ブロック要素でimgを包んだ際、下側に生じる原因不明の余白ができた時の対策*/
  vertical-align: bottom;
}

ul,
li {
  list-style: none;
}


.inner {
  width: 92%;
  margin: 0 auto;
}

.flexB {
  display: flex;
  justify-content: space-between;
}



.flexE {
  display: flex;
  justify-content: flex-end;
}

.flexC {
  display: flex;
  flex-direction: column;
}

/* js インターセクションオブザーバーのCSS設定*/
.fadeIn {
  opacity: 0;
}

.fadeIn.active {
  opacity: 1;
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
    transition-duration: 1s;
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
    transition-duration: 1s;
  }
}

.contents .fadeIn.active {
  opacity: 0.9;
  animation: fadeIn_contents 3s;
}

@keyframes fadeIn_contents {
  0% {
    opacity: 0;
    transform: translateY(0);
    transition-duration: 1s;
  }

  100% {
    opacity: 0.9;
    transform: translateY(-50%);
    transition-duration: 1s;
  }
}

/* ----------------------
タイトルのスライドアニメーションの設定 
----------------------*/

.sec__title.slideTarget {
  clip-path: inset(0 100% 0 0);
  /* display: inline-block; */
}

.sec__title.slideTarget.is-show {
  animation: textanimation 2s 0s forwards;
}

@keyframes textanimation {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0);
  }
}