:root {
  /* font size */
  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-19: 1.1875rem;
  --font-size-20: 1.25rem;
  --font-size-21: 1.3125rem;
  --font-size-22: 1.375rem;
  --font-size-23: 1.4375rem;
  --font-size-24: 1.5rem;
  --font-size-25: 1.5625rem;
  --font-size-26: 1.625rem;
  --font-size-27: 1.6875rem;
  --font-size-28: 1.75rem;
  --font-size-29: 1.8125rem;
  --font-size-30: 1.875rem;
  /* color */
  --color-black: #000;
  --color-darkgoldenrod: #be9e40;
  --color-darkorange: #ff7d00;
  --color-dotjunior: #ff7d00;
  --color-deeppink: #ff007d;
  --color-dotlife: #ff007d;
  --color-deeppink-100: #ff007d;
  --color-deeppink-200: #ff007c;
  --color-deeppink-300: #e4027f;
  --color-deepskyblue: #009fe8;
  --color-dimgray: #707070;
  --color-dimgray-100: #707070;
  --color-dimgray-200: #505050;
  --color-dodgerblue: #0096ff;
  --color-dotstay: #0096ff;
  --color-forestgreen: #01963c;
  --color-dothome: #01963c;
  --color-forestgreen-100: #009844;
  --color-forestgreen-200: #01963c;
  --color-gold-100: #fec709;
  --color-gold-200: #e2cd00;
  --color-dotcenter: #FFC80A;
  --color-hotpink: #e64290;
  --color-lightseagreen: #00aaaa;
  --color-dotline: #1400c8;
  --color-mediumblue-100: #1a00cf;
  --color-mediumblue-200: #1a00ce;
  --color-mediumblue-300: #1401c8;
  --color-mediumblue-400: #1400c8;
  --color-mediumblue-500: #0000c8;
  --color-midnightblue: #1d2087;
  --color-red: #ff0000;
  --color-dotinnovation: #ff0000;
  --color-red-100: #ff0000;
  --color-red-200: #e50012;
  --color-seagreen: #009b7c;
  --color-dotwork: #009b7c;
  --color-white: #fff;
  --color-whitesmoke: #ededed;
  --color-yellow: #ffff00;
  --color-yellow-100: #fff100;
  /* container */
  --container-2xs-width: min(440px, calc(100vw - 8%));
  --container-xs-width: min(660px, calc(100vw - 8%));
  --container-sm-width: min(800px, calc(100vw - 8%));
  --container-width: min(1080px, calc(100vw - 8%));
  --container-lg-width: min(1080px, calc(100vw - 4%));
  --container-xl-width: min(1080px, calc(100vw - 2%));
  /* margin */
  --margin-base: 1em;
  --margin-0-5: calc(var(--margin-base) * 0.5);
  --margin-1-0: calc(var(--margin-base) * 1);
  --margin-1-5: calc(var(--margin-base) * 1.5);
  --margin-2-0: calc(var(--margin-base) * 2);
  --margin-2-5: calc(var(--margin-base) * 2.5);
  --margin-3-0: calc(var(--margin-base) * 3);
  --margin-3-5: calc(var(--margin-base) * 3.5);
  --margin-4-0: calc(var(--margin-base) * 4);
  --margin-4-5: calc(var(--margin-base) * 4.5);
  --margin-5-0: calc(var(--margin-base) * 5);
  --margin-5-5: calc(var(--margin-base) * 5.5);
}

.container {
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
}

.container-lg {
  max-width: var(--container-lg-width);
  margin-right: auto;
  margin-left: auto;
}

.container-xl {
  max-width: var(--container-xl-width);
  margin-right: auto;
  margin-left: auto;
}

.container-sm {
  max-width: var(--container-sm-width);
  margin-right: auto;
  margin-left: auto;
}

.container-xs {
  max-width: var(--container-xs-width);
  margin-right: auto;
  margin-left: auto;
}

.container-2xs {
  max-width: var(--container-2xs-width);
  margin-right: auto;
  margin-left: auto;
}

.black {
  color: var(--color-black);
}

.darkgoldenrod {
  color: var(--color-darkgoldenrod);
}

.darkorange {
  color: var(--color-darkorange);
}

