@-ms-viewport {
  width: auto
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
  scroll-behavior: unset;
  width: 100%
}

*, :after, :before {
  box-sizing: inherit
}

body {
  word-wrap: break-word;
  font-feature-settings: "palt"1;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: transparent;
  background: #fff;
  color: #0a0a0a;
  font-family: inherit;
  font-kerning: none;
  font-size: 14px;
  height: 100%;
  line-height: normal;
  overflow-wrap: break-word;
  position: relative;
  vertical-align: baseline;
  width: 100%;
  word-break: normal
}

body, main {
  overflow-x: hidden
}

:focus {
  outline: 0
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, picture, pre, q, ruby, s, samp, section, small, source, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-size: 100%;
  font-weight: 400
}

ol, ul {
  list-style: none
}

blockquote {
  quotes: none
}

blockquote:after, blockquote:before {
  content: "";
  content: none
}

hr {
  border: 0;
  border-top: 1px solid #f7f7f7;
  display: block;
  height: 1px;
  margin: 0;
  padding: 0
}

a {
  color: inherit;
  cursor: pointer;
  outline: none;
  text-decoration: inherit
}

address, cite, dfn, em, i {
  font-style: normal
}

b, em, strong {
  font-weight: inherit
}

i {
  font: inherit
}

q {
  quotes: none
}

q:after, q:before {
  content: "";
  content: none
}

ruby>rt {
  transform: scale(.8)
}

sup {
  font-size: 50%;
  letter-spacing: 0;
  position: relative;
  top: -.9em
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}

mark {
  font-style: italic;
  font-weight: 700
}

ins, mark {
  background-color: transparent;
  color: #fff
}

ins {
  text-decoration: none
}

del {
  text-decoration: line-through
}

img {
  font-size: 0;
  line-height: 0;
  vertical-align: top
}

embed, object {
  outline: none
}

picture {
  font-size: 0;
  line-height: 0
}

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

audio:not([controls]) {
  display: none;
  height: 0
}

svg {
  display: inline-block;
  vertical-align: inherit
}

svg:not(:root) {
  overflow: hidden
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

td, th {
  vertical-align: top
}

button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  outline: none;
  padding: 0;
  user-select: none
}

[role=button], button {
  cursor: pointer
}

button, input, optgroup, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  outline: none;
  padding: 0
}

button:disabled, input:disabled, optgroup:disabled, select:disabled, textarea:disabled {
  cursor: default
}

input {
  line-height: normal
}

input::selection {
  background: #fff;
  color: #0a0a0a
}

input::placeholder, input:placeholder-shown {
  color: rgba(255, 255, 255, .4);
  transition: color .16s ease 0s
}

input:focus::placeholder, input:focus:placeholder-shown {
  color: #fff
}

input::-ms-clear, input::-ms-reveal {
  visibility: hidden
}

input, select {
  vertical-align: middle
}

textarea {
  resize: vertical
}

textarea::placeholder, textarea:placeholder-shown {
  color: rgba(255, 255, 255, .4);
  transition: color .16s ease 0s
}

textarea:focus::placeholder, textarea:focus:placeholder-shown {
  color: #fff
}

input[type=button], input[type=submit] {
  appearance: button;
  border: none;
  border-radius: 0;
  box-sizing: border-box
}

input[type=button]::-webkit-search-decoration, input[type=submit]::-webkit-search-decoration {
  display: none
}

input[type=button]:focus, input[type=submit]:focus {
  outline-offset: -2px
}

::selection {
  background: #fff;
  color: #0a0a0a
}

@font-face {
  font-family: Yu Gothic;
  font-weight: 100;
  src: local("Yu Gothic Medium")
}

@font-face {
  font-family: Yu Gothic;
  font-weight: 200;
  src: local("Yu Gothic Medium")
}

@font-face {
  font-family: Yu Gothic;
  font-weight: 300;
  src: local("Yu Gothic Medium")
}

@font-face {
  font-family: Yu Gothic;
  font-weight: 400;
  src: local("Yu Gothic Medium")
}

@font-face {
  font-family: Yu Gothic;
  font-weight: 700;
  src: local("Yu Gothic Bold")
}

@font-face {
  font-family: Helvetica Neue;
  font-weight: 100;
  src: local("Helvetica Neue Regular")
}

@font-face {
  font-family: Helvetica Neue;
  font-weight: 200;
  src: local("Helvetica Neue Regular")
}

