@charset "UTF-8";
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* line-heightの上下をなくす
===================================================== */
/* letter-spacingの文末をなくす
===================================================== */
/* clearfix
===================================================== */
/* hover
===================================================== */
/* linkcolor
===================================================== */
/* z-index
===================================================== */
/* rem変換
===================================================== */
/* vw変換(SP用)
===================================================== */
/* vw変換(PC用) minとmax
===================================================== */
/* spサイズをpcへ引き伸ばし
===================================================== */
/* ラインハイト計算
===================================================== */
/* レタースペーシング計算
===================================================== */
/* right-arrow
===================================================== */
/* aspect-area(padding-top)
===================================================== */
/* aspect-area-h(height)
===================================================== */
/* youtube
===================================================== */
/* margin: 0 auto
===================================================== */
/* color
===================================================== */
/* font-size
===================================================== */
/* font-family
===================================================== */
/* コンテンツ幅
===================================================== */
/* 余白
===================================================== */
/* メディアクエリー
===================================================== */
/* loopslide
============================================ */
/* 読み込み
===================================================== */
/* common
===================================================== */
html,
body {
  background-color: #000;
  color: #000;
  letter-spacing: 0;
  line-height: 1.6;
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 400;
  font-style: normal;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  html,
body {
    font-size: min(2.6666666667vw, 14.88px);
  }
}
@media screen and (max-width: 767px) {
  html,
body {
    font-size: 2.6666666667vw;
  }
}