.dotjunior {
  color: var(--color-dotjunior);
}

.deeppink {
  color: var(--color-deeppink);
}

.dotlife {
  color: var(--color-dotlife);
}

.deeppink-100 {
  color: var(--color-deeppink-100);
}

.deeppink-200 {
  color: var(--color-deeppink-200);
}

.deeppink-300 {
  color: var(--color-deeppink-300);
}

.deepskyblue {
  color: var(--color-deepskyblue);
}

.dimgray {
  color: var(--color-dimgray);
}

.dimgray-100 {
  color: var(--color-dimgray-100);
}

.dimgray-200 {
  color: var(--color-dimgray-200);
}

.dodgerblue {
  color: var(--color-dodgerblue);
}

.dotstay {
  color: var(--color-dotstay);
}

.forestgreen {
  color: var(--color-forestgreen);
}

.dothome {
  color: var(--color-dothome);
}

.forestgreen-100 {
  color: var(--color-forestgreen-100);
}

.forestgreen-200 {
  color: var(--color-forestgreen-200);
}

.gold-100 {
  color: var(--color-gold-100);
}

.gold-200 {
  color: var(--color-gold-200);
}

.dotcenter {
  color: var(--color-dotcenter);
}

.hotpink {
  color: var(--color-hotpink);
}

.lightseagreen {
  color: var(--color-lightseagreen);
}

.dotline {
  color: var(--color-dotline);
}

.mediumblue-100 {
  color: var(--color-mediumblue-100);
}

.mediumblue-200 {
  color: var(--color-mediumblue-200);
}

.mediumblue-300 {
  color: var(--color-mediumblue-300);
}

.mediumblue-400 {
  color: var(--color-mediumblue-400);
}

.mediumblue-500 {
  color: var(--color-mediumblue-500);
}

.midnightblue {
  color: var(--color-midnightblue);
}

.red {
  color: var(--color-red);
}

.dotinnovation {
  color: var(--color-dotinnovation);
}

.red-100 {
  color: var(--color-red-100);
}

.red-200 {
  color: var(--color-red-200);
}

.seagreen {
  color: var(--color-seagreen);
}

.dotwork {
  color: var(--color-dotwork);
}

.white {
  color: var(--color-white);
}

.whitesmoke {
  color: var(--color-whitesmoke);
}

.yellow {
  color: var(--color-yellow);
}

