@charset "UTF-8";
:root {
  --color-base: #1f1b24;
  --color-accent: #b8a875;
  --color-bg: #000;
  --color-bg2: #302e33;
  --color-font: #fff;

  --space-s : min(2vw, 20px);
  --space-m : min(4vw, 40px);
  --space-mm: min(8vw, 80px);
  --space-l : min(12vw, 120px);
  --space-lx2 : min(24vw, 240px);

  --family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  --padding: 16px;
  --gap: 8px;

  --border: 2px;

  --fts: 12px;

  --col: 136px;
  --col-6: calc(calc(var(--col) * 6) + calc(var(--gap) * 5));
  --col-8: calc(calc(var(--col) * 8) + calc(var(--gap) * 7));
  --col-9: calc(calc(var(--col) * 9) + calc(var(--gap) * 8));
  --col-12: calc(calc(var(--col) * 12) + calc(var(--gap) * 11));
  --content-w: min(100%, calc(1200px + calc(var(--padding) * 2)));
}

* {
  box-sizing: border-box;
}
html, body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
  font-family: var(--family);
  line-height: 1.5;
  font-size: var(--fts);
  color: var(--color-font);
}

html {
	scroll-behavior: smooth;
}
body {
	color: var(--color-font);
	background-color: var(--color-bg);
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  line-height: 1;
}
svg {
  height: auto;
}
ul {
  list-style: none;
}
a {
  color: var(--color-font);
}

.c-container {
  padding: var(--space-l) 0 var(--space-l);
}

.c-box {
  width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
}
.c-inner {
  padding: 0 var(--padding);
}

.c-ttl {
  /* position: relative;
  width: min(64vw, 1000px);
  max-width: 64vh;
  margin-left: var(--padding); */
  background: url(../img/ttl-bg.png) center/contain repeat-x;
  text-align: center;
}
.c-ttl > img {
  width: min(80%, 896px);
}
.c-readtxt {
  max-width: 960px;
  margin: 1em auto 0;
}
.c-update-history {
  max-width: 960px;
  padding: 2em;
  margin: var(--space-m) auto 0;
  background: var(--color-base);
  border-radius: calc(var(--padding) / 4);
}
.c-update-history dt {
  color: var(--color-accent);
  font-weight: bold;
}
.c-update-history dd {
  margin-top: 4px;
}

.c-dl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  max-width: 766px;
  margin: 0 auto;
}

.c-dl__item {
  list-style: none;
  max-width: 140px;
  margin-right: 5px;
}

.c-dl__item:last-child {
  margin-right: 0;
}
.c-sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 220px;
  margin: 20px auto 0;
}

.c-sns__item {
  list-style: none;
}
.c-copy {
  font-size: 75%;
  text-align: center;
  padding: 2em 0;
}

.p-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  z-index: 999;
}
.p-header-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: min(26vw, 240px);
}

.p-navi {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}
.p-navi-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 var(--padding);
  background: var(--color-base);
}

.p-gacha-name {
  margin: 0 auto;
}

.p-set {
  background: var(--color-base);
}
.p-set a {
  display: block;
  padding: var(--space-l) 0;
}

.p-dungeon-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-template-areas:
    "advent   advent"
    "coliseum coliseum"
    "title    title"
    "story    story";
  justify-content: center;
  width: min(100%, 896px);
  margin: var(--space-l) auto 0;
  gap: var(--gap);
}
.p-dungeon-list__item {
  position: relative;
}
.p-dungeon-list__item::after {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: var(--border) solid #443623;
  box-sizing: border-box;
  pointer-events: none;
}
.p-dungeon-list__item--advent {
  grid-area: advent;
}
.p-dungeon-list__item--coliseum {
  grid-area: coliseum;
}
.p-dungeon-list__item--title {
  grid-area: title;
}
.p-dungeon-list__item--hall {
  grid-area: hall;
}
.p-dungeon-list__item--story {
  grid-area: story;
}


.p-others-contents {
  width: min(100%, calc(var(--col-9) + calc(var(--padding) * 2)));
  margin: var(--space-l) auto 0;
  padding: 0 var(--padding);
}

