@charset "UTF-8";
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes filterShadowMove {
  0% {
    filter: drop-shadow(0 0 0.2rem #d18433);
  }
  50% {
    filter: drop-shadow(0 0 3rem #d18433);
  }
  100% {
    filter: drop-shadow(0 0 0.2rem #d18433);
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  html {
    font-size: 0.8333333333vw !important;
  }
}

body {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.6rem;
}

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

.en {
  font-family: "Kaisei Tokumin", serif;
}

.en2 {
  font-family: "Kaisei Tokumin", serif;
}

.ja {
  font-family: "Yuji Syuku", serif;
}

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.bold {
  font-weight: bold;
}

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.inner-min {
  max-width: 900px;
}
.inner-max {
  max-width: 1800px;
}

@media screen and (max-width: 767px) {
  .hide-sp {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .hide-pc {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  header > a h1 {
    line-height: 1;
  }
}

.title {
  margin-bottom: 3rem;
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  .title {
    font-size: 6rem;
  }
}
.title span {
  background-image: linear-gradient(to right, #8983f7 15%, #ffbda5 75%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.icon {
  aspect-ratio: 1;
  display: block;
  width: 3rem;
}
.icon-email {
  background: url(../img/icon-email.svg) center/contain no-repeat;
}
.icon-form {
  background: url(../img/icon-form.svg) center/contain no-repeat;
}
.icon-facebook {
  background: url(../img/icon-facebook.svg) center/contain no-repeat;
}
.icon-instagram {
  background: url(../img/icon-instagram.svg) center/contain no-repeat;
}

.btn {
  display: inline-block;
  background: #532563;
  color: #fff;
  padding: 1rem 3rem;
  font-weight: bold;
  border: 1px solid #532563;
  transition: all 0.3s ease;
}
.btn:hover {
  border: 1px solid #fff;
  background: #461657;
  filter: drop-shadow(0 0 1rem #532563);
}
.btn-linear {
  border: 1px solid #fff;
  background: linear-gradient(126deg, #5f5bcd 24%, #ff5700 100%);
}
.btn-linear:hover {
  background: linear-gradient(126deg, #ff5700 10%, #5f5bcd 75%, #ff5700 100%);
}

.video-text-wrapper {
  display: inline-block;
  position: relative;
}
.video-text-wrapper .video-text,
.video-text-wrapper .clip-text {
  font-weight: bold;
  font-family: "Kaisei Tokumin", serif;
}
.video-text-wrapper .video-text {
  font-size: 6rem;
}
@media screen and (min-width: 768px) {
  .video-text-wrapper .video-text {
    font-size: 10rem;
  }
}
.video-text-wrapper .video-text {
  position: relative;
  z-index: 3;
  color: transparent;
}
.video-text-wrapper .video-text:not(.loaded) {
  background: url(../img/text-bg.png) center/cover no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
}
@media screen and (max-width: 767px) {
  .video-text-wrapper .video-text {
    background: url(../img/text-bg.png) center/cover no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
  }
}
.video-text-wrapper .video-text-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .video-text-wrapper .video-text-svg {
    display: none;
  }
}
.video-text-wrapper .video-text-svg .video-bg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-bg {
  position: absolute;
  width: 100%;
  min-width: 90px;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.video-bg video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

nav ul.language {
  gap: 0;
}

nav ul.language li a {
  display: inline-block;
  position: relative;
  padding: 5px 0;
}

nav ul.language li a:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

nav ul.language li a.active:after,
nav ul.language li a:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}

nav ul.language li:not(:last-child)::after {
  content: "/";
  display: inline-block;
  color: #fff;
  padding: 0 0.8rem;
}

@media screen and (max-width: 767px) {
  header nav > ul {
    width: 100%;
    gap: 0 !important;
  }
  header nav > ul li a {
    text-align: left;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1803921569);
  }
  header nav > ul li .sub-menu {
    padding: 0;
    gap: 0;
  }
  header nav > ul li .sub-menu li a {
    padding-left: 5rem;
    font-size: 0.85em;
  }
  header nav > ul.language {
    justify-content: center;
    padding-bottom: 5rem;
  }
  header nav > ul.language li a {
    border: none;
  }
}
#gototop {
  display: block;
  visibility: hidden;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 4rem;
  height: 4rem;
  opacity: 0;
  overflow: hidden;
  z-index: 99;
  transition: all 0.5s;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3490196078);
}
@media screen and (min-width: 768px) {
  #gototop {
    width: 5rem;
    height: 5rem;
  }
}

#gototop a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f0ea;
  /* border-radius: 25px; */
  width: 100%;
  height: 100%;
  text-indent: -9999em;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: all 0.5s;
}

#gototop a::after {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  top: 35%;
  transform: rotate(45deg);
  border-top: 0.5rem solid #8d8686;
  border-left: 0.5rem solid #8d8686;
  /* background: url(/132a25a…/d30a6/assets/img/gotop.svg) center no-repeat; */
  background-size: 80%;
}
@media screen and (min-width: 768px) {
  #gototop a::after {
    width: 2rem;
    height: 2rem;
  }
}

#gototop a.on {
  background-color: #f1f0ea;
  opacity: 0.8;
}

#fin-mask path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: 4s ease-in-out forwards;
}
#fin-mask path:nth-child(1) {
  animation-delay: 0s;
}
#fin-mask path:nth-child(2) {
  animation-delay: 1.7s;
}
#fin-mask path:nth-child(3) {
  animation-delay: 3s;
}
#fin-mask path:nth-child(4) {
  animation-delay: 3.8s;
}
#fin-mask path:nth-child(5) {
  animation-delay: 5.2s;
}

@keyframes drawHandwriting {
  to {
    stroke-dashoffset: 0;
  }
}
.end-txt {
  padding: 5rem 1.5rem;
  text-align: right;
}
.end-txt svg {
  margin-left: auto;
}
.end-txt.visible #fin-mask path {
  animation-name: drawHandwriting;
}

#hero {
  color: #fff;
  background: #000 url(../img/hero-bg_sp.jpg) bottom center/contain no-repeat;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  #hero {
    background-size: 100% auto;
    background-image: url(../img/hero-bg.jpg);
  }
}
@media screen and (max-width: 767px) {
  #hero::before {
    position: absolute;
    content: "";
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5019607843);
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
  }
}
#hero .hero-content {
  position: relative;
  z-index: 6;
  height: 100dvh;
  padding-top: 6rem;
}
@media screen and (min-width: 768px) {
  #hero .hero-content {
    padding-top: 3rem;
    min-height: 1100px;
  }
}
@media screen and (min-width: 1440px) {
  #hero .hero-content {
    height: 100dvh;
  }
}
#hero .video-text-welcome {
  margin-bottom: -1rem;
  height: 7em;
}
@media screen and (min-width: 768px) {
  #hero .video-text-welcome {
    height: 13rem;
  }
}
#hero .hero-subtitle {
  font-weight: 500;
  font-size: 2.4rem;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #hero .hero-subtitle {
    font-size: 4rem;
    letter-spacing: 0.2em;
  }
}
#hero .hero-subtitle span {
  background-image: linear-gradient(167deg, #8983f7 6%, #ffbda5 45%, #8983f7 60%, #ffbda5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientMove 6s ease-in-out infinite;
}
#hero .hero-desc {
  font-family: "Metal", sans-serif;
  letter-spacing: 0.2em;
  filter: drop-shadow(0 0 0.2rem #000);
}
@media screen and (min-width: 768px) {
  #hero .hero-desc {
    font-size: 2rem;
  }
}
#hero .hero-menu-wrap {
  position: absolute;
  bottom: 3rem;
  width: 100%;
}
#hero .hero-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#hero .hero-menu ul {
  width: 50%;
}
@media screen and (min-width: 768px) {
  #hero .hero-menu ul {
    width: 16rem;
  }
}
#hero .hero-menu ul li a {
  display: block;
  padding: 1rem 1rem;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  #hero .hero-menu ul li a {
    color: #fff;
  }
}
#hero + nav {
  justify-content: center;
  background-color: #532563;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media screen and (max-width: 767px) {
  #hero + nav {
    display: none;
  }
}
#hero + nav ul li a {
  color: #fff;
}
#hero + nav ul li.has-child .sub-menu {
  background-color: #532563;
}

