@charset "UTF-8";
/* ========== Document Setting ========== */
/* ========== Color ========== */
/* ========== Font Family ========== */
/* ======================================================================
メディア・コンテナークエリ
====================================================================== */
/* ======================================================================
テキスト
====================================================================== */
/* ---------- テキスト設定（ショートハンド） ---------- */
/* ---------- 見出し（大） ---------- */
/* ---------- 見出し（中） ---------- */
/* ---------- 見出し（小） ---------- */
/* ---------- 見出し（極小） ---------- */
/* ---------- テキスト（通常） ---------- */
/* ---------- テキスト（小） ---------- */
/* ---------- パーマリンク ---------- */
/* ---------- ナビゲーション ---------- */
/* ---------- ラベル ---------- */
/* ---------- 欧文見出し（大） ---------- */
/* ---------- 欧文見出し（大） ---------- */
/* ---------- 読み上げ専用テキスト（スクリーンリーダー対応） ---------- */
/* ======================================================================
アニメーション
====================================================================== */
/* ---------- アニメーション（アンダーライン - 長さ拡大） ---------- */
/* ---------- アニメーション（アイコン - スライドアップ） ---------- */
/* ======================================================================
擬似要素 - テキストループスライダー
====================================================================== */
/* ======================================================================
下層ページヘッダー
====================================================================== */
/* ======================================================================
セクションコンテンツ
====================================================================== */
/* ======================================================================
ユーティリティー
====================================================================== */
/* ---------- インナー（コンテンツ幅の制限あり） ---------- */
/* ---------- インナー（コンテンツ幅の制限なし） ---------- */
/* ---------- インナー（セクション幅） ---------- */
/* ======================================================================
ポジション
====================================================================== */
/* ---------- ポジション設定（ショートハンド） ---------- */
/* ======================================================================
アイコン
====================================================================== */
/* ---------- アイコン（内部リンク） ---------- */
/* ---------- アイコン（内部リンク） ---------- */
/* ---------- アイコン（外部リンク） ---------- */
/* ---------- アイコン（中央配置） ---------- */
/* ---------- リンク下線（Black） ---------- */
/* ---------- リンク下線（Gray） ---------- */
/* ======================================================================
コンポーネント
====================================================================== */
/* ---------- ボタン（Japanese） ---------- */
/* ---------- ボタン（English） ---------- */
/* ---------- パーマリンク（Japanese） ---------- */
/* ---------- パーマリンク（English） ---------- */
/* ======================================================================
#firstview（ファーストビュー）
====================================================================== */
#firstview {
  overflow: hidden;
  width: 100%;
  padding-inline: max(40px, (100% - 1120px) / 2);
  padding-top: 164px;
}
@media (max-width: 767px) {
  #firstview {
    padding-inline: max(20px, (100% - 1120px) / 2);
  }
}
@media (max-width: 1079px) {
  #firstview {
    padding-top: 138px;
  }
}
@media (max-width: 767px) {
  #firstview {
    padding-top: 92px;
  }
}

#firstview .fv-header {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 48px;
  z-index: 1;
}
@media (max-width: 767px) {
  #firstview .fv-header {
    flex-direction: row-reverse;
    align-items: center;
    gap: 40px;
  }
}
#firstview .fv-header h1 img {
  width: 72px;
}
@media (max-width: 1079px) {
  #firstview .fv-header h1 img {
    width: 52px;
  }
}
@media (max-width: 767px) {
  #firstview .fv-header h1 img {
    width: 40px;
  }
}
#firstview .fv-header div {
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 92px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
@media (max-width: 1079px) {
  #firstview .fv-header div {
    font-size: 68px;
    letter-spacing: 0.02em;
  }
}
@media (max-width: 767px) {
  #firstview .fv-header div {
    font-size: 36px;
  }
}
#firstview .fv-header div span {
  display: inline-block;
}
#firstview .fv-header div span:first-of-type {
  color: #DB6145;
}
#firstview .fv-header div span:nth-child(5) {
  color: #F5A04E;
}
@media (max-width: 767px) {
  #firstview .fv-header div span {
    display: inline-block;
  }
}