.wrapper {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

a {
  text-decoration: none;
}

img,
video {
  width: 100%;
  display: block;
}

@media screen and (min-width: 768px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .pcNone {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .spNone {
    display: none;
  }
}

@-webkit-keyframes noise {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -5% -10%;
  }
  50% {
    background-position: 25% 35%;
  }
  75% {
    background-position: -10% 10%;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes noise {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -5% -10%;
  }
  50% {
    background-position: 25% 35%;
  }
  75% {
    background-position: -10% 10%;
  }
  100% {
    background-position: 0 0;
  }
}
/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  transition: opacity 0.7s;
}
.load .load_inner {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.load .load_inner__w {
  background-color: #fff;
  z-index: 1;
}
.load .load_inner__b {
  -webkit-animation: noise 1.5s steps(3) infinite;
          animation: noise 1.5s steps(3) infinite;
  z-index: 2;
  display: none;
}
@media screen and (min-width: 768px) {
  .load .load_inner__b {
    background-image: url(../images/noise_pc.jpg);
  }
}
@media screen and (max-width: 767px) {
  .load .load_inner__b {
    background-image: url(../images/noise_sp.jpg);
  }
}
.load .load_flex {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.load .loadNum {
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 700;
  font-style: normal;
  color: #8ede49;
  display: flex;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .load .loadNum {
    font-size: 98px;
  }
}
@media screen and (max-width: 767px) {
  .load .loadNum {
    font-size: 17.6vw;
  }
}
.load .loadNum .loadNum_inner {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .load .loadNum .loadNum_inner {
    width: 54px;
  }
}
@media screen and (max-width: 767px) {
  .load .loadNum .loadNum_inner {
    width: 10.1333333333vw;
  }
}
.load .loadNum .loadNum_list {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 3s ease-in-out;
}
.load .loadNum .loadNum_item {
  display: flex;
  flex-direction: column;
}

/* .wrapper
===================================================== */
@media screen and (min-width: 768px) {
  .wrapper {
    display: flex;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .left,
.wrapper .right,
.wrapper .center {
    opacity: 0;
    transition: opacity 1s;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .left.on,
.wrapper .right.on,
.wrapper .center.on {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .left,
.wrapper .right {
    width: calc((100% - 558px) / 2);
    background-color: #ccc;
    position: fixed;
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .left {
    top: 0;
    left: 0;
  }
}
.wrapper .left::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/pc.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.wrapper .left video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .wrapper .right {
    top: 0;
    right: 0;
    background-color: #000;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .right .right_inner {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .right .rightTitle {
    margin-bottom: 10px;
    color: #8ede49;
    font-size: 18px;
    line-height: 1;
  }
}
.wrapper .right .rightTitle .rightTitle_inner {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.wrapper .right .rightTitle .rightTitle_item {
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .wrapper .right .rightTitle .rightTitle_line {
    width: 6px;
  }
}
.wrapper .right .rightTitle .rightTitle_line.rightTitle_line__1 {
  margin-right: 5px;
}
.wrapper .right .rightTitle .rightTitle_line.rightTitle_line__2 {
  margin-left: 5px;
}
.wrapper .right .rightTitle.on .rightTitle_item {
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .wrapper .right .rightText {
    color: #8ede49;
    font-size: 10px;
    line-height: 1;
    position: relative;
  }
}
.wrapper .right .rightText .rightText_item {
  display: block;
  opacity: 0;
  transition: opacity 0.6s;
}
.wrapper .right .rightText.on .rightText_item {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .wrapper .right .rightGif {
    flex-shrink: 0;
    width: 134px;
    margin-bottom: 5px;
    margin-right: 4px;
  }
}
.wrapper .center {
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .wrapper .center {
    overflow: hidden;
    width: 558px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* .top
===================================================== */
.top {
  width: 100%;
  position: relative;
}
.top:before {
  content: "";
  display: block;
  padding-top: 177.3333333333%;
  background-image: url(../images/sp.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
}
.top video {
  position: absolute;
  top: 0;
  left: 0;
}

/* parts
===================================================== */
.block__flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.block__flex .block__flex_inner {
  width: 50%;
}
.block__flex img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.block__text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.block__text span {
  display: block;
}

.bigText {
  transform: scale(3);
}

.tegakiArea {
  position: relative;
}
.tegakiArea .tegaki {
  position: absolute;
  height: auto;
}
.tegakiArea .tegaki #base_1 path,
.tegakiArea .tegaki #base_2 path,
.tegakiArea .tegaki #base_3 path {
  fill: #C9C9C9; /* 塗りの色 */
}
.tegakiArea .tegaki #mask_1 path,
.tegakiArea .tegaki #mask_2 path,
.tegakiArea .tegaki #mask_3 path {
  fill: none; /* 塗りの色 */
  stroke: #ffffff; /* 線の色 */
  stroke-linecap: round; /* 線端の形状 */
  stroke-linejoin: round; /* 角の形状 */
}
@media screen and (min-width: 768px) {
  .tegakiArea .tegaki #mask_1 path,
.tegakiArea .tegaki #mask_2 path,
.tegakiArea .tegaki #mask_3 path {
    stroke-width: min(1.0666666667vw, 5.952px); /* 線幅 */
  }
}
@media screen and (max-width: 767px) {
  .tegakiArea .tegaki #mask_1 path,
.tegakiArea .tegaki #mask_2 path,
.tegakiArea .tegaki #mask_3 path {
    stroke-width: 1.0666666667vw; /* 線幅 */
  }
}

.lineArea {
  position: relative;
  overflow: hidden;
}
.lineArea .line {
  position: absolute;
  height: auto;
}
.lineArea .line #base_line1 path,
.lineArea .line #base_line2 path {
  fill: #8ede49; /* 塗りの色 */
}
.lineArea .line #mask_line1 path,
.lineArea .line #mask_line2 path {
  fill: none; /* 塗りの色 */
  stroke: #ffffff; /* 線の色 */
  stroke-linecap: round; /* 線端の形状 */
  stroke-linejoin: round; /* 角の形状 */
}
@media screen and (min-width: 768px) {
  .lineArea .line #mask_line1 path,
.lineArea .line #mask_line2 path {
    stroke-width: min(2.6666666667vw, 14.88px); /* 線幅 */
  }
}
@media screen and (max-width: 767px) {
  .lineArea .line #mask_line1 path,
.lineArea .line #mask_line2 path {
    stroke-width: 2.6666666667vw; /* 線幅 */
  }
}

.checkArea {
  position: relative;
  cursor: pointer;
}
.checkArea .check {
  position: absolute;
}
@media screen and (min-width: 768px) {
  .checkArea .check {
    width: 70px;
  }
}
@media screen and (max-width: 767px) {
  .checkArea .check {
    width: 18.6666666667vw;
  }
}

/* #block__1
===================================================== */
#block__1 .check {
  top: 43%;
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
  #block__1 .tegaki {
    width: min(40.8vw, 227.664px);
    top: min(22.6666666667vw, 126.48px);
    left: min(3.2vw, 17.856px);
  }
}
@media screen and (max-width: 767px) {
  #block__1 .tegaki {
    width: 40.8vw;
    top: 22.6666666667vw;
    left: 3.2vw;
  }
}
#block__1 .colorBeta::before {
  background-color: #FFEC84;
}

/* #block__2
===================================================== */
#block__2 {
  position: relative;
}
#block__2 .block_item__1 {
  width: 100%;
}
#block__2 .block_item__2 {
  position: absolute;
  left: 0;
}
@media screen and (min-width: 768px) {
  #block__2 .block_item__2 {
    top: min(11.4666666667vw, 63.984px);
    width: min(74.6666666667vw, 416.64px);
  }
}
@media screen and (max-width: 767px) {
  #block__2 .block_item__2 {
    top: 11.4666666667vw;
    width: 74.6666666667vw;
  }
}

/* #block__3
===================================================== */
#block__3 {
  position: relative;
}
@media screen and (min-width: 768px) {
  #block__3 .check {
    bottom: 64px;
    right: 75px;
  }
}
@media screen and (max-width: 767px) {
  #block__3 .check {
    bottom: 10.9333333333vw;
    right: 13.8666666667vw;
  }
}
#block__3 .block_item__1 {
  width: 100%;
}
#block__3 .block_item__2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  #block__3 .block_item__2 {
    width: min(76.5333333333vw, 427.056px);
  }
}
@media screen and (max-width: 767px) {
  #block__3 .block_item__2 {
    width: 76.5333333333vw;
  }
}