#welcome {
  background-color: #414141;
  color: #fff;
  padding: 7rem 0;
}
@media screen and (min-width: 768px) {
  #welcome {
    padding: 10rem 0;
  }
}
#welcome .welcome-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #welcome .welcome-wrap {
    gap: 4rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #welcome .welcome-wrap {
    padding: 0 5rem;
  }
}
@media screen and (max-width: 767px) {
  #welcome .welcome-heading {
    text-align: center;
    width: 100%;
  }
}
#welcome .welcome-heading .section-title {
  font-weight: 400;
  line-height: 1.2;
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  #welcome .welcome-heading .section-title {
    font-size: 6rem;
    font-size: clamp(2rem, 0.3425414365rem + 4.4198895028vw, 6rem);
  }
}
#welcome .welcome-heading .name-en {
  margin-top: 0.5em;
  font-weight: 300;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  #welcome .welcome-heading .name-en {
    font-size: 2.6rem;
  }
}
#welcome .welcome-heading .name-ja {
  letter-spacing: 0.1em;
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  #welcome .welcome-heading .name-ja {
    font-size: clamp(2rem, 1.5856353591rem + 1.1049723757vw, 3rem);
    margin-bottom: 2rem;
  }
}
#welcome .welcome-heading .txt {
  font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
  #welcome .welcome-heading .txt {
    font-size: clamp(1.8rem, 1.5513812155rem + 0.6629834254vw, 2.4rem);
  }
}
@media screen and (max-width: 767px) {
  #welcome .welcome-content {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #welcome .welcome-content {
    max-width: 45%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #welcome .welcome-content {
    max-width: 50%;
  }
}
#welcome .welcome-content .txt {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #welcome .welcome-content .txt:not(.en2) {
    margin: 0 auto;
    writing-mode: vertical-rl;
    line-height: 2.4;
  }
}
@media screen and (min-width: 768px) {
  #welcome .welcome-content .txt {
    font-size: 2.6rem;
    font-size: clamp(1.8rem, 1.4685082873rem + 0.8839779006vw, 2.6rem);
  }
}
#welcome .welcome-content .txt p:not(:last-child) {
  margin-bottom: 1em;
}
#welcome .welcome-content .signature {
  text-align: right;
  line-height: 1;
  font-size: 6rem;
}
@media screen and (min-width: 768px) {
  #welcome .welcome-content .signature {
    margin-top: 0.5em;
    font-size: 10rem;
    font-size: clamp(6rem, 4.3425414365rem + 4.4198895028vw, 10rem);
  }
}
#welcome .welcome-content .signature::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1px;
  background-color: #fff;
  margin-right: 0.3em;
}
#welcome .welcome-content .signature span {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  display: inline-block;
  background: url(../img/signature-txt-bg.jpg) center/cover no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

#about {
  background: url(../img/about-bg.jpg) top center/cover no-repeat;
  padding: 5rem 0;
}
#about .about-wrap {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  #about .about-wrap::before {
    content: "";
    width: 40%;
    background: url(../img/about-img.jpg) center/cover no-repeat;
  }
}
@media screen and (min-width: 1440px) {
  #about .about-wrap::before {
    width: 25%;
  }
}
#about .about-wrap .about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #about .about-wrap .about-content {
    padding: 3rem 1.5rem;
    gap: 5rem;
  }
}
@media screen and (min-width: 768px) {
  #about .about-wrap .about-content {
    width: 60%;
    padding: 5rem 5rem;
    align-items: flex-end;
    position: relative;
  }
}
@media screen and (min-width: 1440px) {
  #about .about-wrap .about-content {
    width: 75%;
  }
}
@media screen and (min-width: 1400px) {
  #about .about-wrap .about-content {
    flex-direction: row;
    padding: 5rem 2rem;
    justify-content: space-around;
  }
}
#about .about-wrap .about-content .about-detail {
  width: 100%;
}
@media screen and (max-width: 767px) {
  #about .about-wrap .about-content .about-detail {
    text-align: center;
  }
}
@media screen and (min-width: 1400px) {
  #about .about-wrap .about-content .about-detail {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 700px;
  }
}
#about .about-wrap .about-content .about-detail .txt .en {
  font-size: 1.4em;
}
#about .about-wrap .about-content .about-detail .txt p:not(:last-child) {
  margin-bottom: 1.3em;
}
#about .about-wrap .about-content .action {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  #about .about-wrap .about-content .about-video {
    width: 90%;
    padding: 0 5rem;
  }
}
@media screen and (min-width: 768px) {
  #about .about-wrap .about-content .about-video {
    width: 25rem;
    margin-top: -8rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #about .about-wrap .about-content .about-video {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  #about .about-wrap .about-content .about-video {
    margin-top: -30rem;
  }
}
@media screen and (min-width: 1400px) {
  #about .about-wrap .about-content .about-video {
    width: 34rem;
    margin-top: auto;
    margin-bottom: auto;
  }
}
#about .about-wrap .about-content .about-video .about-video-wrap {
  -webkit-mask-image: url(../img/about-video.svg);
          mask-image: url(../img/about-video.svg);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
#about .about-wrap .about-content .about-video .about-video-wrap video {
  background: url(../img/about-mv.png) center/cover no-repeat;
  max-width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

#think {
  background: url(../img/think-bg.jpg) center/cover no-repeat;
  padding: 5rem 0;
}
#think .think-wrap {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
#think .think-wrap .think-img {
  display: block;
  background: url(../img/think-img.jpg) center/cover no-repeat;
}
@media screen and (max-width: 767px) {
  #think .think-wrap .think-img {
    height: 30rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 768px) {
  #think .think-wrap .think-img {
    width: 40%;
  }
}
#think .think-wrap .think-img span {
  font-family: "Yuji Boku", serif;
  display: inline-block;
  background: linear-gradient(167deg, #5e59d0 20%, #cb8971 85%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
  font-size: clamp(20rem, 11.7127071823rem + 22.0994475138vw, 40rem);
  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.2509803922));
}
@media screen and (max-width: 767px) {
  #think .think-wrap .think-img span {
    display: block;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  #think .think-wrap .think-img span {
    transform: translateX(-25%);
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #think .think-wrap .think-img span {
    font-size: 20rem;
  }
}
#think .think-content {
  padding: 5rem 1.5rem;
}
@media screen and (max-width: 767px) {
  #think .think-content {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 768px) {
  #think .think-content {
    width: 60%;
    padding: 10rem 2rem;
  }
}
@media screen and (min-width: 1200px) {
  #think .think-content {
    padding: 10rem;
  }
}
#think .think-content .title {
  line-height: 1;
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  #think .think-content .title {
    font-size: 6rem;
  }
}
#think .think-content .sub-title {
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 3rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #think .think-content .sub-title {
    font-size: 2.6rem;
  }
}
#think .think-content p:not(:last-child) {
  margin-bottom: 1.3em;
}
#think .think-content .action {
  margin-top: 5rem;
}