@font-face {
  font-family: SF Latin;
  src: local(-apple-system);
  unicode-range: U+00??
}

.section-entry .copyright, .section-entry .logo p, html[lang=ja] {
  font-display: swap;
  font-family: Shippori Mincho B1, Hiragino Mincho ProN, YuMincho, Yu Mincho, Times New Roman, serif;
  font-style: normal;
  font-weight: 400
}

.button, .section-entry .form .input input[type=text], .section-entry .form .input input[type=text].checked~label, .section-entry .form .input input[type=text]:focus~label, .section-entry .form .input span {
  font-display: swap;
  font-family: Shippori Mincho B1, Hiragino Mincho ProN, YuMincho, Yu Mincho, Times New Roman, serif;
  font-style: normal;
  font-weight: 800
}

.cols {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  position: relative
}

.cols[data-direction=reverse] {
  flex-direction: row-reverse
}

.cols[data-position=center] {
  justify-content: center
}

.cols[data-align=center] {
  align-items: center
}

.cols[data-position=end] {
  justify-content: flex-end
}

.cols[data-flex=column] {
  flex-direction: column
}

.cols[data-flex=column][data-direction=reverse] {
  flex-direction: column-reverse
}

.cols[data-flex=column][data-position=center] {
  height: 100%;
  justify-content: center
}

.cols[data-flex=column][data-position=end] {
  height: 100%;
  justify-content: flex-end
}

.cols[data-flex=row] {
  flex-direction: row
}

.cols[data-flex=row][data-direction=reverse] {
  flex-direction: row-reverse
}

.cols[data-flex=row][data-position=center] {
  justify-content: center
}

.cols[data-flex=row][data-position=end] {
  justify-content: flex-end
}

.col {
  flex: 1 1 auto;
  max-width: none
}

.col[data-size="1"] {
  flex: 0 1 8.33333%;
  max-width: 8.33333%
}

.col[data-size="2"] {
  flex: 0 1 16.66667%;
  max-width: 16.66667%
}

.col[data-size="3"] {
  flex: 0 1 25%;
  max-width: 25%
}

.col[data-size="4"] {
  flex: 0 1 33.33333%;
  max-width: 33.33333%
}

.col[data-size="5"] {
  flex: 0 1 41.66667%;
  max-width: 41.66667%
}

.col[data-size="6"] {
  flex: 0 1 50%;
  max-width: 50%
}

.col[data-size="7"] {
  flex: 0 1 58.33333%;
  max-width: 58.33333%
}

.col[data-size="8"] {
  flex: 0 1 66.66667%;
  max-width: 66.66667%
}

.col[data-size="9"] {
  flex: 0 1 75%;
  max-width: 75%
}

.col[data-size="10"] {
  flex: 0 1 83.33333%;
  max-width: 83.33333%
}

.col[data-size="11"] {
  flex: 0 1 91.66667%;
  max-width: 91.66667%
}

.col[data-size="12"] {
  flex: 0 1 100%;
  max-width: 100%
}

@media (min-width:801px) and (max-width:1024px) {
  .col {
    flex: 1 1 auto;
    max-width: none
  }

  .col[data-size-m="1"] {
    flex: 0 1 8.33333%;
    max-width: 8.33333%
  }

  .col[data-size-m="2"] {
    flex: 0 1 16.66667%;
    max-width: 16.66667%
  }

  .col[data-size-m="3"] {
    flex: 0 1 25%;
    max-width: 25%
  }

  .col[data-size-m="4"] {
    flex: 0 1 33.33333%;
    max-width: 33.33333%
  }

  .col[data-size-m="5"] {
    flex: 0 1 41.66667%;
    max-width: 41.66667%
  }

  .col[data-size-m="6"] {
    flex: 0 1 50%;
    max-width: 50%
  }

  .col[data-size-m="7"] {
    flex: 0 1 58.33333%;
    max-width: 58.33333%
  }

  .col[data-size-m="8"] {
    flex: 0 1 66.66667%;
    max-width: 66.66667%
  }

  .col[data-size-m="9"] {
    flex: 0 1 75%;
    max-width: 75%
  }

  .col[data-size-m="10"] {
    flex: 0 1 83.33333%;
    max-width: 83.33333%
  }

  .col[data-size-m="11"] {
    flex: 0 1 91.66667%;
    max-width: 91.66667%
  }

  .col[data-size-m="12"] {
    flex: 0 1 100%;
    max-width: 100%
  }
}

