@charset "utf-8";

/*====================================================================
  basis.css — 共通ユーティリティ（clauderules_basis_css.md より生成）
====================================================================*/

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

/* ── 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 Bottom / Top ── */
.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; }

/* ── Padding Left / Right ── */
.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; }
.w33  { width: 33.3% !important; }
.w50  { width: 50% !important; }
.w66  { width: 66.6% !important; }
.w75  { width: 75% !important; }
.w100 { width: 100% !important; }
.wAuto { width: auto !important; }

/* ── Width (px) よく使う固定幅 ── */
.w100px  { width: 100px; }
.w200px  { width: 200px; }
.w300px  { width: 300px; }
.w400px  { width: 400px; }
.w500px  { width: 500px; }
.w600px  { width: 600px; }
.w700px  { width: 700px; }
.w800px  { width: 800px; }
.w900px  { width: 900px; }
.w1000px { width: 1000px; }

/* ── Height (px) ── */
.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) ── */
.fs07 { font-size: 0.7rem !important; }
.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; }
.fs17 { font-size: 1.7rem !important; }
.fs18 { font-size: 1.8rem !important; }
.fs19 { font-size: 1.9rem !important; }
.fs20 { font-size: 2.0rem !important; }
.fs21 { font-size: 2.1rem !important; }
.fs22 { font-size: 2.2rem !important; }
.fs23 { font-size: 2.3rem !important; }
.fs24 { font-size: 2.4rem !important; }
.fs25 { font-size: 2.5rem !important; }
.fs26 { font-size: 2.6rem !important; }
.fs27 { font-size: 2.7rem !important; }
.fs28 { font-size: 2.8rem !important; }
.fs29 { font-size: 2.9rem !important; }
.fs30 { font-size: 3.0rem !important; }