#story {
  background: #fff;
}
#story .story-wrap {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
#story .story-wrap .story-img {
  background: url(../img/story-img.jpg) center/cover no-repeat;
  display: flex;
}
@media screen and (max-width: 767px) {
  #story .story-wrap .story-img {
    height: 25rem;
    width: 100%;
    justify-content: center;
    align-items: end;
    order: 1;
    padding: 1rem 0;
  }
}
@media screen and (min-width: 768px) {
  #story .story-wrap .story-img {
    justify-content: end;
    width: 50%;
    padding: 7.5rem 2rem;
  }
}
#story .story-wrap .story-img span {
  display: block;
  background: linear-gradient(180deg, #de6848 0%, #8e260a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
  font-size: clamp(4rem, 1.5138121547rem + 6.6298342541vw, 10rem);
  text-align: center;
  filter: drop-shadow(0 0 0.5rem #fff);
}
@media screen and (min-width: 768px) {
  #story .story-wrap .story-img span {
    filter: drop-shadow(0 0 0.5rem #000);
  }
}
#story .story-wrap .story-img span.en {
  line-height: 2;
}
#story .story-content {
  padding: 5rem 1.5rem;
}
@media screen and (max-width: 767px) {
  #story .story-content {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    order: 2;
  }
}
@media screen and (min-width: 768px) {
  #story .story-content {
    width: 50%;
    padding: 10rem 2rem;
    order: 2;
  }
}
@media screen and (min-width: 1200px) {
  #story .story-content {
    padding: 10rem;
  }
}
#story .story-content .title {
  line-height: 1;
  font-size: clamp(4rem, 3.1712707182rem + 2.2099447514vw, 6rem);
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  #story .story-content .title {
    margin-bottom: 5rem;
  }
}
#story .story-content .sub-title {
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 3rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #story .story-content .sub-title {
    font-size: 2.6rem;
  }
}
#story .story-content p:not(:last-child) {
  margin-bottom: 1.3em;
}
#story .story-content .action {
  margin-top: 5rem;
}

#art-series {
  position: relative;
  background: url(../img/art-bg.jpg) center/cover no-repeat;
  padding: 5rem 0;
}
@media screen and (min-width: 768px) {
  #art-series {
    padding: 10rem 0;
  }
}
#art-series .series-wrap {
  position: relative;
  z-index: 4;
}
#art-series .series-wrap .title {
  text-align: center;
  margin-bottom: 10rem;
  filter: drop-shadow(0 0 0.4rem black);
}
#art-series .series {
  display: flex;
  gap: 3rem;
  row-gap: 7rem;
  flex-wrap: wrap;
  justify-content: center;
}
#art-series .series .item {
  width: 37rem;
  background-color: #fff;
  padding: 0 1rem 3rem 1rem;
  text-align: center;
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5019607843));
}
#art-series .series .item .detail {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
#art-series .series .item .detail .num {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 2rem;
  margin-top: -3.5rem;
}
#art-series .series .item .detail .num span {
  background-image: linear-gradient(to right, #8983f7 15%, #ffbda5 75%);
  color: #fff;
  display: block;
  aspect-ratio: 1;
  margin: 0 auto;
  width: 7rem;
  border-radius: 7rem;
  background-color: #ccc;
}
#art-series .series .item .detail .name {
  min-height: 3em;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#art-series .series .item .detail .txt {
  margin-bottom: 2rem;
}
#art-series .series .item .detail .txt p:not(:last-child) {
  margin-bottom: 1em;
}
#art-series .series .item .detail .action {
  margin-bottom: 0;
  margin-top: auto;
}
#art-series .series .item .action {
  margin-top: 3rem;
}

#dragon .dragon-heading {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading {
    display: flex;
  }
}
#dragon .dragon-heading .dleft {
  position: relative;
  padding: 5rem 0;
  background-image: linear-gradient(214deg, #915c46, #eed0b7 40%, #f0e9e4 70%);
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading .dleft {
    width: 50%;
    padding: 10rem 0;
  }
}
#dragon .dragon-heading .dleft .dleft-content {
  position: relative;
  z-index: 2;
}
#dragon .dragon-heading .dleft .dleft-content .dttl-img img {
  display: block;
  width: 20rem;
  max-width: 60%;
  margin: 0 auto;
}
#dragon .dragon-heading .dleft .dleft-content .dttl-en {
  font-weight: 900;
  font-size: 5rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading .dleft .dleft-content .dttl-en {
    font-size: 8rem;
  }
}
#dragon .dragon-heading .dleft .dleft-content .dttl-en span {
  display: inline-block;
  background: url(../img/dttl-en-bg.jpg) center/cover no-repeat;
  font-size: 2em;
  line-height: 1;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
