@charset "utf-8";

/* =====================================================
   Utilities
   - 小物ユーティリティ専用
===================================================== */

html {
  font-size: 10px;
  /*font-size: 0.5208333vw;*/
}
body {
  font-size: 1.6rem;
}
/* Hover（古い互換は削除） */
a:hover img {
  opacity: 0.8;
}

/* Margin Bottom */
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb45 {
  margin-bottom: 45px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb60 {
  margin-bottom: 60px;
}
.mb70 {
  margin-bottom: 70px;
}
.mb80 {
  margin-bottom: 80px;
}
.mb90 {
  margin-bottom: 90px;
}
.mb100 {
  margin-bottom: 100px;
}

/* Margin Right */
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mr40 {
  margin-right: 40px;
}

/* Text Align */
.tal {
  text-align: left;
}
.tac {
  text-align: center;
}
.tar {
  text-align: right;
}

/* Font weight / size */
.st {
  font-weight: 700;
} /* bold固定に寄せる */

.fs16 {
  font-size: 16px;
}
.fs18 {
  font-size: 18px;
}
.fs20 {
  font-size: 20px;
}
.fs22 {
  font-size: 22px;
}
.fs24 {
  font-size: 24px;
}

.fw300 {
  font-weight: 300;
}
.fw400 {
  font-weight: 400;
}
.fw500 {
  font-weight: 500;
}
.fw600 {
  font-weight: 600;
}
.fw700 {
  font-weight: 700;
}
.fw800 {
  font-weight: 800;
}

/* Float（レガシー対応。新規ではflex/grid推奨） */
.fl {
  float: left;
}
.fr {
  float: right;
}

/* Flex*/
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex_not_justify {
  display: flex;
  flex-wrap: wrap;
}

/*===========
inview
===========*/

.inview {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 1s;
}
.inview.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
/* ズレ表示用sample */
.works_list .parts:nth-child(2) {
  transition-delay: 0.2s;
}
.works_list .parts:nth-child(3) {
  transition-delay: 0.4s;
}

/* font family*/
.f_hee {
  font-family: "Heebo", sans-serif;
  font-optical-sizing: auto;
}
.f_noto {
  font-family: "Noto Sans JP", sans-serif;
}

/* SP限定ユーティリティ（ブレークポイントは layout.css と同期） */
@media screen and (max-width: 768px) {
  .sp_tac {
    text-align: center !important;
  }
  .sp_tar {
    text-align: right !important;
  }

  .sp_mb15 {
    margin-bottom: 15px !important;
  }
  .sp_mb20 {
    margin-bottom: 20px !important;
  }
  .sp_mb30 {
    margin-bottom: 30px !important;
  }
  .sp_mb40 {
    margin-bottom: 40px !important;
  }
  .sp_mb45 {
    margin-bottom: 45px !important;
  }
  .sp_mb50 {
    margin-bottom: 50px !important;
  }
  .sp_mb60 {
    margin-bottom: 60px !important;
  }
  .sp_mb70 {
    margin-bottom: 70px !important;
  }
  .sp_mb80 {
    margin-bottom: 80px !important;
  }
  .sp_mb90 {
    margin-bottom: 90px !important;
  }
  .sp_mb100 {
    margin-bottom: 100px !important;
  }
}