@charset "UTF-8";
/*
<img class="dummy" src="/fashion/list/2509_fff/images/dummy.webp?$staticlink$" alt="" width="" height="" fetchpriority="high">
 */
.dummy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.7;
  pointer-events: none;
}
/*=============================================================

	Date: 2025-09-04
	CSS Document ： fff book 仮想LP

=============================================================*/
/*------------------------------------
仮想LP用ベース
------------------------------------*/
.fca_cat-hero {
  z-index: 1;
}
.fca_cat-hero, .fca_cat-hero .sr_page-shopping-result__free {
  overflow: visible !important;
}
.fca_cat-hero .sr_page-shopping-result__free .fca_container__in {
  max-width: 100%;
}
.fca_cat-hero .sr_page-shopping-result__free .fca_container {
  padding: 0;
}
.fca_page-shop-category__body {
  margin-top: 0;
}
/*------------------------------------

ベース

------------------------------------*/
.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;
} */
/*------------------------------------

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;
}
#wrapper img {
  height: auto;
  max-width: 100%;
  /* width: 100%; */
}
#wrapper ul {
  padding: 0;
  list-style: none;
}
#wrapper-inner {
    width: 100%;
}
/* hover */
#wrapper a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  #wrapper a {
    transition: all 0.3s;
  }
  #wrapper a:hover {
    opacity: 0.7;
  }
}
.flex-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
/*------------------------------------

FV

------------------------------------*/
#fv-wrap {}
/* == 表紙 == */
#fv-hyoshi {
  background: #FFE33F;
  width: 100%;
  height: calc(100vh - 97px);
  position: relative;
  z-index: 1;
}
#fv-hyoshi .fv-logo {
  width: 49%;
  padding: 7% 7% 5%;
  box-sizing: initial;
}
#fv-hyoshi .fv-logo img {}
#fv-hyoshi .fv-main {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 85%;
  align-items: stretch;
  gap: 4%;
  position: relative;
}
#fv-hyoshi .fv-fufufu {position: absolute;bottom: 4%;right: 11%;width: 38%;z-index: 1;filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4));}

#fv-hyoshi .fv-main .fv-txt {
  width: 13%;
}
#fv-hyoshi .fv-main .fv-txt img {}
/* スライダー */
#fv-hyoshi .fv-main .swiper.mainSwiper {
  border: solid 0.1em #FFF;
  width: 81%;
  opacity: 0;
  margin: 0;
  animation: fadeUp 0.6s ease 1s forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#fv-hyoshi .fv-main .swiper.mainSwiper .swiper-wrapper {}
#fv-hyoshi .fv-main .swiper.mainSwiper .swiper-wrapper .swiper-slide {}
#fv-hyoshi .fv-main .swiper.mainSwiper .swiper-wrapper .swiper-slide img {
  width: 100%;
}
#fv-hyoshi .fv-main .fv-season {
  width: 3%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center; /* flex-wrap: wrap; */ flex-direction: column;
}
#fv-hyoshi .fv-main .fv-season img {
  width: 100%;
}
#fv-hyoshi .fv-main .fv-season p {
  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: 65%;
  font-family: "游ゴシック体 Pr6N B";
}
/* scroll */
#fv-hyoshi .fv-scroll {
  width: 8%;
  margin: 1.0em auto;
  position: relative;
}
#fv-hyoshi .fv-scroll::before {
  display: block;
  width: 35%;
    content: '';
  aspect-ratio: 1;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  top: 120%;
  left: 32%;
}
#fv-hyoshi .fv-scroll::after {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url(../images/scroll_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 140%;
  left: 0;
  animation: down_pop 1.3s infinite;
}
#fv-hyoshi .fv-scroll img {}

@keyframes down_pop {
  0% {
    transform: translateY(0em);
  }
  50% {
    transform: translateY(0.3em);
  }
  100% {
    transform: translateY(0em);
  }
}

