@charset "UTF-8";

/*=============================================================

	Date: 2025-09-18
	CSS Document ： トキキル×フェリシモ 魔法部 コラボアイテム特設サイト

=============================================================*/
#footercontent .fsc_gfooter__breadcrumb {
  display: none;
}
.fsc_gfooter__breadcrumb {
  margin-top: 0;
  position: relative;
}
/*------------------------------------

ベース

------------------------------------*/
.pc {
  display: block;
}
.sp {
  display: none;
}
.bold_ct {
  font-weight: bold;
}
.fsc_gheader-wrap {
  transition: all 0.3s;
}
/* body.fixed-body .fsc_gheader-wrap {
  opacity: 0;
  pointer-events: none;
} */
/*------------------------------------

ローディング

------------------------------------*/
#loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#loading-box picture {
  position: absolute;
  top: 0;
  left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#loading-box picture img {
  height: auto;
  width: 100%;
  animation: fade-simple 1s both 0.0s;
}
@media (max-width: 768px) {
  #loading-screen {}
  #loading-screen.fade-out {}
  #loading-box {}
  #loading-box picture {}
  #loading-box picture img {
    width: 100%;
    height: auto;
  }
  #loading-box .loading-image01 {}
  #loading-box .loading-image02 {}
}
@keyframes fade-simple {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*------------------------------------

wrapper

------------------------------------*/
#wrapper {
  width: 100%;
  font-size: 130%;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.07em;
  text-align: center;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*animation: fadeIn_ct 0.5s 0.8s both;*/
  opacity: 1;
  /* overflow: hidden; */
  background: #e4e1fe;
  font-size: 1.55rem;
}
#wrapper img {
  height: auto;
  max-width: 100%;
  /* width: 100%; */
}
#wrapper ul {
  padding: 0;
  list-style: none;
}
#wrapper-inner {
  width: 100%;
  font-family: "秀英角ゴシック銀 M";
}
/* hover */
#wrapper a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  #wrapper a {
    transition: all 0.3s;
  }
  #wrapper a:hover {
    opacity: 0.7;
  }
}
.flex-wrapper {}
/* == FV == */
#fv-wrap {
  position: relative;
}
#fv-wrap .fv-main {
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url(../images/fv_frame01.svg), url(../images/fv_frame02.svg), url(../images/fv_frame03.svg), url(../images/fv_frame04.svg);
  background-repeat: no-repeat;
  background-position: top 0.5em left 0.5em, top 0.5em right 0.5em, bottom 0.5em left 0.5em, bottom 0.5em right 0.5em;
  background-size: 11%;
  position: absolute;
  top: 0;
  left: 0;
}
/* スライダー */
#fv-wrap .swiper.mainSwiper {}
#fv-wrap .swiper.mainSwiper .swiper-wrapper {}
#fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide {}
#fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide picture {}
#fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide picture source {}
#fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide picture img {}
#fv-wrap .fv-logo {
  position: absolute;
  bottom: 7%;
  left: -1%;
  width: 100%;
  z-index: 1;
  margin: 0;
}
#fv-wrap .fv-logo img {
  width: 51%;
  filter: drop-shadow(0px 0px 0.5em rgba(0, 0, 0, 0.4));
}
#fv-wrap .fv-icon {
  position: absolute;
  top: 7%;
  right: 9%;
  width: 14%;
  z-index: 1;
}
#fv-wrap .fv-icon img {}
/* === #sp-contents スマホコンテンツ === */
#sp-contents {
  background-image: linear-gradient(60deg, #a892fc, #b090d1 37%, #a892fc 69%, #b090d1);
  background-repeat: repeat;
  background-position: top center;
  background-size: contain;
  color: #FFF;
  padding: 3.6em 0 0;
  position: relative;
  overflow: hidden;
}
#sp-contents::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url(../images/bg_paper.webp);
  background-repeat: repeat;
  background-position: top center;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#sp-contents::after {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url(../images/lead_bg.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#sp-contents .contents-inner {
  position: relative;
}
/* == リード == */
#fv-lead {
  position: relative;
  z-index: 1;
}
#fv-lead h2 {
  margin: 0 auto 1.4em;
  font-size: 226%;
  position: relative;
  font-family: "オーブ";
}
#fv-lead h2::after {
  display: block;
  width: 21.5%;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/lead_ashirai.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -14%;
  left: 4.8%;
}
#fv-lead h2 span.split {
  display: block;
  color: #FFF;
  border-bottom: 1px solid #FFF;
  width: max-content;
  margin: 0 auto 0.6em;
  letter-spacing: 0.2em;
  line-height: 0.88;
  overflow: hidden;
  position: relative;
}
#fv-lead h2 span span {
  display: block;
  /* height: 13vw !important; */
  /* width: auto; */
  transform: translateY(110%);
}
#fv-lead.anime-active h2 span span {
  animation: fadeTitle .7s ease 0s forwards;
}
@keyframes fadeTitle {
  0% {
    transform: translateY(110%);
  }
  100% {
    transform: translateY(0);
  }
}
#fv-lead .lead-box {}
#fv-lead .lead-box p {
  line-height: 2.05;
  letter-spacing: 0.18em;
}
/* == HOW TO PLAY == */
#howto {
  margin: 6.5em 0 0;
  position: relative;
}
#howto .howto-bg {
  background: #F2DFEE;
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
#howto .howto-bg::before, #howto .howto-bg::after {
  display: block;
  width: 100%;
  aspect-ratio: 100/12.23;
  content: '';
  background-image: url(../images/howto_head.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 0;
}
#howto .howto-bg::before {
  bottom: calc(100% - 1px);
}
#howto .howto-bg::after {
  transform: rotate(180deg);
  top: calc(100% - 1px);
}
#howto .howto-inner {
  position: relative;
  padding: 1.8em 0 0.05em;
}
/* anime-block */
#howto h3 {
  margin: 0 auto 1.85em;
  width: 52%;
  position: relative;
}
#howto h3 img {}
#howto h3::before, #howto h3::after {
  display: block;
  width: 36%;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/howto_qchan.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -97%;
  left: -42%;
}
#howto h3::after {
  width: 52%;
  background-image: url(../images/howto_ashirai.webp);
  top: -133%;
  left: 87%;
}
#howto .howto-list {}
/* STEP1 */
#howto .howto-list .howto-box {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  margin: 0 0 0.8em;
}
#howto .howto-list .howto-box .howto-title {
  background-image: url(../images/howto_box.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 61.5%;
  padding: 8%;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  margin: 0 0 0 -6%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
}
#howto .howto-list .howto-box .howto-title .howto-title-inner {}
#howto .howto-list .howto-box .howto-title .step-num {
  border-bottom: 1px solid;
  padding: 0 2em 0 0;
  width: max-content;
  margin: -0.8em 0 1em;
}
#howto .howto-list .howto-box .howto-title .step-num img {
  width: auto;
  height: 2.6em;
}
#howto .howto-list .howto-box .howto-title p {
  font-size: 170%;
  text-align: left;
  line-height: 1.4;
  margin: 0;
  font-family: "オーブ";
}
#howto .howto-list .howto-box .howto-detail {
  text-align: left;
  position: relative;
}
.howto-select {
  position: absolute;
  top: 0%;
  left: -24%;
  width: 50%;
  height: 100%;
  /* border: 1px solid; */
}
.howto-select02 {
  /* position: absolute; */
  top: 0%;
  left: 33%;
  width: 50%;
  /* height: 100%; */
}
#howto .howto-list .howto-box .howto-detail img {
  width: 119%;
  max-width: none;
  margin: 0 0 0 -29%;
}
/* STEP1 */
/* STEP2 */
#howto .howto-list .step02.howto-box {}
#howto .howto-list .step02.howto-box .howto-title {
  order: 1;
  margin: 0 -13% 0 0;
}
#howto .howto-list .step02.howto-box .howto-title::after {
  display: block;
  width: 45%;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/step02_item.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 23%;
  left: -13%;
}
#howto .howto-list .step03.howto-box .howto-title::after {
  display: block;
  width: 45%;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/step03_item.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 32%;
  left: 79%;
}
#howto .howto-list .step02.howto-box .howto-title .step-num {}
#howto .howto-list .step02.howto-box .howto-title .step-num img {}
#howto .howto-list .step02.howto-box .howto-title p {
  text-align: center;
}
#howto .howto-list .step02.howto-box .howto-detail {
  margin-right: 10%;
}
#howto .howto-list .step02.howto-box .howto-detail p {}
/* STEP2 */
/* STEP3 */
#howto .howto-list .step03.howto-box {
  margin-top: -2.2em;
}
#howto .howto-list .step03.howto-box .howto-title {
  margin: 0 16% 0 -19%;
}
#howto .howto-list .step03.howto-box .howto-title .step-num {}
#howto .howto-list .step03.howto-box .howto-title .step-num img {}
#howto .howto-list .step03.howto-box .howto-title p {}
#howto .howto-list .step03.howto-box .howto-detail {
  margin: 2em 0 0 0;
}
#howto .howto-list .step03.howto-box .howto-detail p {}
#howto .howto-list .howto-box {
  opacity: 0;
  transition: all 1.0s;
}
#howto .howto-list .step01.howto-box, #howto .howto-list .step03.howto-box {
  transform: translateX(-5em);
}
#howto .howto-list .step02.howto-box {
  transform: translateX(5em);
}
#howto .howto-list .howto-box.anime-active {
  opacity: 1;
  transform: translateX(0);
}
/* == 商品選択 == */
#select-area {
  margin: 11em auto 9.3em;
}
/* anime-block */
/* ワンピース */
#select-area .select-item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.3em;
}
#select-area .select-item .select-box {
  width: 67%;
  position: relative;
  ;
}
#select-area .select-item .select-box::before {
  display: block;
  width: 101.7%;
  aspect-ratio: 10/16.4;
  content: '';
  background-image: url(../images/select_clip.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -15.6%;
  left: -1%;
}
#select-area .select-item .select-box::after {
  display: block;
  width: 101.7%;
  aspect-ratio: 10/16.4;
  content: '';
  background-image: url(../images/select_frame.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -15.6%;
  left: -1%;
}
#select-area .select-item .select-box img {
  opacity: 0;
  position: relative;
  transition: all 0.6s;
  transition-delay: 0.3s;
}
#select-area .select-item.anime-active img {
  opacity: 1;
  position: relative;
}
#select-area .select-item .select-txt {
  text-align: start;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: 'vert'on;
  /* margin: auto 0 0; */
  letter-spacing: 0.15em;
  font-size: 160%;
  margin: 0;
  line-height: 1.3;
  color: #000;
  font-family: "オーブ";
}
#select-area .select-item .select-txt .line01 {
  display: block;
}
#select-area .select-item .select-txt .line02 {
  display: block;
  margin: 2em 0 0 0;
  position: relative;
}
#select-area .select-item .select-txt .line02::after {
  display: block;
  width: 1.4em;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/select_arrow.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: calc(100% + 0.1em);
  left: -0.05em;
}
#select-area .select02.select-item {
  margin: 9em 0 0;
}
#select-area .select02.select-item .select-box {
  order: 1;
}
#select-area .select02.select-item .select-box img {}
#select-area .select02.select-item .select-txt {}
#select-area .select02.select-item .select-txt .line01 {}
#select-area .select02.select-item .select-txt .line02 {
  margin-top: 5em;
}
/* == アイテム一覧 == */
#items-wrap {}
/* ==== item ==== */
.item-box {
  margin-bottom: 9.3em;
}
/* タイトル */
.item-box .item-ttl {
  position: relative;
  z-index: 3;
  margin-bottom: -3.4em;
}
.item-box .item-ttl .ttl-main {}
.item-box .item-ttl .ttl-main img {}
/* 商品詳細 */
.item-box .item-detail {
  color: #000;
}
/* スライダー */
.itemsSwiper-wrap {
  width: 70.3%;
  margin: 0 auto;
  position: relative;
}
.item-box .item-detail .swiper.itemSwiper {
  border: 1px solid #000;
  border-radius: 1em;
}
.item-box .item-detail .swiper.itemSwiper .swiper-wrapper {}
.item-box .item-detail .swiper.itemSwiper .swiper-wrapper .swiper-slide {}
.item-box .item-detail .swiper.itemSwiper .swiper-wrapper .swiper-slide img {}
.itemsSwiper-wrap .swiper-button-prev, .itemsSwiper-wrap .swiper-button-next {
  width: 2.9em;
  top: 49%;
  height: auto;
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease; /* ← アニメーション */
}
/* デフォルト矢印 */
.itemsSwiper-wrap .swiper-button-prev {
  background-image: url('../images/slide_prev.webp');
  left: -16%;
}
.itemsSwiper-wrap .swiper-button-next {
  background-image: url('../images/slide_next.webp');
  right: -16%;
}
@media (hover: hover) {
  /* hover で「進行方向」へ少し移動 */
  .itemsSwiper-wrap .swiper-button-prev:hover {
    transform: translateX(-5px); /* ← 左方向へ移動 */
  }
  .itemsSwiper-wrap .swiper-button-next:hover {
    transform: translateX(5px); /* ← 右方向へ移動 */
  }
}
/* Swiper のデフォルト矢印文字は消す */
.itemsSwiper-wrap .swiper-button-prev::after, .itemsSwiper-wrap .swiper-button-next::after {
  display: none;
}
/* デフォルトの ::after 文字は消す */
.itemsSwiper-wrap .swiper-button-prev::after, .itemsSwiper-wrap .swiper-button-next::after {
  display: none;
}
.swiper.thumbnailSwiper {
  width: 68%;
  margin: 1.7em auto 1em;
}
.swiper.thumbnailSwiper .swiper-wrapper {
  justify-content: center;
  gap: 4%;
}
.swiper.thumbnailSwiper .swiper-wrapper .swiper-slide {
  position: relative;
  cursor: pointer;
  width: 16% !important;
  transition: all 0.3s;
}
@media (hover: hover) {
  .swiper.thumbnailSwiper .swiper-wrapper .swiper-slide:hover {
    opacity: 0.7;
  }
}
.swiper.thumbnailSwiper .swiper-wrapper .swiper-slide img {
  border-radius: 50%;
  overflow: hidden;
}
.swiper.thumbnailSwiper .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.swiper.thumbnailSwiper .swiper-slide.swiper-slide-thumb-active::after {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #000;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
/* 商品スペック */
.item-box .item-detail .item-spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  flex-wrap: wrap;
  margin: 0 auto;
}
.item-box .item-detail .item-spec .item-price {
  letter-spacing: 0;
}
.item-box .item-detail .item-spec .item-modal-btn {
  text-decoration: underline;
  cursor: pointer;
  font-family: "秀英角ゴシック銀 B";
  transition: all 0.3s;
}
/* 商品仕様中身 */
.modal-wrap {
  display: none;
  /* margin-left: calc(-50vw + 400px); */
  /* padding: 30px 0; */
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.2);
}
.modal-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner p {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 2em;
  font-size: 80%;
}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou span {
  border: 1px solid #000;
  display: block;
  height: 2.4em;
  margin: -1px -1px 0 0;
  padding: 0 0.4em;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-title {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-title span {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-box {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-box span {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .modal-close-icon {}
.item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .modal-close-btn {}
/* == 謎を解き明かそう == */
.nazo-wrap {}
.nazo-wrap .nazo-icon {
  width: 21%;
  margin: 2.9em 0 0.6em;
}
.nazo-wrap .nazo-title {
  font-family: "オーブ";
  font-size: 225%;
}
.nazo-wrap .nazo-title span {}
.nazo-wrap .nazo-title span.split {
  display: block;
  color: #000;
  border-bottom: 1px solid #000;
  width: max-content;
  margin: 0 auto 0.35em;
  padding-top: 0.3em;
  letter-spacing: 0.2em;
  line-height: 0.8;
  overflow: hidden;
}
.nazo-wrap .nazo-title span.split span {
  display: block;
  /* height: 13vw !important; */
  /* width: auto; */
  transform: translateY(110%);
  letter-spacing: 0.1em;
}
.nazo-wrap .nazo-title.anime-active span.split span {
  animation: fadeTitle .7s ease 0s forwards;
}
/* = 謎画像 = */
.nazo-wrap .main-nazo {
  width: 83%;
  margin: 2.7em auto 4.7em;
  position: relative;
}
.nazo-wrap .main-nazo::after {
  display: block;
  width: 116%;
  aspect-ratio: 100/69;
  content: '';
  background-image: url(../images/mystery_frame.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -13%;
  left: -8%;
}
.nazo-wrap .main-nazo .nazo-image {}
.nazo-wrap .main-nazo .zoom-icon {
  position: absolute;
  top: 98%;
  right: -7%;
  border: 1px solid #000;
  background: #CBCAFB;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4em 0.8em;
  gap: 0.4em;
  cursor: pointer;
  transition: all 0.3s;
}
.nazo-wrap .main-nazo .zoom-icon::before {
  display: block;
  width: 1.6em;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/zoom_icon.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.nazo-wrap .main-nazo .zoom-icon::after {
  display: block;
  width: 2.9em;
  aspect-ratio: 2/1;
  content: '';
  background-image: url(../images/zoom_txt.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 0.2em;
}
@media (hover: hover) {
  .nazo-wrap .main-nazo .zoom-icon:hover {
    background: #f0c0f5;
  }
  .item-box .item-detail .item-spec .item-modal-btn:hover {
    opacity: 0.7;
  }
}
.nazo-wrap .main-nazo .zoom-icon span {}
/* 拡大画像 */
.nazo-wrap .main-nazo .zoom-image {
  display: none;
  height: 100vh;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.2);
}
.nazo-wrap .main-nazo .zoom-image .zoom-box {
  width: 100vw;
  height: 90vh;
  margin-top: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: scroll;
  flex-direction: column;
}

.nazo-wrap .main-nazo .zoom-image .zoom-box .modal-close-icon {
  display: block;
  width: 2.4em;
  background-color: rgba(255,255,255,0.5);
  background-image: url(../images/icon_close.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% 50%;
  position: absolute;
  border-radius: 50%;
  top: 4.5em;
  right: 1em;
  cursor: pointer;
  padding: 1em;
}
.nazo-wrap .main-nazo .zoom-image .zoom-box .modal-close-btn {
    margin: 1.6em auto 0;
}

.nazo-wrap .main-nazo .zoom-image img {
  /* width: 180%; */
  /* max-width: none !important; */
  display: block;
}
/* 回答送信 */
.answer-box {
  width: 90%;
  margin: 0 auto;
}
.answer-box form {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 110%;
}
.answer-box form input {
  font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
}
.answer-form {
  width: 70%;
  border-radius: 0.2em 0 0 0.2em;
  border: 1px solid #000;
  padding: 0.5em 1em;
}
.answer-btn {
  background: #000;
  display: inline-block;
  border-radius: 0 0.2em 0.2em 0;
  /* text-align    : center; */
  border: 1px solid #000;
  letter-spacing: 0.1em;
  padding: 0.6em 1.0em;
  color: #ffffff;
  line-height: 1.5em;
  transition: .3s;
  box-shadow: none;
  /* border: none; */
  transition: all 0.3s;
}
@media (hover: hover) {
  .answer-btn:hover {
    opacity: 0.7;
  }
}
.item-box-answer {}
.item-box-send {}
/* = ヒント一覧 = */
.nazo-wrap .hint-wrap {}
.nazo-wrap .hint-wrap .swipe-anime {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 84%;
  margin: 3.8em auto 1.7em;
  position: relative;
}
.nazo-wrap .hint-wrap .swipe-anime img {
  width: 14%;
}
.nazo-wrap .hint-wrap .swipe-anime::after {
  display: block;
  width: 0.8em;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/scroll_ashirai.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 28%;
  left: 18%;
}
.nazo-wrap .hint-wrap .swipe-anime span {
  /* height: 1px;
    background: #000;*/
  width: 80%;
  position: relative;
}
.nazo-wrap .hint-wrap .swipe-anime span::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #000;
  animation: scroll-horizontal 5s infinite;
  position: absolute;
  top: 0;
  left: 0;
}
.nazo-wrap .hint-wrap .swipe-anime span::before {
  /*content: "";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;*/
}
@keyframes scroll-horizontal {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  51% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}
.hintSwiper-wrap {
  /* width: 95%; */
  margin: 0 auto;
}
.hintSwiper-wrap .hintSwiper {
  overflow: visible;
}
/* ヒント */
.nazo-wrap .hint-wrap .hint-box {
  background: #FFF;
  border: 1px solid #000;
  color: #000;
  border-radius: 1em;
  min-height: 17.4em;
  width: 100%;
  margin: 0 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nazo-wrap .hint-wrap .hint-box::after {
  display: block;
  width: 4.5em;
  margin: 0 auto;
  aspect-ratio: 100/130;
  content: '';
  background-image: url(../images/hint_qchan01.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 60%;
  left: -3%;
  z-index: 2;
  transition: all 0.3s;
}
.carousel-sp-switch .swiper-wrapper .swiper-slide:nth-child(5n - 3) .hint-box::after {
  background-image: url(../images/hint_qchan02.webp);
  width: 4.5em;
  top: 5%;
  left: 71%;
}
.carousel-sp-switch .swiper-wrapper .swiper-slide:nth-child(5n - 2) .hint-box::after {
  background-image: url(../images/hint_qchan03.webp);
  width: 4.5em;
  top: 60%;
  left: -4%;
}
.carousel-sp-switch .swiper-wrapper .swiper-slide:nth-child(5n - 1) .hint-box::after {
  background-image: url(../images/hint_qchan04.webp);
  width: 4.5em;
  top: 5%;
  left: 6%;
}
.carousel-sp-switch .swiper-wrapper .swiper-slide:nth-child(5n) .hint-box::after {
  background-image: url(../images/hint_qchan05.webp);
  width: 4.5em;
  top: 4%;
  left: 65%;
}
.nazo-wrap .hint-wrap .hint-box.is-open::after {
  opacity: 0;
}
.nazo-wrap .hint-wrap .hint-box .hint-close {
  display: flex;
  justify-content: center;
  width: calc(100% - 0em);
  height: calc(100% - 0em);
  align-items: center;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 1em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  flex-direction: column;
  cursor: pointer;
}
.nazo-wrap .hint-wrap .hint-box .hint-close::before {
  display: block;
  width: calc(100% - 0.8em);
  height: calc(100% - 0.8em);
  content: '';
  background: #CBCAFB;
  border: 1px solid #000;
  border-radius: 0.8em;
  position: absolute;
  top: 0.4em;
  left: 0.4em; /* cursor: pointer; */
}
.nazo-wrap .hint-wrap .hint-box .hint-close .hint-txt {
  font-size: 180%;
  line-height: 1.3;
  margin: 0 0 0.5em;
  position: relative;
  font-family: "オーブ";
}
.nazo-wrap .hint-wrap .hint-box .hint-close .hint-txt::before {
  display: block;
  width: 2.1em;
  margin: 0 auto;
  aspect-ratio: 100/130;
  content: '';
  background-image: url(../images/hint_key01.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.nazo-wrap .hint-wrap .hint-box .hint-close .hint-open-btn {
  background: #000;
  padding: 0.6em 2.4em;
  border-radius: 3em;
  position: relative;
  transition: all 0.3s;
}
@media (hover: hover) {
  .modal-close-btn:hover, .nazo-wrap .hint-wrap .hint-box .hint-close:hover .hint-open-btn {
    transform: scale(1.1)
  }
}
.nazo-wrap .hint-wrap .hint-box .hint-close .hint-open-btn::after {
  display: block;
  width: 2.7em;
  aspect-ratio: 100/50;
  content: '';
  background-image: url(../images/btn_open.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.nazo-wrap .hint-wrap .hint-box .hint-open {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* height: 100%; */
  text-align: justify;
  width: 80%;
}
.nazo-wrap .hint-wrap .hint-box .hint-open .hint-title {
  position: absolute;
  top: 0;
  left: 0;
  background: #CBCAFB;
  font-family: "オーブ";
  border: 1px solid #000;
  border-radius: 1.2em 0;
  padding: 0.2em 1em;
  font-size: 84%;
}
.nazo-wrap .hint-wrap .hint-box .hint-open p {
  font-size: 90%;
  line-height: 1.8;
  margin: 0.6em 0 0;
  word-break: break-all;
  text-justify:inter-character;
}
/* ヒント2 */
.nazo-wrap .hint-wrap .hint02.hint-box {}
.nazo-wrap .hint-wrap .hint02.hint-box .hint-close {}
.nazo-wrap .hint-wrap .hint02.hint-box .hint-close .hint-txt {}
.nazo-wrap .hint-wrap .hint02.hint-box .hint-close .hint-open-btn {}
.nazo-wrap .hint-wrap .hint02.hint-box .hint-open {}
.nazo-wrap .hint-wrap .hint02.hint-box .hint-open .hint-title {}
.nazo-wrap .hint-wrap .hint02.hint-box .hint-open p {}
/* ヒント3 */
.nazo-wrap .hint-wrap .hint03.hint-box {}
.nazo-wrap .hint-wrap .hint03.hint-box .hint-close {}
.nazo-wrap .hint-wrap .hint03.hint-box .hint-close .hint-txt {}
.nazo-wrap .hint-wrap .hint03.hint-box .hint-close .hint-open-btn {}
.nazo-wrap .hint-wrap .hint03.hint-box .hint-open {}
.nazo-wrap .hint-wrap .hint03.hint-box .hint-open .hint-title {}
.nazo-wrap .hint-wrap .hint03.hint-box .hint-open p {}
/*==================================
SPでswiperを破棄して
scrollingに変更
==================================*/
.carousel-sp-switch .swiper-wrapper {
  /* margin:0 2em; */
}
.carousel-sp-switch .swiper-wrapper .swiper-slide {
  flex: 0 0 auto;
  width: 61%;
  margin: 0 1em;
}
.carousel-sp-switch .swiper-wrapper .swiper-slide:nth-child(1) {
  margin-left: 2em;
}
.carousel-sp-switch .swiper-wrapper .swiper-slide:last-child {
  margin-right: 2em;
}
@media (max-width: 768px) {
  .carousel-sp-switch .swiper-wrapper {
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    width: 100%;
    /* gap: 1.5em; */
  }
  /*PCのときは除外*/
  .is-pc .carousel-sp-switch .swiper-wrapper {
    overflow-x: initial;
  }
  .carousel-sp-switch .swiper-slide {}
  /* スクロールバー非表示 */
  .carousel-sp-switch .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }
}
/* =正解の場合表示 = */
.clear-box {
  width: 90%;
  margin: 3em auto 0;
  display: none;
}
.clear-box.is-open {
  display: block;
}
.clear-box::before, .clear-box::after {
  display: block;
  width: 100%;
  height: 1.5em;
  content: '';
  background-image: url(../images/clear_ashirai.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.clear-box::after {
  margin: 2.7em auto 0em;
}
.clear-box .clear-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  color: #000;
  margin: 3em auto 0.5em;
}
.clear-box .clear-head .clear-item {
  width: 5.8em;
}
.clear-box .clear-head .clear-item img {}
.clear-box .clear-head .clear-txt {}
.clear-box .clear-head .clear-txt .clear-title {
  width: 6.3em;
  border-bottom: 1px solid #000;
  margin: 0 auto 1em;
}
.clear-box .clear-head .clear-txt .clear-title img {}
.clear-box .clear-head .clear-txt .clear-name {
  font-size: 143%;
  line-height: 1.4;
  font-family: "オーブ";
}
.clear-box .title-shop {}
#wrapper .clear-box .title-shop img, #wrapper .clear-box .title-share img {
  height: 1.4em;
  width: auto;
  margin: 0 0 0.6em;
}
/* リンク */
.clear-box .link-wrap.link-shop {}
.clear-box .link-wrap.link-shop .link-inner {}
#sp-contents .clear-box .link-wrap.link-shop .link-inner::before {
  background-image: url(../images/icon_bag.svg);
}
.clear-box .link-wrap.link-shop .link-inner .link-txt {}
.clear-box .title-share {
  margin: 2.1em 0 0;
}
.clear-box .title-share img {}
/* リンク */
.clear-box .link-wrap.link-share {}
.clear-box .link-wrap.link-share .link-inner {}
.clear-box .link-wrap.link-share .link-inner .link-txt {}
/* = モーダル = */
.modal-wrap {}
.modal-wrap .modal-inner {
  background: #FFF;
  color: #000;
  border: 1px solid #000;
  border-radius: 0.5em;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 3em 2em 2em;
  position: relative;
  max-height: 90vh;
}
.modal-wrap .modal-inner p {
  font-size: 110%;
  text-align: left;
}
.modal-wrap .modal-inner p .min-txt {
  font-size: 79%;
}
.modal-close-icon {
  display: block;
  width: 1.7em;
  aspect-ratio: 100/100;
  content: '';
  background-image: url(../images/icon_close.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 1em;
  right: 1em;
  cursor: pointer;
}
.modal-close-btn {
  background: #000;
  padding: 0.6em 2.4em;
  border-radius: 3em;
  position: relative;
  width: max-content;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.3s;
}



.modal-close-btn::after {
  display: block;
  width: 3em;
  aspect-ratio: 100/50;
  content: '';
  background-image: url(../images/btn_close.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 正解モーダル */
.clear-modal-wrap.modal-wrap .modal-inner {
  overflow-y: auto;
}
.clear-clone .clear-box {
  margin: 0 auto 2em;
  width: 100%;
  min-height: 23em;
}
.clear-clone .clear-box.is-open {}
.clear-clone .clear-box::before, .clear-clone .clear-box::after {
  display: none;
}
.clear-clone .clear-box::after {}
.clear-clone .clear-box .clear-head {}
.clear-clone .clear-box .clear-head .clear-item {}
.clear-clone .clear-box .clear-head .clear-item img {}
.clear-clone .clear-box .clear-head .clear-txt {}
.clear-clone .clear-box .clear-head .clear-txt .clear-title {
  position: absolute;
  top: 2em;
  left: 0;
  width: 100%;
  border-bottom: none;
}
.clear-clone .clear-box .clear-head .clear-txt .clear-title img {
  width: 9em;
  margin-left: 0.3em;
}
.clear-clone .clear-box.is-open .clear-head .clear-txt .clear-title img {
  animation: slideMask-left 0.8s cubic-bezier(0.22, 1, 0.26, 1.1) 0.5s both;
}
@keyframes slideMask-left {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.clear-clone .clear-box .clear-head .clear-txt .clear-name {}
.clear-clone .clear-box.is-open .title-shop, #sp-contents .clear-clone .clear-box .link-wrap.link-shop {
  animation: fadeIn 0.5s both 0.7s;
}
.clear-clone .clear-box.is-open .title-share, #sp-contents .clear-clone .clear-box .link-wrap.link-share {
  animation: fadeIn 0.5s both 1.0s;
}
#sp-contents .contents-inner .clear-clone .clear-box .link-wrap {
  width: 98%;
}
.clear-clone .clear-box .link-wrap.link-shop .link-inner {}
#sp-contents .clear-clone .clear-box .link-wrap.link-shop .link-inner::before {}
.clear-clone .clear-box .link-wrap.link-shop .link-inner .link-txt {}
.clear-clone .clear-box .title-share {}
.clear-clone .clear-box .title-share img {}
/* リンク */
.clear-clone .clear-box .link-wrap.link-share {}
.clear-clone .clear-box .link-wrap.link-share .link-inner {}
.clear-clone .clear-box .link-wrap.link-share .link-inner .link-txt {}
/* 不正解モーダル */
.wrong-modal-wrap.modal-wrap {}
.wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner {}
.wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner .wrong-icon {
  display: block;
  width: 7em;
  aspect-ratio: 100/70;
  content: '';
  background-image: url(../images/wrong_qchan01.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto;
}
.wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner p {
  text-align: center;
}
.wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner p .min-txt {}
.wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner .modal-close-icon {}
.wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner .modal-close-btn {}
/* == フッターコンテンツ == */
#sp-contents .contents-inner .foot-contents {}
/* リンク */
#sp-contents .contents-inner .link-wrap {
  position: relative;
  width: 81%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sp-contents .contents-inner .link-wrap::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: #ECD2E7;
  border-radius: 3em;
  border: 1px solid #000;
  position: absolute;
  top: 0.25em;
  left: 0;
}
#sp-contents .contents-inner .link-wrap .link-inner {
  background: #000;
  color: #FFF;
  width: 100%;
  min-height: 3.6em;
  border-radius: 3em;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 120%;
  position: relative;
}
#sp-contents .contents-inner .link-wrap .link-inner::before {
  display: block;
  width: 1.7em; /* height: 100%; */ aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/icon_x_w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: auto;
  left: 1.5em;
}
#sp-contents .contents-inner .link-wrap .link-inner::after {
  transition: all 0.3s;
  display: block;
  width: 1.3em; /* height: 100%; */ aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/slide_next.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: auto;
  right: 0.5em;
}
@media (hover: hover) {
  /* hover で「進行方向」へ少し移動 */
  #sp-contents .contents-inner .link-wrap:hover .link-inner::after {
    transform: translateX(5px); /* ← 左方向へ移動 */
  }
}
#sp-contents .contents-inner .link-wrap .link-inner .link-txt {
  line-height: 1.2;
  text-align: left;
  margin-left: 0.6em;
}
#sp-contents .contents-inner .foot-contents .link-wrap.link-x {}
#sp-contents .contents-inner .foot-contents .link-wrap.link-x .link-inner {}
#sp-contents .contents-inner .foot-contents .link-wrap.link-x .link-inner .link-txt {}
/* 魔法部 */
.profile-box {
  background: #FFF;
  border: 1px solid #000;
  width: 89%;
  margin: 1.4em auto 1.7em;
  overflow: hidden;
  background-image: url(../images/kado_pink01.svg), url(../images/kado_pink02.svg), url(../images/kado_pink03.svg), url(../images/kado_pink04.svg);
  background-repeat: no-repeat;
  background-position: top -1px left, top -1px right, bottom -1px left, bottom -1px right;
  background-size: 1.1em;
  color: #000;
  padding: 0 0 1.7em;
}
.profile-box .prof-logo {
  width: 38%;
  margin: 2.1em auto 1.5em;
}
.profile-box .prof-logo img {}
.profile-box .prof-concept {
  letter-spacing: 0.17em;
  font-weight: bold;
  font-family: "秀英角ゴシック銀 B";
  font-size: 111%;
}
.profile-box .prof-txt {
  width: 80%;
  margin: 0 auto;
  text-align: justify;
  font-size: 92%;
}
.profile-box .link-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6em;
  margin: 1em 0 0;
}
.profile-box .link-list a {
  width: 12.5%;
}
.profile-box .link-list a img {}
.profile-box .link-list .link-x {}
.profile-box .link-list .link-x img {}
.profile-box .link-list .link-insta {}
.profile-box .link-list .link-insta img {}
.profile-box .link-list .link-store {}
.profile-box .link-list .link-store img {}
#mahoubu-box.profile-box {
  margin-top: 3.4em;
}
/* トキキル */
#tokiqil-box {
  background-image: url(../images/kado_pink05.svg), url(../images/kado_pink06.svg), url(../images/kado_pink07.svg), url(../images/kado_pink08.svg);
}
#tokiqil-box .prof-logo {
  width: 24%;
}
#tokiqil-box .prof-logo img {}
#tokiqil-box .prof-concept {}
#tokiqil-box .prof-txt {}
#tokiqil-box .link-list {}
#tokiqil-box .link-list .link-x {}
#tokiqil-box .link-list .link-x img {}
#tokiqil-box .link-list .link-insta {}
#tokiqil-box .link-list .link-insta img {}
#tokiqil-box .link-list .link-store {}
#tokiqil-box .link-list .link-store img {}
#tokiqil-box .link-list .link-site {}
#tokiqil-box .link-list .link-site img {}
/* 60th */
#f60th-box {
  margin: 4em 8px 6em;
  color: #000;
}
#f60th-box .f60th-logo {
  width: 20%;
  margin: 0 auto 1.4em;
}
#f60th-box .f60th-logo img {}
#f60th-box p {
  margin: 0 auto 1.3em;
}
/* リンク */
#f60th-box .link-wrap.link-60th {}
#f60th-box .link-wrap.link-60th .link-inner {}
#f60th-box .link-wrap.link-60th .link-inner::before {
  background-image: url(../images/felissimo_60th.svg);
}
#f60th-box .link-wrap.link-60th .link-inner .link-txt {}
/* ページトップへ */
.pagetop {
  position: fixed;
  bottom: -12px;
  right: 5%;
  width: 12%;
  z-index: 10;
  transition: all 0.3s;
}
.pagetop.stop{
  position:absolute;
}