/* #block__4
===================================================== */
@media screen and (min-width: 768px) {
  #block__4 .check {
    bottom: 10px;
    right: 198px;
  }
}
@media screen and (max-width: 767px) {
  #block__4 .check {
    bottom: 2.6666666667vw;
    right: 29.0666666667vw;
  }
}

/* #block__5
===================================================== */
#block__5 {
  position: relative;
}
#block__5 .obiText {
  position: absolute;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  #block__5 .obiText {
    gap: 6px 0;
    top: 39px;
    right: 19px;
  }
}
@media screen and (max-width: 767px) {
  #block__5 .obiText {
    gap: 1.3333333333vw 0;
    top: 5.3333333333vw;
    right: 3.7333333333vw;
  }
}
#block__5 .obiText .obiText_inner {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#block__5 .obiText .obiText_item {
  background-color: #8ede49;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  #block__5 .obiText .obiText_item {
    line-height: min(4vw, 22.32px);
    padding: 0 min(0.8vw, 4.464px);
  }
}
@media screen and (max-width: 767px) {
  #block__5 .obiText .obiText_item {
    line-height: 4vw;
    padding: 0 0.8vw;
  }
}
#block__5 .obiText span {
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 700;
  font-style: normal;
}
@media screen and (min-width: 768px) {
  #block__5 .obiText span {
    font-size: 17px;
  }
}
@media screen and (max-width: 767px) {
  #block__5 .obiText span {
    font-size: 3.2vw;
  }
}
@media screen and (min-width: 768px) {
  #block__5 .check {
    bottom: 10px;
    left: 12px;
  }
}
@media screen and (max-width: 767px) {
  #block__5 .check {
    bottom: 2.6666666667vw;
    left: 2.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__5 .line {
    bottom: max(-2.1333333333vw, -11.904px);
    left: min(16.2666666667vw, 90.768px);
    width: min(68vw, 379.44px);
  }
}
@media screen and (max-width: 767px) {
  #block__5 .line {
    bottom: -2.1333333333vw;
    left: 16.2666666667vw;
    width: 68vw;
  }
}

/* #block__6
===================================================== */
#block__6 {
  background-color: #000;
}
@media screen and (min-width: 768px) {
  #block__6 {
    padding: min(10.6666666667vw, 59.52px) 0 min(3.2vw, 17.856px) min(4.5333333333vw, 25.296px);
  }
}
@media screen and (max-width: 767px) {
  #block__6 {
    padding: 10.6666666667vw 0 3.2vw 4.5333333333vw;
  }
}
#block__6 .block_item {
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  #block__6 .block_item {
    width: min(75.4666666667vw, 421.104px);
  }
}
@media screen and (max-width: 767px) {
  #block__6 .block_item {
    width: 75.4666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__6 .block_item__1 {
    margin-bottom: min(2.6666666667vw, 14.88px);
  }
}
@media screen and (max-width: 767px) {
  #block__6 .block_item__1 {
    margin-bottom: 2.6666666667vw;
  }
}

/* #block__7
===================================================== */
@media screen and (min-width: 768px) {
  #block__7 {
    padding: 14px 0 10px;
  }
}
@media screen and (max-width: 767px) {
  #block__7 {
    padding: 2.9333333333vw 0 2.4vw;
  }
}
@media screen and (min-width: 768px) {
  #block__7 .slideText_inner:not(:first-child) {
    margin-top: 1px;
  }
}
@media screen and (max-width: 767px) {
  #block__7 .slideText_inner:not(:first-child) {
    margin-top: 0.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__7 .slideText_inner__1 {
    width: min(93.272vw, 520.45776px);
  }
}
@media screen and (max-width: 767px) {
  #block__7 .slideText_inner__1 {
    width: 93.272vw;
  }
}
@media screen and (min-width: 768px) {
  #block__7 .slideText_inner__2 {
    width: min(93.6586666667vw, 522.61536px);
  }
}
@media screen and (max-width: 767px) {
  #block__7 .slideText_inner__2 {
    width: 93.6586666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__7 .slideText_inner__3 {
    width: min(93.696vw, 522.82368px);
  }
}
@media screen and (max-width: 767px) {
  #block__7 .slideText_inner__3 {
    width: 93.696vw;
  }
}
@media screen and (min-width: 768px) {
  #block__7 .slideText_inner__4 {
    width: min(89.288vw, 498.22704px);
  }
}
@media screen and (max-width: 767px) {
  #block__7 .slideText_inner__4 {
    width: 89.288vw;
  }
}

/* #block__8
===================================================== */
@media screen and (min-width: 768px) {
  #block__8 .check {
    bottom: min(3.4666666667vw, 19.344px);
    left: 12px;
  }
}
@media screen and (max-width: 767px) {
  #block__8 .check {
    bottom: 3.4666666667vw;
    left: 2.6666666667vw;
  }
}

