@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: .2s;
}
.works_list .parts:nth-child(3) {
  transition-delay: .4s;
}


/* 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; }
}