/*------------------------------------

リード

------------------------------------*/
#fv-lead {
  background-image: url(../images/lead_bg.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  aspect-ratio: 10/14.09;
  position: relative;
  width: 100%;
}
#fv-lead .lead-box {
  text-align: left;
  padding: 7% 10%;
  font-family: "見出ゴMB1";
}
#fv-lead .lead-box p {
  color: #FFF;
  margin: 0 0 1em;
  font-size: 138%;
  line-height: 1.5;
  letter-spacing:0.1em;
}
#fv-lead .lead-box img {}
#fv-lead .main-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#fv-lead .main-title span {
  height: 15%;
  display: block;
  position: absolute;
}
#fv-lead .main-title span img {
  width: auto;
  height: 100%;
}
.lead01, .lead02, .lead03, .lead04 {
  top: 73.5%;
}
.lead05, .lead06, .lead07 {
  height: 7.6% !important;
}




#fv-lead .main-title .lead01 {
  left: 16%;
}
#fv-lead .main-title .lead02 {
  left: 27%;
}
#fv-lead .main-title .lead03 {
  left: 43%;
}
#fv-lead .main-title .lead04 {
  left: 54%;
}
#fv-lead .main-title .lead05 {
  top: 86%;
  left: 42%;
}

#fv-lead .main-title .lead06 {
  top: 84%;
  left: 56%;
}
#fv-lead .main-title .lead07 {
  top: 82%;
  left: 70%;
}
#fv-lead .main-title .lead08 {
  top: 85.5%;
  left: 84.3%;
  height: 2.5%;
}

/* アニメーション */
#fv-lead .main-title{
  opacity: 0;
  transition: opacity 1s, transform 1s;
  transform: translateY(1em);
  transition-delay: 2s;
}
#fv-lead .main-title.anime-active {
  opacity: 1;
  transform: translateY(0);
}

#fv-lead .main-title .lead05,
#fv-lead .main-title .lead06,
#fv-lead .main-title .lead07,
#fv-lead .main-title .lead08{
  opacity: 0;
  transition: opacity 1s, transform 1s;
  transform: translateY(1em) rotate(15deg);
}
#fv-lead .main-title .lead05 {
      transition-delay: 2.3s;
}
#fv-lead .main-title .lead06 {
      transition-delay: 2.6s;
}
#fv-lead .main-title .lead07 {
    transition-delay: 2.9s;
}
#fv-lead .main-title .lead08 {
    transition-delay: 2.9s;
}
#fv-lead .main-title.anime-active .lead05,
#fv-lead .main-title.anime-active .lead06,
#fv-lead .main-title.anime-active .lead07,
#fv-lead .main-title.anime-active .lead08{
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/*------------------------------------

PC サイドナビ

------------------------------------*/
.flex-left {
	clip-path: inset(0 100% 0 0);
    animation: slideMask-right 1.5s cubic-bezier(0.22, 1, 0.26, 1.1) 1.5s both;
}
.flex-right {
	clip-path: inset(0 0 0 100%);
    animation: slideMask-left 1.5s cubic-bezier(0.22, 1, 0.26, 1.1) 1.5s both;
}

@keyframes slideMask-left {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes slideMask-right {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

#wrapper-inner .side-nav.flex-left {
  display: none;
}
/*------------------------------------

スマホコンテンツ

------------------------------------*/
#sp-contents {
    width: 100%;
    font-family: "秀英角ゴシック銀 L";
}
/*------------------------------------

導入 詩

------------------------------------*/
#introduction {
  position: relative;
  width: 85%;
  margin: 3.4em auto 2em;
}
#introduction p {
  text-align: left;
  font-size: 100%;
  line-height: 2.5;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
#introduction p.intro-special {
    font-size: 120%;
    line-height: 2.2;
    margin: 6.2em 0 0 0;
    text-align: center;
}
#introduction .ashirai01 {
  position: absolute;
  top: -5%;
  right: -1%;
  width: 27%;
}
#introduction .ashirai01 img {}
#introduction .ashirai02 {
  position: absolute;
  bottom: 21%;
  right: -2%;
  width: 24%;
}
#introduction .ashirai02 img {}


#introduction p .char {
  opacity: 0;
  filter: blur(2px);
  transition: opacity 0.6s ease, filter 0.6s ease;
  display: inline-block;
}

#introduction p .char.on {
  opacity: 1;
  filter: blur(0);
}

#introduction.anime-active .ashirai01 img {
  animation: piko2 1.8s steps(1) infinite; /* 0.4秒で2コマを繰り返す */
}

@keyframes piko2 {
  0%   { transform: translateY(-3px); }
  50%  { transform: translateY(3px); }
  100% { transform: translateY(-3px); }
}