/* #block__9
===================================================== */
@media screen and (min-width: 768px) {
  #block__9 .check {
    bottom: 11px;
    right: 198px;
  }
}
@media screen and (max-width: 767px) {
  #block__9 .check {
    bottom: 3.2vw;
    right: 29.0666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__9 .tegaki {
    top: min(9.3333333333vw, 52.08px);
    left: min(28.8vw, 160.704px);
    width: min(41.0666666667vw, 229.152px);
  }
}
@media screen and (max-width: 767px) {
  #block__9 .tegaki {
    top: 9.3333333333vw;
    left: 28.8vw;
    width: 41.0666666667vw;
  }
}

/* #block__10
===================================================== */
#block__10 {
  position: relative;
}
@media screen and (min-width: 768px) {
  #block__10 .check {
    bottom: 20px;
    left: 11px;
  }
}
@media screen and (max-width: 767px) {
  #block__10 .check {
    bottom: 3.2vw;
    left: 2.6666666667vw;
  }
}
#block__10 .block_text {
  position: absolute;
  top: 41.5%;
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
  #block__10 .block_text {
    width: min(69.6vw, 388.368px);
  }
}
@media screen and (max-width: 767px) {
  #block__10 .block_text {
    width: 69.6vw;
  }
}

/* #block__11
===================================================== */
#block__11 {
  position: relative;
}
#block__11::before {
  content: "";
  display: block;
  padding-top: 110.9333333333%;
  width: 100%;
}
#block__11 .block_item {
  position: absolute;
}
#block__11 .slideImg__1,
#block__11 .slideImg__2 {
  transform-origin: left top;
  transform: rotate(90deg);
}
#block__11 .block_item__1 {
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}
#block__11 .block_item__2 {
  z-index: 3;
  left: 0;
}
@media screen and (min-width: 768px) {
  #block__11 .block_item__2 {
    top: min(30.6666666667vw, 171.12px);
    width: min(40.2666666667vw, 224.688px);
  }
}
@media screen and (max-width: 767px) {
  #block__11 .block_item__2 {
    top: 30.6666666667vw;
    width: 40.2666666667vw;
  }
}
#block__11 .block_item__3 {
  bottom: 0;
  right: 0;
  z-index: 2;
  transform-origin: right top;
  transform: rotate(-90deg);
}
@media screen and (min-width: 768px) {
  #block__11 .block_item__3 {
    width: min(70.4vw, 392.832px);
  }
}
@media screen and (max-width: 767px) {
  #block__11 .block_item__3 {
    width: 70.4vw;
  }
}
#block__11 .check {
  z-index: 4;
}
@media screen and (min-width: 768px) {
  #block__11 .check {
    top: 41px;
    right: 9px;
  }
}
@media screen and (max-width: 767px) {
  #block__11 .check {
    top: 8vw;
    right: 3.2vw;
  }
}

/* #block__12
===================================================== */
@media screen and (min-width: 768px) {
  #block__12 .check {
    bottom: 20px;
    left: 11px;
  }
}
@media screen and (max-width: 767px) {
  #block__12 .check {
    bottom: 4.2666666667vw;
    left: 2.6666666667vw;
  }
}
#block__12 .block_text {
  position: absolute;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  #block__12 .block_text {
    bottom: 21px;
    right: 39px;
    font-size: 19px;
  }
}
@media screen and (max-width: 767px) {
  #block__12 .block_text {
    bottom: 5.6vw;
    right: 4.5333333333vw;
    font-size: 3.4666666667vw;
  }
}
#block__12 .colorBeta::before {
  background-color: #FAAC72;
}

/* #block__13
===================================================== */
@media screen and (min-width: 768px) {
  #block__13 .block_item__1 .check {
    bottom: 19px;
    left: 11px;
  }
}
@media screen and (max-width: 767px) {
  #block__13 .block_item__1 .check {
    bottom: 3.2vw;
    left: 2.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #block__13 .block_item__2 .check {
    bottom: 10px;
    left: 11px;
  }
}
@media screen and (max-width: 767px) {
  #block__13 .block_item__2 .check {
    bottom: 3.2vw;
    left: 3.4666666667vw;
  }
}

/* #block__14
===================================================== */
@media screen and (min-width: 768px) {
  #block__14 {
    padding: min(3.2vw, 17.856px) 0 min(2.9333333333vw, 16.368px);
  }
}
@media screen and (max-width: 767px) {
  #block__14 {
    padding: 3.2vw 0 2.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #block__14 .slideText_inner:not(:first-child) {
    margin-top: min(0.2666666667vw, 1.488px);
  }
}
@media screen and (max-width: 767px) {
  #block__14 .slideText_inner:not(:first-child) {
    margin-top: 0.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__14 .slideText_inner__1 {
    width: min(93.488vw, 521.66304px);
  }
}
@media screen and (max-width: 767px) {
  #block__14 .slideText_inner__1 {
    width: 93.488vw;
  }
}
@media screen and (min-width: 768px) {
  #block__14 .slideText_inner__2 {
    width: min(93.8693333333vw, 523.79088px);
  }
}
@media screen and (max-width: 767px) {
  #block__14 .slideText_inner__2 {
    width: 93.8693333333vw;
  }
}
@media screen and (min-width: 768px) {
  #block__14 .slideText_inner__3 {
    width: min(90.512vw, 505.05696px);
  }
}
@media screen and (max-width: 767px) {
  #block__14 .slideText_inner__3 {
    width: 90.512vw;
  }
}