#firstview .fv-slider {
  margin-top: -170px;
  margin-inline: calc(50% - 50vw);
}
@media (max-width: 1079px) {
  #firstview .fv-slider {
    margin-top: -128px;
  }
}
@media (max-width: 767px) {
  #firstview .fv-slider {
    margin-top: -44px;
  }
}
#firstview .fv-slider .fv-slide {
  width: 700px;
  margin-right: 64px;
}
@media (max-width: 767px) {
  #firstview .fv-slider .fv-slide {
    width: 336px;
    margin-right: 40px;
  }
}
#firstview .fv-slider .fv-slide:nth-of-type(odd) {
  margin-top: 52px;
}
@media (max-width: 767px) {
  #firstview .fv-slider .fv-slide:nth-of-type(odd) {
    margin-top: 20px;
  }
}

/* ======================================================================
#introduction（イントロダクション）
====================================================================== */
#introduction {
  position: relative;
  width: 100%;
  padding-inline: max(40px, (100% - 1120px) / 2);
  padding-block: 176px 284px;
  overflow: hidden;
  transition: all 0.2s;
  /* -- テキストループスライダー -- */
}
@media (max-width: 767px) {
  #introduction {
    padding-inline: max(20px, (100% - 1120px) / 2);
  }
}
@media (max-width: 767px) {
  #introduction {
    padding-block: 80px 148px;
  }
}
#introduction::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  display: block;
  width: 4580px;
  height: 105px;
  background: url(../img/common/animation/animation-text.svg) no-repeat center center/contain;
  padding-block: 40px;
  opacity: 0.95;
  mix-blend-mode: difference;
  z-index: 0;
  animation: animation-text-slider 80s infinite linear both;
}
@keyframes animation-text-slider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  #introduction::after {
    width: 2727px;
    height: 68px;
    padding-block: 20px;
  }
}
#introduction .wrapper {
  display: flex;
  justify-content: flex-end;
  gap: 48px 160px;
  margin-inline: auto 0;
  /* ----- 見出し ----- */
  /* ----- コンテンツ ----- */
}
@media (max-width: 767px) {
  #introduction .wrapper {
    flex-direction: column;
  }
}
#introduction .wrapper .heading {
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #DB6145;
  line-height: 2.25;
  letter-spacing: 0.06em;
}
#introduction .wrapper .content {
  position: relative;
  z-index: 0;
  /* -- 背景ぼかし -- */
  /* ----- リード文 ----- */
  /* ----- パーマリンク ----- */
}
#introduction .wrapper .content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  width: 869px;
  height: 912px;
  background: url(../img/page-top/introduction/bg-blur--pc.png) no-repeat center center/contain;
  z-index: -1;
}
@media (max-width: 767px) {
  #introduction .wrapper .content::before {
    width: 376px;
    height: 640px;
    background-image: url(../img/page-top/introduction/bg-blur--sp.png);
  }
}
#introduction .wrapper .content .lead {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 2.4;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  #introduction .wrapper .content .lead {
    font-size: 14px;
  }
}
#introduction .wrapper .content .permalink {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-bottom: 24px;
  /* -- ボタン下線 -- */
  /* -- 別窓アイコン -- */
  /* -- hover -- */
  margin-top: 88px;
}
@media (max-width: 767px) {
  #introduction .wrapper .content .permalink {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #introduction .wrapper .content .permalink {
    padding-bottom: 16px;
  }
}
#introduction .wrapper .content .permalink::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #2F2F2F;
  transition: width 0.2s;
  z-index: 1;
}
#introduction .wrapper .content .permalink::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #F5A04E;
  mask-image: url(../img/icon/icon--internal.svg);
  mask-size: 100% 100%;
  mask-position: center right;
  mask-repeat: no-repeat;
  margin-left: 16px;
}
@media (max-width: 767px) {
  #introduction .wrapper .content .permalink::after {
    width: 18px;
    height: 18px;
  }
}
#introduction .wrapper .content .permalink:hover::before {
  animation: animation-underline-grow 0.2s ease-in-out forwards;
}
@keyframes animation-underline-grow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#introduction .wrapper .content .permalink:hover::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}
@media (max-width: 767px) {
  #introduction .wrapper .content .permalink {
    margin-top: 64px;
  }
}

