@charset "UTF-8";
/**
 * @ utility.css
 *
 * 
 */

/* ==============================
  usual
============================== */
.u-inner {
  width: 100%;
  max-width: 1400px;
  margin: auto;
  position: relative;
}
.u-show-sp {
  display: none;
}
@media screen and (max-width: 1399px) {
  .u-inner {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .u-inner {
    width: 83%;
  }
  .u-show-tbl {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .u-show-sp {
    display: block;
  }
  .u-show-pc {
    display: none;
  }
}

/* ==============================
  .u-bg
============================== */
.u-bg-marron {
  background: url(../img/common/bg/bg_maroon.webp) no-repeat center / cover;
}
.u-bg-marron-dark {
  background: url(../img/common/bg/bg_maroon.webp) no-repeat center / cover;
  overflow: hidden;
  position: relative;
}
.u-bg-marron-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 35%);
  pointer-events: none;
}
.u-bg-green {
  background: url(../img/common/bg/bg_green.webp) no-repeat center / cover;
}
.u-bg-green-dark {
  background: url(../img/common/bg/bg_green.webp) no-repeat center / cover;
  overflow: hidden;
  position: relative;
}
.u-bg-green-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 20%);
  pointer-events: none;
}
.u-bg-gold {
  background: url(../img/common/bg/bg_gold.webp) no-repeat center / cover;
}
.u-bg-gold-bright {
  background: url(../img/common/bg/bg_gold.webp) no-repeat center / cover;
  overflow: hidden;
  position: relative;
}
.u-bg-gold-bright::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 25%);
  pointer-events: none;
}
.u-bg-brown {
  background: url(../img/common/bg/bg_brown.webp) no-repeat center / cover;
}
.u-bg-brown-dark {
  background: url(../img/common/bg/bg_brown.webp) no-repeat center / cover;
  overflow: hidden;
  position: relative;
}
.u-bg-brown-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 30%);
  pointer-events: none;
}
.u-bg-purple {
  background: url(../img/common/bg/bg_purple.webp) no-repeat center / cover;
}
.u-bg-purple-dark {
  background: url(../img/common/bg/bg_purple.webp) no-repeat center / cover;
  overflow: hidden;
  position: relative;
}
.u-bg-purple-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 30%);
  pointer-events: none;
}
/* ==============================
  .u-color
============================== */
.u-color-cream * {
  color: var(--color-cream);
}
.u-color-black * {
  color: var(--color-black);
}
.u-color-marron * {
  color: var(--color-marron);
}

/* ==============================
  .u-layout
============================== */
.u-layout-column {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 50px;
}
.u-layout-column-reverse {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row-reverse;
  padding-bottom: 50px;
}
.u-layout-bottom-space {
  margin-bottom: 1.5em;
}
.u-layout-halfwidth-space {
  width: 8px;
}

@media screen and (max-width: 1024px) {
  .u-layout-column {
    padding-bottom: 0;
  }
}