@media (min-width:1025px) {
  .col {
    flex: 1 1 auto;
    max-width: none
  }

  .col[data-size-l="1"] {
    flex: 0 1 8.33333%;
    max-width: 8.33333%
  }

  .col[data-size-l="2"] {
    flex: 0 1 16.66667%;
    max-width: 16.66667%
  }

  .col[data-size-l="3"] {
    flex: 0 1 25%;
    max-width: 25%
  }

  .col[data-size-l="4"] {
    flex: 0 1 33.33333%;
    max-width: 33.33333%
  }

  .col[data-size-l="5"] {
    flex: 0 1 41.66667%;
    max-width: 41.66667%
  }

  .col[data-size-l="6"] {
    flex: 0 1 50%;
    max-width: 50%
  }

  .col[data-size-l="7"] {
    flex: 0 1 58.33333%;
    max-width: 58.33333%
  }

  .col[data-size-l="8"] {
    flex: 0 1 66.66667%;
    max-width: 66.66667%
  }

  .col[data-size-l="9"] {
    flex: 0 1 75%;
    max-width: 75%
  }

  .col[data-size-l="10"] {
    flex: 0 1 83.33333%;
    max-width: 83.33333%
  }

  .col[data-size-l="11"] {
    flex: 0 1 91.66667%;
    max-width: 91.66667%
  }

  .col[data-size-l="12"] {
    flex: 0 1 100%;
    max-width: 100%
  }
}

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

.icon, .link {
  position: relative
}

.link span {
  background-image: linear-gradient(180deg, transparent calc(100% - 2px), rgba(136, 136, 136, .5) 2px);
  background-position-x: right;
  background-position-y: 0;
  background-repeat: no-repeat;
  background-size: 0 100%
}

.link[data-link=vertical] span {
  background-image: linear-gradient(270deg, transparent calc(100% - 2px), rgba(136, 136, 136, .5) 2px);
  background-position-x: right;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: 100% 0
}

@media (hover:hover) {
  .link:not(:disabled) span {
    transition: background-size .16s ease-in-out 0s, color .16s ease-in-out 0s, opacity .16s ease-in-out 0s
  }

  .link:not(:disabled):focus span, .link:not(:disabled):hover span {
    background-position-x: left;
    background-size: 100% 100%
  }

  .link:not(:disabled):focus[data-link=vertical] span, .link:not(:disabled):hover[data-link=vertical] span {
    background-position-x: right;
    background-position-y: top;
    background-size: 100% 100%
  }
}

.button {
  align-items: center;
  background: #fff;
  border: 1px solid #fff;
  color: #0a0a0a;
  display: inline-flex;
  flex-flow: row wrap;
  font-size: 1.8rem;
  height: 64px;
  justify-content: center;
  letter-spacing: 1.6px;
  padding: 26px 16px 28px;
  position: relative;
  transition: color .36s ease 0s, border-color .36s ease 0s, background-color .36s ease 0s;
  user-select: none
}

.button span {
  line-height: 1;
  user-select: none
}

.button .disabled, .button:disabled {
  background: rgba(16, 16, 16, .08);
  border: 1px solid rgba(16, 16, 16, .08);
  cursor: default !important;
  pointer-events: none !important
}

.button .disabled span, .button:disabled span {
  color: rgba(255, 255, 255, .12) !important
}

@media (hover:hover) {
  .button {
    transition: color .36s ease 0s, border-color .36s ease 0s, background-color .36s ease 0s
  }

  .button span {
    transition: opacity .24s ease 0s
  }

  .button:not(:disabled):focus, .button:not(:disabled):hover {
    background: #fff;
    color: #888
  }
}

.section:last-of-type {
  margin-bottom: 0
}

.section>.in {
  height: 100%;
  margin-left: auto;
  margin-right: auto
}

.section-entry {
  background: #0a0a0a;
  height: 100%;
  width: 100%;
  z-index: 999
}

.section-entry, .section-entry .bg {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0
}

.section-entry .bg {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0
}

