/* Reset */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

/* Basic Elements */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
  position: relative;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

body {
  position: relative;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  word-break: break-all;
}

:target {
  scroll-margin-top: var(--header-offset);
}

img + figcaption {
  margin-top: var(--padding);
}

:is(sub, sup) {
  font-size: var(--small);
}

img {
  border: 0;
  max-width: 100%;
  vertical-align: bottom;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

figure img {
  min-width: 100%;
}

ul,
li {
  list-style: none;
}

li {
  line-height: var(--line-height);
}

dl dt {
  font-weight: bold;
}

dl :is(dt, dd) + dd {
  margin-top: calc(var(--margin) / 2);
}

iframe {
  width: 100%;
  min-height: 300px;
  border: none;
  border-radius: var(--radius);
}

pre {
  border-radius: var(--radius-inner);
  padding: var(--padding);
  background: var(--color-dark-glass);
  color: var(--color-white);
  white-space: pre-wrap;
  text-align: left;
}

address {
  font-style: normal;
  font-size: 0.9em;
}

.aspect-4-3 {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.aspect-1-1 {
  aspect-ratio: 1/1;
  overflow: hidden;
}

.aspect-2-1 {
  aspect-ratio: 2/1;
  overflow: hidden;
}

.aspect-16-9 {
  aspect-ratio: 16/9;
  overflow: hidden;
}

:where(.aspect-4-3, .aspect-1-1, .aspect-2-1, .aspect-16-9) > img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Common Class */
.width-limiter {
  max-width: var(--width-limit);
  padding-left: var(--padding);
  padding-right: var(--padding);
  margin-left: auto;
  margin-right: auto;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
  text-justify: distribute-all-lines !important;
}

.vertical {
  writing-mode: vertical-rl;
}

.horizontal {
  writing-mode: horizontal-tb;
}

/* Width */
.w10p {
  width: 10%;
}

.w20p {
  width: 20%;
}

.w30p {
  width: 30%;
}

.w40p {
  width: 40%;
}

.w50p {
  width: 50%;
}

.w60p {
  width: 60%;
}

.w70p {
  width: 70%;
}

.w80p {
  width: 80%;
}

.w90p {
  width: 90%;
}

.w100p {
  width: 100%;
}

.w10 {
  width: 10px;
}

.w20 {
  width: 20px;
}

.w30 {
  width: 30px;
}

.w40 {
  width: 40px;
}

.w50 {
  width: 50px;
}

.w60 {
  width: 60px;
}

.w70 {
  width: 70px;
}

.w80 {
  width: 80px;
}

.w90 {
  width: 90px;
}

.w100 {
  width: 100px;
}

.w110 {
  width: 110px;
}

.w120 {
  width: 120px;
}

.w130 {
  width: 130px;
}

.w140 {
  width: 140px;
}

.w150 {
  width: 150px;
}

.w160 {
  width: 160px;
}

.w170 {
  width: 170px;
}

.w180 {
  width: 180px;
}

.w190 {
  width: 190px;
}

.w200 {
  width: 200px;
}

.w250 {
  width: 250px;
}

.w300 {
  width: 300px;
}

/** Media Query **/
@media (min-width: 920.1px) {
  .sp:not(.pc) {
    display: none !important;
  }
  .tb:not(.pc) {
    display: none !important;
  }
}
@media (min-width: 520.1px) and (max-width: 920px) {
  .pc:not(.tb) {
    display: none !important;
  }
  .sp:not(.tb) {
    display: none !important;
  }
}
@media (max-width: 520px) {
  .tb:not(.sp) {
    display: none !important;
  }
  .pc:not(.sp) {
    display: none !important;
  }
}