@charset "UTF-8";
:root {
  --font-base:10px;
  --space: 10px;
}

/*
9. Margin（余白）
*/
.margin-a0{
 margin-top: 0;
}
.margin-a10{
 margin-top: calc(var(--space)*1);
}
.margin-a20{
 margin-top: calc(var(--space)*2);
}
.margin-a30{
 margin-top: calc(var(--space)*3);
}
.margin-a40{
 margin-top: calc(var(--space)*4);
}
.margin-a50{
 margin-top:calc(var(--space)*5);
}
.margin-a60{
 margin-top:calc(var(--space)*6);
}
.margin-a70{
 margin-top:calc(var(--space)*7);
}
.margin-a80{
 margin-top:calc(var(--space)*8);
}
.margin-a90{
 margin-top:calc(var(--space)*9);
}
.margin-a100{
 margin-top:calc(var(--space)*10);
}
.margin-a200{
 margin-top: calc(var(--space)*20);
}

/*Margin上*/
.margin-t0{
 margin-top: 0;
}
.margin-t10{
 margin-top: calc(var(--space)*1);
}
.margin-t20{
 margin-top: calc(var(--space)*2);
}
.margin-t30{
 margin-top: calc(var(--space)*3);
}
.margin-t40{
 margin-top: calc(var(--space)*4);
}
.margin-t50{
 margin-top:calc(var(--space)*5);
}
.margin-t60{
 margin-top:calc(var(--space)*6);
}
.margin-t70{
 margin-top:calc(var(--space)*7);
}
.margin-t80{
 margin-top:calc(var(--space)*8);
}
.margin-t90{
 margin-top:calc(var(--space)*9);
}
.margin-t100{
 margin-top:calc(var(--space)*10);
}
.margin-t200{
 margin-top: calc(var(--space)*20);
}
.margin-t40n{
  margin-top: -40px;
}

/*Margin下*/
.margin-b0{
 margin-bottom: 0;
}
.margin-b10{
 margin-bottom:calc(var(--space)*1);
}
.margin-b20{
 margin-bottom:calc(var(--space)*2);
}
.margin-b30{
 margin-bottom:calc(var(--space)*3);
}
.margin-b40{
 margin-bottom: calc(var(--space)*4);
}
.margin-b50{
 margin-bottom:calc(var(--space)*5);
}
.margin-b60{
 margin-bottom:calc(var(--space)*6);
}
.margin-b70{
 margin-bottom:calc(var(--space)*7);
}
.margin-b80{
 margin-bottom:calc(var(--space)*8);
}
.margin-b90{
 margin-bottom: calc(var(--space)*9);
}
.margin-b100{
 margin-bottom:calc(var(--space)*10);
}
.margin-b200{
 margin-bottom:calc(var(--space)*20);
}

/*Margin上下*/
.margin-y0{
 margin-block: 0;
}
.margin-y10{
 margin-block: calc(var(--space)*1);
}
.margin-y20{
 margin-block: calc(var(--space)*2);
}
.margin-y30{
 margin-block: calc(var(--space)*3);
}
.margin-y40{
 margin-block: calc(var(--space)*4);
}
.margin-y50{
 margin-block:calc(var(--space)*5);
}
.margin-y60{
 margin-block:calc(var(--space)*6);
}
.margin-y70{
 margin-block:calc(var(--space)*7);
}
.margin-y80{
 margin-block:calc(var(--space)*8);
}
.margin-y90{
 margin-block:calc(var(--space)*9);
}
.margin-y100{
 margin-block:calc(var(--space)*10);
}
.margin-y200{
 margin-block: calc(var(--space)*20);
}

.margin-r10{
  margin-right: calc(var(--space)*1);
}


/*Margin左右*/
.margin-x0{
 margin-inline: 0;
 width: 100%;
}
.margin-x10{
 margin-inline: calc(var(--space)*1);
}
.margin-x20{
 margin-inline: calc(var(--space)*2);
}
.margin-x30{
 margin-inline: calc(var(--space)*3);
}
.margin-x40{
 margin-inline: calc(var(--space)*4);
}
.margin-x50{
 margin-inline:calc(var(--space)*5);
}
.margin-x60{
 margin-inline:calc(var(--space)*6);
}
.margin-x70{
 margin-inline:calc(var(--space)*7);
}
.margin-x80{
 margin-inline:calc(var(--space)*8);
}
.margin-x90{
 margin-inline:calc(var(--space)*9);
}
.margin-x100{
 margin-inline:calc(var(--space)*10);
}
.margin-x200{
 margin-inline: calc(var(--space)*20);
}