.yellow-100 {
  color: var(--color-yellow-100);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-darkgoldenrod {
  background-color: var(--color-darkgoldenrod);
}

.bg-darkorange {
  background-color: var(--color-darkorange);
}

.bg-dotjunior {
  background-color: var(--color-dotjunior);
}

.bg-deeppink {
  background-color: var(--color-deeppink);
}

.bg-dotlife {
  background-color: var(--color-dotlife);
}

.bg-deeppink-100 {
  background-color: var(--color-deeppink-100);
}

.bg-deeppink-200 {
  background-color: var(--color-deeppink-200);
}

.bg-deeppink-300 {
  background-color: var(--color-deeppink-300);
}

.bg-deepskyblue {
  background-color: var(--color-deepskyblue);
}

.bg-dimgray {
  background-color: var(--color-dimgray);
}

.bg-dimgray-100 {
  background-color: var(--color-dimgray-100);
}

.bg-dimgray-200 {
  background-color: var(--color-dimgray-200);
}

.bg-dodgerblue {
  background-color: var(--color-dodgerblue);
}

.bg-dotstay {
  background-color: var(--color-dotstay);
}

.bg-forestgreen {
  background-color: var(--color-forestgreen);
}

.bg-dothome {
  background-color: var(--color-dothome);
}

.bg-forestgreen-100 {
  background-color: var(--color-forestgreen-100);
}

.bg-forestgreen-200 {
  background-color: var(--color-forestgreen-200);
}

.bg-gold-100 {
  background-color: var(--color-gold-100);
}

.bg-gold-200 {
  background-color: var(--color-gold-200);
}

.bg-dotcenter {
  background-color: var(--color-dotcenter);
}

.bg-hotpink {
  background-color: var(--color-hotpink);
}

.bg-lightseagreen {
  background-color: var(--color-lightseagreen);
}

.bg-dotline {
  background-color: var(--color-dotline);
}

.bg-mediumblue-100 {
  background-color: var(--color-mediumblue-100);
}

.bg-mediumblue-200 {
  background-color: var(--color-mediumblue-200);
}

.bg-mediumblue-300 {
  background-color: var(--color-mediumblue-300);
}

.bg-mediumblue-400 {
  background-color: var(--color-mediumblue-400);
}

.bg-mediumblue-500 {
  background-color: var(--color-mediumblue-500);
}

.bg-midnightblue {
  background-color: var(--color-midnightblue);
}

.bg-red {
  background-color: var(--color-red);
}

.bg-dotinnovation {
  background-color: var(--color-dotinnovation);
}

.bg-red-100 {
  background-color: var(--color-red-100);
}

.bg-red-200 {
  background-color: var(--color-red-200);
}

.bg-seagreen {
  background-color: var(--color-seagreen);
}

.bg-dotwork {
  background-color: var(--color-dotwork);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-whitesmoke {
  background-color: var(--color-whitesmoke);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

.bg-yellow-100 {
  background-color: var(--color-yellow-100);
}

.font-10 {
  font-size: var(--font-size-10);
}

.font-11 {
  font-size: var(--font-size-11);
}

.font-12 {
  font-size: var(--font-size-12);
}

.font-13 {
  font-size: var(--font-size-13);
}

.font-14 {
  font-size: var(--font-size-14);
}

.font-15 {
  font-size: var(--font-size-15);
}

.font-16 {
  font-size: var(--font-size-16);
}

.font-17 {
  font-size: var(--font-size-17);
}

.font-18 {
  font-size: var(--font-size-18);
}

.font-19 {
  font-size: var(--font-size-19);
}

.font-20 {
  font-size: var(--font-size-20);
}

.font-21 {
  font-size: var(--font-size-21);
}

.font-22 {
  font-size: var(--font-size-22);
}

.font-23 {
  font-size: var(--font-size-23);
}

.font-24 {
  font-size: var(--font-size-24);
}

.font-25 {
  font-size: var(--font-size-25);
}

.font-26 {
  font-size: var(--font-size-26);
}

.font-27 {
  font-size: var(--font-size-27);
}

.font-28 {
  font-size: var(--font-size-28);
}

.font-29 {
  font-size: var(--font-size-29);
}

.font-30 {
  font-size: var(--font-size-30);
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.semi-bold {
  font-weight: 600;
}

.medium, .w-5 {
  font-weight: 500;
}

.w-6 {
  font-weight: 600;
}

.w-7 {
  font-weight: 700;
}

.quicksand {
  font-family: "Quicksand", sans-serif;
}

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.l-height-1 {
  line-height: 1;
}

.l-height-1-2 {
  line-height: 1.2;
}

.l-height-1-8 {
  line-height: 1.8em;
}

.l-height-2 {
  line-height: 2em;
}

.l-height-2-5 {
  line-height: 2.5em;
}

.block-center {
  margin-right: auto;
  margin-left: auto;
}

.underline {
  text-decoration: underline;
}

.pointer {
  cursor: pointer;
}

.inline-block {
  display: inline-block;
}

.button, .button-sm {
  font-size: 0.625rem;
  font-weight: bold;
  display: inline-block;
  padding: 0.75em 5em;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-white);
  border-radius: 20px;
  background-color: var(--button-color);
  --button-color: var(--color-mediumblue-500);
}
.button a, .button-sm a {
  text-decoration: none;
  color: var(--color-white);
}
.button:hover, .button-sm:hover {
  opacity: 0.8;
}

.button-sm {
  padding: 0.75em 1.4em;
}

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

.d-flex {
  display: flex;
}

.d-flex-justify-between {
  display: flex;
  justify-content: space-between;
}

.d-flex-justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.d-flex-align-start {
  display: flex;
  align-items: start;
}

.d-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.d-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

.f-grow {
  flex-grow: 1;
}

.scale-0-1 {
  transform: scale(0.1);
}

.scale-0-5 {
  transform: scale(0.5);
}

.scale-1-2 {
  transform: scale(1.2);
}

.scale-1-5 {
  transform: scale(1.5);
}

.scale-2 {
  transform: scale(2);
}

.scale-2-5 {
  transform: scale(2.5);
}

.scale-3 {
  transform: scale(3);
}

.scale-4 {
  transform: scale(4);
}

.scale-5 {
  transform: scale(5);
}

.opacity-1 {
  opacity: 1;
}

.gap-0-5 {
  gap: 0.5em;
}

.gap-1 {
  gap: 1em;
}

.gap-1-5 {
  gap: 1.5em;
}

.gap-2 {
  gap: 2em;
}

.gap-2-5 {
  gap: 2.5em;
}

.gap-3 {
  gap: 3em;
}

.gap-3-5 {
  gap: 3.5em;
}

.gap-4 {
  gap: 4em;
}

.gap-4-5 {
  gap: 4.5em;
}

.gap-5 {
  gap: 5em;
}

.gap-5-5 {
  gap: 5.5em;
}

.shadow-box {
  padding: 2em;
  border: 5px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-color);
  --border-color: var(--color-mediumblue-500);
  --shadow-color: var(--color-mediumblue-500);
  --shadow-size: 1rem;
}
.shadow-box.transparent {
  position: relative;
  --background-color: #E8E6FA;
}
.shadow-box.transparent:after {
  position: absolute;
  z-index: -1;
  top: calc(var(--shadow-size) - 5px);
  right: 0;
  bottom: 0;
  left: calc(var(--shadow-size) - 5px);
  content: "";
  border-top-left-radius: 20px;
  background-color: var(--background-color);
}

.mt-0-5 {
  margin-top: var(--margin-0-5);
}

.pt-0-2 {
  padding-top: 0.2em;
}

.pt-0-5 {
  padding-top: var(--margin-0-5);
}

.mt-1 {
  margin-top: var(--margin-1-0);
}

.pt-1 {
  padding-top: var(--margin-1-0);
}

.mt-1-5 {
  margin-top: var(--margin-1-5);
}

.pt-1-5 {
  padding-top: var(--margin-1-5);
}

.mt-2 {
  margin-top: var(--margin-2-0);
}

.pt-2 {
  padding-top: var(--margin-2-0);
}

.mt-2-5 {
  margin-top: var(--margin-2-5);
}

.pt-2-5 {
  padding-top: var(--margin-2-5);
}

.mt-3 {
  margin-top: var(--margin-3-0);
}

.pt-3 {
  padding-top: var(--margin-3-0);
}

.mt-3-5 {
  margin-top: var(--margin-3-5);
}

.pt-3-5 {
  padding-top: var(--margin-3-5);
}

.mt-4 {
  margin-top: var(--margin-4-0);
}

.pt-4 {
  padding-top: var(--margin-4-0);
}

.mt-4-5 {
  margin-top: var(--margin-4-5);
}

.pt-4-5 {
  padding-top: var(--margin-4-5);
}

.mt-5 {
  margin-top: var(--margin-5-0);
}

.pt-5 {
  padding-top: var(--margin-5-0);
}

.mt-5-5 {
  margin-top: var(--margin-5-5);
}

.pt-5-5 {
  padding-top: var(--margin-5-5);
}

.mb-0-5 {
  margin-bottom: var(--margin-0-5);
}

.pb-0-5 {
  padding-bottom: var(--margin-0-5);
}

.mb-1 {
  margin-bottom: var(--margin-1-0);
}

.pb-1 {
  padding-bottom: var(--margin-1-0);
}

.mb-1-5 {
  margin-bottom: var(--margin-1-5);
}

.pb-1-5 {
  padding-bottom: var(--margin-1-5);
}

.mb-2 {
  margin-bottom: var(--margin-2-0);
}

.pb-2 {
  padding-bottom: var(--margin-2-0);
}

.mb-2-5 {
  margin-bottom: var(--margin-2-5);
}

.pb-2-5 {
  padding-bottom: var(--margin-2-5);
}

.mb-3 {
  margin-bottom: var(--margin-3-0);
}

.pb-3 {
  padding-bottom: var(--margin-3-0);
}

.mb-3-5 {
  margin-bottom: var(--margin-3-5);
}

.pb-3-5 {
  padding-bottom: var(--margin-3-5);
}

.mb-4 {
  margin-bottom: var(--margin-4-0);
}

.pb-4 {
  padding-bottom: var(--margin-4-0);
}

.mb-4-5 {
  margin-bottom: var(--margin-4-5);
}

.pb-4-5 {
  padding-bottom: var(--margin-4-5);
}

.mb-5 {
  margin-bottom: var(--margin-5-0);
}

.pb-5 {
  padding-bottom: var(--margin-5-0);
}

.mb-5-5 {
  margin-bottom: var(--margin-5-5);
}

.pb-5-5 {
  padding-bottom: var(--margin-5-5);
}

.mr-0-5 {
  margin-right: var(--margin-0-5);
}

.pr-0-5 {
  padding-right: var(--margin-0-5);
}

.mr-1 {
  margin-right: var(--margin-1-0);
}

.pr-1 {
  padding-right: var(--margin-1-0);
}

.mr-1-5 {
  margin-right: var(--margin-1-5);
}

.pr-1-5 {
  padding-right: var(--margin-1-5);
}

.mr-2 {
  margin-right: var(--margin-2-0);
}

.pr-2 {
  padding-right: var(--margin-2-0);
}

.mr-2-5 {
  margin-right: var(--margin-2-5);
}

.pr-2-5 {
  padding-right: var(--margin-2-5);
}

.mr-3 {
  margin-right: var(--margin-3-0);
}

.pr-3 {
  padding-right: var(--margin-3-0);
}

.mr-3-5 {
  margin-right: var(--margin-3-5);
}

.pr-3-5 {
  padding-right: var(--margin-3-5);
}

.mr-4 {
  margin-right: var(--margin-4-0);
}

.pr-4 {
  padding-right: var(--margin-4-0);
}

.mr-4-5 {
  margin-right: var(--margin-4-5);
}

.pr-4-5 {
  padding-right: var(--margin-4-5);
}

.mr-5 {
  margin-right: var(--margin-5-0);
}

.pr-5 {
  padding-right: var(--margin-5-0);
}

.mr-5-5 {
  margin-right: var(--margin-5-5);
}

.pr-5-5 {
  padding-right: var(--margin-5-5);
}

.ml-0-5 {
  margin-left: var(--margin-0-5);
}

.pl-0-5 {
  padding-left: var(--margin-0-5);
}

.ml-1 {
  margin-left: var(--margin-1-0);
}

.pl-1 {
  padding-left: var(--margin-1-0);
}

.ml-1-5 {
  margin-left: var(--margin-1-5);
}

.pl-1-5 {
  padding-left: var(--margin-1-5);
}

.ml-2 {
  margin-left: var(--margin-2-0);
}

.pl-2 {
  padding-left: var(--margin-2-0);
}

.ml-2-5 {
  margin-left: var(--margin-2-5);
}

.pl-2-5 {
  padding-left: var(--margin-2-5);
}

.ml-3 {
  margin-left: var(--margin-3-0);
}

.pl-3 {
  padding-left: var(--margin-3-0);
}

.ml-3-5 {
  margin-left: var(--margin-3-5);
}

.pl-3-5 {
  padding-left: var(--margin-3-5);
}

.ml-4 {
  margin-left: var(--margin-4-0);
}

.pl-4 {
  padding-left: var(--margin-4-0);
}

.ml-4-5 {
  margin-left: var(--margin-4-5);
}

.pl-4-5 {
  padding-left: var(--margin-4-5);
}

.ml-5 {
  margin-left: var(--margin-5-0);
}

.pl-5 {
  padding-left: var(--margin-5-0);
}

.ml-5-5 {
  margin-left: var(--margin-5-5);
}

.pl-5-5 {
  padding-left: var(--margin-5-5);
}

@media screen and (width <= 768px) {
  .pc {
    display: none !important;
  }
}
@media screen and (width > 768px) {
  .tab-only {
    display: none !important;
  }

  .tab {
    display: none !important;
  }
}
@media screen and (width < 375px) {
  .tab-only {
    display: none !important;
  }
}
@media screen and (width >= 375px) {
  .sp {
    display: none !important;
  }
}
@media screen and (width <= 768px) {
  .button, .button-sm {
    font-size: 0.9rem;
  }
}