#introduction.anime-active .ashirai02 img {
  animation: piko3 3.0s steps(1) infinite; /* 0.4秒で2コマを繰り返す */
    /*transform-origin: bottom right;*/
}

@keyframes piko3 {
  0%   { transform: translateX(0em) rotate(0deg); }
  50%  { transform: translateX(-0.6em) rotate(-10deg); }
  100% { transform: translateX(-2em) rotate(-15deg); }
}


/*------------------------------------

アイテム一覧

------------------------------------*/
#items-wrap {}
/*------------------------------------

テーマ共通

------------------------------------*/
.thema-box {
  padding: 5em 0 4em;
}
.thema-box .thema-inner {}
/* テーマタイトル */
.thema-box .thema-inner .thema-ttl {
  position: relative;
  width: max-content;
  margin: 0em auto 3.5em;
}
.thema-box .thema-inner .thema-ttl::before {
  display: block;
  width: 30vw;
  margin: 0 0 -4% -12%;
  aspect-ratio: 100/61.3;
  content: '';
  background-image: url(../images/thema_head.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.thema-box .thema-inner .thema-ttl::after {
  display: block;
  width: 13vw;
  margin: 0 0 -4% -12%;
  aspect-ratio: 100/61.3;
  content: '';
  background-image: url(../images/thema_fufufu.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 32%;
  right: 10%;
}

#thema03.thema-box .thema-inner .thema-ttl::after{
  margin-right: -14%;
}

.thema-box .thema-inner .thema-ttl .ttl-main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1%;
}
.thema-box .thema-inner .thema-ttl .ttl-main::before, .thema-box .thema-inner .thema-ttl .ttl-main::after {
  display: block;
  width: 0.9em;
  aspect-ratio: 100/200;
  content: '';
  background-image: url(../images/thema_brackets_l.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.thema-box .thema-inner .thema-ttl .ttl-main::after {
  background-image: url(../images/thema_brackets_r.svg);
}
.thema-box .thema-inner .thema-ttl .ttl-main span {
overflow: hidden;
    position: relative;
}
.thema-box .thema-inner .thema-ttl .ttl-main span img {
  height: 13vw !important;
  width: auto;
  transform: translateY(100%);
}


.thema-box .thema-inner .thema-ttl.anime-active .ttl-main span img {
animation: fadeTitle .7s ease 0.1s forwards;
}

@keyframes fadeTitle {
  0% {
    transform: translateY(100%);
  }
   100% {
    transform: translateY(0);
  }
}


/* == メイン == */
.thema-box .thema-inner .thema-main {
  position: relative;
}
/* メインイメージ */
.thema-box .thema-inner .thema-main .main-image {
    width: 100%;
}
/* == サブ == */
.thema-box .thema-inner .thema-sub {
  position: relative;
}
/* サブイメージ */
.thema-box .thema-inner .thema-sub img {
    opacity: 0;
}

.thema-box .thema-inner .thema-sub.anime-active img {
animation: fadeSub 1.2s ease 0.3s forwards;
}
.thema-box .thema-inner .thema-sub.anime-active .sub-image01 {}
.thema-box .thema-inner .thema-sub.anime-active .sub-image02 {animation-delay: 0.6s;}
.thema-box .thema-inner .thema-sub.anime-active .sub-image03 {animation-delay: 0.9s;}
.thema-box .thema-inner .thema-sub.anime-active .sub-image04 {animation-delay: 1.2s;}
.thema-box .thema-inner .thema-sub.anime-active .sub-image05 {animation-delay: 0;}

@keyframes fadeSub {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
   100% {
    opacity: 1;
    transform: scale(1.0);
  }
}
/*------------------------------------

テキスト共通

------------------------------------*/
#items-wrap .main-txt-anime {
  overflow: visible;
  position: absolute;
  font-family: "秀英角ゴシック銀 M";
  pointer-events: none;
}
#items-wrap svg.main-txt-anime {
    font-size: 1.15rem;
}
#items-wrap .thema-txt {
  text-align: start;
  white-space: nowrap;
  letter-spacing: 0.35em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: 'vert'on;
  font-size: 1.6em;
}
#items-wrap defs {}
#items-wrap text {}
#items-wrap text textpath {}