#dragon .dragon-heading .dleft .dleft-content .dttl-ja {
  font-weight: 500;
  font-size: 3.6rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading .dleft .dleft-content .dttl-ja {
    font-size: 4rem;
  }
}
#dragon .dragon-heading .dleft .dleft-content .dstt {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading .dleft .dleft-content .dstt {
    font-size: 2.4rem;
  }
}
#dragon .dragon-heading .dleft .dleft-content .dimg {
  aspect-ratio: 45/30;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 4rem;
  border-radius: 100%;
  border: 1px solid #fff;
  animation: filterShadowMove 3s ease-in-out infinite;
  width: 26rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading .dleft .dleft-content .dimg {
    width: 30rem;
  }
}
#dragon .dragon-heading .dleft .dleft-content .dimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
#dragon .dragon-heading .dright {
  background: url(../img/dragon-right-img.jpg) center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  #dragon .dragon-heading .dright {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading .dright {
    width: 50%;
  }
}
#dragon .dragon-heading .dright .txt {
  text-align: center;
  background-image: linear-gradient(167deg, #8983f7 6%, #ffbda5 45%, #8983f7 60%, #ffbda5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  font-weight: 900;
  line-height: 1;
  filter: drop-shadow(1px 1px 0 #000);
  font-size: 3rem;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-heading .dright .txt {
    font-size: 4rem;
    padding-bottom: 2rem;
  }
}
#dragon .dragon-detail {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 5rem 1.5rem 0px;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-detail {
    padding: 10rem 1.5rem 0px;
  }
}
#dragon .dragon-detail .detail-title {
  text-align: center;
  margin-bottom: 5rem;
}
#dragon .dragon-detail .detail-title .dttl-ja {
  font-weight: 500;
  font-size: 3.4rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-detail .detail-title .dttl-ja {
    font-size: 5rem;
  }
}
#dragon .dragon-detail .detail-title .dstt {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-detail .detail-title .dstt {
    font-size: 2.6rem;
  }
}
#dragon .dragon-detail .detail-title .dttl-img img {
  display: block;
  width: 24rem;
  max-width: 60%;
  margin: 0 auto;
}
#dragon .dragon-detail .detail-title .dttl {
  font-weight: 700;
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-detail .detail-title .dttl {
    font-size: 6rem;
    margin-bottom: 2rem;
  }
}
#dragon .dragon-detail .detail-title .dttl.en {
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-detail .detail-title .dttl.en {
    font-size: 5rem;
  }
}
#dragon .dragon-detail .detail-title .dett {
  font-size: 5rem;
}
#dragon .dragon-detail .dragon-detail-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
#dragon .dragon-detail .dragon-detail-content .txt {
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  #dragon .dragon-detail .dragon-detail-content .txt {
    font-size: 1.4rem;
  }
}
#dragon .dragon-detail .dragon-detail-content .txt p:not(:last-child) {
  margin-bottom: 1.5em;
}
#dragon .dragon-detail .dragon-detail-content .vttl {
  background-image: linear-gradient(45deg, #8983f7 6%, #ffbda5 45%, #8983f7 60%, #ffbda5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  writing-mode: vertical-lr;
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: 0.2em;
  position: sticky;
  top: 8rem;
  font-size: 8vw;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-detail .dragon-detail-content .vttl {
    font-size: 5.2vw;
  }
}
#dragon .dragon-story-ttl {
  padding-top: 50px;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 1.5em;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-story-ttl {
    padding-top: 100px;
    font-size: 4rem;
  }
}
#dragon .dragon-story {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 5rem;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-story {
    gap: 4rem;
    padding-bottom: 10rem;
  }
}
#dragon .dragon-story .chap {
  background-color: #ffedc4;
  width: 65rem;
  max-width: 100%;
  display: flex;
}
@media screen and (max-width: 767px) {
  #dragon .dragon-story .chap {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  #dragon .dragon-story .chap {
    max-width: calc(50% - 2rem);
  }
}
#dragon .dragon-story .chap .img {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-story .chap .img {
    width: 53%;
  }
}
#dragon .dragon-story .chap .img figure {
  width: 100%;
  height: 100%;
}
#dragon .dragon-story .chap .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#dragon .dragon-story .chap .txt {
  padding: 2rem;
  font-size: 1.4rem;
  word-break: normal;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-story .chap .txt {
    width: 47%;
  }
}
#dragon .dragon-story .chap .txt .chap-ttl {
  margin-bottom: 1em;
  font-weight: bold;
  font-size: 1.2em;
  font-family: "Kaisei Tokumin", serif;
}
#dragon .dragon-full-story {
  background-color: #dededd;
  padding: 8rem 0;
}
#dragon .dragon-full-story .full-story-wrap {
  background-color: #fff;
  display: flex;
}
@media screen and (max-width: 1000px) {
  #dragon .dragon-full-story .full-story-wrap {
    flex-direction: column;
    width: calc(80% + 3rem);
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  #dragon .dragon-full-story .full-story-wrap {
    width: 100%;
  }
}
#dragon .dragon-full-story .full-story-wrap::after {
  content: "";
  display: block;
  width: 55%;
  background: url(../img/dragon-story.jpg) center right 25%/cover no-repeat;
}
@media screen and (max-width: 1000px) {
  #dragon .dragon-full-story .full-story-wrap::after {
    width: 100%;
    height: 40rem;
  }
}
@media screen and (max-width: 767px) {
  #dragon .dragon-full-story .full-story-wrap::after {
    height: 30rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #dragon .dragon-full-story .full-story-wrap::after {
    width: 40%;
  }
}
#dragon .dragon-full-story .full-story-wrap .detail {
  flex: 1;
  padding: 5rem 2rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-full-story .full-story-wrap .detail {
    padding: 10rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #dragon .dragon-full-story .full-story-wrap .detail {
    padding: 10rem 5rem;
  }
}
#dragon .dragon-full-story .full-story-wrap .detail p:not(:last-child) {
  margin-bottom: 1em;
}
#dragon .dragon-full-story .full-story-wrap .detail .str-ttl {
  font-weight: bold;
  text-align: center;
  line-height: 1.37;
  margin-bottom: 5rem;
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-full-story .full-story-wrap .detail .str-ttl {
    font-size: 4rem;
  }
}
#dragon .dragon-min-story {
  display: flex;
}
@media screen and (max-width: 767px) {
  #dragon .dragon-min-story {
    flex-direction: column;
  }
}
#dragon .dragon-min-story::before, #dragon .dragon-min-story:after {
  content: "";
  display: block;
}
@media screen and (max-width: 767px) {
  #dragon .dragon-min-story::before, #dragon .dragon-min-story:after {
    height: 10rem;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #dragon .dragon-min-story::before, #dragon .dragon-min-story:after {
    flex: 1;
  }
}
#dragon .dragon-min-story::before {
  background: url(../img/dragon-min-story-bf.jpg) center right/cover no-repeat;
}
#dragon .dragon-min-story::after {
  background: url(../img/dragon-min-story-af.jpg) center left/cover no-repeat;
}
#dragon .dragon-min-story .story-content {
  padding: 5rem 2rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-min-story .story-content {
    width: 80%;
    max-width: 90rem;
    padding: 10rem 5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #dragon .dragon-min-story .story-content {
    width: 60%;
  }
}
#dragon .dragon-min-story .story-content .heading {
  text-align: center;
  margin-bottom: 4rem;
}
#dragon .dragon-min-story .story-content .heading .dttl-img img {
  display: block;
  width: 24rem;
  max-width: 60%;
  margin: 0 auto;
}
#dragon .dragon-min-story .story-content .heading .dttl-ja {
  font-weight: 500;
  font-size: 3.4rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-min-story .story-content .heading .dttl-ja {
    font-size: 5rem;
  }
}
#dragon .dragon-min-story .story-content .heading .dstt {
  font-size: 1.9rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-min-story .story-content .heading .dstt {
    font-size: 2.6rem;
  }
}
#dragon .dragon-min-story .story-content .heading .ttl-img img {
  display: block;
  width: 24rem;
  max-width: 60%;
  margin: 0 auto;
}
#dragon .dragon-min-story .story-content .heading .stt,
#dragon .dragon-min-story .story-content .heading .ttl {
  color: #636363;
  font-weight: 500;
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-min-story .story-content .heading .stt,
  #dragon .dragon-min-story .story-content .heading .ttl {
    font-size: 6rem;
    line-height: 1.2;
  }
}
@media screen and (max-width: 767px) {
  #dragon .dragon-min-story .story-content .heading .stt.en,
  #dragon .dragon-min-story .story-content .heading .ttl.en {
    font-size: 3.6rem;
  }
}
@media screen and (max-width: 767px) {
  #dragon .dragon-min-story .story-content .heading .stt.en2,
  #dragon .dragon-min-story .story-content .heading .ttl.en2 {
    font-size: 3rem;
  }
}
@media screen and (min-width: 768px) {
  #dragon .dragon-min-story .story-content .heading .stt.en2,
  #dragon .dragon-min-story .story-content .heading .ttl.en2 {
    font-size: 4rem;
  }
}
#dragon .dragon-min-story .story-content .heading .enttl {
  color: #636363;
  font-weight: 500;
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  #dragon .dragon-min-story .story-content .heading .enttl {
    font-size: 5rem;
  }
}
#dragon .dragon-min-story .story-content .txt {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
#dragon .dragon-min-story .story-content .txt p:not(:last-child) {
  margin-bottom: 1.5em;
}
#dragon .fly-up {
  display: flex;
}
@media screen and (max-width: 767px) {
  #dragon .fly-up {
    flex-direction: column;
  }
}
#dragon .fly-up .bg {
  background: url(../img/dragon-fly-up-bg.jpg) center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #dragon .fly-up .bg {
    gap: 2rem;
    padding: 5rem 2rem;
  }
}
@media screen and (min-width: 768px) {
  #dragon .fly-up .bg {
    flex: 1;
    gap: 4rem;
  }
}
#dragon .fly-up .bg .video-text {
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  #dragon .fly-up .bg .video-text {
    font-size: 4rem;
  }
}
#dragon .fly-up .video-wrap {
  -webkit-mask-image: url(../img/dragon-fly-up-mv-mask.svg);
          mask-image: url(../img/dragon-fly-up-mv-mask.svg);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  position: relative;
  width: 20rem;
  height: 20rem;
}
@media screen and (max-width: 767px) {
  #dragon .fly-up .video-wrap {
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  #dragon .fly-up .video-wrap {
    width: 28rem;
    height: 24rem;
  }
}
#dragon .fly-up .video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
#dragon .fly-up .detail {
  padding: 7rem 1.5rem;
}
@media screen and (max-width: 767px) {
  #dragon .fly-up .detail {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  #dragon .fly-up .detail {
    flex: 1;
    padding: 10rem 5rem;
  }
}
#dragon .fly-up .detail .ttl {
  font-weight: bold;
  font-size: 2.4rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  #dragon .fly-up .detail .ttl {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  #dragon .fly-up .detail .txt {
    font-size: 1.4rem;
  }
}