/* #block__15
===================================================== */
#block__15 {
  position: relative;
}
#block__15 .block_item__1 {
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  #block__15 .block_item__1 {
    width: min(84.5333333333vw, 471.696px);
  }
}
@media screen and (max-width: 767px) {
  #block__15 .block_item__1 {
    width: 84.5333333333vw;
  }
}
#block__15 .block_item__2 {
  position: absolute;
  left: 0;
}
@media screen and (min-width: 768px) {
  #block__15 .block_item__2 {
    width: min(60.5333333333vw, 337.776px);
    top: min(7.7333333333vw, 43.152px);
    left: min(4.2666666667vw, 23.808px);
  }
}
@media screen and (max-width: 767px) {
  #block__15 .block_item__2 {
    width: 60.5333333333vw;
    top: 7.7333333333vw;
    left: 4.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__15 .block_item__2 .check {
    bottom: 10px;
    left: 10px;
  }
}
@media screen and (max-width: 767px) {
  #block__15 .block_item__2 .check {
    bottom: 2.1333333333vw;
    left: 2.1333333333vw;
  }
}
#block__15 .colorBeta::before {
  background-color: #FAAC72;
}

/* #block__16
===================================================== */
#block__16 {
  background-color: #000;
}
@media screen and (min-width: 768px) {
  #block__16 {
    padding: min(8vw, 44.64px) min(13.6vw, 75.888px) min(16vw, 89.28px) min(5.6vw, 31.248px);
  }
}
@media screen and (max-width: 767px) {
  #block__16 {
    padding: 8vw 13.6vw 16vw 5.6vw;
  }
}
@media screen and (min-width: 768px) {
  #block__16 .block_item {
    width: min(38.9333333333vw, 217.248px);
  }
}
@media screen and (max-width: 767px) {
  #block__16 .block_item {
    width: 38.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #block__16 .block_item__1 {
    margin-right: min(2.6666666667vw, 14.88px);
  }
}
@media screen and (max-width: 767px) {
  #block__16 .block_item__1 {
    margin-right: 2.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__16 .check {
    bottom: 11px;
    right: 9px;
  }
}
@media screen and (max-width: 767px) {
  #block__16 .check {
    bottom: 7.2vw;
    right: 13.6vw;
  }
}

/* #block__17
===================================================== */
@media screen and (min-width: 768px) {
  #block__17 .check {
    bottom: 59px;
    right: 73px;
  }
}
@media screen and (max-width: 767px) {
  #block__17 .check {
    bottom: 11.4666666667vw;
    right: 13.6vw;
  }
}
@media screen and (min-width: 768px) {
  #block__17 .tegaki {
    width: min(36vw, 200.88px);
    bottom: min(17.6vw, 98.208px);
    left: min(8vw, 44.64px);
  }
}
@media screen and (max-width: 767px) {
  #block__17 .tegaki {
    width: 36vw;
    bottom: 17.6vw;
    left: 8vw;
  }
}

/* #block__18
===================================================== */
#block__18 {
  position: relative;
}
@media screen and (min-width: 768px) {
  #block__18 .check {
    right: 10px;
    bottom: 11px;
  }
}
@media screen and (max-width: 767px) {
  #block__18 .check {
    right: 4vw;
    bottom: 5.0666666667vw;
  }
}

/* #block__19
===================================================== */
#block__19 {
  position: relative;
}
@media screen and (min-width: 768px) {
  #block__19 .check {
    right: 10px;
    bottom: 11px;
  }
}
@media screen and (max-width: 767px) {
  #block__19 .check {
    right: 2.6666666667vw;
    bottom: 3.2vw;
  }
}
#block__19 .block_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#block__19 .block_text .obiText_item__r {
  background-color: #8ede49;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  #block__19 .block_text .obiText_item__r {
    padding: 0 min(0.8vw, 4.464px);
    line-height: min(4.2666666667vw, 23.808px);
  }
}
@media screen and (max-width: 767px) {
  #block__19 .block_text .obiText_item__r {
    padding: 0 0.8vw;
    line-height: 4.2666666667vw;
  }
}
#block__19 .block_text span {
  display: block;
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #block__19 .block_text span {
    font-size: 17px;
  }
}
@media screen and (max-width: 767px) {
  #block__19 .block_text span {
    font-size: 3.2vw;
  }
}

