@charset "utf-8";

/*--------------------------------------------------------------------
  basis.css - ユーティリティクラス
--------------------------------------------------------------------*/

/* ── Margin Bottom ── */
.mb00 { margin-bottom:  0px !important; }
.mb05 { margin-bottom:  5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb100 { margin-bottom: 100px !important; }

/* ── Margin Top ── */
.mt00 { margin-top:  0px !important; }
.mt05 { margin-top:  5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }

/* ── Margin Left / Right ── */
.ml00 { margin-left:  0px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.mr00 { margin-right:  0px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mla  { margin-left: auto !important; }
.mra  { margin-right: auto !important; }

/* ── Padding ── */
.pb00 { padding-bottom:  0px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pt00 { padding-top:  0px !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pl00 { padding-left:  0px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pr00 { padding-right:  0px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }

/* ── Width (%) ── */
.w25  { width: 25% !important; }
.w30  { width: 30% !important; }
.w33  { width: 33.3% !important; }
.w40  { width: 40% !important; }
.w45  { width: 45% !important; }
.w48  { width: 48% !important; }
.w50  { width: 50% !important; }
.w60  { width: 60% !important; }
.w66  { width: 66.6% !important; }
.w70  { width: 70% !important; }
.w75  { width: 75% !important; }
.w80  { width: 80% !important; }
.w100 { width: 100% !important; }
.wAuto { width: auto !important; }

/* ── Width (px) ── */
.w100px  { width: 100px !important; }
.w150px  { width: 150px !important; }
.w200px  { width: 200px !important; }
.w300px  { width: 300px !important; }
.w400px  { width: 400px !important; }
.w500px  { width: 500px !important; }
.w600px  { width: 600px !important; }

/* ── Height ── */
.h10px  { height:  10px !important; }
.h20px  { height:  20px !important; }
.h30px  { height:  30px !important; }
.h50px  { height:  50px !important; }
.h100px { height: 100px !important; }
.h200px { height: 200px !important; }
.h300px { height: 300px !important; }
.h100p  { height: 100%; }

/* ── Font Size (rem) ── */
.fs08 { font-size: 0.8rem !important; }
.fs09 { font-size: 0.9rem !important; }
.fs10 { font-size: 1.0rem !important; }
.fs11 { font-size: 1.1rem !important; }
.fs12 { font-size: 1.2rem !important; }
.fs13 { font-size: 1.3rem !important; }
.fs14 { font-size: 1.4rem !important; }
.fs15 { font-size: 1.5rem !important; }
.fs16 { font-size: 1.6rem !important; }
.fs18 { font-size: 1.8rem !important; }
.fs20 { font-size: 2.0rem !important; }
.fs24 { font-size: 2.4rem !important; }
.fs28 { font-size: 2.8rem !important; }
.fs30 { font-size: 3.0rem !important; }
.fs36 { font-size: 3.6rem !important; }
.fs40 { font-size: 4.0rem !important; }

/* ── Line Height ── */
.lh10 { line-height: 1.0em !important; }
.lh12 { line-height: 1.2em !important; }
.lh14 { line-height: 1.4em !important; }
.lh15 { line-height: 1.5em !important; }
.lh17 { line-height: 1.7em !important; }
.lh18 { line-height: 1.8em !important; }
.lh20 { line-height: 2.0em !important; }

/* ── Letter Spacing ── */
.ls0 { letter-spacing: 0em !important; }
.ls1 { letter-spacing: 0.1em !important; }
.ls2 { letter-spacing: 0.2em !important; }
.ls3 { letter-spacing: 0.3em !important; }

/* ── Text Align ── */
.tl { text-align: left   !important; }
.tc { text-align: center !important; }
.tr { text-align: right  !important; }

/* ── Vertical Align ── */
.vt { vertical-align: top    !important; }
.vm { vertical-align: middle !important; }
.vb { vertical-align: bottom !important; }

/* ── Float ── */
.fl { float: left  !important; }
.fr { float: right !important; }

/* ── Display ── */
.dispNone      { display: none         !important; }
.dispBlk       { display: block        !important; }
.dispInlineBlk { display: inline-block !important; }
.blk           { display: block        !important; }

/* ── Flex ── */
.flexCommon01 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.flexCommon01.flexCenter  { justify-content: center; }
.flexCommon01.flexRight   { justify-content: flex-end; }
.flexCommon01.flexBetween { justify-content: space-between; }
.flexCommon01.flexMiddle  { align-items: center; }
.flexCommon01.flexBottom  { align-items: flex-end; }
.flexCommon01.flexReverse { flex-direction: row-reverse; }
.flexCommon01.flexNorap   { flex-wrap: nowrap; }

/* ── Card Layout ── */
.cardType { display: flex; flex-direction: column; }
.flexible  { flex-grow: 1; }
.mtAuto    { margin-top: auto !important; }

/* ── Font Weight ── */
.b    { font-weight: bold !important; }
.bold { font-weight: bold !important; }
.fw300 { font-weight: 300 !important; }
.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500 !important; }
.fw700 { font-weight: 700 !important; }

/* ── Other ── */
.ofH        { overflow: hidden !important; }
.wsNowrap   { white-space: nowrap !important; }
.posRel     { position: relative !important; }
.posAbs     { position: absolute !important; }
.tUl        { text-decoration: underline !important; }
.cP         { cursor: pointer !important; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }

/* ── Responsive: SP only (max-width: 767px) ── */
@media screen and (max-width: 767px) {
  .mb10tu { margin-bottom: 10px !important; }
  .mb15tu { margin-bottom: 15px !important; }
  .mb20tu { margin-bottom: 20px !important; }
  .mb30tu { margin-bottom: 30px !important; }
  .mb40tu { margin-bottom: 40px !important; }
  .mt10tu { margin-top: 10px !important; }
  .mt20tu { margin-top: 20px !important; }
  .mt30tu { margin-top: 30px !important; }
  .mr00tu { margin-right: 0 !important; }
  .pt10tu { padding-top: 10px !important; }
  .pb10tu { padding-bottom: 10px !important; }
  .w100tu { width: 100% !important; }
  .tcTU   { text-align: center !important; }
  .tlTU   { text-align: left   !important; }
  .spOnly { display: block !important; }
  .pcOnly { display: none  !important; }
  .dispNoneSP { display: none !important; }
}

/* ── Responsive: Tablet and up (min-width: 768px) ── */
@media screen and (min-width: 768px) {
  .mb20po { margin-bottom: 20px !important; }
  .mb30po { margin-bottom: 30px !important; }
  .mt20po { margin-top:    20px !important; }
  .w50po  { width: 50% !important; }
  .tcPO   { text-align: center !important; }
  .spOnly { display: none  !important; }
  .pcOnly { display: block !important; }
}

/* ── Responsive: max-width: 1250px ── */
@media screen and (max-width: 1250px) {
  .mb20s { margin-bottom: 20px !important; }
  .mb30s { margin-bottom: 30px !important; }
  .w100s { width: 100% !important; }
}