.tiara-heading {
  position: relative;
  overflow: hidden;
}
.tiara-heading .heading-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 5rem 2rem;
}
@media screen and (min-width: 768px) {
  .tiara-heading .heading-content {
    padding: 15rem 2rem;
  }
}
.tiara-heading .heading-content h2 .en {
  line-height: 1;
  font-weight: bold;
  display: block;
  background-image: linear-gradient(to bottom, #8983f7 15%, #ffbda5 75%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1rem #000000);
  font-size: 4.2rem;
}
@media screen and (min-width: 768px) {
  .tiara-heading .heading-content h2 .en {
    font-size: 15rem;
  }
}
.tiara-heading .heading-content h2 .txt-ja,
.tiara-heading .heading-content h2 .ja {
  font-weight: 500;
  filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  .tiara-heading .heading-content h2 .txt-ja,
  .tiara-heading .heading-content h2 .ja {
    font-size: 8rem;
  }
}
.tiara-heading .heading-content .slogan {
  background-image: linear-gradient(to bottom, #de6848 20%, #8e260a 80%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: bold;
  filter: drop-shadow(0 0 0.1rem rgb(255, 255, 255));
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  .tiara-heading .heading-content .slogan {
    font-size: 4rem;
  }
}

.product {
  background-color: #282626;
  display: flex;
}
@media screen and (max-width: 767px) {
  .product {
    flex-direction: column;
  }
}
@media screen and (min-width: 1440px) {
  .product {
    min-height: 100dvh;
  }
}
.product .detail {
  color: #fff;
  padding: 5rem 2rem;
}
@media screen and (min-width: 768px) {
  .product .detail {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.product .detail .detail-content {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.product .detail .product-heading {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .product .detail .product-heading {
    text-align: center;
  }
}
.product .detail .product-title {
  font-weight: 400;
  margin-bottom: 4rem;
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  .product .detail .product-title {
    font-size: 6rem;
  }
}
.product .detail .product-title img {
  width: 26rem;
  max-width: 60%;
  display: block;
  filter: invert(100%);
}
.product .detail .product-title.en2 {
  line-height: 1.4;
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  .product .detail .product-title.en2 {
    font-size: 4rem;
  }
}
.product .detail .circle {
  position: relative;
  display: inline-block;
}
.product .detail .circle::before {
  content: "";
  position: absolute;
  width: 85%;
  top: 0;
  left: 0;
  border-radius: 100%;
  display: block;
  aspect-ratio: 5/2;
  border: 2px solid #e4bfad;
  transform: rotate(-10deg);
}
.product .detail .title-cloud {
  position: relative;
}
.product .detail .title-cloud::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  background: url(../img/product-title-cloud.svg) center/contain no-repeat;
  transform: translateY(-40%);
  width: 6rem;
}
@media screen and (min-width: 768px) {
  .product .detail .title-cloud::after {
    width: 12rem;
  }
}
.product .detail .product-title-en {
  font-family: "Kaisei Tokumin", serif;
  color: #e4bfad;
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  .product .detail .product-title-en {
    font-size: 6rem;
  }
}
.product .detail .info {
  display: flex;
  margin-bottom: 5rem;
  max-width: 50rem;
}
@media screen and (max-width: 767px) {
  .product .detail .info {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}
.product .detail .info .img {
  width: 21rem;
}
.product .detail .info .img figure {
  width: 100%;
  display: block;
}
.product .detail .info .img figure img {
  width: 100%;
}
.product .detail .info .txt {
  flex: 1;
  padding-left: 2rem;
  color: #e4bfad;
}
@media screen and (max-width: 767px) {
  .product .detail .info .txt {
    text-align: center;
  }
}
.product .detail .info .txt audio {
  display: block;
  margin-top: 2rem;
}
.product .detail .info .txt p:not(:last-child) {
  margin-bottom: 1.5em;
}
.product .detail .audio {
  --width-thumb: 7rem;
}
.product .image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rem 2rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .product .image {
    min-height: 70dvh;
  }
}
@media screen and (min-width: 768px) {
  .product .image {
    width: 50%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .product .image img {
    width: 30rem;
  }
}
.product .image > * {
  z-index: 2;
}
.product .image .video-bg {
  z-index: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.product .image .rotate-on-scroll {
  transform: rotate(-30deg);
  transition: 0.05s;
}
@media screen and (max-width: 767px) {
  .product .image .rotate-on-scroll {
    width: 70%;
  }
}
@media screen and (min-width: 768px) {
  .product .image .rotate-on-scroll {
    width: 50%;
  }
}
.product .image .txt {
  background-image: linear-gradient(to bottom, #8983f7 15%, #ffbda5 75%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: bold;
  font-size: 5rem;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .product .image .txt {
    margin-top: 8rem;
    font-size: 10rem;
  }
}
@media screen and (min-width: 768px) {
  .product-right .detail {
    order: 2;
  }
  .product-right .detail .product-heading {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
  }
  .product-right .detail .info .img {
    order: 2;
  }
}

.product-full {
  color: #fff;
  background-color: #000;
  padding: 10rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-full.tiara-dragon-full {
  background: url(../img/tiara-dragon-full-bg.jpg) center/cover no-repeat;
}
.product-full .image {
  flex: 1;
  padding: 0;
  position: relative;
}
.product-full .image .txt {
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .product-full .image .txt {
    font-size: 2rem;
    margin: 0 auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 0.5rem #000);
  }
}
@media screen and (min-width: 768px) {
  .product-full .image .txt {
    position: absolute;
    top: 12rem;
    right: 10rem;
    font-size: 3rem;
  }
}
.product-full .image .txt span {
  font-size: 2em;
}
.product-full .content-center {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  margin-top: 4rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  .product-full .content-center {
    font-size: 2.4rem;
  }
}
.product-full .content-center span {
  font-size: 2em;
}

.celestiara {
  color: #fff;
  background: url(../img/celestiara-heading-bg.jpg) center/cover no-repeat;
}
.celestiara .tiara-heading .heading-content .title-en {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  .celestiara .tiara-heading .heading-content .title-en {
    font-size: 5rem;
  }
}
.celestiara .tiara-heading .heading-content .slogan {
  color: #fff;
  font-weight: 500;
  position: relative;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .celestiara .tiara-heading .heading-content .slogan {
    font-size: 3rem;
  }
  .celestiara .tiara-heading .heading-content .slogan::before, .celestiara .tiara-heading .heading-content .slogan::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    background: url(../img/celestiara-cloud.svg) center/contain no-repeat;
    width: 12rem;
  }
  .celestiara .tiara-heading .heading-content .slogan::before {
    transform: translateY(-30%) translateX(-280%);
  }
  .celestiara .tiara-heading .heading-content .slogan::after {
    transform: translateY(-30%) translateX(160%) rotateY(180deg);
  }
}
.celestiara-movie .detail {
  background: url(../img/celestiara.avif) center/cover no-repeat;
  padding: 0;
  width: 100%;
  height: 45dvh;
  text-align: center;
}
.celestiara-movie .detail video {
  height: 100%;
  aspect-ratio: 16 / 27;
}
.jupiter-tiara .tiara-heading {
  background: url(../img/jupiter-tiara-heading.png) center/cover no-repeat;
  color: #fff;
  position: relative;
}
.jupiter-tiara .tiara-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3764705882);
  z-index: 1;
}
.jupiter-tiara .tiara-heading .heading-content {
  padding: 2rem;
  position: relative;
  z-index: 2;
}
.jupiter-tiara .tiara-heading .video-text-wrapper {
  filter: drop-shadow(0 0 0.5rem #000);
}
.jupiter-tiara .tiara-heading .title-en {
  font-size: 4rem;
  color: #fff;
  filter: drop-shadow(0 0 0.4rem #000);
}

.tiara-dragon .image {
  background: url(../img/tiara-dragon-bg.jpeg);
}

.celestiara-silver .image {
  background: url(../img/celestiara-silver-bg.jpg) center/cover no-repeat;
}

.celestiara-gold .image {
  background: url(../img/celestiara-gold-bg.jpg) center/cover no-repeat;
}

.facetiara-silver .image {
  background: url(../img/facetiara-silver-bg.jpg) center/cover no-repeat;
}

.facetiara-silver2 .image {
  background: url(../img/facetiara-silver2-bg.jpg) center/cover no-repeat;
}

.houou-gold .image {
  background: url(../img/houou-gold-bg.jpg) center/cover no-repeat;
}
@media screen and (min-width: 768px) {
  .houou-gold .detail {
    padding-top: 10rem;
  }
}
.houou-gold .detail .info .txt,
.houou-gold .detail .product-title-en {
  color: #e9891c;
}
.houou-gold .detail .circle::before {
  border-color: #e9891c;
}

.princess-tiara-gold .image {
  background: url(../img/princess-tiara-gold-bg.jpg) center/cover no-repeat;
}
.princess-tiara-gold .detail .info {
  justify-content: center;
}
.princess-tiara-gold .detail .info .txt,
.princess-tiara-gold .detail .product-title-en {
  color: rgba(255, 159, 49, 0.8549019608);
}
.princess-tiara-gold .detail .circle::before {
  border-color: rgba(255, 159, 49, 0.8549019608);
}

.princess-tiara-silver .detail .info {
  justify-content: center;
}
.princess-tiara-silver .detail .info .txt,
.princess-tiara-silver .detail .product-title-en {
  color: #ffffff;
  filter: drop-shadow(0 0 1rem #fff);
}
.princess-tiara-silver .detail .circle::before {
  border-color: #ffffff;
  filter: drop-shadow(0 0 1rem #fff);
}
.princess-tiara-silver .image-silver2 {
  background: url(../img/princess-tiara-silver2-bg.jpg) center/cover no-repeat;
}

@keyframes fire {
  0% {
    background-position: left 0 top 0;
  }
  50% {
    background-position: left 130px top -15px;
  }
  100% {
    background-position: left 250px top 0px;
  }
}
#houou .houou-top {
  background: url(../img/houou-bg.jpg) top center/cover no-repeat;
  padding-top: 10rem;
  padding-bottom: 10rem;
}
#houou .tiara-heading .heading-content {
  padding: 10rem 2rem;
}
#houou .tiara-heading .heading-content h2 .ja,
#houou .tiara-heading .heading-content h2 .en {
  background: url(../img/fire-burn.jpg) repeat;
  background-size: contain;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fire 8s linear infinite;
}
#houou .houou-detail .houou-wrap {
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
}
@media screen and (max-width: 767px) {
  #houou .houou-detail .houou-wrap {
    flex-direction: column;
  }
}
#houou .houou-detail .houou-wrap:after {
  content: "";
  display: block;
  background: url(../img/houou-img.jpg) center/cover no-repeat;
}
@media screen and (max-width: 767px) {
  #houou .houou-detail .houou-wrap:after {
    height: 30rem;
  }
}
@media screen and (min-width: 768px) {
  #houou .houou-detail .houou-wrap:after {
    width: 40%;
  }
}
#houou .houou-detail .houou-wrap .houou-content {
  padding: 5rem 2rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  #houou .houou-detail .houou-wrap .houou-content {
    width: 60%;
    padding: 10rem 2rem;
  }
}
#houou .houou-detail .houou-wrap .houou-content .star-video {
  position: absolute;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #houou .houou-detail .houou-wrap .houou-content .star-video {
    width: 10rem;
    height: 10rem;
    top: 0;
    right: 0;
    transform: translateY(-50%);
  }
}
@media screen and (min-width: 768px) {
  #houou .houou-detail .houou-wrap .houou-content .star-video {
    width: 20rem;
    height: 20rem;
    right: 10rem;
  }
}
#houou .houou-detail .houou-wrap .houou-content .star-video video {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
#houou .houou-detail .houou-wrap .houou-content .star-video canvas {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#houou .houou-detail .houou-wrap .houou-content .txt {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #houou .houou-detail .houou-wrap .houou-content .txt {
    text-align: center;
  }
}
#houou .houou-detail .houou-wrap .houou-content .txt .title {
  margin-bottom: 0;
}
#houou .houou-detail .houou-wrap .houou-content .txt .title span {
  line-height: 1;
  display: block;
}
@media screen and (min-width: 768px) {
  #houou .houou-detail .houou-wrap .houou-content .txt .title .en {
    font-size: 6rem;
  }
}
#houou .houou-detail .houou-wrap .houou-content .txt .stt {
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  #houou .houou-detail .houou-wrap .houou-content .txt .stt {
    margin-bottom: 5rem;
  }
}
#houou .houou-detail .houou-wrap .houou-content .txt .stt .ja {
  font-weight: 500;
  color: #eb3a09;
  font-size: 5rem;
}
@media screen and (min-width: 768px) {
  #houou .houou-detail .houou-wrap .houou-content .txt .stt .ja {
    font-size: 8rem;
  }
}
#houou .houou-detail .houou-wrap .houou-content .txt p:not(:last-child) {
  margin-bottom: 1.5em;
}