/* #block__20
===================================================== */
@media screen and (min-width: 768px) {
  #block__20 .check {
    left: 10px;
    bottom: 21px;
  }
}
@media screen and (max-width: 767px) {
  #block__20 .check {
    left: 2.6666666667vw;
    bottom: 2.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #block__20 .line {
    top: max(-1.3333333333vw, -7.44px);
    left: min(40.8vw, 227.664px);
    width: min(28.8vw, 160.704px);
  }
}
@media screen and (max-width: 767px) {
  #block__20 .line {
    top: -1.3333333333vw;
    left: 40.8vw;
    width: 28.8vw;
  }
}

/* #block__21
===================================================== */
@media screen and (min-width: 768px) {
  #block__21 {
    padding: min(3.7333333333vw, 20.832px) 0 min(4.2666666667vw, 23.808px);
  }
}
@media screen and (max-width: 767px) {
  #block__21 {
    padding: 3.7333333333vw 0 4.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__21 .slideText_inner:not(:first-child) {
    margin-top: 2px;
  }
}
@media screen and (max-width: 767px) {
  #block__21 .slideText_inner:not(:first-child) {
    margin-top: 0vw;
  }
}
@media screen and (min-width: 768px) {
  #block__21 .slideText_inner__1 {
    width: min(93.7306666667vw, 523.01712px);
  }
}
@media screen and (max-width: 767px) {
  #block__21 .slideText_inner__1 {
    width: 93.7306666667vw;
  }
}
@media screen and (min-width: 768px) {
  #block__21 .slideText_inner__2 {
    width: min(93.96vw, 524.2968px);
  }
}
@media screen and (max-width: 767px) {
  #block__21 .slideText_inner__2 {
    width: 93.96vw;
  }
}
@media screen and (min-width: 768px) {
  #block__21 .slideText_inner__3 {
    width: min(80.776vw, 450.73008px);
  }
}
@media screen and (max-width: 767px) {
  #block__21 .slideText_inner__3 {
    width: 80.776vw;
  }
}

/* #block__22
===================================================== */
@media screen and (min-width: 768px) {
  #block__22 .check {
    left: 10px;
    bottom: 12px;
  }
}
@media screen and (max-width: 767px) {
  #block__22 .check {
    left: 2.6666666667vw;
    bottom: 3.7333333333vw;
  }
}
#block__22 .block_text {
  position: absolute;
  top: 49.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  #block__22 .block_text {
    width: min(69.6vw, 388.368px);
  }
}
@media screen and (max-width: 767px) {
  #block__22 .block_text {
    width: 69.6vw;
  }
}

