@charset "UTF-8";

/*--------------------------------
CSS打ち消し
--------------------------------*/
.staticArea h1 {
  font-size: initial;
  font-weight: initial;
  margin: initial;
  color: initial;
}

.staticArea h2 {
  width: initial;
  color: initial;
  font-size: initial;
  margin: initial;
  float: initial;
  clear: initial;
}

.staticArea h3 {
  width: initial;
  font-size: initial;
  font-weight: initial;
  margin: initial;
  float: initial;
  clear: initial;
}

.staticArea h1 span {
  font-size: initial;
  color: initial;
}

.staticArea p {
  font-size: initial;
  width: initial;
  margin: initial;
  float: initial;
  clear: initial;
}

.staticArea ul {
  width: initial;
  float: initial;
  clear: initial;
  margin: initial;
}

.staticArea ul li {
  margin: initial;
}

@media only screen and (max-width: 699px) {
.contentsBlocks h1 {
    float: initial;
    clear: initial;
}

.staticArea img {
    width: 100%;
    height: auto;
    vertical-align: baseline; /* 画像下の謎の余白を消す */
}

/*--------------------------------
全体
--------------------------------*/
/* 一部のモバイル端末で使われる、
テキストの自動拡大アルゴリズムを制御 */
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 改行 */
br {
  display: block;
  content: "";
  margin: 8px auto;/* 高さはここで変更 */
}

.l-br {
  display: block;
  content: "";
  margin: 8px auto;
}

/* コンテンツの左右の余白(左右各20pxずつ) */
.w-container {
  max-width: min(98%, 1120px);
  height: auto;
  margin: 0;
}


/*--------------------------------
レイアウト用 margin 余白セット →要素の外
--------------------------------*/
/* margin-top & bottom (上下に余白) */
.margin-topBottom-08 {
  margin: 0.5rem 0;
}
.margin-topBottom-16 {
  margin: 1.6rem 0;
}
.margin-topBottom-32 {
  margin: 3.2rem 0;
}
.margin-topBottom-48 {
  margin: 4.8rem 0;
}
.margin-topBottom-50 {
  margin-top: 5.0rem;
}
.margin-topBottom-64 {
  margin: 6.4rem 0;
}


/* margin-top (上に余白) */
.margin-top-08 {
  margin-top: 0.5rem;
}
.margin-top-16 {
  margin-top: 1.6rem;
}
.margin-top-32 {
  margin-top: 3.2rem;
}
.margin-top-48 {
  margin-top: 4.8rem;
}
.margin-top-50 {
  margin-top: 5.0rem;
}
.margin-top-64 {
  margin-top: 6.4rem;
}
.margin-top-80 {
  margin-top: 8.0rem;
}
.margin-top-100 {
  margin-top: 10rem;
}

/* margin-bottom (下に余白) */
.margin-bottom-08 {
  margin-bottom: 0.5rem;
}
.margin-bottom-16 {
  margin-bottom: 1.6rem;
}
.margin-bottom-32 {
  margin-bottom: 3.2rem;
}
.margin-bottom-48 {
  margin-bottom: 4.8rem;
}
.margin-bottom-50 {
  margin-bottom: 5.0rem;
}
.margin-bottom-64 {
  margin-bottom: 6.4rem;
}

/* margin-left & right (左右に余白) */
.margin-leftRight-08 {
  margin: 0 0.5rem;
}
.margin-leftRight-16 {
  margin: 0 1.6rem;
}
.margin-leftRight-32 {
  margin: 0 3.2rem;
}
.margin-leftRight-48 {
  margin: 0 4.8rem;
}
.margin-leftRight-64 {
  margin: 0 6.4rem;
}

/* margin-left (左に余白) */
.margin-left-08 {
  margin-left: 0.5rem;
}
.margin-left-16 {
  margin-left: 1.6rem;
}
.margin-left-24 {
  margin-left: 2.4rem;
}
.margin-left-32 {
  margin-left: 3.2rem;
}
.margin-left-48 {
  margin-left: 4.8rem;
}
.margin-left-64 {
  margin-left: 6.4rem;
}

/* margin-right (右に余白) */
.margin-right-08 {
  margin-right: 0.5rem;
}
.margin-right-16 {
  margin-right: 1.6rem;
}
.margin-right-32 {
  margin-right: 3.2rem;
}
.margin-right-48 {
  margin-right: 4.8rem;
}
.margin-right-64 {
  margin-right: 6.4rem;
}



/*--------------------------------
レイアウト用 padding 余白セット →要素の中
--------------------------------*/
/* padding-top (上に余白) */
.padding-top-08 {
  padding-top: 0.8rem;
}
.padding-top-16 {
  padding-top: 1.6rem;
}
.padding-top-32 {
  padding-top: 3.2rem;
}
.padding-top-50 {
  padding-top: 5.0rem;
}
.padding-top-64 {
  padding-top: 6.4rem;
}

/* padding-bottom (下に余白) */
.padding-bottom-16 {
  padding-bottom: 1.6rem;
}
.padding-bottom-32 {
  padding-bottom: 3.2rem;
}
.padding-bottom-50 {
  padding-bottom: 5.0rem;
}

/* padding-topBottom (上下に余白) */
.padding-topBottom-32 {
  padding: 3.2rem 0;
}

/*--------------------------------
レイアウト用 フォントカラー セット
--------------------------------*/
/* レイアウト用フォントカラー */



/*--------------------------------
レイアウト用 アイテムの配置 セット
--------------------------------*/
/* text-align セット */
  /* 中央寄せ */
.l-text-align__center {
  text-align: center;
}
  /* 左へ */
.l-text-align__left {
  text-align: left;
}
  /* 右へ */
.l-text-align__right {
  text-align: right;
}


/* float セット */
  /* 左へ */
.l-float__left {
  float: left;
}
  /* 右へ */
.l-float__right {
  float: right;
}

/*--------------------------------
flexbox セット
--------------------------------*/
  /* アイテム横並び(中央寄せ) */
.flexbox__center {
  display: flex;
  justify-content: center;
}

  /* アイテム横並び(左寄せ) */
.flexbox__left {
  display: flex;
  justify-content: flex-start;
}

  /* アイテム横並び(右寄せ) */
.flexbox__right {
  display: flex;
  justify-content: end;
}

  /* アイテム横並び(両端揃え) */
.flexbox__space-between {
  display: flex;
  justify-content: space-between;
}

.flexbox__space-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

  /* アイテム縦並び(中央寄せ) */
.flexbox__column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

  /* アイテム折り返し */
.flexbox__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

  /* flexbox各アイテム(子要素) */
.flexbox-item__shrink1 {
  flex-shrink: 1;
}
.flexbox-item__shrink2 {
  flex-shrink: 2;
}


/*--------------------------------
Grid セット
--------------------------------*/
  /* Grid(1列) */
  .grid_1columns {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 60px;
  }

  /* Grid(2列) */
  .grid_2columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 50px;
  }

  /* Grid(3列) */
.grid_3columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
}

  /* 真ん中 (アイテム垂直方向に) */
.align-self__center {
  align-self: center;
}


/*--------------------------------
画像トリミング セット
--------------------------------*/
  /* 画像のトリミングについて */
    /* 縮小して全体表示 */
    .object-fit__contain {
        object-fit: contain;
      }
        /* 中央位置でトリミング */
    .object-fit__cover {
      object-fit: cover;
    }

      /* 画像の表示位置 */
        /* 画像の左上 */
    .object-position__lefttop {
      object-position: top left;
    }
        /* 画像の右上 */
    .object-position__righttop {
      object-position: top right;
    }
        /* 画像の左下 */
    .object-position__leftbottom {
      object-position: bottom left;
    }
        /* 画像の右下 */
    .object-position__rightbottom {
      object-position: bottom right;
    }
  }