.princess-tiara-about {
  padding-bottom: 10rem;
  background: url(../img/princess-tiara-about-bg.jpg) center/cover no-repeat;
}
.princess-tiara-about .tiara-heading .heading-content {
  padding: 10rem 2rem;
}
.princess-tiara-about .tiara-heading .heading-content h2 .txt-ja,
.princess-tiara-about .tiara-heading .heading-content h2 .ja {
  color: #fff;
  filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0));
}
.princess-tiara-about .tiara-heading .heading-content .slogan {
  color: #fff;
  filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0));
}
.princess-tiara-about .content-center {
  width: -moz-fit-content;
  width: fit-content;
  padding: 5rem 5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.431372549);
  margin: 0 auto;
  color: #fff;
  text-align: center;
  max-width: 100rem;
}
.princess-tiara-about .content-center p:not(:last-child) {
  margin-bottom: 1.5em;
}
.princess-tiara-about .content-center.content-en {
  text-align: left;
}

.earth-video {
  display: block;
  margin: 0 auto;
  margin-top: 5rem;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .earth-video {
    width: 10rem;
    height: 10rem;
  }
}
@media screen and (min-width: 768px) {
  .earth-video {
    width: 20rem;
    height: 20rem;
  }
}
.earth-video video {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
.earth-video canvas {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.houou-heading {
  background: url(../img/houou-heading.jpg) center/cover no-repeat;
  text-align: center;
  padding: 5rem 2rem;
}
@media screen and (min-width: 768px) {
  .houou-heading {
    padding: 10rem 2rem;
  }
}
.houou-heading img {
  margin: 0 auto;
  max-width: 80%;
}

#news {
  background: url(../img/news-bg.jpg) center/cover no-repeat;
  color: #fff;
  padding: 5rem 0;
}
@media screen and (min-width: 768px) {
  #news {
    padding: 10rem 0;
  }
}
#news .news-wrap {
  display: flex;
}
@media screen and (max-width: 767px) {
  #news .news-wrap {
    flex-direction: column;
    gap: 3rem;
  }
}
@media screen and (min-width: 768px) {
  #news .news-wrap {
    align-items: center;
    gap: 10rem;
  }
}
#news .news-wrap .title {
  margin: 0;
}
@media screen and (max-width: 767px) {
  #news .news-list {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #news .news-list {
    flex: 1;
  }
}
#news .news-list .news-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid #dddddd;
  transition: 0.3s all;
  padding: 1.5rem 2.4rem;
}
@media screen and (min-width: 768px) {
  #news .news-list .news-item {
    padding: 1.5rem 4.8rem;
  }
}
#news .news-list .news-item .ntt {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#news .news-list:last-child .news-item {
  border-bottom: 1px solid #dddddd;
}

