@charset "utf-8";

/* フォントサイズ */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }  
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; } 
.text-base { font-size: 1rem;     line-height: 1.5rem; } 
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; } 
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; } 
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }   
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; } 
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; } 


/* 表示制御 */
.d-block { display: block; }
.d-none { display: none; }
.d-flex { display: flex; }

@media only screen and (min-width: 960px) {    /* 横960px以上 */
  .d-block-960g { display: block !important; }
  .d-none-960g { display: none !important; }
  .d-flex-960g { display: flex !important; }
}


/*  Bootstrap互換 グリッドシステム */
/* =========================
   Variables
========================= */
:root {
  --grid-columns: 12;
  --gutter: 12px;

  /* Container */
  --container-max: 1200px;
}

/* =========================
   Container
========================= */
.container {
  /*width: 100%;
  max-width: var(--container-max);*/
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* =========================
   Row
========================= */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}

/* =========================
   Column Base
========================= */
[class*="col"] {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
  width: 100%;
}

/* =========================
   Default (mobile first)
========================= */
.col-1 { width: calc(100% / 12 * 1); }
.col-2 { width: calc(100% / 12 * 2); }
.col-3 { width: calc(100% / 12 * 3); }
.col-4 { width: calc(100% / 12 * 4); }
.col-5 { width: calc(100% / 12 * 5); }
.col-6 { width: calc(100% / 12 * 6); }
.col-7 { width: calc(100% / 12 * 7); }
.col-8 { width: calc(100% / 12 * 8); }
.col-9 { width: calc(100% / 12 * 9); }
.col-10 { width: calc(100% / 12 * 10); }
.col-11 { width: calc(100% / 12 * 11); }
.col-12 { width: 100%; }

.offset-1 { margin-left: calc(100% / 12 * 1); }
.offset-2 { margin-left: calc(100% / 12 * 2); }
.offset-3 { margin-left: calc(100% / 12 * 3); }
.offset-4 { margin-left: calc(100% / 12 * 4); }
.offset-5 { margin-left: calc(100% / 12 * 5); }
.offset-6 { margin-left: calc(100% / 12 * 6); }
.offset-7 { margin-left: calc(100% / 12 * 7); }
.offset-8 { margin-left: calc(100% / 12 * 8); }
.offset-9 { margin-left: calc(100% / 12 * 9); }
.offset-10 { margin-left: calc(100% / 12 * 10); }
.offset-11 { margin-left: calc(100% / 12 * 11); }

/* =========================
   >= small (--bp-s)
========================= */
@media (min-width: 760px) {
  .col-s-1 { width: calc(100% / 12 * 1); }
  .col-s-2 { width: calc(100% / 12 * 2); }
  .col-s-3 { width: calc(100% / 12 * 3); }
  .col-s-4 { width: calc(100% / 12 * 4); }
  .col-s-5 { width: calc(100% / 12 * 5); }
  .col-s-6 { width: calc(100% / 12 * 6); }
  .col-s-7 { width: calc(100% / 12 * 7); }
  .col-s-8 { width: calc(100% / 12 * 8); }
  .col-s-9 { width: calc(100% / 12 * 9); }
  .col-s-10 { width: calc(100% / 12 * 10); }
  .col-s-11 { width: calc(100% / 12 * 11); }
  .col-s-12 { width: 100%; }

  .offset-s-0 { margin-left: 0; }
  .offset-s-1 { margin-left: calc(100% / 12 * 1); }
  .offset-s-2 { margin-left: calc(100% / 12 * 2); }
  .offset-s-3 { margin-left: calc(100% / 12 * 3); }
  .offset-s-4 { margin-left: calc(100% / 12 * 4); }
  .offset-s-5 { margin-left: calc(100% / 12 * 5); }
  .offset-s-6 { margin-left: calc(100% / 12 * 6); }
  .offset-s-7 { margin-left: calc(100% / 12 * 7); }
  .offset-s-8 { margin-left: calc(100% / 12 * 8); }
  .offset-s-9 { margin-left: calc(100% / 12 * 9); }
  .offset-s-10 { margin-left: calc(100% / 12 * 10); }
  .offset-s-11 { margin-left: calc(100% / 12 * 11); }  
}

/* =========================
   >= large (--bp-l)
========================= */
@media (min-width: 1200px) {
  .col-l-1 { width: calc(100% / 12 * 1); }
  .col-l-2 { width: calc(100% / 12 * 2); }
  .col-l-3 { width: calc(100% / 12 * 3); }
  .col-l-4 { width: calc(100% / 12 * 4); }
  .col-l-5 { width: calc(100% / 12 * 5); }
  .col-l-6 { width: calc(100% / 12 * 6); }
  .col-l-7 { width: calc(100% / 12 * 7); }
  .col-l-8 { width: calc(100% / 12 * 8); }
  .col-l-9 { width: calc(100% / 12 * 9); }
  .col-l-10 { width: calc(100% / 12 * 10); }
  .col-l-11 { width: calc(100% / 12 * 11); }
  .col-l-12 { width: 100%; }

  .offset-l-0 { margin-left: 0; }
  .offset-l-1 { margin-left: calc(100% / 12 * 1); }
  .offset-l-2 { margin-left: calc(100% / 12 * 2); }
  .offset-l-3 { margin-left: calc(100% / 12 * 3); }
  .offset-l-4 { margin-left: calc(100% / 12 * 4); }
  .offset-l-5 { margin-left: calc(100% / 12 * 5); }
  .offset-l-6 { margin-left: calc(100% / 12 * 6); }
  .offset-l-7 { margin-left: calc(100% / 12 * 7); }
  .offset-l-8 { margin-left: calc(100% / 12 * 8); }
  .offset-l-9 { margin-left: calc(100% / 12 * 9); }
  .offset-l-10 { margin-left: calc(100% / 12 * 10); }
  .offset-l-11 { margin-left: calc(100% / 12 * 11); }  
}