/* ======================================================================
#person（働く人）
====================================================================== */
#person {
  position: relative;
  width: 100%;
  padding-inline: max(40px, (100% - 1120px) / 2);
  padding-block: 160px 200px;
  transition: all 0.2s;
  /*-- 背景オーバーレイ -- */
  /* ========== #personContainer-01 ========== */
  /* ========== #personContainer-02 ========== */
}
@media (max-width: 767px) {
  #person {
    padding-inline: max(20px, (100% - 1120px) / 2);
  }
}
@media (max-width: 767px) {
  #person {
    padding-block: 80px;
  }
}
#person::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  mix-blend-mode: overlay;
  z-index: -1;
}
#person .wrapper {
  position: unset;
}
#person #personContainer-01 {
  width: 100%;
  display: flex;
  gap: 80px 160px;
  /* ----- リンク ----- */
}
@media (max-width: 767px) {
  #person #personContainer-01 {
    flex-direction: column;
  }
}
#person #personContainer-01 .section-content {
  width: 397px;
  flex-shrink: 1;
  /* ----- 見出し ----- */
  /* ----- リード文 ----- */
  /* ----- パーマリンク ----- */
}
#person #personContainer-01 .section-content .heading {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  padding-top: 52px;
  /* -- 装飾 -- */
}
#person #personContainer-01 .section-content .heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 12px;
  background: url(../img/decoration/decoration-section-heading.svg) no-repeat center center/contain;
}
#person #personContainer-01 .section-content .heading__ja {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .heading__ja {
    font-size: 20px;
  }
}
#person #personContainer-01 .section-content .heading__en {
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #DB6145;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .heading__en {
    font-size: 34px;
  }
}
#person #personContainer-01 .section-content .lead {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-top: 72px;
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .lead {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .lead {
    margin-top: 40px;
  }
}
#person #personContainer-01 .section-content .permalink {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-bottom: 24px;
  /* -- ボタン下線 -- */
  /* -- 別窓アイコン -- */
  /* -- hover -- */
  margin-top: 56px;
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .permalink {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .permalink {
    padding-bottom: 16px;
  }
}
#person #personContainer-01 .section-content .permalink::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #2F2F2F;
  transition: width 0.2s;
  z-index: 1;
}
#person #personContainer-01 .section-content .permalink::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #F5A04E;
  mask-image: url(../img/icon/icon--internal.svg);
  mask-size: 100% 100%;
  mask-position: center right;
  mask-repeat: no-repeat;
  margin-left: 16px;
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .permalink::after {
    width: 18px;
    height: 18px;
  }
}
#person #personContainer-01 .section-content .permalink:hover::before {
  animation: animation-underline-grow 0.2s ease-in-out forwards;
}
@keyframes animation-underline-grow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#person #personContainer-01 .section-content .permalink:hover::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content .permalink {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  #person #personContainer-01 .section-content {
    width: 100%;
  }
}
#person #personContainer-01 .person {
  position: relative;
  width: 563px;
  flex-shrink: 1;
  display: block;
  text-decoration: none;
  /* ----- 事業部名 ----- */
  /* ----- サムネイル ----- */
  /* ----- コンテンツ ----- */
  /* -- hover（画像） -- */
}
@media (max-width: 767px) {
  #person #personContainer-01 .person {
    width: 100%;
  }
}
#person #personContainer-01 .person .division {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #DB6145;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .division {
    font-size: 10px;
  }
}
#person #personContainer-01 .person .thumbnail {
  overflow: hidden;
  margin-top: 8px;
}
#person #personContainer-01 .person .thumbnail img {
  transform: scale(1);
  transition: transform 0.2s;
}
#person #personContainer-01 .person .content {
  position: relative;
  margin-top: -64px;
  margin-left: 32px;
  z-index: 1;
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content {
    margin-top: -48px;
    margin-left: 20px;
  }
}
#person #personContainer-01 .person .content .lead {
  display: inline;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content .lead {
    font-size: 16px;
  }
}
#person #personContainer-01 .person .content .lead span {
  display: block;
  width: fit-content;
  background-color: #FFFFFF;
}
#person #personContainer-01 .person .content .lead span:first-child {
  padding: 6px 12px 3px 12px;
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content .lead span:first-child {
    padding: 6px 8px 0 8px;
  }
}
#person #personContainer-01 .person .content .lead span:last-child {
  padding: 3px 12px 6px 12px;
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content .lead span:last-child {
    padding: 0 8px 6px 8px;
  }
}
#person #personContainer-01 .person .content .career {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #999999;
  padding-inline: 12px;
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content .career {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content .career {
    padding-inline: 0;
  }
}
#person #personContainer-01 .person .content .tag {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #F5A04E;
  padding: 4px 8px;
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content .tag {
    font-size: 10px;
  }
}
@media (max-width: 767px) {
  #person #personContainer-01 .person .content .tag {
    padding: 0 8px;
  }
}
#person #personContainer-01 .person:hover .thumbnail img {
  transform: scale(1.1);
}
#person #personContainer-02 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 80px;
  margin-top: 140px;
  /* ----- リンク ----- */
}
@media (max-width: 767px) {
  #person #personContainer-02 {
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin-top: 72px;
  }
}
#person #personContainer-02 .person {
  position: relative;
  display: block;
  text-decoration: none;
  /* ----- 事業部名 ----- */
  /* ----- サムネイル ----- */
  /* ----- コンテンツ ----- */
  /* -- hover（画像） -- */
}
@media (max-width: 767px) {
  #person #personContainer-02 .person {
    width: 72%;
  }
}
#person #personContainer-02 .person:nth-child(2n-1) {
  margin-inline: auto 0;
}
#person #personContainer-02 .person:nth-child(2n) {
  margin-inline: 0 auto;
}
#person #personContainer-02 .person .division {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #DB6145;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .division {
    font-size: 10px;
  }
}
#person #personContainer-02 .person .thumbnail {
  overflow: hidden;
  margin-top: 8px;
}
#person #personContainer-02 .person .thumbnail img {
  transform: scale(1);
  transition: transform 0.2s;
}
#person #personContainer-02 .person .content {
  position: relative;
  margin-top: -106px;
  z-index: 1;
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content {
    margin-top: -93px;
  }
}
#person #personContainer-02 .person .content .lead {
  display: inline;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content .lead {
    font-size: 16px;
  }
}
#person #personContainer-02 .person .content .lead span {
  display: block;
  width: fit-content;
  background-color: #FFFFFF;
}
#person #personContainer-02 .person .content .lead span:first-child {
  padding-top: 6px;
  padding-right: 12px;
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content .lead span:first-child {
    padding-top: 6px;
    padding-right: 8px;
  }
}
#person #personContainer-02 .person .content .lead span:last-child {
  padding-right: 12px;
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content .lead span:last-child {
    padding-right: 8px;
  }
}
#person #personContainer-02 .person .content .career {
  width: fit-content;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #999999;
  background-color: #FFFFFF;
  padding-inline: 0 10px;
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content .career {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content .career {
    padding-inline: 0 8px;
  }
}
#person #personContainer-02 .person .content .tag {
  width: fit-content;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #F5A04E;
  background-color: #FFFFFF;
  padding-inline: 0 10px;
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content .tag {
    font-size: 10px;
  }
}
@media (max-width: 767px) {
  #person #personContainer-02 .person .content .tag {
    padding-inline: 0 8px;
  }
}
#person #personContainer-02 .person:hover .thumbnail img {
  transform: scale(1.1);
}

