/* ========== 幅・箱系 ========== */
.w100p  { width:100%; }
.w50p   { width:50%; }
.maxw640  { max-width:640px; }
.maxw960  { max-width:960px; }
.maxw1200 { max-width:1200px; }
.minw200  { min-width:200px; }
.hauto  { height:auto; }

/* ========== margin（px）========== */
.m0  { margin:0; }
.m8  { margin:8px; }
.m12 { margin:12px; }
.m16 { margin:16px; }
.m20 { margin:20px; }
.m24 { margin:24px; }
.m32 { margin:32px; }
.mt8  { margin-top:8px; }   .mr8  { margin-right:8px; }
.mb8  { margin-bottom:8px; } .ml8  { margin-left:8px; }
.mt12 { margin-top:12px; }  .mr12 { margin-right:12px; }
.mb12 { margin-bottom:12px; }.ml12 { margin-left:12px; }
.mt16 { margin-top:16px; }  .mr16 { margin-right:16px; }
.mb16 { margin-bottom:16px; }.ml16 { margin-left:16px; }
.mt20 { margin-top:20px; }  .mr20 { margin-right:20px; }
.mb20 { margin-bottom:20px; }.ml20 { margin-left:20px; }
.mt24 { margin-top:24px; }  .mr24 { margin-right:24px; }
.mb24 { margin-bottom:24px; }.ml24 { margin-left:24px; }
.mt32 { margin-top:32px; }  .mr32 { margin-right:32px; }
.mb32 { margin-bottom:32px; }.ml32 { margin-left:32px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb60 { margin-bottom:60px; }
.mb70 { margin-bottom:70px; }
.mb80 { margin-bottom:80px; }
.mb90 { margin-bottom:90px; }
.mb100 { margin-bottom:100px; }
.mb110 { margin-bottom:110px; }
.mb120 { margin-bottom:120px; }
.mb130 { margin-bottom:130px; }

/* ========== padding（px）========== */
.p0  { padding:0; }
.p8  { padding:8px; }
.p12 { padding:12px; }
.p16 { padding:16px; }
.p20 { padding:20px; }
.p24 { padding:24px; }
.p32 { padding:32px; }
.pt8  { padding-top:8px; }   .pr8  { padding-right:8px; }
.pb8  { padding-bottom:8px; }.pl8  { padding-left:8px; }
.pt12 { padding-top:12px; }  .pr12 { padding-right:12px; }
.pb12 { padding-bottom:12px; }.pl12 { padding-left:12px; }
.pt16 { padding-top:16px; }  .pr16 { padding-right:16px; }
.pb16 { padding-bottom:16px; }.pl16 { padding-left:16px; }
.pt20 { padding-top:20px; }  .pr20 { padding-right:20px; }
.pb20 { padding-bottom:20px; }.pl20 { padding-left:20px; }

/* ========== border ========== */
.b0 { border:none; }
.b1 { border:1px solid currentColor; }
.bt1 { border-top:1px solid currentColor; }
.br1 { border-right:1px solid currentColor; }
.bb1 { border-bottom:1px solid currentColor; }
.bl1 { border-left:1px solid currentColor; }

/* 色つけたいとき */
.bcGray300 { border-color:#D1D5DB; }
.bcGray500 { border-color:#6B7280; }
.bcPrimary { border-color:#2563EB; }

/* ========== radius ========== */
.r0  { border-radius:0; }
.r4  { border-radius:4px; }
.r8  { border-radius:8px; }
.r12 { border-radius:12px; }
.r16 { border-radius:16px; }
.round { border-radius:9999px; }

/* ========== background-color ========== */
.bgWhite   { background:#FFFFFF; }
.bgBlack   { background:#111111; }
.bgGray50  { background:#F9FAFB; }
.bgGray100 { background:#F3F4F6; }
.bgGray200 { background:#E5E7EB; }
.bgPrimary { background:#2563EB; }
.bgAccent  { background:#F59E0B; }

/* ========== 文字系 ========== */
/* font-size は rem。ブラウザ標準16pxを基準にしています。*/
.fs12 { font-size:0.75rem; }   /* 12px */
.fs14 { font-size:0.875rem; }  /* 14px */
.fs16 { font-size:1rem; }      /* 16px */
.fs18 { font-size:1.125rem; }  /* 18px */
.fs20 { font-size:1.25rem; }   /* 20px */
.fs24 { font-size:1.5rem; }    /* 24px */
.fs28 { font-size:1.75rem; }   /* 28px */
.fs32 { font-size:2rem; }      /* 32px */

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

.cBase     { color:#111111; }
.cMuted    { color:#6B7280; }
.cWhite    { color:#FFFFFF; }
.cPrimary  { color:#2563EB; }
.cAccent   { color:#F59E0B; }
.text-aqua { color:#0fcceb; }
.text-sky { color: #01c9ea; }
.text-gray-800 { color: #323232; }
.text-gray-700 { color: #505050; }
.text-gray-be { color: #bebebe; }

.lh130 { line-height:1.3; }
.lh150 { line-height:1.5; }
.lh160 { line-height:1.6; }
.lh180 { line-height:1.8; }

.taL { text-align:left; }
.taC { text-align:center; }
.taR { text-align:right; }
.taJ { text-align:justify; }

/* ========== 便利系（少しだけ追加）========== */
.block { display:block; }
.inline { display:inline; }
.flex { display:flex; }
.aiC { align-items:center; }
.jcC { justify-content:center; }
.jcB { justify-content:space-between; }
.gap8  { gap:8px; }
.gap12 { gap:12px; }
.gap16 { gap:16px; }

.shadowSm { box-shadow:0 1px 2px rgba(0,0,0,.08); }
.shadowMd { box-shadow:0 4px 12px rgba(0,0,0,.12); }
.shadowLg { box-shadow:0 10px 24px rgba(0,0,0,.16); }