.audio {
  display: flex;
  background-color: #fff;
  --width-thumb: 4rem;
}
.audio .thumb {
  width: var(--width-thumb);
  aspect-ratio: 1;
}
.audio .thumb figure {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.audio .thumb figure img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.audio .media {
  width: calc(100% - var(--width-thumb));
  flex: 1;
  display: flex;
  align-items: center;
}
.audio .media .play-audio {
  aspect-ratio: 1;
  height: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #414141;
}
.audio .media .audio-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 1rem;
  padding-bottom: 0.2em;
  color: var(--text-color-main);
}

#song {
  background: url(../img/song-bg.jpg) center/cover no-repeat;
  padding: 10rem 0;
}
#song .song-heading {
  text-align: center;
  color: #fff;
  margin-bottom: 5rem;
}
#song .song-heading .title {
  margin-bottom: 0;
  line-height: 1;
}
#song .song-heading .subtitle {
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  #song .song-heading .subtitle {
    font-size: 4rem;
  }
}

.song-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  .song-grid {
    gap: 5rem;
  }
}
.song-grid .song {
  width: 24rem;
}
.song-grid .song .song-detail {
  background-color: rgba(255, 255, 255, 0.3);
  margin-bottom: 1rem;
  text-align: center;
  padding: 2rem;
  color: #fff;
  height: 26rem;
}
.song-grid .song .song-detail .num {
  font-weight: 400;
  font-style: italic;
  font-size: 8rem;
}
.song-grid .song .song-info {
  padding-top: 2rem;
  color: #fff;
}

#dragon-ring {
  background: url(../img/dragon-ring-bg.jpg) center/cover no-repeat;
  padding: 5rem 0;
}
@media screen and (min-width: 768px) {
  #dragon-ring {
    padding: 10rem 0;
  }
}
#dragon-ring .title {
  text-align: center;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  #dragon-ring .title {
    margin-bottom: -2rem;
  }
}
#dragon-ring .subtitle {
  text-align: center;
  color: #fff;
  font-weight: bold;
  filter: drop-shadow(0 0 1rem #000);
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  #dragon-ring .subtitle {
    font-size: 6rem;
  }
}
#dragon-ring .grid {
  margin-top: 20rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  #dragon-ring .grid {
    gap: 19rem;
  }
}
#dragon-ring .grid .item {
  width: 40rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #dragon-ring .grid .item {
    width: 36rem;
  }
}
#dragon-ring .grid .item .thumb {
  text-align: center;
  margin-top: -15rem;
}
#dragon-ring .grid .item .thumb figure {
  margin: 0 auto;
  border: 0.5rem solid #000;
  width: 25rem;
}
@media screen and (min-width: 768px) {
  #dragon-ring .grid .item .thumb figure {
    width: 30rem;
  }
}
#dragon-ring .grid .item .detail {
  padding: 2rem;
}
#dragon-ring .grid .item .detail .name {
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 3rem;
  min-height: 6em;
  display: block;
}
#dragon-ring .grid .item .detail .txt p:not(:last-child) {
  margin-bottom: 1.5em;
}

#six-realms {
  background: url(../img/six-realms-bg.jpeg) center/cover no-repeat;
  padding: 10rem 0 5rem;
}
#six-realms .detail {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  filter: drop-shadow(0 0 1rem #000);
  margin-bottom: 5rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #six-realms .detail {
    font-size: 2.4rem;
  }
}
#six-realms .six-realms-grid {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 5rem;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #six-realms .six-realms-grid {
    gap: 4rem;
    padding-bottom: 10rem;
  }
}
#six-realms .six-realms-grid .item {
  background-color: rgba(223, 223, 223, 0.8509803922);
  width: 65rem;
  max-width: 100%;
  display: flex;
}
@media screen and (max-width: 767px) {
  #six-realms .six-realms-grid .item {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  #six-realms .six-realms-grid .item {
    max-width: calc(50% - 2rem);
  }
}
#six-realms .six-realms-grid .item .img {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #six-realms .six-realms-grid .item .img {
    width: 53%;
  }
}
#six-realms .six-realms-grid .item .img figure {
  width: 100%;
  height: 100%;
}
#six-realms .six-realms-grid .item .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#six-realms .six-realms-grid .item .txt {
  padding: 2rem;
  font-size: 1.4rem;
  word-break: normal;
}
@media screen and (min-width: 768px) {
  #six-realms .six-realms-grid .item .txt {
    width: 47%;
  }
}
#six-realms .six-realms-grid .item .txt .chap-ttl {
  margin-bottom: 1em;
  font-weight: bold;
  font-size: 1.2em;
  font-family: "Merienda", cursive;
}

.sns {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.sns a {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  width: 5rem;
  text-indent: -1000vw;
  transition: 0.3s;
}
.sns a:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 0.5rem #000);
}
.sns a .icon {
  width: 5rem;
}