.pagetop img {}
@media (hover: hover) {
.pagetop:hover {
    bottom: -5px;
  }
}
/*===================================

アニメーション

===================================*/
.fade-item {
  opacity: 0
}
.fade-item.anime-active {
  animation: fadeIn 0.5s forwards 0s;
}
@keyframes fadeIn {
  0% {
    transform: translateY(1em);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/*===================================

SP

===================================*/
@media (max-width: 1500px) and (min-width: 769px) {}
@media (max-width: 768px) {
  #wrapper {
    width: 100%;
    font-size: 3.65vw;
  }
  #fv-hyoshi {
    min-height: 148vw;
    max-height: 166vw;
  }
}
/*===================================

PC

===================================*/
@media (min-width: 769px) {
  /*------------------------------------

wrapper

------------------------------------*/
  #wrapper {
    max-width: 1170px;
    margin: 0 auto;
  }
  #wrapper img {}
  #wrapper ul {}
  /* hover */
  #wrapper a:hover {}
  .flex-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* flex-direction: column; */
    position: relative;
  }
  /* == FV == */
  #fv-wrap {}
  #fv-wrap .fv-main {
    background-size: 5.5%;
  }
  /* スライダー */
  #fv-wrap .swiper.mainSwiper {}
  #fv-wrap .swiper.mainSwiper .swiper-wrapper {}
  #fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide {}
  #fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide picture {}
  #fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide picture source {}
  #fv-wrap .swiper.mainSwiper .swiper-wrapper .swiper-slide picture img {}
  #fv-wrap .fv-logo {
    bottom: 27%;
    left: 55%;
    width: 31%;
  }
  #fv-wrap .fv-logo img {
    width: 100%;
  }
  #fv-wrap .fv-icon {
    width: 7%;
    right: 88.5%;
    top: 6.5%;
  }
  #fv-wrap .fv-icon img {}
  #wrapper-inner {}
  #wrapper-inner::before {}
  /* == カテゴリナビ：PC表示 == */
  #wrapper-inner .side-nav.flex-left {
    /* width: 200px; */
    display: block;
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-image: url(../images/side_bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
   #wrapper-inner .side-nav.stop{height: auto;}
  #category-nav-pc {}
  #category-nav-pc .side-inner {
    width: 69%;
    margin: 0 auto;
  }
  #category-nav-pc .side-inner::before, #category-nav-pc .side-inner::after {
    display: block;
    width: 100%;
    height: 1.5em;
    content: '';
    background-image: url(../images/side_ashirai.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  #category-nav-pc .side-inner .side-nav-title {
    width: 40%;
    margin: 2em auto;
  }
  .side-nav-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6%;
    margin: 0 0 1em;
  }
  .side-nav-wrap li {}
  .side-nav-wrap li a {
    position: relative;
    cursor: pointer;
  }
  .side-nav-wrap li a::after {
    display: block;
    width: 1.9em;
    aspect-ratio: 1/1;
    content: '';
    background-image: url(../images/select_arrow.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0.2em auto 0;
  }
  .side-nav-wrap li a .side-image {
    display: block;
    position: relative;
  }
  .side-nav-wrap li a .side-image::after {
    display: block;
    width: 101.7%;
    aspect-ratio: 10/16.4;
    content: '';
    background-image: url(../images/select_frame.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: -15.6%;
    left: -1%;
  }
  .side-nav-wrap li a .side-image img {}
  .side-nav-wrap li a .side-text {
    margin: 2em 0 0;
    font-size: 80%;
    line-height: 1.4;
    display: block;
    height: 2.7em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .side-nav-wrap .side-nav02 {}
  .side-nav-wrap .side-nav02 a {}
  .side-nav-wrap .side-nav02 a .side-image {}
  .side-nav-wrap .side-nav02 a .side-image img {}
  .side-nav-wrap .side-nav02 a .side-text {}
  /* === #sp-contents スマホコンテンツ === */
  #sp-contents {
    width: 650px;
    flex-shrink: 0;
  }
  #sp-contents .contents-inner {}
  /* == リード == */
  #fv-lead {}
  #fv-lead h2 {}
  #fv-lead h2::after {}
  #fv-lead h2 span.split {}
  #fv-lead h2 span {}
  #fv-lead .lead-box {}
  #fv-lead .lead-box p {}
  /* == HOW TO PLAY == */
  #howto {}
  #howto .howto-bg {}
  #howto .howto-bg::before, #howto .howto-bg::after {}
  #howto .howto-bg::before {}
  #howto .howto-bg::after {}
  #howto .howto-inner {}
  /* anime-block */
  #howto h3 {}
  #howto h3 img {}
  #howto h3::before, #howto h3::after {}
  #howto h3::after {}
  #howto .howto-list {}
  /* STEP1 */
  #howto .howto-list .howto-box {}
  #howto .howto-list .howto-box .howto-title {}
  #howto .howto-list .howto-box .howto-title .howto-title-inner {}
  #howto .howto-list .howto-box .howto-title .step-num {}
  #howto .howto-list .howto-box .howto-title .step-num img {}
  #howto .howto-list .howto-box .howto-title p {}
  #howto .howto-list .howto-box .howto-detail {}
  #howto .howto-list .howto-box .howto-detail img {}
  /* STEP1 */
  /* STEP2 */
  #howto .howto-list .step02.howto-box {}
  #howto .howto-list .step02.howto-box .howto-title {}
  #howto .howto-list .step02.howto-box .howto-title::after {}
  #howto .howto-list .step03.howto-box .howto-title::after {}
  #howto .howto-list .step02.howto-box .howto-title .step-num {}
  #howto .howto-list .step02.howto-box .howto-title .step-num img {}
  #howto .howto-list .step02.howto-box .howto-title p {}
  #howto .howto-list .step02.howto-box .howto-detail {}
  #howto .howto-list .step02.howto-box .howto-detail p {}
  /* STEP2 */
  /* STEP3 */
  #howto .howto-list .step03.howto-box {}
  #howto .howto-list .step03.howto-box .howto-title {}
  #howto .howto-list .step03.howto-box .howto-title .step-num {}
  #howto .howto-list .step03.howto-box .howto-title .step-num img {}
  #howto .howto-list .step03.howto-box .howto-title p {}
  #howto .howto-list .step03.howto-box .howto-detail {}
  #howto .howto-list .step03.howto-box .howto-detail p {}
  /* STEP3 */
  /* == 商品選択 == */
  #select-area {}
  /* anime-block */
  /* ワンピース */
  #select-area .select-item {}
  #select-area .select-item .select-box {}
  #select-area .select-item .select-box::before {}
  #select-area .select-item .select-box::after {}
  #select-area .select-item .select-box img {}
  #select-area .select-item .select-txt {}
  #select-area .select-item .select-txt .line01 {}
  #select-area .select-item .select-txt .line02 {}
  #select-area .select-item .select-txt .line02::after {}
  #select-area .select02.select-item {}
  #select-area .select02.select-item .select-box {}
  #select-area .select02.select-item .select-box img {}
  #select-area .select02.select-item .select-txt {}
  #select-area .select02.select-item .select-txt .line01 {}
  #select-area .select02.select-item .select-txt .line02 {}
  /* == アイテム一覧 == */
  #items-wrap {}
  /* ==== item ==== */
  .item-box {}
  /* タイトル */
  .item-box .item-ttl {}
  .item-box .item-ttl .ttl-main {}
  .item-box .item-ttl .ttl-main img {}
  /* 商品詳細 */
  .item-box .item-detail {}
  /* スライダー */
  .itemsSwiper-wrap {}
  .item-box .item-detail .swiper.itemSwiper {}
  .item-box .item-detail .swiper.itemSwiper .swiper-wrapper {}
  .item-box .item-detail .swiper.itemSwiper .swiper-wrapper .swiper-slide {}
  .item-box .item-detail .swiper.itemSwiper .swiper-wrapper .swiper-slide img {}
  .itemsSwiper-wrap .swiper-button-prev, .itemsSwiper-wrap .swiper-button-next {}
  /* デフォルト矢印 */
  .itemsSwiper-wrap .swiper-button-prev {}
  .itemsSwiper-wrap .swiper-button-next {}
  /* Swiper のデフォルト矢印文字は消す */
  .itemsSwiper-wrap .swiper-button-prev::after, .itemsSwiper-wrap .swiper-button-next::after {}
  /* デフォルトの ::after 文字は消す */
  .itemsSwiper-wrap .swiper-button-prev::after, .itemsSwiper-wrap .swiper-button-next::after {}
  .swiper.thumbnailSwiper {}
  .swiper.thumbnailSwiper .swiper-wrapper {}
  .swiper.thumbnailSwiper .swiper-wrapper .swiper-slide {}
  .swiper.thumbnailSwiper .swiper-wrapper .swiper-slide img {}
  .swiper.thumbnailSwiper .swiper-slide.swiper-slide-thumb-active {}
  .swiper.thumbnailSwiper .swiper-slide.swiper-slide-thumb-active::after {}
  /* 商品スペック */
  .item-box .item-detail .item-spec {}
  .item-box .item-detail .item-spec .item-price {}
  .item-box .item-detail .item-spec .item-modal-btn {}
  /* 商品仕様中身 */
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner p {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-title {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-title span {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-box {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .size-hyou-wrap .size-hyou .size-box span {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .modal-close-icon {}
  .item-box .item-detail .item-spec .item-modal-wrap.modal-wrap .item-modal-inner.modal-inner .modal-close-btn {}
  /* == 謎を解き明かそう == */
  .nazo-wrap {}
  .nazo-wrap .nazo-icon {}
  .nazo-wrap .nazo-title {}
  .nazo-wrap .nazo-title span {}
  .nazo-wrap .nazo-title span.split {}
  .nazo-wrap .nazo-title span.split span {}
  /* = 謎画像 = */
  .nazo-wrap .main-nazo {}
  .nazo-wrap .main-nazo::after {}
  .nazo-wrap .main-nazo .nazo-image {}
  .nazo-wrap .main-nazo .zoom-icon {}
  .nazo-wrap .main-nazo .zoom-icon::before {}
  .nazo-wrap .main-nazo .zoom-icon::after {}
  .nazo-wrap .main-nazo .zoom-icon span {}
  /* 拡大画像 */
  .nazo-wrap .main-nazo .zoom-image {}
  .nazo-wrap .main-nazo .zoom-image .zoom-box {
    justify-content: center;
  }
  .nazo-wrap .main-nazo .zoom-image img {
    width: 92%;
  }
  /* 回答送信 */
  .answer-box {}
  .answer-box form {}
  .answer-box form input {}
  .answer-form {}
  .answer-btn {}
  .item-box-answer {}
  .item-box-send {}
  /* = ヒント一覧 = */
  .nazo-wrap .hint-wrap {}
  .nazo-wrap .hint-wrap .swipe-anime {}
  .nazo-wrap .hint-wrap .swipe-anime img {}
  .nazo-wrap .hint-wrap .swipe-anime::after {}
  .nazo-wrap .hint-wrap .swipe-anime span {}
  .hintSwiper-wrap {}
  .hintSwiper-wrap .hintSwiper {}
  /* ヒント */
  .nazo-wrap .hint-wrap .hint-box {}
  .nazo-wrap .hint-wrap .hint-box::after {}
  .nazo-wrap .hint-wrap .hint-box .hint-close {}
  .nazo-wrap .hint-wrap .hint-box .hint-close::before {}
  .nazo-wrap .hint-wrap .hint-box .hint-close .hint-txt {}
  .nazo-wrap .hint-wrap .hint-box .hint-close .hint-txt::before {}
  .nazo-wrap .hint-wrap .hint-box .hint-close .hint-open-btn {}
  .nazo-wrap .hint-wrap .hint-box .hint-close .hint-open-btn::after {}
  .nazo-wrap .hint-wrap .hint-box .hint-open {}
  .nazo-wrap .hint-wrap .hint-box .hint-open .hint-title {}
  .nazo-wrap .hint-wrap .hint-box .hint-open p {}
  /* ヒント2 */
  .nazo-wrap .hint-wrap .hint02.hint-box {}
  .nazo-wrap .hint-wrap .hint02.hint-box .hint-close {}
  .nazo-wrap .hint-wrap .hint02.hint-box .hint-close .hint-txt {}
  .nazo-wrap .hint-wrap .hint02.hint-box .hint-close .hint-open-btn {}
  .nazo-wrap .hint-wrap .hint02.hint-box .hint-open {}
  .nazo-wrap .hint-wrap .hint02.hint-box .hint-open .hint-title {}
  .nazo-wrap .hint-wrap .hint02.hint-box .hint-open p {}
  /* ヒント3 */
  .nazo-wrap .hint-wrap .hint03.hint-box {}
  .nazo-wrap .hint-wrap .hint03.hint-box .hint-close {}
  .nazo-wrap .hint-wrap .hint03.hint-box .hint-close .hint-txt {}
  .nazo-wrap .hint-wrap .hint03.hint-box .hint-close .hint-open-btn {}
  .nazo-wrap .hint-wrap .hint03.hint-box .hint-open {}
  .nazo-wrap .hint-wrap .hint03.hint-box .hint-open .hint-title {}
  .nazo-wrap .hint-wrap .hint03.hint-box .hint-open p {}
  /*==================================
SPでswiperを破棄して
scrollingに変更
==================================*/
  .carousel-sp-switch .swiper-wrapper {}
  /* =正解の場合表示 = */
  .clear-box {}
  .clear-box::before, .clear-box::after {}
  .clear-box::after {}
  .clear-box .clear-head {}
  .clear-box .clear-head .clear-item {}
  .clear-box .clear-head .clear-item img {}
  .clear-box .clear-head .clear-txt {}
  .clear-box .clear-head .clear-txt .clear-title {}
  .clear-box .clear-head .clear-txt .clear-title img {}
  .clear-box .clear-head .clear-txt .clear-name {}
  .clear-box .title-shop {}
  #wrapper .clear-box .title-shop img, #wrapper .clear-box .title-share img {}
  /* リンク */
  .clear-box .link-wrap.link-shop {}
  .clear-box .link-wrap.link-shop .link-inner {}
  #sp-contents .clear-box .link-wrap.link-shop .link-inner::before {}
  .clear-box .link-wrap.link-shop .link-inner .link-txt {}
  .clear-box .title-share {}
  .clear-box .title-share img {}
  /* リンク */
  .clear-box .link-wrap.link-share {}
  .clear-box .link-wrap.link-share .link-inner {}
  .clear-box .link-wrap.link-share .link-inner .link-txt {}
  /* = モーダル = */
  .modal-wrap {}
  .modal-wrap .modal-inner {}
  .modal-wrap .modal-inner p {}
  .modal-wrap .modal-inner p .min-txt {}
  .modal-wrap .modal-inner .modal-close-icon {}
  .modal-wrap .modal-inner .modal-close-btn {}
  .modal-wrap .modal-inner .modal-close-btn::after {}
  .wrong-modal-wrap.modal-wrap {}
  .wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner {}
  .wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner .wrong-icon {}
  .wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner p {}
  .wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner p .min-txt {}
  .wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner .modal-close-icon {}
  .wrong-modal-wrap.modal-wrap .wrong-modal-inner.modal-inner .modal-close-btn {}
  /* == フッターコンテンツ == */
  #sp-contents .contents-inner .foot-contents {}
  /* リンク */
  #sp-contents .contents-inner .link-wrap {}
  #sp-contents .contents-inner .link-wrap::before {}
  #sp-contents .contents-inner .link-wrap .link-inner {}
  #sp-contents .contents-inner .link-wrap .link-inner::before {}
  #sp-contents .contents-inner .link-wrap .link-inner::after {}
  #sp-contents .contents-inner .link-wrap .link-inner .link-txt {}
  #sp-contents .contents-inner .foot-contents .link-wrap.link-x {}
  #sp-contents .contents-inner .foot-contents .link-wrap.link-x .link-inner {}
  #sp-contents .contents-inner .foot-contents .link-wrap.link-x .link-inner .link-txt {}
  /* 魔法部 */
  .profile-box {}
  .profile-box .prof-logo {}
  .profile-box .prof-logo img {}
  .profile-box .prof-concept {}
  .profile-box .prof-txt {}
  .profile-box .link-list {}
  .profile-box .link-list a {}
  .profile-box .link-list a img {}
  .profile-box .link-list .link-x {}
  .profile-box .link-list .link-x img {}
  .profile-box .link-list .link-insta {}
  .profile-box .link-list .link-insta img {}
  .profile-box .link-list .link-store {}
  .profile-box .link-list .link-store img {}
  #mahoubu-box.profile-box {}
  /* トキキル */
  #tokiqil-box {}
  #tokiqil-box .prof-logo {}
  #tokiqil-box .prof-logo img {}
  #tokiqil-box .prof-concept {}
  #tokiqil-box .prof-txt {}
  #tokiqil-box .link-list {}
  #tokiqil-box .link-list .link-x {}
  #tokiqil-box .link-list .link-x img {}
  #tokiqil-box .link-list .link-insta {}
  #tokiqil-box .link-list .link-insta img {}
  #tokiqil-box .link-list .link-store {}
  #tokiqil-box .link-list .link-store img {}
  #tokiqil-box .link-list .link-site {}
  #tokiqil-box .link-list .link-site img {}
  /* 60th */
  #f60th-box {}
  #f60th-box .f60th-logo {}
  #f60th-box .f60th-logo img {}
  #f60th-box p {}
  /* リンク */
  #f60th-box .link-wrap.link-60th {}
  #f60th-box .link-wrap.link-60th .link-inner {}
  #f60th-box .link-wrap.link-60th .link-inner::before {}
  #f60th-box .link-wrap.link-60th .link-inner .link-txt {}
  /* ページトップへ */
.pagetop {
    width: 3em;
    right: 3%;
  }
.pagetop img {}
}
@media (max-width: 850px) {
  /* == カテゴリナビ：PC表示 == */
  #wrapper-inner .side-nav.flex-left {
    display: none;
  }
}
@media (max-height: 850px) {
  #category-nav-pc .side-inner {
    font-size:2.7vh;
    min-width:210px;
    max-width: 49vh;
    /* margin: 2em auto; */
    height: 100vh;
  }
  }