.section-entry .bg:after {
  animation: flicker-light 12s infinite alternate;
  background: radial-gradient(ellipse at top, rgba(255, 130, 0, .5) -5%, transparent 80%), radial-gradient(ellipse at 100% 10%, #ff0, red);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0
}

.section-entry .bg .svg {
  fill: rgba(152, 123, 84, .16);
  height: 112vh;
  transform: translate3d(0, -6vh, 0)
}

.section-entry .in {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  z-index: 1
}

.section-entry .content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  min-height: 768px;
  padding: 0 6vw;
  position: relative
}

.section-entry .logo {
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
  user-select: none
}

.section-entry .logo .svg {
  fill: #fff;
  height: auto;
  width: 48px
}

.section-entry .logo p {
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 8px;
  margin-bottom: 20px;
  pointer-events: none;
  user-select: none;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl
}

.section-entry .form, .section-entry .logo p {
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.section-entry .form {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  max-width: 400px;
  padding-bottom: 24px;
  width: 100%
}

.section-entry .form>:nth-child(n+2) {
  margin-top: 24px
}

.section-entry .form .input {
  position: relative;
  width: 100%
}

.section-entry .form .input input[type=text] {
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, .064);
  border-image: url(/assets/images/common/border-draw.svg) 9/9px 9px/0 stretch round;
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: .24px;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
  padding: 12px 30px 16px 24px;
  text-align: center;
  text-overflow: ellipsis;
  transition: background-color .12s cubic-bezier(.25, .25, .75, .75) 0s;
  width: 100%
}

.section-entry .form .input input[type=text]:focus {
  background: rgba(255, 255, 255, .024)
}

.section-entry .form .input input[type=text].checked~label, .section-entry .form .input input[type=text]:focus~label {
  align-items: flex-start;
  color: #fff;
  display: flex;
  letter-spacing: .96px;
  text-align: left;
  top: -30px;
  transform: scale(.72) translate3d(-50%, -50%, 0)
}

.section-entry .form .input input[type=text].checked~label {
  color: rgba(255, 255, 255, 0)
}

.section-entry .form .input input[type=text].checked~label~span, .section-entry .form .input input[type=text]:focus~label~span {
  opacity: 1
}

.section-entry .form .input span {
  bottom: 50%;
  line-height: 1;
  opacity: 0;
  right: 12px;
  transform: translate3d(0, 56%, 0);
  transition: opacity .24s ease-in-out 0s
}

.section-entry .form .input label, .section-entry .form .input span {
  color: rgba(255, 255, 255, .4);
  font-size: 1.3rem;
  position: absolute;
  user-select: none
}

.section-entry .form .input label {
  display: block;
  left: 50%;
  line-height: 2.4rem;
  padding: 0 12px 2px;
  pointer-events: none;
  text-align: left;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 0 0;
  transition: all .12s cubic-bezier(.25, .25, .75, .75) 0s;
  white-space: nowrap
}

.section-entry .form .button {
  font-size: 1.6rem;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 16px 18px;
  width: 100%
}

.section-entry .copyright {
  bottom: 32px;
  color: rgba(255, 255, 255, .6);
  font-size: 1rem;
  left: 0;
  letter-spacing: .04em;
  position: absolute;
  right: 0;
  text-align: center
}

@keyframes flicker-light {
  0% {
    opacity: 0
  }

  10% {
    opacity: .04
  }

  20% {
    opacity: .08
  }

  25% {
    opacity: .14
  }

  30% {
    opacity: .06
  }

  40% {
    opacity: .1
  }

  50% {
    opacity: .04
  }
}

.section-svg {
  display: none
}

@media (max-width:800px) {
  .__pc {
    display: none
  }
}

@media (min-width:801px) and (max-width:1024px) {
  .__pc, .__sp {
    display: none
  }
}

@media (min-width:1025px) {
  .__sp {
    display: none
  }
}

.js-mask {
  -webkit-mask-image: url(/assets/images/common/mask1.png);
  mask-image: url(/assets/images/common/mask1.png);
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%
}

.js-mask.animation {
  animation: mask-play 1.4s steps(29) forwards
}

.js-mask.animation[delay="1"] {
  animation-delay: 1s
}

.js-mask.animation[delay="2"] {
  animation-delay: 1.5s
}

.js-mask.animation[delay="3"] {
  animation-delay: 2s
}

.js-mask.animation[reverse] {
  animation: mask-play 1.4s steps(29) reverse forwards
}

@keyframes mask-play {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0
  }

  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    visibility: hidden
  }
}