/* ======================================================================
#workstyle（働く環境）
====================================================================== */
#workstyle {
  position: relative;
  width: 100%;
  padding-inline: max(40px, (100% - 1120px) / 2);
  padding-block: 120px 156px;
  overflow: hidden;
  transition: all 0.2s;
  /* ===== コンテナー01 ===== */
  /* ===== コンテナー02 ===== */
}
@media (max-width: 767px) {
  #workstyle {
    padding-inline: max(20px, (100% - 1120px) / 2);
  }
}
@media (max-width: 767px) {
  #workstyle {
    padding-block: 88px 80px;
  }
}
#workstyle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  opacity: 0.5;
  z-index: -1;
}
#workstyle .wrapper {
  display: flex;
  gap: 72px 126px;
}
@media (max-width: 767px) {
  #workstyle .wrapper {
    flex-direction: column;
  }
}
#workstyle #workstyleContainer-01 {
  width: 640px;
  flex-shrink: 1;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 {
    width: 100%;
  }
}
#workstyle #workstyleContainer-01 .section-content {
  /* ----- 見出し ----- */
  /* ----- リード文 ----- */
  /* ----- パーマリンク ----- */
}
#workstyle #workstyleContainer-01 .section-content .heading {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  padding-top: 52px;
  /* -- 装飾 -- */
}
#workstyle #workstyleContainer-01 .section-content .heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 12px;
  background: url(../img/decoration/decoration-section-heading.svg) no-repeat center center/contain;
}
#workstyle #workstyleContainer-01 .section-content .heading__ja {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .heading__ja {
    font-size: 20px;
  }
}
#workstyle #workstyleContainer-01 .section-content .heading__en {
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #DB6145;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .heading__en {
    font-size: 34px;
  }
}
#workstyle #workstyleContainer-01 .section-content .lead {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-top: 72px;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .lead {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .lead {
    margin-top: 40px;
  }
}
#workstyle #workstyleContainer-01 .section-content .permalink {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-bottom: 24px;
  /* -- ボタン下線 -- */
  /* -- 別窓アイコン -- */
  /* -- hover -- */
  margin-top: 56px;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .permalink {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .permalink {
    padding-bottom: 16px;
  }
}
#workstyle #workstyleContainer-01 .section-content .permalink::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #2F2F2F;
  transition: width 0.2s;
  z-index: 1;
}
#workstyle #workstyleContainer-01 .section-content .permalink::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #F5A04E;
  mask-image: url(../img/icon/icon--internal.svg);
  mask-size: 100% 100%;
  mask-position: center right;
  mask-repeat: no-repeat;
  margin-left: 16px;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .permalink::after {
    width: 18px;
    height: 18px;
  }
}
#workstyle #workstyleContainer-01 .section-content .permalink:hover::before {
  animation: animation-underline-grow 0.2s ease-in-out forwards;
}
@keyframes animation-underline-grow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#workstyle #workstyleContainer-01 .section-content .permalink:hover::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .section-content .permalink {
    margin-top: 40px;
  }
}
#workstyle #workstyleContainer-01 .viewmore {
  position: relative;
  max-width: 512px;
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 32px;
  padding-block: 40px;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .viewmore {
    max-width: 100%;
    gap: 16px;
    padding-block: 24px;
  }
}
#workstyle #workstyleContainer-01 .viewmore:first-of-type {
  margin-top: 80px;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .viewmore:first-of-type {
    margin-top: 56px;
  }
}
#workstyle #workstyleContainer-01 .viewmore::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #999999;
  transition: width 0.2s;
  z-index: 1;
}
#workstyle #workstyleContainer-01 .viewmore .symbol {
  width: 92px;
  height: 92px;
}
#workstyle #workstyleContainer-01 .viewmore .title {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .viewmore .title {
    font-size: 16px;
  }
}
#workstyle #workstyleContainer-01 .viewmore .label {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-inline: auto 0;
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-01 .viewmore .label {
    font-size: 12px;
  }
}
#workstyle #workstyleContainer-01 .viewmore .label::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #F5A04E;
  mask-image: url(../img/icon/icon--internal.svg);
  mask-size: 100% 100%;
  mask-position: center right;
  mask-repeat: no-repeat;
  margin-left: 0.5em;
}
#workstyle #workstyleContainer-01 .viewmore:hover::before {
  animation: animation-underline-grow 0.2s ease-in-out forwards;
}
@keyframes animation-underline-grow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#workstyle #workstyleContainer-01 .viewmore:hover .label::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}
#workstyle #workstyleContainer-02 {
  width: 33.90625vw;
  flex-shrink: 0;
  margin-top: -120px;
  margin-inline: auto calc(50% - 50vw);
}
@media (max-width: 767px) {
  #workstyle #workstyleContainer-02 {
    width: 100%;
    margin: 0 auto;
  }
}

