@charset "UTF-8";
body {
  margin: 0;
  font-family: "Helvetica", Arial, sans-serif;
  background: #173462;
  color: #e2decd;
  transition: filter 0.5s ease;
}
body.inverted {
  background-color: #e8335e;
}
body.page--home {
  overflow: hidden;
}
body.page--home .drawer__btn span {
  background: #e2decd;
}
body a {
  color: #e2decd;
}

.page--home .logo img {
  animation: fuwafuwa 3s ease-in-out infinite;
  display: inline-block;
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
body, footer, .bg::before, body:not(.page--home) .wrap {
  background: #173462;
}

/* ===== メインエリア ===== */
.drawer__btn {
  width: 100px;
  height: 100px;
  position: fixed;
  right: 2%;
  top: 0vw;
  z-index: 999;
  transition: 0.3s;
  mix-blend-mode: initial;
}
.drawer__btn span {
  display: block;
  width: 60%;
  height: 10px;
  background: #e2decd;
  position: absolute;
  left: 42%;
  transition: 0.2s;
}
.drawer__btn span:first-child {
  top: 30%;
}
.drawer__btn span:nth-child(2) {
  top: 50% !important;
}
.drawer__btn span:last-child {
  top: 70%;
}

.drawer-visible .drawer__btn span:nth-child(2) {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.drawer-visible .drawer__btn span:last-child {
  rotate: -45deg;
  top: 50% !important;
  background-color: #e2decd;
}
.drawer-visible .drawer__btn span:first-child {
  rotate: -180deg;
  top: 50% !important;
  background-color: #e2decd;
}

.view__area {
  height: 100dvh;
  width: 100dvw;
}
.view__area .photo-nav {
  height: 100dvh;
  width: 100dvw;
  position: relative;
}
.view__area .photo-nav .photo-nav__item {
  position: absolute;
  transition: transform 0.2s ease;
}
.view__area .photo-nav .photo-nav__item img {
  display: block;
  width: 100%;
  height: auto;
  animation: none;
}
.view__area .photo-nav .photo-nav__item img:hover {
  animation: shake 0.6s ease-in-out;
}
.view__area .photo-nav .photo-nav__item--photo15 img:hover {
  animation: rotate-left 4s linear infinite;
}
.view__area .photo-nav .menu-nav__block {
  display: grid;
  position: absolute;
  width: 100%;
  transition: transform 0.2s ease;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(150px, 0.3fr));
  -moz-column-gap: 1%;
  column-gap: 1%; /* アイテム間の余白 */
}
.view__area .photo-nav .menu-nav__block .menu-nav__item {
  text-align: center;
  margin: 5% 0;
}
.view__area .photo-nav .menu-nav__block .menu-nav__item .menu-nav__title {
  font-size: 2.1em;
  font-weight: 700;
  color: #e2decd;
  transition: transform 0.3s ease;
}
.view__area .photo-nav .menu-nav__block .menu-nav__item:hover {
  transform: scale(1.1);
}
.view__area .photo-nav .menu-nav--under {
  bottom: 1.5%;
}
.view__area .photo-nav .menu-nav--above {
  top: 1.5%;
}
.view__area .fade-out {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    transform: translate(-3px, -3px) rotate(-1deg);
  }
  30% {
    transform: translate(3px, 3px) rotate(1deg);
  }
  45% {
    transform: translate(-3px, 2px) rotate(0deg);
  }
  60% {
    transform: translate(3px, -2px) rotate(1deg);
  }
  75% {
    transform: translate(-2px, 2px) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes rotate-left {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ===== 不規則配置（PC） ===== */
.photo-nav__item--photo1 {
  width: 15%;
  top: 19%;
  left: 11%;
}

.photo-nav__item--photo2 {
  width: 14%;
  top: 15%;
  left: 45%;
}

.photo-nav__item--photo3 {
  width: 20%;
  top: 15%;
  right: 6%;
}

.photo-nav__item--photo4 {
  width: 6%;
  bottom: 19%;
  left: 19%;
  transform: rotate(15deg);
}

.photo-nav__item--photo5 {
  width: 11%;
  bottom: 12%;
  right: 49%;
  transform: rotate(30deg);
}

.photo-nav__item--photo6 {
  width: 18%;
  bottom: 20%;
  right: 7%;
}

.photo-nav__item--photo7 {
  width: 3%;
  bottom: 17%;
  left: 52%;
}

.photo-nav__item--photo8 {
  width:7%;
  top: 33%;
  right: 27%;
}

.photo-nav__item--photo9 {
  width: 3%;
  bottom: 11%;
  left: 49%;
}

.photo-nav__item--photo10 {
  width: 3%;
  bottom: 25%;
  left: 51%;
}

.photo-nav__item--photo11 {
  width: 7%;
  bottom: 18%;
  left: 11%;
  transform: rotate(350deg);
}

.photo-nav__item--photo12 {
  width: 6%;
  bottom: 32%;
  left: 16%;
  transform: rotate(15deg);
}

.photo-nav__item--photo13 {
  width: 10%;
  top: 40%;
  left: 3%;
}

.photo-nav__item--photo14 {
  width: 5%;
  top: 27%;
  left: 3%;
}

.photo-nav__item--photo15 {
  width: 6%;
  bottom: 20%;
  left: 31%;
}

.teardrop {
  margin-top: 15px;
}

.pagehome a {
  text-decoration: none;
}

/* ===== ドロワー ===== */
.nav--official {
  background-color: #e2decd !important;
  color: #173462;
}
.nav--official a {
  color: #173462 !important;
}

.nav--member {
  background-color: #173462 !important;
  color: #e2decd;
}
.nav--member a {
  color: #e2decd !important;
}
.nav--member .nav__list--login li a {
  background: #e2decd !important;
  color: #173462 !important;
}

input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], .block--category li a::after, .btn .btn--main, .block__answer, .limited .section-tit::after, .tit .limited::after, .list--schedule .block--date > [class^=block--date] .block--date__month::after, .block--pager li::before {
  background: #e2decd;
}

.header .g-nav .g-nav--item.limited a::before, .header .g-nav .nav li a::after, .detail__btn a::after, .list__more a::after {
  background: #e2decd;
}

.lineIco a svg {
  fill: #e2decd;
}

/* ===== 会員登録 ===== */
.page--feature .page--introduction .block--service .block--service__contents li .inner span {
  background: #e2decd;
}
.page--feature .page--introduction .block--service .block--service__contents li .inner p {
  color: #e2decd;
}
.page--feature .page--introduction .block--service .block--service__contents li .inner svg {
  fill: #173462;
}

.page--feature .btn--main {
  color: #173462 !important;
}
.page--feature .txt--sub a {
  color: #e2decd;
}

.page--schedule .section--list .block--refine input[type=checkbox]:checked + p, .tit .limited::after, .btn .btn--main, .block--login .nav__list--login li a, .limited .section-tit::after, .page--faq .block--faq-detail span.icon--a, .page--blog .wrap--action .reply-form .btn .btn--main, .page--movie .wrap--action .reply-form .btn .btn--main {
  background: #e2decd;
}

/* ===== schedule ===== */
.page--schedule .section--list .block--refine input[type=checkbox]:checked + p {
  color: #173462;
}
.page--schedule .block--month ul li a {
  color: #e2decd !important;
}
.page--schedule .section--list .block--month ul li a::after {
  background: #e2decd;
}

/* ===== discography ===== */
.page--discography .block--category a {
  color: #e2decd !important;
}
.page--discography .block--category li a::after {
  background: #e2decd;
}
.page--discography .category--digital,
.page--discography .category--bluray{
  display: none;
}

/* ===== Q&A ===== */
.slick-prev::after, .slick-next::after, .form--confirm, .btn .btn--sub, .block--pager .pager__item--newer a::after, .block--pager .pager__item--newer span::after, .block--pager .pager__item--older a::after, .block--pager .pager__item--older span::after, .page--faq .block--faq-detail, .page--faq .block--faq-detail span.icon--q, .header .drawer .nav__list--login, .page--movie .area--more-info .block--tab [class^=tab__], .page--movie .btn .arrow-bottom::after {
  border-color: #e2decd;
}

.list--faq li {
  border-color: #e2decd;
}

body, a, footer a, .page--home .block--content-wrap, .page--home .block--contents a, .copyright, .page--movie .section--detail .btn .btn--sub, .page--faq .section--detail .block--contact a, .page--home .section--hero-img .block--login nav a, .page--home footer .list-tit, .btn .btn--sub, .page--faq .block--faq-detail span.icon--q, .limited .section-tit::after, .btn-delete input, #form__search .searchBox input[type=submit] {
  color: #e2decd;
}

.page--faq .block--faq-detail span.icon--a {
  color: #173462;
}

/* ===== footer ===== */
.footer .nav .list-tit {
  color: #e2decd;
}
.footer .nav__list--sns li a {
  color: #e2decd;
}

/* =====section--detail===== */
.section--detail a {
  text-decoration: underline;
}
.section--detail .detail__btn a {
  text-decoration: none;
}
.section--detail .btn a {
  text-decoration: none;
}

/* ===== レスポンシブ（pc） ===== */
@media screen and (min-width: 961px) {
  .page--home .header {
    height: 0 !important;
    position: unset !important;
  }
  .page--home h1.logo {
    display: flex;
    align-items: center;
    width: clamp(140px, 22vw, 320px);
    height: 100%;
    text-align: center;
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  .teardrop {
  margin-top: 40px;
}
}
/* ===== レスポンシブ（sp） ===== */
@media (max-width: 960px) {
  .page--home .wrap h1.logo {
    position: absolute;
    top: 47% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .drawer-visible .drawer__btn span:last-child {
    rotate: -175deg;
  }
  .view__area .menu-area{
    display: none;
  }
  .view__area .rogo__item img {
    margin-top: -10%;
    width: 60%;
  }
  body:not(.page--home) footer .nav__list--sns, body:not(.page--home) footer .nav {
      display: block;
  }
    body:not(.page--home) footer .nav .list-tit{
    display: none;
  }
  footer{
    position: static;
  }
  footer .bg {
  display: none;
  }
  footer .nav__list--sns {
    text-align: center;
  }
  .wrap:not(.page--home) {
  padding-bottom: 0px;
  }
  .nav__list--sns li{
    display: inline-block;
  }
  .list--support li{
    display: block;
  }
  footer .copyright {
  margin-top: 2.5em;
}
.list--support .list__item a, .header .drawer .nav li a {
      color: #e2decd;
}
.pattern--integrated .header .drawer .g-nav .nav--official, .pattern--integrated .header .drawer .g-nav .nav--member {
  min-height: 50vh;
}



  /* ===== 不規則配置===== */
  .photo-nav__item--photo1 {
    width: 23%;
    top: 7%;
    left: 8%;
  }
  .photo-nav__item--photo2 {
    width: 32%;
    top: 10%;
    left: 50%;
  }
  .photo-nav__item--photo3 {
    width: 33%;
    top: 22%;
    left: 2%;
  }
  .photo-nav__item--photo4 {
    width: 12%;
    bottom: 13%;
    left: 23%;
  }
  .photo-nav__item--photo5 {
    width: 20%;
    bottom: 31%;
    right: 35%;
  }
  .photo-nav__item--photo6 {
    width: 26%;
    bottom: 7%;
    right: 10%;
  }
  .photo-nav__item--photo7 {
    width: 6%;
    bottom: 33%;
    left: 67%;
  }
  .photo-nav__item--photo8 {
    width: 12%;
    top: 39%;
    right: 7%;
  }
  .photo-nav__item--photo9 {
    width: 6%;
    bottom: 28%;
    left: 60%;
  }
  .photo-nav__item--photo10 {
    width: 6%;
    bottom: 39%;
    left: 66%;
  }
  .photo-nav__item--photo11 {
    width: 11%;
    bottom: 13%;
    left: 11%;
    transform: rotate(350deg);
  }
  .photo-nav__item--photo12 {
    width: 10%;
    bottom: 22%;
    left: 17%;
    transform: rotate(15deg);
  }
  .photo-nav__item--photo13 {
    width: 15%;
    top: 68%;
    left: 81%;
  }
  .photo-nav__item--photo14 {
    width: 15%;
    top: 68%;
    left: 81%;
  }
  .photo-nav__item--photo15 {
    width: 9%;
    bottom: 38%;
    left: 6%;
  }
  /* ===== ドロワー ===== */
  .drawer-visible .drawer__btn span:last-child {
    background-color: #173462;
  }
  .drawer-visible .drawer__btn span:first-child {
    background-color: #173462;
  }
    .teardrop {
  margin-top: 25px;
}
}
/* ===== レスポンシブ（sp_middle） ===== */
@media (max-width: 600px) {
  .page--home .wrap h1.logo {
    position: absolute;
    top: 47% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* ===== 不規則配置===== */
 .photo-nav__item--photo1 {
    width: 23%;
    top: 7%;
    left: 8%;
  }
  .photo-nav__item--photo2 {
    width: 32%;
    top: 10%;
    left: 50%;
  }
  .photo-nav__item--photo3 {
    width: 33%;
    top: 22%;
    left: 2%;
  }
  .photo-nav__item--photo4 {
    width: 12%;
    bottom: 13%;
    left: 23%;
  }
  .photo-nav__item--photo5 {
    width: 20%;
    bottom: 31%;
    right: 35%;
  }
  .photo-nav__item--photo6 {
    width: 26%;
    bottom: 7%;
    right: 10%;
  }
  .photo-nav__item--photo7 {
    width: 6%;
    bottom: 33%;
    left: 67%;
  }
  .photo-nav__item--photo8 {
    width: 12%;
    top: 39%;
    right: 7%;
  }
  .photo-nav__item--photo9 {
    width: 6%;
    bottom: 28%;
    left: 60%;
  }
  .photo-nav__item--photo10 {
    width: 6%;
    bottom: 39%;
    left: 66%;
  }
  .photo-nav__item--photo11 {
    width: 11%;
    bottom: 13%;
    left: 11%;
    transform: rotate(350deg);
  }
  .photo-nav__item--photo12 {
    width: 10%;
    bottom: 22%;
    left: 17%;
    transform: rotate(15deg);
  }
  .photo-nav__item--photo13 {
    width: 15%;
    top: 68%;
    left: 81%;
  }
  .photo-nav__item--photo14 {
    width: 15%;
    top: 68%;
    left: 81%;
  }
  .photo-nav__item--photo15 {
    width: 9%;
    bottom: 38%;
    left: 6%;
  }
      .teardrop {
  margin-top: 25px;
}
}
/* ===== レスポンシブ（sp_mini） ===== */
@media (max-width: 470px) {
  .page--home .wrap h1.logo {
    position: absolute;
    top: 47% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* ===== 不規則配置===== */
  .photo-nav__item--photo1 {
    width: 25%;
    top: 6%;
    left: 10%;
  }
  .photo-nav__item--photo2 {
    width: 32%;
    top: 15%;
    left: 50%;
  }
  .photo-nav__item--photo3 {
    width: 33%;
    top: 20%;
    left: 3%;
  }
  .photo-nav__item--photo4 {
    width: 12%;
    bottom: 14%;
    left: 23%;
  }
  .photo-nav__item--photo5 {
    width: 20%;
    bottom: 31%;
    right: 35%;
  }
  .photo-nav__item--photo6 {
    width: 30%;
    bottom: 6%;
    right: 10%;
  }
  .photo-nav__item--photo7 {
    width: 6%;
    bottom: 33%;
    left: 67%;
  }
  .photo-nav__item--photo8 {
    width: 12%;
    top: 39%;
    right: 7%;
  }
  .photo-nav__item--photo9 {
    width: 6%;
    bottom: 28%;
    left: 60%;
  }
  .photo-nav__item--photo10 {
    width: 6%;
    bottom: 39%;
    left: 66%;
  }
  .photo-nav__item--photo11 {
    width: 11%;
    bottom: 14%;
    left: 11%;
    transform: rotate(350deg);
  }
  .photo-nav__item--photo12 {
    width: 10%;
    bottom: 24%;
    left: 17%;
    transform: rotate(15deg);
  }
  .photo-nav__item--photo13 {
    width: 15%;
    top: 70%;
    left: 81%;
  }
  .photo-nav__item--photo14 {
    width: 15%;
    top: 77%;
    left: 81%;
  }
  .photo-nav__item--photo15 {
    width: 9%;
    bottom: 38%;
    left: 9%;
  }
}