/* Utility for HTML MarkUp */

/* 1440 */
.max-width-large {
  max-width: var(--max-width);
}

/* 960 */
.max-width-medium {
  max-width: var(--inner-width);
}

/* Font Styles */
.title-mincho {
  font-family: var(--font-mincho);
  font-weight: 400;
}

/* ===  Title ===  */
.title-design {
  font-family: var(--font-design);
  font-weight: 700;
}

.heading-design {
  font-family: var(--font-design);
  font-weight: 400;
}

.text-design {
  font-family: var(--font-design);
  font-weight: 300;
}

/* 見出し装飾 */
.deco-border {
  border: 4px solid var(--color-default);
  color: var(--color-default);
  padding: 0.25em 1em;
  width: calc(100% - 84px);
  margin: 1em auto 0;
}
@media screen and (max-width: 768px) {
  .deco-border {
    padding: 0.25em 0;
    width: 100%;
  }
}

/* To Center */
.m-auto {
  margin: auto;
}

/* text-align */
.tex-center {
  text-align: center;
}

.tex-left {
  text-align: left;
}

.text-justify {
  text-align: justify;
}

/* Color */
.text-default {
  color: var(--color-default);
}
.text-primary {
  color: var(--color-primary);
}
.text-accent {
  color: var(--color-accent);
}

@media screen and (max-width: 768px) {
  .text-center-sp {
    text-align: center;
  }
}

/* Spacing */
/* .mx-24 {
  margin: 0 24px;
}
.my-24 {
  margin: 24px 0;
} */

/* flex-box */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-column {
  flex-direction: column;
}

/* 子要素の左右反転 */
.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-ai-center {
  align-items: center;
}

.flex-jc-center {
  justify-content: center;
}

.flex-jc-between {
  justify-content: space-between;
}

.flex-jc-around {
  justify-content: space-around;
}

.section > .container .grid-content .grid-text > p.small,
#info-top .small {
  font-size: 14px;
}

/* Spacing */
.mt-mid {
  margin-top: 1.5rem;
}
.mb-mid {
  margin-bottom: 1.5rem;
}
.ml-mid {
  margin-left: 1.5rem;
}
.mr-mid {
  margin-right: 1.5rem;
}

/* UI Components */

/* TODO: Responsive
 * @break-point 768px
 */

/*** SP ***/
/* モバイルでは改行解除 */
.sp-no-break {
  display: block;
  font-size: 0;
}
@media screen and (min-width: 769px) {
  .pc-no-break {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .sp-no-break {
    display: inline;
  }
  .sp-text-left {
    text-align: left;
  }
  .sp-none {
    display: none;
  }
  .sp-flex-clolumn {
    flex-direction: column;
  }
}