/* ======================================================================
#data（数字で見るザイナス）
====================================================================== */
#data {
  position: relative;
  width: 100%;
  padding-inline: max(40px, (100% - 1120px) / 2);
  padding-block: 216px 120px;
  overflow: hidden;
  transition: all 0.2s;
  /* -- テキストループスライダー -- */
}
@media (max-width: 767px) {
  #data {
    padding-inline: max(20px, (100% - 1120px) / 2);
  }
}
@media (max-width: 767px) {
  #data {
    padding-block: 168px 88px;
  }
}
#data::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  mix-blend-mode: overlay;
  z-index: -1;
}
#data::after {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 4580px;
  height: 105px;
  background: url(../img/common/animation/animation-text.svg) no-repeat center center/contain;
  padding-block: 40px;
  opacity: 0.95;
  mix-blend-mode: difference;
  z-index: 0;
  animation: animation-text-slider 80s infinite linear both;
  z-index: 1;
}
@keyframes animation-text-slider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  #data::after {
    width: 2727px;
    height: 68px;
    padding-block: 20px;
  }
}
#data .wrapper {
  display: flex;
  align-items: flex-start;
  gap: 64px 104px;
  /* ----- サムネイル ----- */
  /* ----- コンテンツ ----- */
}
@media (max-width: 767px) {
  #data .wrapper {
    flex-direction: column-reverse;
  }
}
#data .wrapper .thumbnail {
  width: 480px;
  flex-shrink: 1;
}
@media (max-width: 767px) {
  #data .wrapper .thumbnail {
    width: 100%;
  }
}
#data .wrapper .section-content {
  width: 536px;
  flex-shrink: 1;
  /* ----- 見出し ----- */
  /* ----- リード文 ----- */
  /* ----- パーマリンク ----- */
}
#data .wrapper .section-content .heading {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  padding-top: 52px;
  /* -- 装飾 -- */
}
#data .wrapper .section-content .heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 12px;
  background: url(../img/decoration/decoration-section-heading.svg) no-repeat center center/contain;
}
#data .wrapper .section-content .heading__ja {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #data .wrapper .section-content .heading__ja {
    font-size: 20px;
  }
}
#data .wrapper .section-content .heading__en {
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #DB6145;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #data .wrapper .section-content .heading__en {
    font-size: 34px;
  }
}
#data .wrapper .section-content .lead {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-top: 72px;
}
@media (max-width: 767px) {
  #data .wrapper .section-content .lead {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #data .wrapper .section-content .lead {
    margin-top: 40px;
  }
}
#data .wrapper .section-content .permalink {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-bottom: 24px;
  /* -- ボタン下線 -- */
  /* -- 別窓アイコン -- */
  /* -- hover -- */
  margin-top: 56px;
}
@media (max-width: 767px) {
  #data .wrapper .section-content .permalink {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #data .wrapper .section-content .permalink {
    padding-bottom: 16px;
  }
}
#data .wrapper .section-content .permalink::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #2F2F2F;
  transition: width 0.2s;
  z-index: 1;
}
#data .wrapper .section-content .permalink::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #F5A04E;
  mask-image: url(../img/icon/icon--internal.svg);
  mask-size: 100% 100%;
  mask-position: center right;
  mask-repeat: no-repeat;
  margin-left: 16px;
}
@media (max-width: 767px) {
  #data .wrapper .section-content .permalink::after {
    width: 18px;
    height: 18px;
  }
}
#data .wrapper .section-content .permalink:hover::before {
  animation: animation-underline-grow 0.2s ease-in-out forwards;
}
@keyframes animation-underline-grow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#data .wrapper .section-content .permalink:hover::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}
@media (max-width: 767px) {
  #data .wrapper .section-content .permalink {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  #data .wrapper .section-content {
    width: 100%;
  }
}