/* テキストアニメーション */
.thema-txt .char {
  opacity: 0;
    display: inline-block;
  
  filter: blur(2px);
  /*transition: opacity 1.6s ease, filter 0.6s ease;*/
   transition: all 1s;
}
.thema-txt .char.on {
  opacity: 1;
  filter: blur(0);
}

.thema-txt tspan.char {
    font-size: 130%;
}
.thema-txt tspan.char.on {
    font-size: 100%;
}
.thema-txt span.char {
    transform: scale(1.3);
}
.thema-txt span.char.on {
   transform: scale(1);
}


/*------------------------------------

個別設定 thema01

------------------------------------*/
/* 01 */
#t01-01-wrap {
  top: 10%;
  left: 80%; /* aspect-ratio: 95/750; */ width: 14%;
}
/* 02 */
#t01-02-wrap {
  top: 56%;
  left: 75%;
  /* aspect-ratio: 55/456; */
  width: 14%;
}
/* サブ */
#thema01.thema-box .thema-inner .thema-sub {
  width: 85%;
  margin: 2em auto;
}
/* サブイメージ */
#thema01.thema-box .thema-inner .thema-sub .sub-image01 {}
/*------------------------------------

個別設定 thema02

------------------------------------*/
/* 01 */
#t02-01-wrap {
  top: 6%;
  left: 79%;
  /* aspect-ratio: 95/750; */
  width: 14%;
}
/* 02 */
#t02-02-wrap {
  top: 13%;
  left: 16%;
  /* aspect-ratio: 55/456; */
  width: 14%;
}
/* サブ */
#thema02.thema-box .thema-inner .thema-sub {
  width: 85%;
  margin: 3em auto 5.2em;
}
/* サブイメージ */
#thema02.thema-box .thema-inner .thema-sub .sub-image01 {
  width: 65%;
  margin-right: 35%;
}
#thema02.thema-box .thema-inner .thema-sub .sub-image02 {
  position: absolute;
  width: 42%;
  top: 56%;
  right: 0;
}
#thema02.thema-box .thema-inner .thema-sub .sub-image03 {
  position: absolute;
  width: 40%;
  top: 22%;
  left: 47%;
}
/*------------------------------------

個別設定 thema03

------------------------------------*/
#items-wrap #thema03.thema-box .thema-txt {
  font-size: 1.1em;
}
/* 01 */
#t03-01-wrap {
  top: 14%;
  left: 78%;
  transform: rotate(15deg);
}
/* 02 */
#t03-02-wrap {
  top: 14%;
  left: 21%;
  transform: rotate(-9deg);
}
#t03-03-wrap {
  top: 28%;
  left: 14%;
  transform: rotate(-19deg);
}
/* サブ */
#thema03.thema-box .thema-inner .thema-sub {
  width: 85%;
  margin: 1.5em auto 0;
}
/* サブイメージ */
#thema03.thema-box .thema-inner .thema-sub .sub-image01 {
  position: absolute;
  width: 49%;
  top: 7.2%;
  left: 1%;
}
#thema03.thema-box .thema-inner .thema-sub .sub-image02 {
  position: absolute;
  width: 49%;
  top: 7.2%;
  left: 49.5%;
}
#thema03.thema-box .thema-inner .thema-sub .sub-image03 {
  position: absolute;
  width: 49%;
  top: 53%;
  left: 1%;
}
#thema03.thema-box .thema-inner .thema-sub .sub-image04 {
  position: absolute;
  width: 49%;
  top: 53%;
  left: 49.5%;
}
#thema03.thema-box .thema-inner .thema-sub .sub-image05 {
  position: relative;
  mix-blend-mode: multiply;
  width: 100%;
}
/*------------------------------------

個別設定 thema04

------------------------------------*/
#items-wrap #thema04.thema-box .thema-txt {
  font-size: 1.2em;
}
#items-wrap #thema04.thema-box .thema-inner .thema-main .main-image {
  width: 89%;
  margin-right: 11%;
}
/* 01 */
#t04-01-wrap {
  /* top: 0%; */
  /* left: 80%; */
  position: relative !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0.4em 0.6em;
}
#items-wrap .thema-box #t04-01-wrap .thema-txt {
  writing-mode: horizontal-tb;
  text-orientation: upright;
  font-feature-settings: 'vert'on;
}
/* 02 */
#t04-02-wrap {
  top: 8.6%;
  left: 91%;
}
/* サブ */
#thema04.thema-box .thema-inner .thema-sub {
  width: 85%;
  margin: 3em auto 1em;
}
/* サブイメージ */
#thema04.thema-box .thema-inner .thema-sub .sub-image01 {}
.thema-box .copyright {
  width: 60%;
  display: block;
  margin: 0.5em;
}
/*------------------------------------

個別設定 thema05

------------------------------------*/
/* 01 */
#t05-01-wrap {
  top: 7%;
  left: 40%;
  /* aspect-ratio: 95/750; */
  width: 14%;
}
#items-wrap #t05-01-wrap .thema-txt { fill: #FFF;
  color: #FFF;
    -webkit-text-fill-color: #FFF;
}
#items-wrap #t05-01-wrap .thema-txt textpath {
  fill: #FFF;
  color: #FFF;
    -webkit-text-fill-color: #FFF;
}
/* サブ */
#thema05.thema-box .thema-inner .thema-sub {
  width: 77%;
  margin: 2.2em auto 0;
}
/* サブイメージ */
#thema05.thema-box .thema-inner .thema-sub .sub-image01 {}
/* コーデ買いキャンペーン */
.campaign-wrap {
  /* font-size: 90%; */
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.7em;
  margin: 0.8em 0 0;
}
.campaign-wrap .campaign-icon {
  border: 1px solid #000;
  padding: 0.3em 0.4em;
  line-height: 1;
}
.campaign-wrap .campaign-txt {
  display: block;
  width: fit-content;
  white-space: nowrap;
  text-align: left;
}
.campaign-wrap .campaign-txt .min-txt {
  font-size: 85%;
}
.campaign-wrap .campaign-txt .red-txt {
  color: #C1272D;
}
.campaign-wrap .campaign-txt .hosoku-txt {
  font-size: 70%;
  display: block;
  text-align: left;
  margin-left: 0.9em;
}
/*------------------------------------

リンク共通

------------------------------------*/
.link-wrap {
  text-align: right;
  width: 90%;
  margin: 1em auto;
}
.link-wrap a {
  display: block;
  margin: 0 0 0.2em;
}
.link-wrap a .link-txt {}
.link-wrap a .buy-btn {
  background: #000;
  color: #FFF;
  border-radius: 0 0 1em 0;
  padding: 0.1em 1em;
  font-size: 82%;
  letter-spacing: 0.2em;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  /* font-style: italic; */
}
/*------------------------------------

プロフィール

------------------------------------*/
#profile {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; /* flex-direction: column; */ gap: 2.5em;
  margin: 6em 0 3em;
}
#profile .prof-head {
  text-align: start;
  white-space: nowrap;
  letter-spacing: .05em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: 'vert'on;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1em; /* flex-wrap: wrap; */ /* flex-direction: column; */
}
#profile .prof-head .prof-sub {
  margin: 0 0.4em 0 0;
}
#profile .prof-head .prof-name {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5em;
}
#profile .prof-head .prof-name .prof-main {
  font-size: 149%;
}
#profile .prof-head .prof-name .prof-main .min-txt {
  font-size: 71%;
  margin: 0.2em 0 0;
}
#profile .prof-head .prof-name img {}
#profile .prof-txt {
  width: 61%;
  /* height: 100px; */
  aspect-ratio: 1/1.3;
  order: -1;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#profile .prof-txt p {
  text-align: start; /* white-space: nowrap; */ letter-spacing: .05em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: 'vert'on;
  margin: 0;
}
#list-anchor {
  margin: 4em 0 0;
}
#list-anchor::after {
  display: block;
  width: 9%;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/list_arrow.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto 1.5em;
}
#list-anchor a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3%;
}
#list-anchor a img {
  width: 21%;
}
#list-anchor a span {
  line-height: 1.4;
  font-family: "秀英角ゴシック銀 M";
  font-size: 122%;
}
/*===================================

PC

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

wrapper

------------------------------------*/
  #wrapper {
    overflow: visible;
    max-width: 1500px;
    margin: 0 auto;
  }
  #wrapper img {}
  #wrapper ul {}
  #wrapper-inner {
    position: relative;
  }
  /* hover */
  #wrapper a:hover {}
  .flex-wrapper {
    flex-direction: row; /* align-items: stretch; */
  }
  /*------------------------------------

FV

------------------------------------*/
  #fv-wrap {
    align-items: stretch;
  }
  /* == 表紙 == */
  #fv-hyoshi {
    height: auto;
    max-height: none;
  }
  #fv-hyoshi .fv-logo {
    width: 43%;
    padding: 7% 8% 4%;
  }
  #fv-hyoshi .fv-logo img {}
  #fv-hyoshi .fv-main {}
  #fv-hyoshi .fv-main .fv-txt {
    display: none;
  }
  #fv-hyoshi .fv-main .fv-txt img {}
  /* スライダー */
  #fv-hyoshi .fv-main .swiper.mainSwiper {}
  #fv-hyoshi .fv-main .swiper.mainSwiper .swiper-wrapper {}
  #fv-hyoshi .fv-main .swiper.mainSwiper .swiper-wrapper .swiper-slide {}
  #fv-hyoshi .fv-main .swiper.mainSwiper .swiper-wrapper .swiper-slide img {}
  #fv-hyoshi .fv-main .fv-season {}
	#fv-hyoshi .fv-fufufu { right:18%;}
  #fv-hyoshi .fv-main .fv-season img {}
  #fv-hyoshi .fv-main .fv-season p {
    font-size: 100%;
  }
  /* scroll */
  #fv-hyoshi .fv-scroll {}
  #fv-hyoshi .fv-scroll::before {}
  #fv-hyoshi .fv-scroll::after {}
  #fv-hyoshi .fv-scroll img {}
  /*------------------------------------

リード

------------------------------------*/
  #fv-lead {}
  #fv-lead .lead-box {}
  #fv-lead .lead-box p {}
  #fv-lead .lead-box img {
    width: 93%;
}
  #fv-lead .main-title {}
  #fv-lead .main-title span {}
  #fv-lead .main-title span img {}
  .lead01, .lead02, .lead03, .lead04 {}
  .lead05, .lead06, .lead07 {}
  #fv-lead .main-title .lead01 {}
  #fv-lead .main-title .lead02 {}
  #fv-lead .main-title .lead03 {}
  #fv-lead .main-title .lead04 {}
  #fv-lead .main-title .lead05 {}
  #fv-lead .main-title .lead06 {}
  #fv-lead .main-title .lead07 {}
  #fv-lead .main-title .lead08 {}
  /*------------------------------------

PC サイドナビ

------------------------------------*/
  #wrapper-inner .side-nav.flex-left {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    background-image: url(../images/side_bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
  }
  #wrapper .flex-left {
    flex-shrink: 0;
    width: 50%;
  }
  #wrapper .flex-right {
    flex-shrink: 0;
    width: 50%;
    overflow: hidden;
  }
  .side-nav.flex-left {}
  #category-nav-pc {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  #category-nav-pc .side-nav-title {
    position: absolute;
    top: 3%;
    left: 5%;
    width: 19%;
  }
  #category-nav-pc .side-nav-season {
    position: absolute;
    top: 4%;
    right: 5%;
    width: 19%;
  }
  #category-nav-pc .side-inner {
    min-width: 100px;
      width: 50%;
  }
  #category-nav-pc .side-inner .side-nav-head {
    width: 40%;
  }
  #category-nav-pc .side-inner .side-nav-wrap {}
  #category-nav-pc .side-inner .side-nav-wrap {
    margin: 1em 0 1.6em 42%;
  }
  #category-nav-pc .side-inner .side-nav-wrap a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: none;
  }
  #category-nav-pc .side-inner .side-nav-wrap a .nav-txt {
    height: 1.4em;
  }
  #category-nav-pc .side-inner .side-nav-wrap li {
    margin: 1em 0;
    position: relative;
  }
  /* active */
  #category-nav-pc .side-inner .side-nav-wrap li.is-active {}
  #category-nav-pc .side-inner .side-nav-wrap li.is-active a {
    margin-left: -0.7em;
  }
  #category-nav-pc .side-inner .side-nav-wrap li.is-active::before {
    display: block;
    width: 1.15em;
    aspect-ratio: 100/200;
    content: '';
    background-image: url(../images/side_nav_point.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* position: absolute; */
    position: absolute;
    top: -0.6em;
    left: -2.0em;
  }
  #category-nav-pc .side-inner .side-nav-wrap li.is-active a::before, #category-nav-pc .side-inner .side-nav-wrap li.is-active a::after {
    display: block;
    width: 0.7em;
    aspect-ratio: 100/200;
    content: '';
    background-image: url(../images/thema_brackets_l.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  #category-nav-pc .side-inner .side-nav-wrap li.is-active a::after {
    background-image: url(../images/thema_brackets_r.svg);
  }
  #category-nav-pc .side-inner .side-nav-wrap li.is-active a .nav-txt {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav01 {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav01 a {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav01 a .nav-txt {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav02 {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav02 a {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav02 a .nav-txt {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav03 {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav03 a {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav03 a .nav-txt {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav04 {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav04 a {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav04 a .nav-txt {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav05 {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav05 a {}
  #category-nav-pc .side-inner .side-nav-wrap .side-nav05 a .nav-txt {}
  #category-nav-pc .side-inner .all-link {
    border: 1px solid #000;
    border-radius: 2em;
    padding: 0.6em 1.5em;
    font-size: 100%;
    margin: 0 0 0 17%;
  }
  #category-nav-pc .side-inner .all-link span {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-style: italic;
}
  /*------------------------------------

スマホコンテンツ

------------------------------------*/
  #sp-contents {}
  /*------------------------------------

導入 詩

------------------------------------*/
  #introduction {}
  #introduction p {}
  #introduction .ashirai01 {}
  #introduction .ashirai01 img {}
  #introduction .ashirai02 {}
  #introduction .ashirai02 img {}
  /*------------------------------------

アイテム一覧

------------------------------------*/
  #items-wrap {}
  /*------------------------------------

テーマ共通

------------------------------------*/
  .thema-box {}
  .thema-box img {
    width: 100%;
  }
  .thema-box .thema-inner {}
  /* テーマタイトル */
  .thema-box .thema-inner .thema-ttl {
    font-size: 158%;
    margin: 0em auto 2.5em;
    padding-left: 1em;
  }
  .thema-box .thema-inner .thema-ttl::before {
    width: 6em;
    margin: 0 0 -0.6em -1.5em;
  }
  .thema-box .thema-inner .thema-ttl::after {
    width: 2.5em;
  }
  .thema-box .thema-inner .thema-ttl .ttl-main {
    font-size: 100%;
  }
  .thema-box .thema-inner .thema-ttl .ttl-main::before, .thema-box .thema-inner .thema-ttl .ttl-main::after {
    width: 1.0em;
  }
  .thema-box .thema-inner .thema-ttl .ttl-main::after {}
  .thema-box .thema-inner .thema-ttl .ttl-main span {}
  .thema-box .thema-inner .thema-ttl .ttl-main span img {
    height: 2em !important;
  }
  /* == メイン == */
  .thema-box .thema-inner .thema-main {}
  /* メインイメージ */
  .thema-box .thema-inner .thema-main .main-image {}
  /* == サブ == */
  .thema-box .thema-inner .thema-sub {}
  /* サブイメージ */
  .thema-box .thema-inner .thema-sub img {}
  /*------------------------------------

テキスト共通

------------------------------------*/
  #items-wrap .main-txt-anime {}
  #items-wrap svg.main-txt-anime {}
  #items-wrap .thema-txt {
    font-size: 1.4em;
  }
  #items-wrap defs {}
  #items-wrap text {}
  #items-wrap text textpath {
    font-size: 1.1em;
  }
  /*------------------------------------

個別設定 thema01

------------------------------------*/
  /* 01 */
  #t01-01-wrap {}
  /* 02 */
  #t01-02-wrap {}
  /* サブ */
  #thema01.thema-box .thema-inner .thema-sub {}
  /* サブイメージ */
  #thema01.thema-box .thema-inner .thema-sub .sub-image01 {}
  /*------------------------------------

個別設定 thema02

------------------------------------*/
  /* 01 */
  #t02-01-wrap {}
  /* 02 */
  #t02-02-wrap {}
  /* サブ */
  #thema02.thema-box .thema-inner .thema-sub {}
  /* サブイメージ */
  #thema02.thema-box .thema-inner .thema-sub .sub-image01 {}
  #thema02.thema-box .thema-inner .thema-sub .sub-image02 {}
  #thema02.thema-box .thema-inner .thema-sub .sub-image03 {}
  /*------------------------------------

個別設定 thema03

------------------------------------*/
  #items-wrap #thema03.thema-box .thema-txt { /* font-size: 1.2em; */
  }
  /* 01 */
  #t03-01-wrap {}
  /* 02 */
  #t03-02-wrap {}
  #t03-03-wrap {}
  /* サブ */
  #thema03.thema-box .thema-inner .thema-sub {}
  /* サブイメージ */
  #thema03.thema-box .thema-inner .thema-sub .sub-image01 {}
  #thema03.thema-box .thema-inner .thema-sub .sub-image02 {}
  #thema03.thema-box .thema-inner .thema-sub .sub-image03 {}
  #thema03.thema-box .thema-inner .thema-sub .sub-image04 {}
  #thema03.thema-box .thema-inner .thema-sub .sub-image05 {}
  /*------------------------------------

個別設定 thema04

------------------------------------*/
  #items-wrap #thema04.thema-box .thema-txt {}
  #items-wrap #thema04.thema-box .thema-inner .thema-main .main-image {}
  /* 01 */
  #t04-01-wrap {
    margin-right: 0.8em;
  }
  #items-wrap .thema-box #t04-01-wrap .thema-txt {}
  /* 02 */
  #t04-02-wrap {}
  /* サブ */
  #thema04.thema-box .thema-inner .thema-sub {}
  /* サブイメージ */
  #thema04.thema-box .thema-inner .thema-sub .sub-image01 {}
  .copyright {}
  /*------------------------------------

個別設定 thema05

------------------------------------*/
  /* 01 */
  #t05-01-wrap {}
  #items-wrap #t05-01-wrap .thema-txt textpath {}
  /* サブ */
  #thema05.thema-box .thema-inner .thema-sub {}
  /* サブイメージ */
  #thema05.thema-box .thema-inner .thema-sub .sub-image01 {}
  /* コーデ買いキャンペーン */
  .campaign-wrap {}
  .campaign-wrap .campaign-icon {}
  .campaign-wrap .campaign-txt {}
  .campaign-wrap .campaign-txt .min-txt {}
  .campaign-wrap .campaign-txt .red-txt {}
  .campaign-wrap .campaign-txt .hosoku-txt {}
  /*------------------------------------

リンク共通

------------------------------------*/
  .link-wrap {}
  .link-wrap a {}
  .link-wrap a .link-txt {
    font-size: 90%;
}
  .link-wrap a .buy-btn {}
  /*------------------------------------

プロフィール

------------------------------------*/
  #profile {}
  #profile .prof-head {}
  #profile .prof-head .prof-sub {}
  #profile .prof-head .prof-name {}
  #profile .prof-head .prof-name .prof-main {}
  #profile .prof-head .prof-name .prof-main .min-txt {}
  #profile .prof-head .prof-name img {}
  #profile .prof-txt {
    aspect-ratio: 1 / 1;
  }
  #profile .prof-txt p {}
  #list-anchor {}
  #list-anchor::after {}
  #list-anchor a {}
  #list-anchor a img {}
  #list-anchor a span {}
}
/*===================================

SP

===================================*/
@media (max-width: 1500px) and (min-width: 769px) {
  #wrapper {
    width: 100%;
    font-size: 1.55vw;
    #items-wrap .thema-txt {
      font-size: 1.6rem;
    }
  }
}
@media (max-width: 768px) {
  #wrapper {
    width: 100%;
    font-size: 3.65vw;
  }
  #fv-hyoshi {
  min-height: 148vw;
  max-height: 166vw;
  }
}
/* 高さ */
@media (min-width: 769px) and (max-height: 800px) {
  #wrapper {
    width: 80vw;
    font-size: 1.25vw;
  }
  #items-wrap .thema-txt {
    font-size: 1.6rem;
  }
}



@media (hover: hover) {
#category-nav-pc .side-inner .all-link:hover{
  color:#FFF;
  background:#000;
}
  .link-wrap a .buy-btn,
  #category-nav-pc .side-inner .side-nav-wrap li{ transition: all 0.3s;}
.link-wrap a:hover .buy-btn{
  border-radius:0;
}
  #category-nav-pc .side-inner .side-nav-wrap li a{
    cursor:pointer;
  }
#category-nav-pc .side-inner .side-nav-wrap li:hover { transform:scale(1.1);}
  
}