/* .modal
===================================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .modal {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }
}
@media screen and (max-width: 767px) {
  .modal {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
}
.modal .modal_contentFlex {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal .modal_content {
  background-color: rgba(255, 255, 255, 0.9);
}
@media screen and (min-width: 768px) {
  .modal .modal_content {
    width: 375px;
  }
}
@media screen and (max-width: 767px) {
  .modal .modal_content {
    width: 100%;
    height: 100%;
  }
}
.modal .modal_inner {
  overflow-y: auto;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .modal .modal_inner {
    height: 100svh;
  }
}
.modal .modal_inner__center {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .modal .modal_area {
    width: 100%;
    max-height: 100vh;
    margin-left: auto;
    margin-right: auto;
    padding: min(15.4666666667vw, 58px) min(16.5333333333vw, 62px) min(5.3333333333vw, 20px) min(16.5333333333vw, 62px);
  }
}
@media screen and (max-width: 767px) {
  .modal .modal_area {
    width: 100%;
    padding: 15.4666666667vw 16.5333333333vw 5.3333333333vw 16.5333333333vw;
  }
}
.modal .modalImg {
  width: 100%;
}
.modal .credit {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .modal .credit {
    padding: min(8.5333333333vw, 32px) 0;
    gap: min(1.6vw, 6px) 0;
  }
}
@media screen and (max-width: 767px) {
  .modal .credit {
    padding: 8.5333333333vw 0;
    gap: 1.6vw 0;
  }
}
.modal .credit .credit_link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 700;
  font-style: normal;
}
@media screen and (min-width: 768px) {
  .modal .credit .credit_link {
    font-size: min(2.6666666667vw, 10px);
  }
}
@media screen and (max-width: 767px) {
  .modal .credit .credit_link {
    font-size: 2.6666666667vw;
  }
}
.modal .credit .credit_btn.credit_btn__buy {
  text-decoration: underline;
}
.modal .credit .credit_btn.credit_btn__coming {
  opacity: 0.5;
}
.modal .modalClose {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .modal .modalClose {
    gap: 0 min(1.6vw, 6px);
  }
}
@media screen and (max-width: 767px) {
  .modal .modalClose {
    gap: 0 1.6vw;
  }
}
@media screen and (min-width: 768px) {
  .modal .modalClose .modalClose_text {
    font-size: min(3.2vw, 12px);
  }
}
@media screen and (max-width: 767px) {
  .modal .modalClose .modalClose_text {
    font-size: 3.2vw;
  }
}
@media screen and (min-width: 768px) {
  .modal .modalClose .modalClose_img {
    width: min(2.6666666667vw, 10px);
  }
}
@media screen and (max-width: 767px) {
  .modal .modalClose .modalClose_img {
    width: 2.6666666667vw;
  }
}

/* .lead
===================================================== */
.lead {
  background-color: #f0eadc;
  position: relative;
}
@media screen and (min-width: 768px) {
  .lead {
    padding: 11px 6px min(2.6666666667vw, 14.88px) 6px;
  }
}
@media screen and (max-width: 767px) {
  .lead {
    padding: 1.3333333333vw 1.3333333333vw 2.6666666667vw 1.3333333333vw;
  }
}
.lead .leadTitle {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .lead .leadTitle {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 767px) {
  .lead .leadTitle {
    margin-bottom: 2.1333333333vw;
  }
}
.lead .leadTitle .leadTitle_inner {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  .lead .leadTitle .leadTitle_inner:first-child {
    margin-bottom: min(0.5333333333vw, 2.976px);
  }
}
@media screen and (max-width: 767px) {
  .lead .leadTitle .leadTitle_inner:first-child {
    margin-bottom: 0.5333333333vw;
  }
}
.lead .leadTitle .leadTitle_item__1 {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .lead .leadTitle .leadTitle_item__1 {
    width: min(97.3333333333vw, 543.12px);
  }
}
@media screen and (max-width: 767px) {
  .lead .leadTitle .leadTitle_item__1 {
    width: 97.3333333333vw;
  }
}
.lead .leadTitle .leadTitle_item__2 {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .lead .leadTitle .leadTitle_item__2 {
    width: min(96.5333333333vw, 538.656px);
  }
}
@media screen and (max-width: 767px) {
  .lead .leadTitle .leadTitle_item__2 {
    width: 96.5333333333vw;
  }
}
.lead .leadText {
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .lead .leadText {
    font-size: 10px;
    margin-bottom: 173px;
  }
}
@media screen and (max-width: 767px) {
  .lead .leadText {
    font-size: 2.6666666667vw;
    margin-bottom: 25.8666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .lead .staffCredit {
    line-height: 1.1666666667;
    font-size: 12px;
  }
}
@media screen and (max-width: 767px) {
  .lead .staffCredit {
    line-height: 1.2;
    font-size: 2.6666666667vw;
  }
}
.lead .logo20th {
  position: absolute;
}
@media screen and (min-width: 768px) {
  .lead .logo20th {
    width: 162px;
    bottom: 18px;
    right: 17px;
  }
}
@media screen and (max-width: 767px) {
  .lead .logo20th {
    width: 27.2vw;
    bottom: 2.6666666667vw;
    right: 2.6666666667vw;
  }
}

/* .footer
===================================================== */
@media screen and (min-width: 768px) {
  .footer {
    padding-top: 164px;
    padding-bottom: min(9.0666666667vw, 50.592px);
  }
}
@media screen and (max-width: 767px) {
  .footer {
    padding-top: 112px;
    padding-bottom: 34px;
  }
}
.footer .footer-logo {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .footer .footer-logo {
    width: min(29.0666666667vw, 162.192px);
    margin-bottom: min(6.1333333333vw, 34.224px);
  }
}
@media screen and (max-width: 767px) {
  .footer .footer-logo {
    width: 109px;
    margin-bottom: 23px;
  }
}
.footer .footer-logo a {
  display: block;
}
.footer .footer-list {
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 700;
  font-style: normal;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  letter-spacing: 0.05em;
  line-height: 2.0833333333;
}
@media screen and (min-width: 768px) {
  .footer .footer-list {
    font-size: min(3.2vw, 17.856px);
    margin-bottom: min(22.4vw, 124.992px);
  }
}
@media screen and (max-width: 767px) {
  .footer .footer-list {
    font-size: 12px;
    margin-bottom: 84px;
  }
}
.footer .footer-list .footer-list__item {
  display: flex;
}
.footer .footer-list .footer-list__item.kara {
  width: 100%;
}
.footer .footer-list .footer-list__item:not(:last-child, .kara)::after {
  content: "/";
}
@media screen and (min-width: 768px) {
  .footer .footer-list .footer-list__item:not(:last-child, .kara)::after {
    margin: 0 min(3.2vw, 17.856px);
  }
}
@media screen and (max-width: 767px) {
  .footer .footer-list .footer-list__item:not(:last-child, .kara)::after {
    margin: 0 12px;
  }
}
.footer .footer-list .footer-list__item .footer-list__link {
  display: block;
  text-transform: uppercase;
}
.footer .copy {
  text-align: center;
}
.footer .copy small {
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .footer .copy small {
    font-size: min(2.6666666667vw, 14.88px);
  }
}
@media screen and (max-width: 767px) {
  .footer .copy small {
    font-size: 10px;
  }
}

/* anime
===================================================== */
.zoom {
  overflow: hidden;
}
.zoom .zoom_area {
  overflow: hidden;
}
.zoom .zoom_item {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.9s, transform 1.2s;
}
.zoom.on .zoom_item {
  opacity: 1;
  transform: scale(1);
}

.zoom__up {
  overflow: hidden;
}
.zoom__up .zoom_item {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.7s, transform 1s;
}
.zoom__up.on .zoom_item {
  opacity: 1;
  transform: scale(1);
}

.obiText .obiText_inner {
  overflow: hidden;
  transform: translateX(-105%);
  transition: transform 0.5s;
}
.obiText .obiText_item {
  transform: translateX(105%);
  transition: transform 0.5s;
}
.obiText span {
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 0.5s;
}
.obiText .obiText_inner:nth-child(1),
.obiText .obiText_inner:nth-child(1) .obiText_item {
  transition-delay: 0s;
}
.obiText .obiText_inner:nth-child(1) span {
  transition-delay: 0.5s;
}
.obiText .obiText_inner:nth-child(2),
.obiText .obiText_inner:nth-child(2) .obiText_item {
  transition-delay: 0.3s;
}
.obiText .obiText_inner:nth-child(2) span {
  transition-delay: 0.8s;
}
.obiText .obiText_inner:nth-child(3),
.obiText .obiText_inner:nth-child(3) .obiText_item {
  transition-delay: 0.6s;
}
.obiText .obiText_inner:nth-child(3) span {
  transition-delay: 1.1s;
}
.obiText .obiText_inner:nth-child(4),
.obiText .obiText_inner:nth-child(4) .obiText_item {
  transition-delay: 0.9s;
}
.obiText .obiText_inner:nth-child(4) span {
  transition-delay: 1.4s;
}
.obiText.on .obiText_inner {
  transform: translateX(0);
}
.obiText.on .obiText_item {
  transform: translateX(0);
}
.obiText.on span {
  opacity: 1;
}

.obiText__r .obiText_inner__r {
  overflow: hidden;
  transform: translateX(105%);
  transition: transform 0.5s;
}
.obiText__r .obiText_item__r {
  transform: translateX(-105%);
  transition: transform 0.5s;
}
.obiText__r span {
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 0.5s;
}
.obiText__r.on .obiText_inner__r {
  transform: translateX(0);
}
.obiText__r.on .obiText_item__r {
  transform: translateX(0);
}
.obiText__r.on span {
  opacity: 1;
}

.fade .fade_item {
  opacity: 0;
  transition: opacity 0.7s;
}
.fade .fade_item:nth-of-type(1) {
  transition-delay: 0s;
}
.fade .fade_item:nth-of-type(2) {
  transition-delay: 0.3s;
}
.fade.on .fade_item {
  opacity: 1;
}

.colorBetaArea {
  position: relative;
  overflow: hidden;
}
.colorBetaArea .colorBeta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: top 0.5s ease-in;
}
.colorBetaArea.on .colorBeta::before {
  top: 105%;
}

.slideText .slideText_inner {
  display: block;
  overflow: hidden;
  transition: transform 0.4s;
}
@media screen and (min-width: 768px) {
  .slideText .slideText_inner:not(:first-child) {
    margin-top: max(-0.5333333333vw, -2.976px);
  }
}
@media screen and (max-width: 767px) {
  .slideText .slideText_inner:not(:first-child) {
    margin-top: -0.5333333333vw;
  }
}
.slideText .slideText_item {
  display: block;
  transform: translateY(-110%);
  transition: transform 0.4s;
}
.slideText.on .slideText_inner {
  transform: translateY(0);
}
.slideText.on .slideText_item {
  transform: translateY(0);
}

.circleMask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.circleMask .circleMask_item {
  -webkit-clip-path: ellipse(0% 0%);
          clip-path: ellipse(0% 0%);
  transition: -webkit-clip-path 1.8s;
  transition: clip-path 1.8s;
  transition: clip-path 1.8s, -webkit-clip-path 1.8s;
}
.circleMask.on .circleMask_item {
  -webkit-clip-path: ellipse(100% 100%);
          clip-path: ellipse(100% 100%);
}

.lead .leadTitle_inner {
  overflow: hidden;
}
.lead .leadTitle_item {
  transform: translateY(105%);
  transition: transform 0.7s;
}
.lead .leadText,
.lead .staffCredit,
.lead .logo20th {
  opacity: 0;
  transform: translateY(15%);
  transition: transform 0.7s, opacity 0.7s;
}
.lead .leadTitle_item__1 {
  transition-delay: 0s;
}
.lead .leadTitle_item__2 {
  transition-delay: 0.25s;
}
.lead .leadText {
  transition-delay: 0.5s;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
}
.lead .staffCredit {
  transition-delay: 0.75s;
}
.lead .logo20th {
  transition-delay: 0.9s;
}
.lead.on .leadTitle_item {
  transform: translateY(0);
}
.lead.on .leadText,
.lead.on .staffCredit,
.lead.on .logo20th {
  opacity: 1;
  transform: translateY(0);
}/*# sourceMappingURL=style.css.map */