@charset "UTF-8";
/* SETTING
================================================================================ */
html {
  scroll-behavior: smooth;
}

body {
  background: #2d2013;
}

dfn {
  font-style: normal;
}

div {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
  margin-top: 0;
}

h2, h3 {
  font-family: "Hina Mincho", serif;
}

p {
  margin-bottom: 0;
}

address,
dl,
ol,
ul {
  margin-bottom: 0;
}

dd {
  margin-bottom: 0;
}

blockquote {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
}

#contents,
#mainContents {
  width: 100%;
  background: transparent;
  float: none;
  clear: both;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.sp_container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.sp_container_m {
  max-width: 770px;
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes bgColor {
  0% {
    background-image: linear-gradient(#2E37C3 0%, #3D91F9 100%);
  }
  100% {
    background-image: linear-gradient(#3D91F9 0%, #2E37C3 100%);
  }
}

@keyframes bgColor {
  0% {
    background-image: linear-gradient(#2E37C3 0%, #3D91F9 100%);
  }
  100% {
    background-image: linear-gradient(#3D91F9 0%, #2E37C3 100%);
  }
}
@-webkit-keyframes twincle {
  0% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-filter: brightness(200%);
            filter: brightness(200%);
  }
  50% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-filter: brightness(75%);
            filter: brightness(75%);
  }
  100% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
}
@keyframes twincle {
  0% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-filter: brightness(200%);
            filter: brightness(200%);
  }
  50% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-filter: brightness(75%);
            filter: brightness(75%);
  }
  100% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
}
.sp_content {
  overflow: hidden;
  position: relative;
  color: #fff;
  font-size: clamp(14px, 1.6vw, 16px);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  padding: 0;
  margin: 0;
  z-index: 0;
}
.sp_content a {
  cursor: pointer;
  color: #e2bd65;
}
.sp_content a:visited {
  color: #b09181;
}
.sp_content a:hover, .sp_content a:active, .sp_content a:focus {
  color: rgb(234.0819672131, 207.393442623, 143.9180327869);
}
.sp_content a:hover img, .sp_content a:active img, .sp_content a:focus img {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.sp_content a img {
  display: block;
  transition: all 0.6s;
}
.sp_content div, .sp_content section {
  box-sizing: border-box;
}
.sp_content .alt {
  display: none;
}
.sp_content figure {
  margin: 0;
}
.sp_content main {
  position: relative;
  z-index: 0;
}
.sp_content main *:not(.sp_news) p:not(.cap, .title) {
  text-align: justify;
  text-justify: inter-character;
  text-indent: 1em;
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
@-webkit-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25%, 75% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25%, 75% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
          animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 20%, 50%, 70%, 100% {
    opacity: 1;
  }
  10%, 60%, 100% {
    opacity: 0.4;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 20%, 50%, 70%, 100% {
    opacity: 1;
  }
  10%, 60%, 100% {
    opacity: 0.4;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
          animation-name: flash;
}

.scrlact[class*=fadeIn] {
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  opacity: 0;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn.--animated {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown.--animated {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeft.--animated {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInRight.--animated {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUp.--animated {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes floatup {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  10% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
    -webkit-transform: translate3d(10px, -40vh, 0);
            transform: translate3d(10px, -40vh, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-10px, -100vh, 0);
            transform: translate3d(-10px, -100vh, 0);
  }
}

@keyframes floatup {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  10% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
    -webkit-transform: translate3d(10px, -40vh, 0);
            transform: translate3d(10px, -40vh, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-10px, -100vh, 0);
            transform: translate3d(-10px, -100vh, 0);
  }
}
.bg-floatup {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.bg-floatup span {
  display: block;
  background-color: #e2bd65;
  -webkit-animation: floatup 5s linear infinite;
          animation: floatup 5s linear infinite;
  will-change: opacity, transform;
}
.bg-floatup span:nth-child(6n-5) {
  width: 3px;
  height: 3px;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.bg-floatup span:nth-child(6n-4) {
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.bg-floatup span:nth-child(6n-3) {
  width: 3px;
  height: 3px;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.bg-floatup span:nth-child(6n-2) {
  width: 2px;
  height: 2px;
  -webkit-animation-delay: -8s;
          animation-delay: -8s;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.bg-floatup span:nth-child(6n-1) {
  width: 3px;
  height: 3px;
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.bg-floatup span:nth-child(6n) {
  width: 4px;
  height: 4px;
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.bg-floatup span:nth-child(7n) {
  -webkit-animation-delay: -6.2s;
          animation-delay: -6.2s;
}
.bg-floatup span:nth-child(8n) {
  -webkit-animation-delay: -8.5s;
          animation-delay: -8.5s;
}
.bg-floatup span:nth-child(9n) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
.bg-floatup span:nth-child(10n) {
  -webkit-animation-delay: -5.5s;
          animation-delay: -5.5s;
}
.bg-floatup span:nth-child(12n-1) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.bg-floatup span:nth-child(12n) {
  -webkit-animation-delay: -3.3s;
          animation-delay: -3.3s;
}
.bg-floatup span:nth-child(12n+1) {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.bg-floatup span:nth-child(15n-2) {
  -webkit-animation-delay: -6.3s;
          animation-delay: -6.3s;
}
.bg-floatup span:nth-child(15n-1) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.bg-floatup span:nth-child(15n) {
  -webkit-animation-delay: -6.8s;
          animation-delay: -6.8s;
}
.bg-floatup span:nth-child(17n) {
  -webkit-animation-delay: -8.7s;
          animation-delay: -8.7s;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.bg-floatup span:nth-child(24n) {
  -webkit-animation-delay: -12.7s;
          animation-delay: -12.7s;
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
}
.bg-floatup span:nth-child(48n) {
  -webkit-animation-delay: -11.7s;
          animation-delay: -11.7s;
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.bg-floatup span:nth-child(60n-31) {
  -webkit-animation-delay: -11.2s;
          animation-delay: -11.2s;
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.bg-floatup span:nth-child(60n-37) {
  width: 12px;
  height: 12px;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-animation-delay: -10.4s;
          animation-delay: -10.4s;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
}

.cf {
  zoom: 1;
}
.cf:before, .cf:after {
  content: "";
  display: table;
  border-spacing: 0;
  width: 0;
}
.cf:after {
  clear: both;
}

/* SWIPER
======================================== */
.sp_container .swiper .swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000) !important;
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2) !important;
}
.sp_container .swiper .swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color, var(--swiper-theme-color)) !important;
  opacity: var(--swiper-pagination-bullet-opacity, 1) !important;
}

/* HEADING
======================================== */
.sec-headline {
  font-size: clamp(20px, 3vw, 36px);
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: clamp(20px, 3vw, 30px);
  text-shadow: 0 0 0.4em #120c07;
}

/* LINK
======================================== */
.link-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  text-align: center;
  margin: 0 10px;
}
.link-block a {
  display: block;
  box-shadow: 0 2px 10px rgba(18, 12, 7, 0.4);
  background: url(../images/banner-bg.jpg) no-repeat center;
  font-family: "Hina Mincho", serif;
  font-size: 1.125em;
  letter-spacing: 0.1em;
  padding: 1em 0;
}
.link-block a, .link-block a:hover, .link-block a:visited {
  color: #120c07;
}
.link-block a:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.link-block img {
  display: block;
  width: 100%;
}
.link-block li {
  opacity: 0;
  will-change: opacity transform;
}
.link-block.--animated li {
  -webkit-animation: fadeInUp 0.6s 1 0s both;
          animation: fadeInUp 0.6s 1 0s both;
}
.link-block.--animated li:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.link-block.--animated li:nth-of-type(3) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@media screen and (min-width: 721px) {
  .link-block {
    grid-template-columns: 1fr;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ACCORDION
======================================== */
div.accordion {
  position: relative;
  height: auto;
}
div.accordion + label {
  display: none;
}
@media screen and (max-width: 720px) {
  div.accordion {
    overflow: hidden;
  }
  div.accordion + label {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    text-align: center;
    margin: 1em 0 1em;
    font-family: "Noto Serf JP", serif;
    font-weight: 800;
    font-optical-sizing: auto;
    color: #bfb092;
  }
  div.accordion + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 46px;
    background: url(../images/arrow-down.png) no-repeat bottom 8px center;
  }
  div.accordion .sp_news li:nth-child(n+4) {
    display: none;
    height: 0px;
  }
  div.accordion:not(:has(li:nth-child(5))) + label {
    display: none;
  }
}

input.accordion {
  display: none;
}
@media screen and (max-width: 720px) {
  input.accordion:checked ~ div.accordion {
    max-height: inherit;
    -webkit-mask: none;
            mask: none;
  }
  input.accordion:checked ~ div.accordion + label {
    flex-direction: column-reverse;
    margin: 2em 0 0;
  }
  input.accordion:checked ~ div.accordion + label span {
    display: none;
  }
  input.accordion:checked ~ div.accordion + label::before {
    content: "閉じる";
    display: block;
    margin: 32px auto 0;
    z-index: 1;
  }
  input.accordion:checked ~ div.accordion + label::after {
    top: 0;
    -webkit-transform: scale(1, -1);
            transform: scale(1, -1);
  }
  input.accordion:checked ~ div.accordion .sp_news li:nth-child(n+4) {
    display: block;
    height: 100%;
  }
}

@media (hover: hover) {
  div.accordion + label {
    cursor: pointer;
    transition: all 0.4s;
  }
  div.accordion + label:hover {
    opacity: 0.5;
  }
}
/* MOVIE
======================================== */
.sp_movie {
  display: block;
  position: relative;
  width: 100%;
}
.sp_movie::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.sp_movie > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* SPEC
======================================== */
.sp_spec .spec-body {
  line-height: 1.4;
  font-size: clamp(12px, 1.4vw, 14px);
}
.sp_spec .spec-body dl {
  display: flex;
  flex-direction: row;
}
.sp_spec .spec-body dl:not(:last-child) {
  margin-bottom: 0.2em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgba(226, 189, 101, 0.4);
}
.sp_spec .spec-body dt {
  flex: 0 0 6em;
}
.sp_spec .spec-body dd {
  flex: 1 1 50%;
}
.sp_spec .spec-body h4 {
  display: block;
  font-size: 1em;
  padding: 0.2em 0.5em;
  background: rgba(226, 189, 101, 0.2);
  margin-bottom: 0.25em;
}
.sp_spec .spec-body h4:not(:first-child) {
  margin-top: 1em;
}
.sp_spec, .sp_spec h3 {
  opacity: 0;
  will-change: opacity transform;
}
.sp_spec.--animated {
  -webkit-animation: fadeInUp 0.6s 1 0s both;
          animation: fadeInUp 0.6s 1 0s both;
}
.sp_spec.--animated h3 {
  -webkit-animation: fadeInLeft 0.6s 1 0.2s both;
          animation: fadeInLeft 0.6s 1 0.2s both;
}

/* NEWS
======================================== */
.contentsWrapper {
  display: flex;
  position: relative;
}
.contentsWrapper .image {
  overflow: hidden;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}
.contentsWrapper .image img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  -o-object-fit: cover;
     object-fit: cover;
  object-fit: cover;
  transition: all 0.4s;
}
.contentsWrapper .textWrapper {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contentsWrapper .textWrapper:not(:has(.datetime)) {
  justify-content: center;
}
.contentsWrapper .textWrapper:not(:has(.datetime)) .title {
  text-align: center;
}
.contentsWrapper .title {
  position: relative;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 0.5em;
}
.contentsWrapper .title > * {
  position: relative;
  z-index: 1;
}
.contentsWrapper .description {
  color: #fff;
  font-size: clamp(12px, 1.4vw, 14px);
  text-align: justify;
  padding-bottom: 0.5em;
  text-justify: inter-character;
}
.contentsWrapper .datetime {
  font-family: "Hina Mincho", serif;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.2;
  color: #bfb092;
  margin-top: auto;
  align-self: flex-end;
}
@media (hover: hover) {
  .contentsWrapper:hover .image {
    -webkit-filter: brightness(110%);
            filter: brightness(110%);
  }
  .contentsWrapper:hover .image img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

.sp_news li {
  opacity: 0;
  will-change: opacity transform;
  display: block;
  width: 100%;
  transition: all 0.4s;
}
.sp_news li a {
  display: block;
  width: 100%;
}
.sp_news a, .sp_news a:link, .sp_news a:hover, .sp_news a:visited {
  color: #fff;
}
.sp_news--card .contentsWrapper {
  height: 100%;
  flex-direction: column;
  justify-content: stretch;
}
.sp_news--card .contentsWrapper .image {
  margin: 0;
}
.sp_news--card .contentsWrapper .image img {
  width: 100%;
}
.sp_news--card .contentsWrapper .description {
  display: none;
}
.sp_news--card .contentsWrapper .textWrapper {
  flex: auto;
  padding: 1em;
  background: linear-gradient(rgba(226, 189, 101, 0), rgba(226, 189, 101, 0.2)), url(../images/pickup-article-bg.jpg) no-repeat center;
}
.sp_news--card .contentsWrapper .title {
  font-weight: normal;
  line-height: 1.5;
  font-size: 0.875em;
  padding-bottom: 0;
  margin: 0;
  color: #fff;
}
.sp_news--card .contentsWrapper .datetime {
  border-top: 1px solid #bfb092;
  padding-top: 0.5em;
  font-size: 0.875em;
  border-top: none;
  padding: 0;
}
.sp_news--card li {
  padding: 0;
  box-shadow: 0 0 5px rgba(30, 30, 30, 0.4);
  overflow: hidden;
}
.sp_news--card2 {
  font-size: clamp(14px, 1.6vw, 16px);
}
.sp_news--card2 .contentsWrapper .image {
  flex: 0 0 160px;
}
.sp_news--card2 .contentsWrapper .title {
  font-weight: normal;
  line-height: 1.5;
  font-size: 0.875em;
  padding-bottom: 0;
  margin: 0;
  color: #fff;
}
.sp_news--card2 .contentsWrapper .datetime {
  border-top: 1px solid #bfb092;
  padding-top: 0.5em;
}
.sp_news--card2 .contentsWrapper .textWrapper {
  flex: auto;
  padding: 1em;
  background: #fcf1d5 url(../images/pickup-article-bg.jpg) no-repeat center;
}
.sp_news--card2 li {
  padding: 0;
  box-shadow: 0 0 5px rgba(30, 30, 30, 0.4);
  overflow: hidden;
}
@media screen and (min-width: 721px) {
  .sp_news--card2 .contentsWrapper .image {
    flex: 0 0 50%;
    box-shadow: 0 0 2px rgba(30, 30, 30, 0.4);
  }
}
.sp_news--row {
  font-size: clamp(14px, 1.6vw, 16px);
}
.sp_news--row .contentsWrapper {
  position: relative;
  display: flex;
  gap: 1em;
}
.sp_news--row .contentsWrapper .image {
  flex: 0 0 160px;
}
.sp_news--row .contentsWrapper .description {
  display: none;
}
.sp_news--row .textWrapper {
  flex: 1;
}
.sp_news--row li {
  border-bottom: 1px solid rgba(226, 189, 101, 0.4);
  padding: 1em 0;
}
@media screen and (min-width: 721px) {
  .sp_news--row .contentsWrapper .image {
    flex: 0 0 240px;
    box-shadow: 0 0 2px rgba(30, 30, 30, 0.4);
  }
}

.sp_news li {
  opacity: 0;
  will-change: opacity transform;
}
.sp_news li.--animated {
  -webkit-animation: fadeInUp 0.6s 1 0s both;
          animation: fadeInUp 0.6s 1 0s both;
}

.sp_sec.--pickup {
  position: relative;
  background: rgba(45, 32, 19, 0.8);
  padding: clamp(20px, 3vw, 30px) 0;
  border-top: 2px solid;
  -o-border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
     border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
}
.sp_sec.--pickup > div {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 0 clamp(20px, 6vw, 60px) clamp(30px, 4vw, 40px);
}
.sp_sec.--pickup .sp_news {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
}
@media screen and (min-width: 721px) {
  .sp_sec.--pickup .sp_news {
    flex-direction: row;
    justify-content: center;
  }
  .sp_sec.--pickup .sp_news > *:not(:last-child) {
    margin-bottom: 0;
  }
}

/* sp_sec
======================================== */
.sp_sec.--story {
  position: relative;
  padding-top: clamp(20px, 3vw, 30px);
  background: linear-gradient(#120c07 0%, #2d2013 100%);
  z-index: 1;
}
.sp_sec.--story .sp_container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}
.sp_sec.--story .sec-heading {
  float: left;
  position: relative;
  margin-bottom: 0.5em;
  width: 100%;
  padding-left: clamp(20px, 3vw, 30px);
  z-index: 2;
}
.sp_sec.--story .sec-heading::before {
  content: "";
  width: 300px;
  height: 156px;
  background: url(../images/story-bg.svg) no-repeat left top;
  position: absolute;
  top: -60px;
  left: -50px;
  -webkit-animation: fadeIn 3s infinite alternate 0s both;
          animation: fadeIn 3s infinite alternate 0s both;
}
.sp_sec.--story h2 {
  text-shadow: 0 0 8px rgba(18, 12, 7, 0.8), 0 0 20px rgba(45, 32, 19, 0.8);
}
.sp_sec.--story .img {
  margin-top: max(-15vw, -50px);
}
.sp_sec.--story .content {
  padding: clamp(20px, 3vw, 30px);
}
.sp_sec.--story .content p {
  line-height: 2;
}
.sp_sec.--story .swiper {
  --swiper-pagination-bullet-inactive-color: #e2bd65;
  --swiper-pagination-color: #e2bd65;
  --swiper-pagination-bullet-width: 4px;
  --swiper-pagination-bullet-height: 4px;
  --swiper-pagination-bottom: 0;
  --swiper-pagination-bullet-horizontal-gap:0px;
  padding-bottom: 12px;
}
.sp_sec.--story .swiper > .swiper-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 8px 0 0;
  gap: 8px;
}
.sp_sec.--story .sp_container, .sp_sec.--story h2 {
  opacity: 0;
  will-change: opacity transform;
}
.sp_sec.--story.--animated .sp_container {
  -webkit-animation: fadeIn 1s 1 0s both;
          animation: fadeIn 1s 1 0s both;
}
.sp_sec.--story.--animated h2 {
  -webkit-animation: fadeInLeft 1s 1 0.2s both;
          animation: fadeInLeft 1s 1 0.2s both;
}
@media screen and (min-width: 900px) {
  .sp_sec.--story .sp_container {
    display: block;
  }
  .sp_sec.--story .sec-heading {
    box-sizing: border-box;
    padding-left: clamp(30px, 6vw, 60px);
  }
  .sp_sec.--story .sec-heading::before {
    left: 0;
  }
  .sp_sec.--story .sec-heading {
    width: 50%;
  }
  .sp_sec.--story .img {
    margin-top: 0;
    float: right;
    width: 50%;
  }
  .sp_sec.--story .content {
    width: 50%;
    padding: 0 clamp(30px, 6vw, 60px) clamp(20px, 3vw, 30px);
  }
}
@media screen and (min-width: 1240px) {
  .sp_sec.--story .sec-heading, .sp_sec.--story .content {
    width: 40%;
  }
  .sp_sec.--story .img {
    width: 60%;
  }
}

.sp_sec.--character {
  position: relative;
  padding: clamp(30px, 6vw, 60px) 0;
  background: url(../images/chara-bg.svg) no-repeat center;
  background-size: auto 120%;
}
.sp_sec.--character::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: auto 100%, auto 100%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.sp_sec.--character .sp_container {
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.sp_sec.--character img {
  display: block;
  width: auto;
  max-width: inherit;
}
.sp_sec.--character .qu {
  position: absolute;
  right: 0;
  height: 100%;
  bottom: 0;
  z-index: 1;
}
.sp_sec.--character .ema {
  position: absolute;
  left: 10%;
  height: 100%;
  bottom: 0;
  z-index: 1;
}
.sp_sec.--character h3 {
  z-index: 2;
  text-shadow: 0 0 5px rgba(18, 12, 7, 0.8);
  font-size: clamp(20px, 3vw, 36px);
}
.sp_sec.--character h3 span {
  display: block;
  font-size: clamp(14px, 1.6vw, 16px);
  color: #e2bd65;
  text-shadow: 0 0 5px #120c07, 0 0 3px #120c07;
}
.sp_sec.--character p {
  color: #fff;
  line-height: 1.6;
  margin-top: 0.5em;
  border-radius: 4px;
  font-size: clamp(12px, 1.4vw, 14px);
  text-shadow: 0 0 5px #120c07, 0 0 3px #120c07;
}
.sp_sec.--character .profile {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-end;
  padding: min(30vw, 450px) clamp(20px, 3vw, 30px) min(5vw, 120px);
}
.sp_sec.--character .profile > * {
  max-width: 320px;
}
.sp_sec.--character::before, .sp_sec.--character .qu, .sp_sec.--character .ema, .sp_sec.--character .profile {
  opacity: 0;
  will-change: opacity transform;
}
.sp_sec.--character.--animated::before {
  -webkit-animation: fadeIn 1s 1 0s both;
          animation: fadeIn 1s 1 0s both;
}
.sp_sec.--character.--animated .ema {
  -webkit-animation: fadeInRight 1s 1 0.4s both;
          animation: fadeInRight 1s 1 0.4s both;
}
.sp_sec.--character.--animated .qu {
  -webkit-animation: fadeInLeft 1s 1 0.2s both;
          animation: fadeInLeft 1s 1 0.2s both;
}
.sp_sec.--character.--animated .profile {
  -webkit-animation: fadeIn 1s 1 0.7s both;
          animation: fadeIn 1s 1 0.7s both;
}
@media screen and (min-width: 721px) {
  .sp_sec.--character {
    background-size: auto 100%;
  }
  .sp_sec.--character::before {
    background-position: center left 10%, center right 10%;
    background-size: auto 60%, auto 60%;
  }
}
@media screen and (min-width: 1200px) {
  .sp_sec.--character h3.name-ema {
    top: 40%;
    left: max(-5vw, -100px);
  }
  .sp_sec.--character h3.name-qu {
    top: 40%;
    right: max(-5vw, -100px);
  }
}

/* LAYOUT
======================================== */
.sp_main {
  backdrop-filter: blur(4px);
}

.sp_set--wide {
  position: relative;
  border-top: 2px solid;
  -o-border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
     border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
}
.sp_set--wide h2, .sp_set--wide h3 {
  letter-spacing: 0.08em;
  color: #e2bd65;
}
.sp_set--wide h2 {
  font-size: clamp(18px, 2.8vw, 28px);
}
.sp_set--wide h3 {
  font-size: clamp(16px, 1.8vw, 20px);
}
.sp_set--wide .sp_set-content {
  background: rgba(18, 12, 7, 0.8);
}
.sp_set--wide .sp_set-content h2 {
  position: relative;
}
.sp_set--wide .sp_set-content h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #e2bd65 0%, rgba(226, 189, 101, 0) 100%);
}
.sp_set--wide .sp_set-content > *:not(.--pickup) {
  padding: clamp(30px, 4vw, 40px) clamp(20px, 6vw, 60px);
}
.sp_set--wide .sp_set-side {
  background: rgba(45, 32, 19, 0.8);
  padding-top: clamp(30px, 4vw, 40px);
  border-top: 2px solid;
  -o-border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
     border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
}
.sp_set--wide .sp_set-side h3 {
  position: relative;
  margin-bottom: 0.6em;
  padding: 0.2em 0.4em;
}
.sp_set--wide .sp_set-side h3::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(226, 189, 101, 0.4) 0%, #e2bd65 100%);
}
.sp_set--wide .sp_set-side h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #e2bd65 0%, rgba(226, 189, 101, 0) 100%);
}
.sp_set--wide .sp_set-side > * {
  padding: clamp(30px, 4vw, 40px) clamp(20px, 3vw, 30px);
}
@media screen and (min-width: 721px) {
  .sp_set--wide {
    display: flex;
    flex-direction: row;
  }
  .sp_set--wide .sp_set-content {
    flex: 1;
  }
  .sp_set--wide .sp_set-content > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .sp_set--wide .sp_set-side {
    flex: 0 0 25%;
    border-top: none;
    padding-top: 0;
  }
  .sp_set--wide .sp_set-side > * {
    margin-left: auto;
    margin-right: auto;
  }
  .sp_set--wide .sp_set-side > *:not(.sp_spec) {
    max-width: 320px;
  }
  .sp_set--wide .sp_set-side > *.sp_spec {
    max-width: 960px;
  }
  .sp_set--wide h2 {
    text-align: left;
  }
}

/* HEADER
======================================== */
#sp_content-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100svw;
  height: 100svh;
  background: url(../images/kv@2x.jpg) no-repeat center top/cover;
}
@media screen and (min-width: 721px) {
  #sp_content-bg {
    background-image: url(../images/kv-l.jpg);
  }
}

.sp_header {
  background: #2d2013 linear-gradient(rgba(45, 32, 19, 0) 0%, #120c07 100%);
  position: relative;
}
.sp_header img {
  display: block;
  height: auto;
}

.sp_header-kv {
  position: relative;
}
.sp_header-kv .sp-kv {
  display: block;
  -webkit-mask: linear-gradient(white 80%, rgba(255, 255, 255, 0) 100%);
          mask: linear-gradient(white 80%, rgba(255, 255, 255, 0) 100%);
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.sp_header-kv .pr {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 5px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  border: solid 1px #e2bd65;
  color: #e2bd65;
  z-index: 1;
  line-height: 1;
  padding: 0.15em 0.4em;
  font-size: clamp(14px, 2vw, 20px);
  background: rgba(18, 12, 7, 0.2);
}
.sp_header-kv .sp-logo {
  position: absolute;
  top: 0;
  padding: 5vw 22vw;
  opacity: 0;
}
.sp_header-kv .sp-logo img {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}
@media screen and (min-width: 721px) {
  .sp_header-kv .sp-logo {
    padding: 3vw 30vw;
  }
}
.sp_header-kv .sp-catch {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(4px, 1vw, 40px);
  padding: 0 clamp(10px, 4vw, 150px) 0;
}
.sp_header-kv .sp-catch span {
  opacity: 0;
}
.sp_header-kv .sp-catch span:not(:has(img)) {
  flex: 1 1 auto;
}
.sp_header-kv .sp-catch span:has(img) {
  background: linear-gradient(rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);
  flex: 0 0 clamp(24px, 5vw, 50px);
  padding: clamp(10px, 1vw, 30px) clamp(2px, 1vw, 10px) clamp(20px, 2vw, 50px);
}
.sp_header-kv .sp-catch span:has(img).sp-catch02 {
  margin-top: 10vw;
}
.sp_header-kv .sp-catch span:has(img).sp-catch03 {
  align-self: center;
  background: rgba(0, 0, 0, 0.8);
}
.sp_header-kv .sp-catch span:has(img).sp-catch04 {
  align-self: flex-end;
  background: rgba(0, 0, 0, 0.8);
  margin-bottom: 10vw;
}
.sp_header-kv .sp-logo, .sp_header-kv .sp-catch span {
  opacity: 0;
  will-change: opacity transform;
}
.sp_header-kv.--animated .sp-logo {
  -webkit-animation: fadeIn 1s 1 linear 0s both;
          animation: fadeIn 1s 1 linear 0s both;
}
.sp_header-kv.--animated .sp-catch span.sp-catch01 {
  -webkit-animation: fadeInDown 0.8s 1 linear 0.4s both;
          animation: fadeInDown 0.8s 1 linear 0.4s both;
}
.sp_header-kv.--animated .sp-catch span.sp-catch02 {
  -webkit-animation: fadeInUp 0.8s 1 linear 0.8s both;
          animation: fadeInUp 0.8s 1 linear 0.8s both;
}
.sp_header-kv.--animated .sp-catch span.sp-catch03 {
  -webkit-animation: fadeIn 0.8s 1 linear 1.2s both;
          animation: fadeIn 0.8s 1 linear 1.2s both;
}
.sp_header-kv.--animated .sp-catch span.sp-catch04 {
  -webkit-animation: fadeIn 0.8s 1 linear 1.4s both;
          animation: fadeIn 0.8s 1 linear 1.4s both;
}

.sp_header-movie {
  position: relative;
  padding: 0 max(20px, 6vw) clamp(30px, 6vw, 60px);
}
.sp_header-movie .sp_movie {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.sp_header-movie {
  opacity: 0;
  will-change: opacity transform;
}
.sp_header-movie.--animated {
  -webkit-animation: fadeIn 0.8s 1 linear 0s both;
          animation: fadeIn 0.8s 1 linear 0s both;
}
@media screen and (min-width: 1240px) {
  .sp_header-movie {
    margin-top: -15vw;
  }
  .sp_header-movie .sp_movie {
    width: 70vw;
  }
}

.sp_header-buy {
  position: relative;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px);
  margin: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
  -o-border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
     border-image: linear-gradient(90deg, rgba(226, 189, 101, 0) 0%, #e2bd65 50%, rgba(226, 189, 101, 0) 100%) 1;
}
.sp_header-buy a {
  display: block;
  box-shadow: 0 2px 10px rgba(18, 12, 7, 0.4);
  background: url(../images/banner-bg.jpg) no-repeat center;
  font-family: "Hina Mincho", serif;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: 0.1em;
  padding: 1em 0;
  text-align: center;
}
.sp_header-buy a, .sp_header-buy a:hover, .sp_header-buy a:visited {
  color: #120c07;
}
.sp_header-buy a:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.sp_header-buy .sec-headline {
  font-size: clamp(18px, 2.8vw, 28px);
  position: relative;
  text-shadow: 0 0 5px rgba(18, 12, 7, 0.8);
}
.sp_header-buy .sec-headline::before {
  content: "";
  width: max(300px, 70vw);
  height: max(300px, 70vw);
  background: radial-gradient(circle at center, rgba(226, 189, 101, 0.3) 0%, rgba(226, 189, 101, 0.1) 24%, rgba(226, 189, 101, 0) 66%);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  z-index: 0;
  opacity: 0;
}
.sp_header-buy .sec-body {
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4em, 3vw, 30px) clamp(10px, 3vw, 30px);
}
@media screen and (min-width: 721px) {
  .sp_header-buy .sec-body {
    flex-direction: row;
    justify-content: center;
  }
  .sp_header-buy .sec-body a {
    flex: 1 0 30%;
  }
}
.sp_header-buy .sec-heading::before, .sp_header-buy .sec-body a {
  opacity: 0;
  will-change: opacity transform;
}
.sp_header-buy.--animated .sec-headline::before {
  -webkit-animation: fadeIn 2s infinite alternate 0s both;
          animation: fadeIn 2s infinite alternate 0s both;
}
.sp_header-buy.--animated .sec-body a {
  -webkit-animation: fadeInUp 0.6s 1 0.2s both;
          animation: fadeInUp 0.6s 1 0.2s both;
}
.sp_header-buy.--animated .sec-body a:nth-of-type(2) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.sp_header-buy.--animated .sec-body a:nth-of-type(3) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

/* SVG
======================================== */
.sp_lead path {
  --digit-1: 0;
  --digit-2: 0;
}
.sp_lead path:nth-child(10n+0) {
  --digit-1: 0;
}
.sp_lead path:nth-child(10n+1) {
  --digit-1: 1;
}
.sp_lead path:nth-child(10n+2) {
  --digit-1: 2;
}
.sp_lead path:nth-child(10n+3) {
  --digit-1: 3;
}
.sp_lead path:nth-child(10n+4) {
  --digit-1: 4;
}
.sp_lead path:nth-child(10n+5) {
  --digit-1: 5;
}
.sp_lead path:nth-child(10n+6) {
  --digit-1: 6;
}
.sp_lead path:nth-child(10n+7) {
  --digit-1: 7;
}
.sp_lead path:nth-child(10n+8) {
  --digit-1: 8;
}
.sp_lead path:nth-child(10n+9) {
  --digit-1: 9;
}
.sp_lead path:nth-child(10n+8) {
  --digit-1: 8;
}
.sp_lead path:nth-child(-n+10) {
  --digit-2: 0;
}
.sp_lead path:nth-child(n+10):nth-child(-n+20) {
  --digit-2: 10;
}
.sp_lead path:nth-child(n+20):nth-child(-n+30) {
  --digit-2: 20;
}
.sp_lead path:nth-child(n+30):nth-child(-n+40) {
  --digit-2: 30;
}
.sp_lead path:nth-child(n+40):nth-child(-n+50) {
  --digit-2: 40;
}
.sp_lead path:nth-child(n+50):nth-child(-n+60) {
  --digit-2: 50;
}
.sp_lead path:nth-child(n+60):nth-child(-n+70) {
  --digit-2: 60;
}
.sp_lead path:nth-child(n+70):nth-child(-n+80) {
  --digit-2: 70;
}
.sp_lead path:nth-child(n+80):nth-child(-n+90) {
  --digit-2: 80;
}
.sp_lead path:nth-child(n+90):nth-child(-n+100) {
  --digit-2: 90;
}
.sp_lead path:nth-child(n+100):nth-child(-n+110) {
  --digit-2: 100;
}
.sp_lead path {
  --count: calc((var(--digit-1) + var(--digit-2)) * 0.06s + .5s);
  -webkit-transform: translate(0, -40px);
          transform: translate(0, -40px);
  opacity: 0;
  transition: 0.6s linear var(--count);
}
.--ready .sp_lead path {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

/* Footer
======================================== */
.sp_content .copy {
  position: relative;
  display: block;
  font-size: clamp(12px, 1.4vw, 14px);
  color: #96865c;
  font-weight: 300;
  font-style: normal;
  padding: 1em;
  background: rgba(18, 12, 7, 0.9);
  z-index: 1;
}
.sp_content .copy small {
  display: block;
  text-align: left;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 720px) {
  .sp_content .over--md {
    display: none;
  }
}
@media screen and (min-width: 480px) {
  .sp_content .under--sm {
    display: none;
  }
}
@media screen and (max-width: 479px) {
  .sp_content .over--sm {
    display: none;
  }
}
@media screen and (min-width: 721px) {
  .sp_content .under--md {
    display: none;
  }
}
.sp_content .hint {
  display: none;
}
.sp_content .mg--m {
  margin: clamp(30px, 6vw, 60px);
}
.sp_content .mt--s {
  margin-top: clamp(30px, 4vw, 40px);
}
.sp_content .mb--s {
  margin-bottom: clamp(30px, 4vw, 40px);
}
.sp_content .mt--m {
  margin-top: clamp(30px, 6vw, 60px);
}
.sp_content .mb--m {
  margin-bottom: clamp(30px, 6vw, 60px);
}
.sp_content .mt--l {
  margin-top: clamp(60px, 10vw, 100px);
}
.sp_content .mb--l {
  margin-bottom: clamp(60px, 10vw, 100px);
}
.sp_content .fs-m {
  font-size: 1.175em;
}
.sp_content .fs-d {
  font-size: 1em;
}
.sp_content .align-center {
  text-align: center;
}
.sp_content .align-left {
  text-align: left;
}
.sp_content .align-right {
  text-align: right;
}
.sp_content .align-middle {
  vertical-align: middle;
}
.sp_content .block-center {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 720px) {
  .sp_content .fs-m--sm {
    font-size: 0.875em;
  }
  .sp_content .fs-d--sm {
    font-size: 1em;
  }
  .sp_content .align-center--sm {
    text-align: center;
  }
  .sp_content .align-left--sm {
    text-align: left;
  }
  .sp_content .align-right--sm {
    text-align: right;
  }
  .sp_content .align-middle--sm {
    vertical-align: middle;
  }
}
@media screen and (max-width: 479px) {
  .sp_content .fs-m--xs {
    font-size: 0.875em;
  }
  .sp_content .fs-d--xs {
    font-size: 1em;
  }
  .sp_content .align-center--xs {
    text-align: center;
  }
  .sp_content .align-left--xs {
    text-align: left;
  }
  .sp_content .align-right--xs {
    text-align: right;
  }
  .sp_content .align-middle--xs {
    vertical-align: middle;
  }
}