/* margin
==============================*/
.mgn.top8 {margin-top: 8px;}
.mgn.top16 {margin-top: 16px;}
.mgn.top24 {margin-top: 24px;}
.mgn.top32 {margin-top: 32px;}
.mgn.top40 {margin-top: 40px;}
.mgn.top48 {margin-top: 48px;}

.mgn.btm8 {margin-bottom: 8px;}
.mgn.btm16 {margin-bottom: 16px;}
.mgn.btm24 {margin-bottom: 24px;}
.mgn.btm32 {margin-bottom: 32px;}
.mgn.btm40 {margin-bottom: 40px;}
.mgn.btm48 {margin-bottom: 48px;}

.mgn.la {margin-left: auto;}
.mgn.ra {margin-right: auto;}

@media screen and (max-width: 768px) {
  .XS_top8 {margin-top: 8px;}
  .XS_top16 {margin-top: 16px;}
  .XS_top24 {margin-top: 24px;}
  .XS_top32 {margin-top: 32px;}
  .XS_top40 {margin-top: 40px;}
  .XS_top48 {margin-top: 48px;}

  .XS_btm8 {margin-bottom: 8px;}
  .XS_btm16 {margin-bottom: 16px;}
  .XS_btm24 {margin-bottom: 24px;}
  .XS_btm32 {margin-bottom: 32px;}
  .XS_btm40 {margin-bottom: 40px;}
  .XS_btm48 {margin-bottom: 48px;}
}
/* ed margin ===============*/

/* text
==============================*/
.txt.link {
  color: var(--txt-link);
  cursor: pointer;
}

.txt.h1 {font-size: var(--typo-h1);}
.txt.h2 {font-size: var(--typo-h2);}
.txt.h3 {font-size: var(--typo-h3);}
.txt.h4 {font-size: var(--typo-h4);}
.txt.h5 {font-size: var(--typo-h5);}
.txt.h6 {font-size: var(--typo-h6);}
.txt.bd {font-size: var(--typo-bd);}
.txt.min {font-size: var(--typo-min);}
.txt.sub {opacity: 0.7;}
.txt.bld {font-weight: bold;}
.txt.nml {font-weight: normal;}

.txt.al {text-align: left;}
.txt.ar {text-align: right;}
.txt.ac {text-align: center;}

@media screen and (max-width: 768px) {
  .XS_.bld {font-weight: bold;}
  .XS_nml {font-weight: normal;}

  .XS_al {text-align: left;}
  .XS_ar {text-align: right;}
  .XS_ac {text-align: center;}
}
/* ed text ===============*/


/* display
==============================*/
.dsp.bl {display: block;}
.dsp.in {display: inline;}
.dsp.ib {display: inline-block;}
@media screen and (max-width: 768px) {
  .dsp.XS_bl {display: block;}
  .dsp.XS_in {display: inline;}
  .dsp.XS_ib {display: inline-block;}
  .dsp.XS_flex {display: flex;}
  .dsp.XS_grid {display: grid;}
}
/* ed display ===============*/

/* flex
==============================*/
.flex {display: flex;}
.flex.jc {justify-content: center;}
.flex.js {justify-content: flex-start;}
.flex.je {justify-content: flex-end;}
.flex.ja {justify-content: space-around;}
.flex.jb {justify-content: space-between;}
.flex.ac {align-items: center;}
.flex.as {align-items: flex-start;}
.flex.ae {align-items: flex-end;}
.flex.ab {align-items: baseline;}
.flex.ww {flex-wrap: wrap;}
.flex.wn {flex-wrap: nowrap;}
.flex.dc {flex-direction: column;}
.flex.dr {flex-direction: row;}

@media screen and (max-width: 768px) {
  .flex.XS_jc {justify-content: center;}
  .flex.XS_js {justify-content: flex-start;}
  .flex.XS_je {justify-content: flex-end;}
  .flex.XS_ja {justify-content: space-around;}
  .flex.XS_jb {justify-content: space-between;}
  .flex.XS_ac {align-items: center;}
  .flex.XS_as {align-items: flex-start;}
  .flex.XS_ae {align-items: flex-end;}
  .flex.XS_ab {align-items: baseline;}
  .flex.XS_ww {flex-wrap: wrap;}
  .flex.XS_wn {flex-wrap: nowrap;}
  .flex.XS_dc {flex-direction: column;}
}

.gp4 {gap: 4px;}
.gp8 {gap: 8px;}
.gp16 {gap: 16px;}
.gp24 {gap: 24px;}
.gp32 {gap: 32px;}
@media screen and (max-width: 768px) {
  .XS_gp4 {gap: 4px;}
  .XS_gp8 {gap: 8px;}
  .XS_gp16 {gap: 16px;}
  .XS_gp24 {gap: 24px;}
  .XS_gp32 {gap: 32px;}
}
/* ed flex ===============*/

/* grid
==============================*/
.grid {display: grid;}
.grid.col1 {grid-template-columns: repeat(1, 1fr);}
.grid.col2 {grid-template-columns: repeat(2, 1fr);}
.grid.col3 {grid-template-columns: repeat(3, 1fr);}
.grid.col4 {grid-template-columns: repeat(4, 1fr);}
.grid.row2 {grid-template-rows: repeat(2, 1fr);}
.grid.row3 {grid-template-rows: repeat(3, 1fr);}
.grid.row4 {grid-template-rows: repeat(4, 1fr);}
.grid.as {align-content: start;}
.grid.ae {align-content: end;}
.grid.gafc {grid-auto-flow: column;}
.grid.gafr {grid-auto-flow: row;}

@media screen and (max-width: 768px) {
  .grid.XS_col1 {grid-template-columns: repeat(1, 1fr);}
  .grid.XS_col2 {grid-template-columns: repeat(2, 1fr);}
  .grid.XS_col3 {grid-template-columns: repeat(3, 1fr);}
  .grid.XS_col4 {grid-template-columns: repeat(4, 1fr);}
  .grid.XS_row2 {grid-template-rows: repeat(2, 1fr);}
  .grid.XS_row3 {grid-template-rows: repeat(3, 1fr);}
  .grid.XS_row4 {grid-template-rows: repeat(4, 1fr);}
  .grid.XS_gafc {grid-auto-flow: column;}
  .grid.XS_gafr {grid-auto-flow: row;}
}

.gp4 {gap: 4px;}
.gp8 {gap: 8px;}
.gp16 {gap: 16px;}
.gp24 {gap: 24px;}
.gp32 {gap: 32px;}
@media screen and (max-width: 768px) {
  .XS_gp4 {gap: 4px;}
  .XS_gp8 {gap: 8px;}
  .XS_gp16 {gap: 16px;}
  .XS_gp24 {gap: 24px;}
  .XS_gp32 {gap: 32px;}
}
/* ed grid ===============*/