.contact-banner {
  padding: 10rem 0;
  background-image: radial-gradient(circle at 50% 50%, #e4ebfc 0%, #589be3 32.4829101563%, #002f5e 62.7807617188%, #414141 100%);
}
.contact-banner .contact-banner-wrap {
  background-color: #fff;
  filter: drop-shadow(0 0 1rem #000);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .contact-banner .contact-banner-wrap {
    gap: 3rem;
    flex-direction: column;
    padding: 3rem 2rem;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-wrap {
    gap: 7rem;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    padding: 3rem 7rem;
  }
}
.contact-banner .contact-banner-wrap .contact-wrap {
  width: -moz-fit-content;
  width: fit-content;
}
.contact-banner .contact-banner-wrap .sns-wrap {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 5rem;
}
.contact-banner .contact-banner-wrap .ttl {
  font-weight: bold;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  .contact-banner .contact-banner-wrap .ttl {
    font-size: 2rem;
  }
}
.contact-banner .contact-banner-wrap .group-btn-contact {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .contact-banner .contact-banner-wrap .group-btn-contact {
    flex-direction: column;
  }
}
.contact-banner .contact-banner-wrap .group-btn-contact .btn {
  min-width: 30rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

#contact {
  background-color: #fff;
}
#contact .contact-form-wrap {
  width: 100%;
  display: flex;
}
@media screen and (max-width: 767px) {
  #contact .contact-form-wrap {
    flex-direction: column;
  }
}
#contact .contact-form-wrap .contact-info {
  background-color: #414141;
  color: #fff;
  padding: 4rem 2rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  #contact .contact-form-wrap .contact-info {
    width: 35%;
  }
}
#contact .contact-form-wrap .contact-info .butterfly-video {
  position: absolute;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #contact .contact-form-wrap .contact-info .butterfly-video {
    width: 10rem;
    height: 10rem;
    bottom: 0;
    right: 2rem;
    transform: translateY(50%);
  }
}
@media screen and (min-width: 768px) {
  #contact .contact-form-wrap .contact-info .butterfly-video {
    width: 20rem;
    height: 20rem;
    right: 0;
    top: 0;
    transform: translateX(50%) translateY(-50%);
  }
}
#contact .contact-form-wrap .contact-info .butterfly-video video {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
#contact .contact-form-wrap .contact-info .butterfly-video canvas {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#contact .contact-form-wrap .contact-info .contact-info-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  height: 100%;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #contact .contact-form-wrap .contact-info .contact-info-wrap {
    gap: 5rem;
  }
}
#contact .contact-form-wrap .contact-info .mail-wrap .name {
  font-size: 2rem;
}
#contact .contact-form-wrap .contact-info .mail-wrap a {
  display: flex;
  color: #fff;
  gap: 1.5rem;
  position: relative;
  padding: 1rem 0;
}
#contact .contact-form-wrap .contact-info .mail-wrap a:after {
  content: "";
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s;
}
#contact .contact-form-wrap .contact-info .mail-wrap a:hover {
  text-decoration: none;
}
#contact .contact-form-wrap .contact-info .mail-wrap a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
#contact .contact-form-wrap .contact-info .sns-ttl {
  margin-bottom: 2rem;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  #contact .contact-form-wrap .contact-info .sns-ttl {
    font-size: 3rem;
  }
}
#contact .contact-form-wrap .contact-info .sns {
  justify-content: flex-start;
}
#contact .contact-form-wrap .form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 3rem;
}
@media screen and (min-width: 768px) {
  #contact .contact-form-wrap .form-wrap {
    width: 65%;
  }
}
#contact .form {
  max-width: 100%;
  width: 800px;
  margin-right: 0;
}
#contact input,
#contact textarea,
#contact select {
  color: inherit;
  width: 100%;
  background-color: #fff;
  border: 1px solid #414141;
  font: inherit;
  min-height: 5rem;
  padding: 1rem 1.4rem;
}
@media screen and (min-width: 768px) {
  #contact input,
  #contact textarea,
  #contact select {
    padding: 1rem 2rem;
  }
}
#contact textarea {
  resize: vertical;
  height: 15rem;
}
#contact select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 1.6rem 1.5rem;
}
#contact dl {
  margin-bottom: 3rem;
}
#contact dl dt {
  display: block;
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  #contact dl dt {
    margin-bottom: 1rem;
  }
}
#contact .g-recaptcha {
  margin-bottom: 4rem;
}
#contact .g-recaptcha > div {
  margin-left: auto;
  margin-right: auto;
}
#contact .form-action {
  margin-top: 7rem;
  text-align: center;
}
#contact .form-action button {
  font: inherit;
  font-weight: bold;
  padding: 1rem 5rem;
  color: #fff;
  border-radius: 3rem;
}

#jewery-artist {
  background: url(../img/jewery-artist-bg.jpg) center/cover no-repeat;
  padding: 7rem 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #jewery-artist {
    padding: 15rem 0;
  }
}
#jewery-artist .video-text {
  font-size: 8rem;
}
@media screen and (min-width: 768px) {
  #jewery-artist .video-text {
    font-size: 15rem;
  }
}
#jewery-artist .video-text-wrapper {
  margin-bottom: -3rem;
  margin-top: -3rem;
}
@media screen and (min-width: 768px) {
  #jewery-artist .video-text-wrapper {
    margin-bottom: -5rem;
    margin-top: -5rem;
  }
}
#jewery-artist .ttl {
  color: #707070;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  font-size: 5rem;
}
@media screen and (min-width: 768px) {
  #jewery-artist .ttl {
    font-size: 8rem;
  }
}

.show-sawamura-video {
  background: url(../img/show-sawamura-bg.jpg) center/cover no-repeat;
  padding: 10rem 0;
}
.show-sawamura-video .show-sawamura-wrap {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
  border-radius: 5rem;
}
@media screen and (max-width: 767px) {
  .show-sawamura-video .show-sawamura-wrap {
    border-radius: 2rem;
    flex-direction: column;
  }
}
.show-sawamura-video .show-sawamura-wrap .info {
  background-color: rgba(0, 0, 0, 0.6784313725);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  color: #fff;
  padding: 5rem 2rem 3rem;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .show-sawamura-video .show-sawamura-wrap .info {
    width: 45%;
    padding: 10rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.show-sawamura-video .show-sawamura-wrap .info .detail {
  position: relative;
}
.show-sawamura-video .show-sawamura-wrap .info .name {
  font-size: 6rem;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .show-sawamura-video .show-sawamura-wrap .info .name {
    font-size: 4rem;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
}
.show-sawamura-video .show-sawamura-wrap .info .video-text-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-45%, -30%);
}
@media screen and (min-width: 768px) {
  .show-sawamura-video .show-sawamura-wrap .info .video-text-wrapper {
    transform: translateY(-50%);
  }
}
.show-sawamura-video .show-sawamura-wrap .info .video-text {
  font-size: 10rem;
}
@media screen and (min-width: 768px) {
  .show-sawamura-video .show-sawamura-wrap .info .video-text {
    font-size: 16rem;
  }
}
@media screen and (min-width: 768px) {
  .show-sawamura-video .show-sawamura-wrap .video {
    width: 55%;
  }
}
.show-sawamura-video .show-sawamura-wrap .video video {
  width: 100%;
  height: auto;
}