.p-foot__contents {
  position: relative;
  background: url(../img/foot.jpg) center/cover no-repeat;
}
.p-foot__contents::before {
  position: relative;
  display: block;
  content: '';
  width: min(100%, 896px);
  margin: 0 auto;
  padding-top: calc(calc(750 / 896) * 100%);
}

.p-footer {
  color: var(--color-font);
  padding: 0;
}

.p-dl__txt {
  font-size: 140%;
  font-weight: bold;
}

.p-dl__contents {
  margin-top: 0.5em;
}
.p-dl__notice {
  margin-top: 1em;
  text-align: center;
  font-size: 75%;
}
.p-back {
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  margin-top: 15px;
}

.p-back a {
  text-decoration: none;
  color: var(--color-font);
  margin: 0 auto;
}
.p-back a::before {
  display: inline-block;
  content: '';
  width: 0;
  height: 0;
  margin-right: 1.5em;
  border-right: 1.73em solid var(--color-font);
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  font-size: 40%;
}

.p-bnr-link {
  display: grid;
  grid-template-columns: min(70vw, 640px);
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  gap: var(--gap);
}
.p-bnr-link__item {
  position: relative;
  margin: auto;
  box-sizing: content-box;
}
.p-bnr-link__item > a {
  display: block;
  width: 100%;
  padding: 0;
  border: calc(var(--border) / 2) solid var(--color-accent);
  text-decoration: none;
  text-align: center;
  font-size: min(8vw, 64px);
  font-weight: 900;
  line-height: 1;
  color: var(--color-base);
  box-sizing: content-box;
}
.p-bnr-link__item .svg-arrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(6.4vw, 40px);
  transform: translate(-100%, -50%);
  pointer-events: none;
  fill: var(--color-base);
}

.p-btn-link {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
  margin: 0 auto;
  gap: var(--gap);
}
.p-btn-link__item {
  grid-column: span 3;
  position: relative;
  width: min(100%, 640px);
  margin: auto;
}

.p-pagetop {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 20;
}
.p-pagetop img {
  width: min(20vw, 150px);
}

.u-align-c { text-align: center !important; }
.u-align-l { text-align: left !important; }
.u-align-r { text-align: right !important; }

.u-va-m   { vertical-align: middle !important; }

.u-mt0    { margin-top: 0 !important; }
.u-mt-1em { margin-top: 1em !important; }
.u-mt-s   { margin-top: var(--space-s) !important;}
.u-mt-m   { margin-top: var(--space-m) !important; }
.u-mt-mm  { margin-top: var(--space-mm) !important; }
.u-mt-l   { margin-top: var(--space-l) !important; }

.u-pt0    { padding-top: 0 !important; }
.u-pt-xs  { padding-top: calc(var(--padding) / 2) !important; }
.u-pb0    { padding-bottom: 0 !important; }
.u-pb-xs  { padding-bottom: calc(var(--padding) / 2) !important; }

.u-fs-75 { font-size: 75% !important; }
.u-fs-80 { font-size: 80% !important; }
.u-fs-125 {
  font-size: 125% !important;
  line-height: 0.75;
}