/* ======================================================================
#faq（よくある質問）
====================================================================== */
#faq {
  position: relative;
  width: 100%;
  padding-inline: max(40px, (100% - 1120px) / 2);
  transition: all 0.2s;
}
@media (max-width: 767px) {
  #faq {
    padding-inline: max(20px, (100% - 1120px) / 2);
  }
}
#faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  mix-blend-mode: overlay;
  z-index: -1;
}
#faq .wrapper {
  display: flex;
  align-items: center;
  border-block: 1px solid #DB6145;
  padding-block: 24px;
  /* ----- 見出し ----- */
  /* ----- リード文 ----- */
  /* ----- パーマリンク ----- */
}
@media (max-width: 767px) {
  #faq .wrapper {
    flex-direction: column;
    border: 1px solid #DB6145;
    padding: 32px 20px;
  }
}
#faq .wrapper .heading {
  flex: 0 0 auto;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 12px;
  border-right: 1px solid #DB6145;
  padding-inline: 46px 64px;
}
@media (max-width: 767px) {
  #faq .wrapper .heading {
    width: 100%;
    height: auto;
    gap: 6px;
    border-right: none;
    border-bottom: 1px solid #DB6145;
    padding: 0 0 44px 0;
  }
}
#faq .wrapper .heading__ja {
  width: fit-content;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.5;
  letter-spacing: 0.06em;
  background-color: #DB6145;
  padding: 4px 8px;
}
@media (max-width: 767px) {
  #faq .wrapper .heading__ja {
    font-size: 20px;
  }
}
#faq .wrapper .heading__en {
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #DB6145;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
#faq .wrapper .lead {
  flex: 1 1 auto;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 2;
  letter-spacing: 0.04em;
  padding-inline: 64px;
}
@media (max-width: 767px) {
  #faq .wrapper .lead {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #faq .wrapper .lead {
    padding: 24px 0;
  }
}
#faq .wrapper .permalink {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-block: 8px;
  /* -- 別窓アイコン -- */
  /* -- hover -- */
}
@media (max-width: 767px) {
  #faq .wrapper .permalink {
    font-size: 12px;
    padding-block: 0 16px;
  }
}
#faq .wrapper .permalink::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #2F2F2F;
  mask-image: url(../img/icon/icon--internal.svg);
  mask-size: 100% 100%;
  mask-position: center right;
  mask-repeat: no-repeat;
  margin-left: 16px;
}
@media (max-width: 767px) {
  #faq .wrapper .permalink::after {
    width: 18px;
    height: 18px;
  }
}
#faq .wrapper .permalink:hover::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}
@media (max-width: 767px) {
  #faq .wrapper .permalink {
    margin-inline: auto 0;
  }
  #faq .wrapper .permalink::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 1px;
    border-radius: 1px;
    background-color: #2F2F2F;
    transition: width 0.2s;
    z-index: 1;
  }
  #faq .wrapper .permalink:hover::before {
    animation: animation-underline-grow 0.2s ease-in-out forwards;
  }
  @keyframes animation-underline-grow {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }
}

