/* =======================================
   common.css (Utility classes)
   2024+ 汎用ユーティリティCSS
   ======================================= */

/* --- マージン --- */
.m0   { margin: 0; }
.mt0  { margin-top: 0; }
.mb0  { margin-bottom: 0; }
.ml0  { margin-left: 0; }
.mr0  { margin-right: 0; }

.mt5  { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }

.mb5  { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }

.ml10 { margin-left: 10px; }
.mr10 { margin-right: 10px; }

/* --- パディング --- */
.p0   { padding: 0; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }

.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }

.pl10 { padding-left: 10px; }
.pr10 { padding-right: 10px; }

.p10  { padding: 10px; }
.p20  { padding: 20px; }

/* --- テキスト整形 --- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.bold   { font-weight: bold; }
.normal { font-weight: normal; }
.italic { font-style: italic; }

.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }

/* --- 色系 --- */
.text-primary { color: #0070f3; }
.text-danger  { color: #e60033; }
.text-muted   { color: #666; }

.bg-light  { background-color: #f8f8f8; }
.bg-dark   { background-color: #222; color: #fff; }
.bg-primary{ background-color: #0070f3; color: #fff; }

/* --- レイアウト系 --- */
.d-block   { display: block; }
.d-inline  { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex    { display: flex; }
.flex-center   { display: flex; justify-content: center; align-items: center; }
.flex-between  { display: flex; justify-content: space-between; align-items: center; }

.w100 { width: 100%; }
.h100 { height: 100%; }
.max-w960 { max-width: 960px; margin-left: auto; margin-right: auto; }

/* --- 便利系 --- */
.hidden { display: none; }
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* --- レスポンシブ切り替え --- */
/* PCのみ表示（768px以上） */
.pc { display: block; }
.sp { display: none; }

@media screen and (max-width: 767px) {
  /* SPのみ表示（767px以下） */
  .pc { display: none; }
  .sp { display: block; }
}