/* ── Font Size レスポンシブ : s (max-width: 1250px) ── */
@media screen and (max-width: 1250px) {
  .fs07s { font-size: 0.7rem !important; }
  .fs08s { font-size: 0.8rem !important; }
  .fs09s { font-size: 0.9rem !important; }
  .fs10s { font-size: 1.0rem !important; }
  .fs11s { font-size: 1.1rem !important; }
  .fs12s { font-size: 1.2rem !important; }
  .fs13s { font-size: 1.3rem !important; }
  .fs14s { font-size: 1.4rem !important; }
  .fs15s { font-size: 1.5rem !important; }
  .fs16s { font-size: 1.6rem !important; }
  .fs17s { font-size: 1.7rem !important; }
  .fs18s { font-size: 1.8rem !important; }
  .fs19s { font-size: 1.9rem !important; }
  .fs20s { font-size: 2.0rem !important; }
  .fs21s { font-size: 2.1rem !important; }
  .fs22s { font-size: 2.2rem !important; }
  .fs23s { font-size: 2.3rem !important; }
  .fs24s { font-size: 2.4rem !important; }
  .fs25s { font-size: 2.5rem !important; }
  .fs26s { font-size: 2.6rem !important; }
  .fs27s { font-size: 2.7rem !important; }
  .fs28s { font-size: 2.8rem !important; }
  .fs29s { font-size: 2.9rem !important; }
  .fs30s { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : p (min-width: 1251px) ── */
@media screen and (min-width: 1251px) {
  .fs07p { font-size: 0.7rem !important; }
  .fs08p { font-size: 0.8rem !important; }
  .fs09p { font-size: 0.9rem !important; }
  .fs10p { font-size: 1.0rem !important; }
  .fs11p { font-size: 1.1rem !important; }
  .fs12p { font-size: 1.2rem !important; }
  .fs13p { font-size: 1.3rem !important; }
  .fs14p { font-size: 1.4rem !important; }
  .fs15p { font-size: 1.5rem !important; }
  .fs16p { font-size: 1.6rem !important; }
  .fs17p { font-size: 1.7rem !important; }
  .fs18p { font-size: 1.8rem !important; }
  .fs19p { font-size: 1.9rem !important; }
  .fs20p { font-size: 2.0rem !important; }
  .fs21p { font-size: 2.1rem !important; }
  .fs22p { font-size: 2.2rem !important; }
  .fs23p { font-size: 2.3rem !important; }
  .fs24p { font-size: 2.4rem !important; }
  .fs25p { font-size: 2.5rem !important; }
  .fs26p { font-size: 2.6rem !important; }
  .fs27p { font-size: 2.7rem !important; }
  .fs28p { font-size: 2.8rem !important; }
  .fs29p { font-size: 2.9rem !important; }
  .fs30p { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : tj (960px〜1250px) ── */
@media screen and (min-width: 960px) and (max-width: 1250px) {
  .fs07tj { font-size: 0.7rem !important; }
  .fs08tj { font-size: 0.8rem !important; }
  .fs09tj { font-size: 0.9rem !important; }
  .fs10tj { font-size: 1.0rem !important; }
  .fs11tj { font-size: 1.1rem !important; }
  .fs12tj { font-size: 1.2rem !important; }
  .fs13tj { font-size: 1.3rem !important; }
  .fs14tj { font-size: 1.4rem !important; }
  .fs15tj { font-size: 1.5rem !important; }
  .fs16tj { font-size: 1.6rem !important; }
  .fs17tj { font-size: 1.7rem !important; }
  .fs18tj { font-size: 1.8rem !important; }
  .fs19tj { font-size: 1.9rem !important; }
  .fs20tj { font-size: 2.0rem !important; }
  .fs21tj { font-size: 2.1rem !important; }
  .fs22tj { font-size: 2.2rem !important; }
  .fs23tj { font-size: 2.3rem !important; }
  .fs24tj { font-size: 2.4rem !important; }
  .fs25tj { font-size: 2.5rem !important; }
  .fs26tj { font-size: 2.6rem !important; }
  .fs27tj { font-size: 2.7rem !important; }
  .fs28tj { font-size: 2.8rem !important; }
  .fs29tj { font-size: 2.9rem !important; }
  .fs30tj { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : to (min-width: 960px) ── */
@media screen and (min-width: 960px) {
  .fs07to { font-size: 0.7rem !important; }
  .fs08to { font-size: 0.8rem !important; }
  .fs09to { font-size: 0.9rem !important; }
  .fs10to { font-size: 1.0rem !important; }
  .fs11to { font-size: 1.1rem !important; }
  .fs12to { font-size: 1.2rem !important; }
  .fs13to { font-size: 1.3rem !important; }
  .fs14to { font-size: 1.4rem !important; }
  .fs15to { font-size: 1.5rem !important; }
  .fs16to { font-size: 1.6rem !important; }
  .fs17to { font-size: 1.7rem !important; }
  .fs18to { font-size: 1.8rem !important; }
  .fs19to { font-size: 1.9rem !important; }
  .fs20to { font-size: 2.0rem !important; }
  .fs21to { font-size: 2.1rem !important; }
  .fs22to { font-size: 2.2rem !important; }
  .fs23to { font-size: 2.3rem !important; }
  .fs24to { font-size: 2.4rem !important; }
  .fs25to { font-size: 2.5rem !important; }
  .fs26to { font-size: 2.6rem !important; }
  .fs27to { font-size: 2.7rem !important; }
  .fs28to { font-size: 2.8rem !important; }
  .fs29to { font-size: 2.9rem !important; }
  .fs30to { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : tu (max-width: 959px) ── */
@media screen and (max-width: 959px) {
  .fs07tu { font-size: 0.7rem !important; }
  .fs08tu { font-size: 0.8rem !important; }
  .fs09tu { font-size: 0.9rem !important; }
  .fs10tu { font-size: 1.0rem !important; }
  .fs11tu { font-size: 1.1rem !important; }
  .fs12tu { font-size: 1.2rem !important; }
  .fs13tu { font-size: 1.3rem !important; }
  .fs14tu { font-size: 1.4rem !important; }
  .fs15tu { font-size: 1.5rem !important; }
  .fs16tu { font-size: 1.6rem !important; }
  .fs17tu { font-size: 1.7rem !important; }
  .fs18tu { font-size: 1.8rem !important; }
  .fs19tu { font-size: 1.9rem !important; }
  .fs20tu { font-size: 2.0rem !important; }
  .fs21tu { font-size: 2.1rem !important; }
  .fs22tu { font-size: 2.2rem !important; }
  .fs23tu { font-size: 2.3rem !important; }
  .fs24tu { font-size: 2.4rem !important; }
  .fs25tu { font-size: 2.5rem !important; }
  .fs26tu { font-size: 2.6rem !important; }
  .fs27tu { font-size: 2.7rem !important; }
  .fs28tu { font-size: 2.8rem !important; }
  .fs29tu { font-size: 2.9rem !important; }
  .fs30tu { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : pt (768px〜1250px) ── */
@media screen and (min-width: 768px) and (max-width: 1250px) {
  .fs07pt { font-size: 0.7rem !important; }
  .fs08pt { font-size: 0.8rem !important; }
  .fs09pt { font-size: 0.9rem !important; }
  .fs10pt { font-size: 1.0rem !important; }
  .fs11pt { font-size: 1.1rem !important; }
  .fs12pt { font-size: 1.2rem !important; }
  .fs13pt { font-size: 1.3rem !important; }
  .fs14pt { font-size: 1.4rem !important; }
  .fs15pt { font-size: 1.5rem !important; }
  .fs16pt { font-size: 1.6rem !important; }
  .fs17pt { font-size: 1.7rem !important; }
  .fs18pt { font-size: 1.8rem !important; }
  .fs19pt { font-size: 1.9rem !important; }
  .fs20pt { font-size: 2.0rem !important; }
  .fs21pt { font-size: 2.1rem !important; }
  .fs22pt { font-size: 2.2rem !important; }
  .fs23pt { font-size: 2.3rem !important; }
  .fs24pt { font-size: 2.4rem !important; }
  .fs25pt { font-size: 2.5rem !important; }
  .fs26pt { font-size: 2.6rem !important; }
  .fs27pt { font-size: 2.7rem !important; }
  .fs28pt { font-size: 2.8rem !important; }
  .fs29pt { font-size: 2.9rem !important; }
  .fs30pt { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : pj (768px〜959px) ── */
@media screen and (min-width: 768px) and (max-width: 959px) {
  .fs07pj { font-size: 0.7rem !important; }
  .fs08pj { font-size: 0.8rem !important; }
  .fs09pj { font-size: 0.9rem !important; }
  .fs10pj { font-size: 1.0rem !important; }
  .fs11pj { font-size: 1.1rem !important; }
  .fs12pj { font-size: 1.2rem !important; }
  .fs13pj { font-size: 1.3rem !important; }
  .fs14pj { font-size: 1.4rem !important; }
  .fs15pj { font-size: 1.5rem !important; }
  .fs16pj { font-size: 1.6rem !important; }
  .fs17pj { font-size: 1.7rem !important; }
  .fs18pj { font-size: 1.8rem !important; }
  .fs19pj { font-size: 1.9rem !important; }
  .fs20pj { font-size: 2.0rem !important; }
  .fs21pj { font-size: 2.1rem !important; }
  .fs22pj { font-size: 2.2rem !important; }
  .fs23pj { font-size: 2.3rem !important; }
  .fs24pj { font-size: 2.4rem !important; }
  .fs25pj { font-size: 2.5rem !important; }
  .fs26pj { font-size: 2.6rem !important; }
  .fs27pj { font-size: 2.7rem !important; }
  .fs28pj { font-size: 2.8rem !important; }
  .fs29pj { font-size: 2.9rem !important; }
  .fs30pj { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : po (min-width: 768px) ── */
@media screen and (min-width: 768px) {
  .fs07po { font-size: 0.7rem !important; }
  .fs08po { font-size: 0.8rem !important; }
  .fs09po { font-size: 0.9rem !important; }
  .fs10po { font-size: 1.0rem !important; }
  .fs11po { font-size: 1.1rem !important; }
  .fs12po { font-size: 1.2rem !important; }
  .fs13po { font-size: 1.3rem !important; }
  .fs14po { font-size: 1.4rem !important; }
  .fs15po { font-size: 1.5rem !important; }
  .fs16po { font-size: 1.6rem !important; }
  .fs17po { font-size: 1.7rem !important; }
  .fs18po { font-size: 1.8rem !important; }
  .fs19po { font-size: 1.9rem !important; }
  .fs20po { font-size: 2.0rem !important; }
  .fs21po { font-size: 2.1rem !important; }
  .fs22po { font-size: 2.2rem !important; }
  .fs23po { font-size: 2.3rem !important; }
  .fs24po { font-size: 2.4rem !important; }
  .fs25po { font-size: 2.5rem !important; }
  .fs26po { font-size: 2.6rem !important; }
  .fs27po { font-size: 2.7rem !important; }
  .fs28po { font-size: 2.8rem !important; }
  .fs29po { font-size: 2.9rem !important; }
  .fs30po { font-size: 3.0rem !important; }
}

/* ── Font Size レスポンシブ : pu (max-width: 767px) ── */
@media screen and (max-width: 767px) {
  .fs07pu { font-size: 0.7rem !important; }
  .fs08pu { font-size: 0.8rem !important; }
  .fs09pu { font-size: 0.9rem !important; }
  .fs10pu { font-size: 1.0rem !important; }
  .fs11pu { font-size: 1.1rem !important; }
  .fs12pu { font-size: 1.2rem !important; }
  .fs13pu { font-size: 1.3rem !important; }
  .fs14pu { font-size: 1.4rem !important; }
  .fs15pu { font-size: 1.5rem !important; }
  .fs16pu { font-size: 1.6rem !important; }
  .fs17pu { font-size: 1.7rem !important; }
  .fs18pu { font-size: 1.8rem !important; }
  .fs19pu { font-size: 1.9rem !important; }
  .fs20pu { font-size: 2.0rem !important; }
  .fs21pu { font-size: 2.1rem !important; }
  .fs22pu { font-size: 2.2rem !important; }
  .fs23pu { font-size: 2.3rem !important; }
  .fs24pu { font-size: 2.4rem !important; }
  .fs25pu { font-size: 2.5rem !important; }
  .fs26pu { font-size: 2.6rem !important; }
  .fs27pu { font-size: 2.7rem !important; }
  .fs28pu { font-size: 2.8rem !important; }
  .fs29pu { font-size: 2.9rem !important; }
  .fs30pu { font-size: 3.0rem !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; }

/* ── Line Height ── */
.lh10 { line-height: 1.0em !important; }
.lh12 { line-height: 1.2em !important; }
.lh15 { line-height: 1.5em !important; }
.lh18 { line-height: 1.8em !important; }
.lh20 { line-height: 2.0em !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; }

/* ── Overflow / Other ── */
.ofH        { overflow: hidden !important; }
.wsNowrap   { white-space: nowrap; }
.ofEllipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b          { font-weight: bold; }
.cP         { cursor: pointer; }
.ls0        { letter-spacing: 0px !important; }
.tUl        { text-decoration: underline !important; }

/* ── Clearfix ── */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }

/* ── レスポンシブ表示切替（代表例） ── */
/* スマホのみ非表示 */
@media screen and (max-width: 767px)  { .dispNonePU { display: none !important; } }
/* スマホのみ表示 */
@media screen and (max-width: 767px)  { .dispBlockPU { display: block !important; } }
/* タブレット以上で非表示 */
@media screen and (min-width: 768px)  { .dispNonePO { display: none !important; } }
/* タブレット以上で表示 */
@media screen and (min-width: 768px)  { .dispBlockPO { display: block !important; } }
/* PC以上で非表示 */
@media screen and (min-width: 1251px) { .dispNoneP  { display: none !important; } }
/* PC以上で表示 */
@media screen and (min-width: 1251px) { .dispBlockP { display: block !important; } }

/* ── レスポンシブ余白（スマホ・タブレット代表例） ── */
@media screen and (max-width: 767px) {
  .mb20pu { margin-bottom: 20px !important; }
  .mb30pu { margin-bottom: 30px !important; }
  .mt20pu { margin-top:    20px !important; }
  .pt20pu { padding-top:   20px !important; }
  .pb20pu { padding-bottom:20px !important; }
  .w100pu { width: 100% !important; }
  .tcPU   { text-align: center !important; }
  .tlPU   { text-align: left   !important; }
}
@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; }
}

/* 縦積みflex */
.flexCommon02 {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* 修飾クラスは既存と同じ語彙（flexCenter等）を流用 */

@media screen and (min-width: 960px) {
  .dispNoneTO  { display: none  !important; }
  .dispBlockTO { display: block !important; }
}
@media screen and (max-width: 1250px) {
  .dispNoneS  { display: none  !important; }
  .dispBlockS { display: block !important; }
}
@media screen and (max-width: 959px) {
  .dispNoneTU  { display: none  !important; }
  .dispBlockTU { display: block !important; }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .dispNonePJ  { display: none  !important; }
  .dispBlockPJ { display: block !important; }
}
@media screen and (min-width: 960px) and (max-width: 1250px) {
  .dispNoneTJ  { display: none  !important; }
  .dispBlockTJ { display: block !important; }
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
  .dispNonePT  { display: none  !important; }
  .dispBlockPT { display: block !important; }
}