.u-img-fluid {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.u-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.u-grid { display: grid; }
.u-grid-1  { grid-template-columns: repeat( 1, 1fr); }
.u-grid-2  { grid-template-columns: repeat( 2, 1fr); }
.u-grid-3  { grid-template-columns: repeat( 3, 1fr); }
.u-grid-4  { grid-template-columns: repeat( 4, 1fr); }
.u-grid-5  { grid-template-columns: repeat( 5, 1fr); }
.u-grid-6  { grid-template-columns: repeat( 6, 1fr); }
.u-grid-7  { grid-template-columns: repeat( 7, 1fr); }
.u-grid-8  { grid-template-columns: repeat( 8, 1fr); }
.u-grid-9  { grid-template-columns: repeat( 9, 1fr); }
.u-grid-10 { grid-template-columns: repeat(10, 1fr); }
.u-grid-11 { grid-template-columns: repeat(11, 1fr); }
.u-grid-12 { grid-template-columns: repeat(12, 1fr); }
.u-col-auto  { grid-column: auto; }
.u-colspan-1  { grid-column: span  1/span  1; }
.u-colspan-2  { grid-column: span  2/span  2; }
.u-colspan-3  { grid-column: span  3/span  3; }
.u-colspan-4  { grid-column: span  4/span  4; }
.u-colspan-5  { grid-column: span  5/span  5; }
.u-colspan-6  { grid-column: span  6/span  6; }
.u-colspan-7  { grid-column: span  7/span  7; }
.u-colspan-8  { grid-column: span  8/span  8; }
.u-colspan-9  { grid-column: span  9/span  9; }
.u-colspan-10 { grid-column: span 10/span 10; }
.u-colspan-11 { grid-column: span 11/span 11; }
.u-colspan-12 { grid-column: span 12/span 12; }
.u-colspan-full { grid-column: 1/-1; }
.u-col-start-1  { grid-column-start:  1; }
.u-col-start-2  { grid-column-start:  2; }
.u-col-start-3  { grid-column-start:  3; }
.u-col-start-4  { grid-column-start:  4; }
.u-col-start-5  { grid-column-start:  5; }
.u-col-start-6  { grid-column-start:  6; }
.u-col-start-7  { grid-column-start:  7; }
.u-col-start-8  { grid-column-start:  8; }
.u-col-start-9  { grid-column-start:  9; }
.u-col-start-10 { grid-column-start: 10; }
.u-col-start-11 { grid-column-start: 11; }
.u-col-start-12 { grid-column-start: 12; }
.u-col-end-2  { grid-column-end:  2; }
.u-col-end-3  { grid-column-end:  3; }
.u-col-end-4  { grid-column-end:  4; }
.u-col-end-5  { grid-column-end:  5; }
.u-col-end-6  { grid-column-end:  6; }
.u-col-end-7  { grid-column-end:  7; }
.u-col-end-8  { grid-column-end:  8; }
.u-col-end-9  { grid-column-end:  9; }
.u-col-end-10 { grid-column-end: 10; }
.u-col-end-11 { grid-column-end: 11; }
.u-col-end-12 { grid-column-end: 12; }
.u-col-end-13 { grid-column-end: 13; }
.u-gap { gap: var(--gap); }
.u-gap-x { -moz-column-gap: var(--gap); column-gap: var(--gap); }
.u-gap-y { row-gap: var(--gap); }
.u-gap-2x { gap: calc(var(--gap) * 2); }
.u-gap-x-2x { -moz-column-gap: calc(var(--gap) * 2); column-gap: calc(var(--gap) * 2); }
.u-gap-y-2x { row-gap: calc(var(--gap) * 2); }
.u-gap-3x { gap: calc(var(--gap) * 3); }
.u-gap-x-3x { -moz-column-gap: calc(var(--gap) * 3); column-gap: calc(var(--gap) * 3); }
.u-gap-y-3x { row-gap: calc(var(--gap) * 3); }
.u-justify-start { justify-content: flex-start; }
.u-justify-end { justify-content: flex-end; }
.u-justify-end-safe { justify-content: safe flex-end; }
.u-justify-center { justify-content: center; }
.u-justify-center-safe { justify-content: safe center; }
.u-justify-between { justify-content: space-between; }
.u-justify-around { justify-content: space-around; }
.u-justify-evenly { justify-content: space-evenly; }
.u-justify-stretch { justify-content: stretch; }
.u-justify-baseline { justify-content: baseline; }
.u-justify-normal { justify-content: normal; }


/* animation */
@-webkit-keyframes ani-distortion {
  0%   { transform: scale(1);-webkit-filter: blur(3px);filter: blur(3px); }
  100%   { transform: scale(1.03);-webkit-filter: blur(0);filter: blur(0); }
  100%   { transform: scale(1);-webkit-filter: blur(0);filter: blur(0); }
}
@keyframes ani-distortion {
  0%   { transform: scale(1);-webkit-filter: blur(3px);filter: blur(3px); }
  100%   { transform: scale(1.03);-webkit-filter: blur(0);filter: blur(0); }
  100%   { transform: scale(1);-webkit-filter: blur(0);filter: blur(0); }
}

/* transition */

@media (any-hover: hover) {
  a:hover img:not(.c-dl a:hover img) {
    -webkit-animation: 0.3s ani-distortion;
            animation: 0.3s ani-distortion;
  }
  .p-set:hover {
    background: var(--color-bg2);
  }
}
@media (orientation: landscape) {
  :root {
    --space-m: min(1vw, 20px);
    --space-m: min(2vw, 40px);
    --space-mm: min(4vw, 80px);
    --space-l: min(6vw, 120px);
    --space-lx2: min(12vw, 240px);
  }
  .p-header-ttl {
    width: min(100%, 1600px);
    margin: 0 auto;
  }
}

@media screen and (min-width: 641px){
  :root {
    --space-m: min(1vw, 20px);
    --space-m: min(2vw, 40px);
    --space-mm: min(4vw, 80px);
    --space-l: min(6vw, 120px);
    --space-lx2: min(12vw, 240px);
    --padding: 32px;
    --fts: 16px;
    --border: 4px;
    --content-w: min(90vw, calc(1200px + calc(var(--padding) * 2)));
  }
  .p-navi-list__item {
    width: min(24vw, 240px);
  }
  .p-bnr-link__item > a {
    font-size: min(5vw, 64px);
  }
  /* utility */
  .md\:u-grid { display: grid; }
  .md\:u-grid-1  { grid-template-columns: repeat( 1, 1fr); }
  .md\:u-grid-2  { grid-template-columns: repeat( 2, 1fr); }
  .md\:u-grid-3  { grid-template-columns: repeat( 3, 1fr); }
  .md\:u-grid-4  { grid-template-columns: repeat( 4, 1fr); }
  .md\:u-grid-5  { grid-template-columns: repeat( 5, 1fr); }
  .md\:u-grid-6  { grid-template-columns: repeat( 6, 1fr); }
  .md\:u-grid-7  { grid-template-columns: repeat( 7, 1fr); }
  .md\:u-grid-8  { grid-template-columns: repeat( 8, 1fr); }
  .md\:u-grid-9  { grid-template-columns: repeat( 9, 1fr); }
  .md\:u-grid-10 { grid-template-columns: repeat(10, 1fr); }
  .md\:u-grid-11 { grid-template-columns: repeat(11, 1fr); }
  .md\:u-grid-12 { grid-template-columns: repeat(12, 1fr); }
  .md\:u-col-auto  { grid-column: auto; }
  .md\:u-colspan-1  { grid-column: span  1/span  1; }
  .md\:u-colspan-2  { grid-column: span  2/span  2; }
  .md\:u-colspan-3  { grid-column: span  3/span  3; }
  .md\:u-colspan-4  { grid-column: span  4/span  4; }
  .md\:u-colspan-5  { grid-column: span  5/span  5; }
  .md\:u-colspan-6  { grid-column: span  6/span  6; }
  .md\:u-colspan-7  { grid-column: span  7/span  7; }
  .md\:u-colspan-8  { grid-column: span  8/span  8; }
  .md\:u-colspan-9  { grid-column: span  9/span  9; }
  .md\:u-colspan-10 { grid-column: span 10/span 10; }
  .md\:u-colspan-11 { grid-column: span 11/span 11; }
  .md\:u-colspan-12 { grid-column: span 12/span 12; }
  .md\:u-colspan-full { grid-column: 1/-1; }
  .md\:u-col-start-1  { grid-column-start:  1; }
  .md\:u-col-start-2  { grid-column-start:  2; }
  .md\:u-col-start-3  { grid-column-start:  3; }
  .md\:u-col-start-4  { grid-column-start:  4; }
  .md\:u-col-start-5  { grid-column-start:  5; }
  .md\:u-col-start-6  { grid-column-start:  6; }
  .md\:u-col-start-7  { grid-column-start:  7; }
  .md\:u-col-start-8  { grid-column-start:  8; }
  .md\:u-col-start-9  { grid-column-start:  9; }
  .md\:u-col-start-10 { grid-column-start: 10; }
  .md\:u-col-start-11 { grid-column-start: 11; }
  .md\:u-col-start-12 { grid-column-start: 12; }
  .md\:u-col-end-2  { grid-column-end:  2; }
  .md\:u-col-end-3  { grid-column-end:  3; }
  .md\:u-col-end-4  { grid-column-end:  4; }
  .md\:u-col-end-5  { grid-column-end:  5; }
  .md\:u-col-end-6  { grid-column-end:  6; }
  .md\:u-col-end-7  { grid-column-end:  7; }
  .md\:u-col-end-8  { grid-column-end:  8; }
  .md\:u-col-end-9  { grid-column-end:  9; }
  .md\:u-col-end-10 { grid-column-end: 10; }
  .md\:u-col-end-11 { grid-column-end: 11; }
  .md\:u-col-end-12 { grid-column-end: 12; }
  .md\:u-col-end-13 { grid-column-end: 13; }
  .md\:u-gap { gap: var(--gap); }
  .md\:u-gap-x { -moz-column-gap: var(--gap); column-gap: var(--gap); }
  .md\:u-gap-y { row-gap: var(--gap); }
  .md\:u-gap-2x { gap: calc(var(--gap) * 2); }
  .md\:u-gap-x-2x { -moz-column-gap: calc(var(--gap) * 2); column-gap: calc(var(--gap) * 2); }
  .md\:u-gap-y-2x { row-gap: calc(var(--gap) * 2); }
  .md\:u-gap-3x { gap: calc(var(--gap) * 3); }
  .md\:u-gap-x-3x { -moz-column-gap: calc(var(--gap) * 3); column-gap: calc(var(--gap) * 3); }
  .md\:u-gap-y-3x { row-gap: calc(var(--gap) * 3); }
  .md\:u-justify-start { justify-content: flex-start; }
  .md\:u-justify-end { justify-content: flex-end; }
  .md\:u-justify-end-safe { justify-content: safe flex-end; }
  .md\:u-justify-center { justify-content: center; }
  .md\:u-justify-center-safe { justify-content: safe center; }
  .md\:u-justify-between { justify-content: space-between; }
  .md\:u-justify-around { justify-content: space-around; }
  .md\:u-justify-evenly { justify-content: space-evenly; }
  .md\:u-justify-stretch { justify-content: stretch; }
  .md\:u-justify-baseline { justify-content: baseline; }
  .md\:u-justify-normal { justify-content: normal; }
}
@media screen and (min-width: 641px) and (orientation: portrait) {
  .p-more {
    font-size: min(4.5vw, 56px);
  }
}
@media screen and (min-width: 641px) and (orientation: landscape) {
  .p-navi-list__item {
    width: min(14vw, 240px);
  }
}
@media screen and (min-width: 1024px){
  :root {
    --gap: 16px;
  }
  .c-ttl > img {
    width: min(66%, 896px);
  }
  .p-foot__contents {
    background-size: contain;
  }
  .p-foot__contents::before {
    padding-top: 750px;
  }
  /* utility */
  .lg\:u-grid  { display: grid; }
  .lg\:u-grid-1  { grid-template-columns: repeat( 1, 1fr); }
  .lg\:u-grid-2  { grid-template-columns: repeat( 2, 1fr); }
  .lg\:u-grid-3  { grid-template-columns: repeat( 3, 1fr); }
  .lg\:u-grid-4  { grid-template-columns: repeat( 4, 1fr); }
  .lg\:u-grid-5  { grid-template-columns: repeat( 5, 1fr); }
  .lg\:u-grid-6  { grid-template-columns: repeat( 6, 1fr); }
  .lg\:u-grid-7  { grid-template-columns: repeat( 7, 1fr); }
  .lg\:u-grid-8  { grid-template-columns: repeat( 8, 1fr); }
  .lg\:u-grid-9  { grid-template-columns: repeat( 9, 1fr); }
  .lg\:u-grid-10 { grid-template-columns: repeat(10, 1fr); }
  .lg\:u-grid-11 { grid-template-columns: repeat(11, 1fr); }
  .lg\:u-grid-12 { grid-template-columns: repeat(12, 1fr); }
  .lg\:u-col-auto  { grid-column: auto; }
  .lg\:u-colspan-1  { grid-column: span  1/span  1; }
  .lg\:u-colspan-2  { grid-column: span  2/span  2; }
  .lg\:u-colspan-3  { grid-column: span  3/span  3; }
  .lg\:u-colspan-4  { grid-column: span  4/span  4; }
  .lg\:u-colspan-5  { grid-column: span  5/span  5; }
  .lg\:u-colspan-6  { grid-column: span  6/span  6; }
  .lg\:u-colspan-7  { grid-column: span  7/span  7; }
  .lg\:u-colspan-8  { grid-column: span  8/span  8; }
  .lg\:u-colspan-9  { grid-column: span  9/span  9; }
  .lg\:u-colspan-10 { grid-column: span 10/span 10; }
  .lg\:u-colspan-11 { grid-column: span 11/span 11; }
  .lg\:u-colspan-12 { grid-column: span 12/span 12; }
  .lg\:u-colspan-full { grid-column: 1/-1; }
  .lg\:u-col-start-1  { grid-column-start:  1; }
  .lg\:u-col-start-2  { grid-column-start:  2; }
  .lg\:u-col-start-3  { grid-column-start:  3; }
  .lg\:u-col-start-4  { grid-column-start:  4; }
  .lg\:u-col-start-5  { grid-column-start:  5; }
  .lg\:u-col-start-6  { grid-column-start:  6; }
  .lg\:u-col-start-7  { grid-column-start:  7; }
  .lg\:u-col-start-8  { grid-column-start:  8; }
  .lg\:u-col-start-9  { grid-column-start:  9; }
  .lg\:u-col-start-10 { grid-column-start: 10; }
  .lg\:u-col-start-11 { grid-column-start: 11; }
  .lg\:u-col-start-12 { grid-column-start: 12; }
  .lg\:u-col-end-2  { grid-column-end:  2; }
  .lg\:u-col-end-3  { grid-column-end:  3; }
  .lg\:u-col-end-4  { grid-column-end:  4; }
  .lg\:u-col-end-5  { grid-column-end:  5; }
  .lg\:u-col-end-6  { grid-column-end:  6; }
  .lg\:u-col-end-7  { grid-column-end:  7; }
  .lg\:u-col-end-8  { grid-column-end:  8; }
  .lg\:u-col-end-9  { grid-column-end:  9; }
  .lg\:u-col-end-10 { grid-column-end: 10; }
  .lg\:u-col-end-11 { grid-column-end: 11; }
  .lg\:u-col-end-12 { grid-column-end: 12; }
  .lg\:u-col-end-13 { grid-column-end: 13; }
  .lg\:u-gap { gap: var(--gap); }
  .lg\:u-gap-x { -moz-column-gap: var(--gap); column-gap: var(--gap); }
  .lg\:u-gap-y { row-gap: var(--gap); }
  .lg\:u-gap-2x { gap: calc(var(--gap) * 2); }
  .lg\:u-gap-x-2x { -moz-column-gap: calc(var(--gap) * 2); column-gap: calc(var(--gap) * 2); }
  .lg\:u-gap-y-2x { row-gap: calc(var(--gap) * 2); }
  .lg\:u-gap-3x { gap: calc(var(--gap) * 3); }
  .lg\:u-gap-x-3x { -moz-column-gap: calc(var(--gap) * 3); column-gap: calc(var(--gap) * 3); }
  .lg\:u-gap-y-3x { row-gap: calc(var(--gap) * 3); }
  .lg\:u-justify-start { justify-content: flex-start; }
  .lg\:u-justify-end { justify-content: flex-end; }
  .lg\:u-justify-end-safe { justify-content: safe flex-end; }
  .lg\:u-justify-center { justify-content: center; }
  .lg\:u-justify-center-safe { justify-content: safe center; }
  .lg\:u-justify-between { justify-content: space-between; }
  .lg\:u-justify-around { justify-content: space-around; }
  .lg\:u-justify-evenly { justify-content: space-evenly; }
  .lg\:u-justify-stretch { justify-content: stretch; }
  .lg\:u-justify-baseline { justify-content: baseline; }
  .lg\:u-justify-normal { justify-content: normal; }
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .p-header-logo {
    width: min(10vw, 240px);
  }
}

@media screen and (max-height: 600px) and (orientation: landscape) {
  :root {
    --gap: 8px;
    --border: 2px;
  }
  .p-header-logo {
    width: min(16vw, 240px);
  }
  .p-navi-list__item {
    max-width: 25vh;
  }
}