/* ======================================================================
#magazine（もっと知りたい、ザイナスのこと）
====================================================================== */
#magazine {
  background: linear-gradient(white 0%, rgba(255, 255, 255, 0) 90%);
  padding-block: 160px;
  width: 100%;
  padding-inline: max(40px, (100% - 1120px) / 2);
  transition: all 0.2s;
}
@media (max-width: 767px) {
  #magazine {
    padding-inline: max(20px, (100% - 1120px) / 2);
  }
}
@media (max-width: 767px) {
  #magazine {
    padding-block: 160px 120px;
  }
}
#magazine .wrapper {
  display: flex;
  gap: 56px 68px;
  /* ----- コンテンツ01 ----- */
  /* ----- コンテンツ02 ----- */
}
@media (max-width: 767px) {
  #magazine .wrapper {
    flex-direction: column;
  }
}
#magazine .wrapper .section-content {
  width: 388px;
  flex-shrink: 1;
  /* ----- 見出し ----- */
  /* ----- リード文 ----- */
  /* ----- パーマリンク ----- */
}
#magazine .wrapper .section-content .heading {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  padding-top: 52px;
  /* -- 装飾 -- */
}
#magazine .wrapper .section-content .heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 12px;
  background: url(../img/decoration/decoration-section-heading.svg) no-repeat center center/contain;
}
#magazine .wrapper .section-content .heading__ja {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .heading__ja {
    font-size: 20px;
  }
}
#magazine .wrapper .section-content .heading__en {
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #DB6145;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .heading__en {
    font-size: 34px;
  }
}
#magazine .wrapper .section-content .lead {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-top: 72px;
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .lead {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .lead {
    margin-top: 40px;
  }
}
#magazine .wrapper .section-content .permalink {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-bottom: 24px;
  /* -- ボタン下線 -- */
  /* -- 別窓アイコン -- */
  /* -- hover -- */
  margin-top: 56px;
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .permalink {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .permalink {
    padding-bottom: 16px;
  }
}
#magazine .wrapper .section-content .permalink::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #2F2F2F;
  transition: width 0.2s;
  z-index: 1;
}
#magazine .wrapper .section-content .permalink::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #F5A04E;
  mask-image: url(../img/icon/icon--internal.svg);
  mask-size: 100% 100%;
  mask-position: center right;
  mask-repeat: no-repeat;
  margin-left: 16px;
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .permalink::after {
    width: 18px;
    height: 18px;
  }
}
#magazine .wrapper .section-content .permalink:hover::before {
  animation: animation-underline-grow 0.2s ease-in-out forwards;
}
@keyframes animation-underline-grow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#magazine .wrapper .section-content .permalink:hover::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content .permalink {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  #magazine .wrapper .section-content {
    width: 100%;
  }
}
#magazine .wrapper .magazine-content {
  width: 664px;
  flex-shrink: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  /* ----- アイテム ----- */
}
@media (max-width: 1079px) {
  #magazine .wrapper .magazine-content {
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
  }
}
#magazine .wrapper .magazine-content .item {
  display: block;
  text-decoration: none;
  /* ----- サムネイル画像 ----- */
  /* ----- 見出し ----- */
  /* ----- リード文 ----- */
  /* -- hover -- */
}
#magazine .wrapper .magazine-content .item__thumbnail {
  overflow: hidden;
}
#magazine .wrapper .magazine-content .item__thumbnail img {
  transition: transform 0.2s;
}
#magazine .wrapper .magazine-content .item__heading {
  display: inline-flex;
  align-items: center;
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-top: 24px;
  /* -- 別窓アイコン -- */
}
@media (max-width: 767px) {
  #magazine .wrapper .magazine-content .item__heading {
    font-size: 16px;
  }
}
#magazine .wrapper .magazine-content .item__heading::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-self: center;
  width: 1em;
  height: 1em;
  background-color: #2F2F2F;
  mask-image: url(../img/icon/icon--external.svg);
  mask-size: 100% 100%;
  mask-position: right center;
  mask-repeat: no-repeat;
  margin-left: 0.5em;
}
#magazine .wrapper .magazine-content .item__lead {
  text-align: left;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #2F2F2F;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-top: 20px;
}
#magazine .wrapper .magazine-content .item:hover .item__thumbnail > img {
  transform: scale(1.1);
}
#magazine .wrapper .magazine-content .item:hover .item__heading::after {
  animation: animation-icon-up 0.2s ease-in-out forwards;
}
@keyframes animation-icon-up {
  0% {
    mask-position: right top 1.25em;
  }
  100% {
    mask-position: right center;
  }
}

/*# sourceMappingURL=index.css.map */