/*Padding上下左右*/
.padding-a0{
 padding: 0;
}
.padding-a10{
 padding: calc(var(--space)*1);
}
.padding-a20{
 padding: calc(var(--space)*2);
}
.padding-a0{
 padding: calc(var(--space)*3);
}
.padding-a40{
 padding: calc(var(--space)*4);
}
.padding-a50{
 padding:calc(var(--space)*5);
}
.padding-a60{
 padding:calc(var(--space)*6);
}
.padding-a70{
 padding:calc(var(--space)*7);
}
.padding-a80{
 padding:calc(var(--space)*8);
}
.padding-a0{
 padding:calc(var(--space)*9);
}
.padding-a100{
 padding:calc(var(--space)*10);
}
.padding-a200{
 padding: calc(var(--space)*20);
}

/*Padding上*/
.padding-t0{
 padding-top: 0;
}
.padding-t10{
 padding-top: calc(var(--space)*1);
}
.padding-t20{
 padding-top: calc(var(--space)*2);
}
.padding-t30{
 padding-top: calc(var(--space)*3);
}
.padding-t40{
 padding-top: calc(var(--space)*4);
}
.padding-t50{
 padding-top:calc(var(--space)*5);
}
.padding-t60{
 padding-top:calc(var(--space)*6);
}
.padding-t70{
 padding-top:calc(var(--space)*7);
}
.padding-t80{
 padding-top:calc(var(--space)*8);
}
.padding-t90{
 padding-top:calc(var(--space)*9);
}
.padding-t100{
 padding-top:calc(var(--space)*10);
}
.padding-t200{
 padding-top: calc(var(--space)*20);
}

/*Padding下*/
.padding-b0{
 padding-bottom: 0;
}
.padding-b10{
 padding-bottom:calc(var(--space)*1);
}
.padding-b20{
 padding-bottom:calc(var(--space)*2);
}
.padding-b30{
 padding-bottom:calc(var(--space)*3);
}
.padding-b40{
 padding-bottom: calc(var(--space)*4);
}
.padding-b50{
 padding-bottom:calc(var(--space)*5);
}
.padding-b60{
 padding-bottom:calc(var(--space)*6);
}
.padding-b70{
 padding-bottom:calc(var(--space)*7);
}
.padding-b80{
 padding-bottom:calc(var(--space)*8);
}
.padding-b90{
 padding-bottom: calc(var(--space)*9);
}
.padding-b100{
 padding-bottom:calc(var(--space)*10);
}
.padding-b200{
 padding-bottom:calc(var(--space)*20);
}

/*Padding上下*/
.padding-y0{
 padding-block: 0;
}
.padding-y10{
 padding-block: calc(var(--space)*1);
}
.padding-y20{
 padding-block: calc(var(--space)*2);
}
.padding-y30{
 padding-block: calc(var(--space)*3);
}
.padding-y40{
 padding-block: calc(var(--space)*4);
}
.padding-y50{
 padding-block:calc(var(--space)*5);
}
.padding-y60{
 padding-block:calc(var(--space)*6);
}
.padding-y70{
 padding-block:calc(var(--space)*7);
}
.padding-y80{
 padding-block:calc(var(--space)*8);
}
.padding-y90{
 padding-block:calc(var(--space)*9);
}
.padding-y100{
 padding-block:calc(var(--space)*10);
}
.padding-y200{
 padding-block: calc(var(--space)*20);
}
/*Padding左右*/
.padding-x0{
 padding-inline: 0;
}
.padding-x10{
 padding-inline: calc(var(--space)*1);
}
.padding-x20{
 padding-inline: calc(var(--space)*2);
}
.padding-x30{
 padding-inline: calc(var(--space)*3);
}
.padding-x40{
 padding-inline: calc(var(--space)*4);
}
.padding-x50{
 padding-inline:calc(var(--space)*5);
}
.padding-x60{
 padding-inline:calc(var(--space)*6);
}
.padding-x70{
 padding-inline:calc(var(--space)*7);
}
.padding-x80{
 padding-inline:calc(var(--space)*8);
}
.padding-x90{
 padding-inline:calc(var(--space)*9);
}
.padding-x100{
 padding-inline:calc(var(--space)*10);
}
.padding-x200{
 padding-inline: calc(var(--space)*20);
}
.margin-b10_repeat > *{
  margin-bottom: 10px;
}
.margin-b20_repeat > *{
  margin-bottom: 20px;
}
.margin-b30_repeat > *{
  margin-bottom: 30px;
}
.margin-b40_repeat > *{
  margin-bottom: 40px;
}
.margin-b50_repeat > *{
  margin-bottom: 50px;
}
.bg-gray > *[class*="px"] {
  padding-block: calc(var(--space)*10);
}
.bg-gray_repeat > figure{
  background-color: rgba(200,200,200,0.3);
  border-radius: 10px;
  padding: 20px;
}
.padding-inline{
  padding-inline:  calc(var(--space)*1);
}
/*Margin Padding*/

@media screen and (max-width: 1100px) {
  .margin-b100{
    margin-bottom: 50px;
  }
  .margin-t100_sp{
    margin-top: 100px;
  }
  
}