@charset "UTF-8";
/*=============================================================

	Date: 2025-06-09
	CSS Document ： flufeel ハンサムルック

=============================================================*/
/*------------------------------------

ベース

------------------------------------*/
.pc {
  display: block;
}
.sp {
  display: none;
}
.bold_ct {
  font-weight: bold;
}
.fsc_gheader-wrap {
  transition: all 0.3s;
}
   
/*==================================

ルビ

==================================*/
[data-ruby] {
  position: relative;
  margin-top: 0.2em;
  display: inline-block;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  text-align: center;
  top: -0.9em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.38em;
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.spec_wrap_fl h3.spec_fl [data-ruby]::before {
  font-size: 0.42em;
}
/*------------------------------------

wrapper

------------------------------------*/
#wrapper {
  width: 100%;
  line-height: 2.0;
  letter-spacing: 0.08em;
  /* text-align: center; */
  background: #FFF;
  /* color: #2f475d; */
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* animation: fadeIn_ct 0.5s 0.8s both; */
  font-size: 1.125rem;
  /* overflow: hidden; */
}
#wrapper img {
  height: auto;
  max-width: 100%;
}
#wrapper-inner {
  margin: 0 auto;
}
#wrapper a {
  text-decoration: none;
}
/* hover */
@media (hover: hover) {
  #wrapper a {
    transition: all 0.3s;
  }
  #wrapper a:hover {
    opacity: 0.8;
  }
}
/*------------------------------------

サイド　カテゴリナビ

------------------------------------*/
.pc-side-box {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  max-width: 180px;
  height: 100vh;
  justify-content: center;
  align-items: center;
  width: 30%;
}
@media (max-width: 1000px) {
  .pc-side-box {
    display: none;
  }
}
#side-anchor { /* opacity: 0; */ /* pointer-events: none; */ /* transition: all 0.7s; */
}
#side-anchor.fixed-on {
  opacity: 1;
  pointer-events: all;
}
#side-anchor .side-inner a {
  position: relative;
  cursor: pointer;
}
#side-anchor .side-inner .side-logo {
  width: 100%;
  border-bottom: 1px solid #757575;
  padding-bottom: 1.5em;
}
#side-anchor .side-inner span {
  width: 36%;
  display: block;
  margin: 0.5em auto;
}
#side-anchor .side-inner a::after {
  display: block;
  width: 100%;
  height: .8em;
  content: '';
  transition: all .3s;
  background-image: url(../images/mv_arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
@media (hover: hover) {
  #side-anchor .side-inner a:hover::after {
    transform: translateY(.3em);
  }
}
#side-nav {
  order: 1;
}
#category-nav-pc {
  width: 100%;
  max-width: 180px;
}
#category-nav-pc .side-inner .side-logo {
  display: block;
  width: 100%;
  margin: 0 auto 1em;
}
#category-nav-pc .side-inner .side-nav-wrap {
  list-style: none;
  padding: 1em 0em;
  border-top: 1px solid #757575;
  border-bottom: 1px solid #757575;
}
#category-nav-pc .side-inner .side-nav-wrap li.nav-archive {
  font-size: 85%;
  line-height: 1.4;
}
#category-nav-pc .side-inner .side-nav-wrap li a {
  display: block;
  padding: .7em 0 0.1em;
  cursor: pointer;
}
#category-nav-pc .side-inner .side-nav-wrap li a .main-ttl {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
#category-nav-pc .side-inner .side-nav-wrap li a .main-ttl img {
  width: 100%;
}
#category-nav-pc .side-inner li .sub-ttl {
  margin-left: 2.5em;
  display: block;
}
#category-nav-pc .side-inner li .sub-ttl a {
  font-family: "ヒラギノ角ゴ W2 JIS2004";
  font-size: 70%;
  padding: 0.2em 0;
}
#category-nav-pc .side-inner .side-nav-wrap li a .nav-ttl-wrap {
  position: relative;
  display: flex;
  transition: all .3s;
  justify-content: flex-start;
  align-items: center;
  gap: .5em;
}
#category-nav-pc .side-inner .side-nav-wrap li a.current .nav-ttl-wrap {
  transform: translateX(-.4em);
}
#category-nav-pc .side-inner .side-nav-wrap li a .nav-ttl-wrap::before {
  display: block;
  width: 1.9em;
  height: 1em;
  content: '';
  opacity: 0;
  border-radius: 50%;
  background: url(../images/sidenav_arrow.svg) no-repeat center;
  background-size: contain;
}
@media (hover: hover) {
  #category-nav-pc .side-inner .side-nav-wrap li a.current {}
  #category-nav-pc .side-inner .side-nav-wrap li a:hover {
    opacity: 0.6;
  }
  #category-nav-pc .side-inner .side-nav-wrap li a.current .nav-ttl-wrap::before {
    opacity: 1;
  }
}
/*------------------------------------

タイトル

------------------------------------*/
/* swiper */
#mv-slide {
  overflow: inherit;
}
#mv-slide .swiper-wrapper {}
/*  */
#mv-slide .swiper-wrapper .swiper-slide {}
#mv-slide .swiper-wrapper .swiper-slide .slide-block {
  /*aspect-ratio: 100/90;*/
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mv-slide .swiper-wrapper .swiper-slide .slide-block a {
  /* position: absolute;*/
  display: block;
}
#mv-slide .swiper-wrapper .swiper-slide .slide-block span {}
#mv-slide .swiper-wrapper .swiper-slide a img {
  width: 100%;
}
/*  */
#mv-slide .swiper-wrapper .swiper-slide .mv02 {
  width: 72.19%;
}
#mv-slide .swiper-wrapper .swiper-slide span {
  width: 37.81%;
}
#mv-slide .swiper-wrapper .swiper-slide .mv03 {
  width: 100%;
}
#mv-slide .swiper-wrapper .swiper-slide .mv04 {
  width: 100%;
}
#mv-slide.swiper .swiper-slide-none {
  opacity: 0;
}
#mv-slide.swiper.swiper-initialized .swiper-slide-none {
  opacity: 1;
}
.swiper-wrapper .swiper-slide.swiper-slide-visible .slide-block .mv01 {
  animation: anime-zoom 0.7s 0s both;
}
.swiper-wrapper .swiper-slide.swiper-slide-visible .slide-block .mv02 {
  animation: anime-right 0.7s 0s both;
}
.swiper-wrapper .swiper-slide.swiper-slide-visible .slide-block .mv03 {
  animation: anime-top 0.7s 0s both;
}
.swiper-wrapper .swiper-slide.swiper-slide-visible .slide-block .mv04 {
  animation: anime-bottom 0.7s 0s both;
}
@keyframes anime-zoom {
  0% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1.0);
  }
}
@keyframes anime-right {
  0% {
    transform: translateX(-4%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes anime-top {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes anime-bottom {
  0% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(0);
  }
}
#title .titleinner .title-txt {
  position: absolute;
  top: 8%;
  left: 24.4%;
  width: 49.6%;
  font-size: 100%;
  z-index: 1;
}
#title .titleinner .title-txt .ttl-main {
  transform: translate3d(0, 0, 0) scale(1);
  /* filter: blur(1.0rem);
  animation: ttl-bokashi 2.0s -1.5s both;*/
}
@keyframes ttl-bokashi {
  0% {
    filter: blur(1.0rem);
  }
  100% {
    filter: blur(0);
  }
}
/*------------------------------------

ロゴ

------------------------------------*/
#title .titleinner .title-txt .ttl-main img {
  width: 100%;
}
#wrapper-inner .main-logo {
  /* margin: 0em auto 0em; */
  width: 100%;
  font-size: 190%;
  /* max-width: 700px; */
  position: absolute;
  bottom: 3%;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
#wrapper-inner .main-logo .logo-img {
  width: 63%;
  margin: 0 auto;
}
#wrapper-inner .main-logo .logo-img img {
  width: 100%;
}
#wrapper-inner .scroll-arrow {
  width: 9%;
  margin: 0.2em auto 0;
}
#wrapper-inner .scroll-arrow img {
  animation: down_pop 2.7s infinite;
  margin: 1em auto;
  display: block;
}
@keyframes down_pop {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(0.7em);
  }
  100% {
    transform: translateY(0px);
  }
}
/*------------------------------------

ナビ

------------------------------------*/
#nav-wrap {
    opacity: 0;
    animation: fadeIn_ct 1.0s 1s both;
}
#nav-wrap p {
  text-align: center;
  line-height: 1.5;
  margin: 3em 0 1em;
  color: #808080;
  font-family: "見出ゴMB1";
}
#nav-wrap .nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  gap: 0.9em 3%;
}
#nav-wrap .nav-list li {
  position: relative;
  width: 30%;
  overflow: hidden;
}
#nav-wrap .nav-list li a {
  display: block;
}
#nav-wrap .nav-list li a img {
  width: 100%;
}
#nav-wrap .nav-list li a .nav-image {}
#nav-wrap .nav-list li a .nav-on {
  position: absolute;
  top: 0;
  left: 0;
}
#nav-wrap .nav-list li::after {
  display: block;
  width: 13%;
  aspect-ratio: 1/1;
  content: '';
  background-color: rgba(0, 0, 0, 0.4);
  background-image: url(../images/nav_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media (hover: hover) {
  #nav-wrap .nav-list li a:hover {
    transform: scale(1.05)
  }
}
#nav-wrap .nav-list li a .nav-on {
  animation: nav-image-switch 18.0s infinite;
}
#nav-wrap .nav-list li:nth-child(1) a .nav-on {
  animation-delay: 0s;
}
#nav-wrap .nav-list li:nth-child(2) a .nav-on {
  animation-delay: -4.5s;
}
#nav-wrap .nav-list li:nth-child(3) a .nav-on {
  animation-delay: -3s;
}
#nav-wrap .nav-list li:nth-child(4) a .nav-on {
  animation-delay: -7.5s;
}
#nav-wrap .nav-list li:nth-child(5) a .nav-on {
  animation-delay: -1.5s;
}
#nav-wrap .nav-list li:nth-child(6) a .nav-on {
  animation-delay: -6s;
}
@keyframes nav-image-switch {
  0%, 50%, 100% {
    opacity: 1;
  }
  50.1%, 99.9% {
    opacity: 0;
  }
}
/*==================================

購入ボタン

==================================*/
.buy_btn {
  color: #FFF;
  position: relative;
  background: #000;
  padding: 0.1em 2.0em;
  border-radius: 3em;
  border: 1px solid #000;
  display: inline-block;
  font-size: 71%;
  line-height: 2;
  transition: all 0.3s;
  letter-spacing: 0.15em;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}
.spec_wrap_fl .buy_btn::before {
  display: block;
  width: 0.4em;
  height: 100%;
  content: '';
  background: #FFF;
  position: absolute;
  top: 0;
  left: -0.5em;
  transition: all 0.3s;
}
.buy_btn::after {
  display: block;
  width: 0.4em;
  height: 100%;
  content: '';
  background-image: url("../images/btn_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.4em;
  position: absolute;
  top: 0;
  right: 0.7em;
  transition: all 0.3s;
}
a:hover .buy_btn::after {
  right: 0.5em;
}
/*==================================

アイテム一覧

==================================*/
#items_fl {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;
  width: 94%;
  margin: 0 auto;
}
#lineup {
  width: 100%;
  max-width: 640px;
  margin: 0 0;
}
#main_wrap_fl a {
  text-decoration: none;
  display: block;
}
#items_fl a:nth-child(2) {}
/**** 各商品 ****/
.item_fl {
  margin: 7em auto 8em;
  position: relative;
}
.item_main {
  position: relative;
  /* overflow: hidden; */
  margin-bottom: 2em;
}
.item_main a {
  display: block;
}
/**** メイン画像 ****/
.item_main .model_fl {
  display: block;
  position: relative;
  overflow: hidden;
}
.item_main .model_fl img {
  width: 100%;
  transition: all 0.8s;
}
.item_main .model_fl h2 {
  position: absolute;
  left: 5%;
  bottom: 2em;
  line-height: 1.5;
  font-weight: bold;
  color: #FFF;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2));
  font-family: "見出ゴMB1";
  font-size: 150%;
  letter-spacing: 0.08em;
}
.item_main .model_fl .icon-new {
  width: 18%;
  position: absolute;
  left: 0;
  top: 0;
}
.item_main .buy_btn {
  position: absolute;
  left: 5%;
  bottom: 1.4em;
  background: none !important;
  border: 1px solid #FFF;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2));
  font-size: 78%;
}
/**** サブ画像 ****/
#items_fl .sub-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;
}
#items_fl .item_sub {}
#items_fl .item_sub img {}
#items_fl .item_sub.loop-anime {
  position: relative;
}
#items_fl .item_sub.loop-anime span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
}
#items_fl .item_sub.loop-anime span img {
  max-width: none;
}
/* スライドで出てくる */
#items_fl .w200, #items_fl .w200 img {
  width: 200px;
  max-width: none;
  display: block;
}
#items_fl .w250, #items_fl .w250 img {
  width: 250px;
  max-width: none;
  display: block;
}
#items_fl .w370, #items_fl .w370 img {
  width: 370px;
  max-width: none;
  display: block;
}
#items_fl .w200, #items_fl .w200 img {
  width: 200px;
  max-width: none;
  display: block;
}
#items_fl .slide-anime {}
#items_fl .slide-anime {
  display: block;
  width: 0;
  overflow: hidden;
}
#items_fl .slide-anime.on-fl {
  animation: width0-100 1.2s forwards 0s;
}
@keyframes width0-100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/* 繰り返し */
#items_fl .loop-anime.w200, #items_fl .loop-anime.w200 img {
  aspect-ratio: 1/1;
}
#items_fl .loop-anime.w250, #items_fl .loop-anime.w250 img {
  /* aspect-ratio: 25/35;*/ aspect-ratio: 1/1;
}
#items_fl .item_sub.loop-anime span:nth-child(2) {
  width: 0%;
}
#items_fl .item_sub.loop-anime.on-fl span:nth-child(2) {
  animation: width-loop 6s 3s infinite;
}
@keyframes width-loop {
  0% {
    width: 0;
  }
  20%, 50% {
    width: 100%;
  }
  70%, 100% {
    width: 0%;
  }
}
/**** あしらい英字 ****/
#items_fl .item_ashirai {
  color: #b2b2b2;
  line-height: 1.3;
  position: absolute;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 117%;
  mix-blend-mode: multiply;
}
/**** 回遊バナー ****/
#items_fl .feature-list-fl {
  display: flex;
  width: 77%;
  max-width: 900px;
  margin: 1.6em auto 0;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4em 0;
}
#items_fl .feature-list-fl a {
  position: relative;
  width: 100%;
  margin: 0 .96rem 0;
  padding: 0.6em 1em;
  transition: all .3s;
  text-align: center;
  border: 1px solid #000;
  border-radius: 5rem;
  box-shadow: 0em 0.1em 0 #000;
  font-family: "A1明朝 M JIS2004 AP", "A1明朝", serif;
  font-size: 113%;
  letter-spacing: 0.1em;
  background: #FFF;
}
#items_fl .feature-list-fl a::after {
  position: absolute;
  top: 0;
  right: 1.2em;
  display: block;
  width: 0.6em;
  height: 100%;
  content: '';
  transition: all .3s;
  background-image: url('../images/bnr_arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#items_fl .feature-list-fl a img {
  width: 72%;
}
#items_fl .feature-list-fl a .min-txt {
  font-size: 80%;
}
@media (hover: hover) {
  .feature-list-fl a:hover {
    transform: translate3d(4px, 4px, 0);
    box-shadow: 0 0 0 #000;
  }
  .feature-list-fl a:hover::after {
    transform: translateX(5px);
  }
}
@media (max-width: 768px) {
  .feature-list-fl {}
  .feature-list-fl a {
    width: 75%;
    margin: 0 .96rem 1.55rem;
  }
  .feature-list-fl a::after {
    width: 1.05rem;
  }
  .feature-list-fl a img {}
}
/*==================================

個別設定

==================================*/
.lineup-sub-ttl {
  /* position: absolute; */
  /* z-index: 1; */
  /* mix-blend-mode: multiply; */
}
.lineup-sub-ttl img {
  width: 100%;
}
#c01_fl {
  margin-top: 5em;
}
#c01_fl .lineup-sub-ttl {
  /* top: -7%; */
  /* right: 0; */
  width: 60%;
  margin: 0 auto 1.7em;
}
#c01_fl .item_main {
  margin-bottom: 2.5em;
}
#c01_fl .spec_wrap_fl a .spec-txt {
  width: 70%;
}
#c01_fl .model_fl {
  width: 70%;
  margin-right: 30%;
}
#c01_fl #c01-sub01 {
  position: absolute;
  top: 34%;
  right: 0%;
}
#c01_fl .sub-box {
  margin: 2.5em auto 0;
}
#c01_fl #c01-ashirai.item_ashirai {
  top: 25%;
  right: 7%;
}
#c01_fl .spec_wrap_fl {
  width: 90%;
}
#c02_fl {}
#c02_fl .lineup-sub-ttl {
  top: -5.6%;
  left: 0%;
  width: 14%;
}
#c02_fl .spec_wrap_fl a .spec-txt {
  /* width: 70%; */
}
#c02_fl .item_main .model_fl .icon-new {
  /* left: auto; */
  /* right: 0; */
}
#c02_fl .model_fl {
  width: 70%;
  margin-left: 30%;
}
#c02_fl #c02-sub01 {
  position: absolute;
  top: 33%;
  left: 0%;
}
#c02_fl #c02-ashirai.item_ashirai {
  top: 28.0%;
  left: 10%;
}
#c02_fl .sub-box {
  margin: 3em auto 3em;
}
#c03_fl {}
#c03_fl .model_fl {
  width: 70%;
  margin-right: 30%;
}
#c03_fl #c03-sub01 {
  position: absolute;
  top: 17%;
  right: 1%;
}
#c03_fl .sub-box {
  margin: 2.5em auto 0;
}
#c03_fl #c03-ashirai.item_ashirai {
  top: 13.5%;
  left: 72%;
}
#c03_fl .logo-link {
  position: absolute;
  width: 30%;
  top: 68%;
  left: 61%;
}
#c04_fl {}
#c04_fl .model_fl {
  width: 70%;
  margin-left: 30%;
}
#c04_fl .item_main .model_fl .icon-new {
  /* left: auto; */
  /* right: 0; */
}
#c04_fl #c04-sub01 {
  position: absolute;
  top: 19%;
  left: 0%;
}
#c04_fl .sub-box {
  margin: 2.5em auto 0;
}
#c04_fl #c04-ashirai.item_ashirai {
  top: 12%;
  left: 5%;
}
#c04_fl #c04-sub02 {
  margin-left: 45%;
}
#c04_fl .icon-kinou {
  position: absolute;
  width: 18%;
  top: 2.5%;
  right: 4%;
}
#c04_fl .logo-link {
  position: absolute;
  width: 30%;
  top: 83%;
  left: 16%;
}
#c05_fl .lineup-sub-ttl {
  width: 40%;
  margin: 0 auto 1.7em;
}
#c05_fl .model_fl {
  width: 70%;
  margin-right: 30%;
}
#c05_fl #c05-sub01 {
  position: absolute;
  top: 19%;
  right: 4%;
}
#c05_fl .sub-box {
  margin: 1.2em auto 0;
}
#c05_fl #c05-sub02 {
  width: 66%;
}
#c06_fl .sub-box {
  margin: 3em auto 0;
}
#c07_fl {
  margin-bottom: 3.5em;
}
#c07_fl .model_fl {
  width: 70%;
  margin-left: 30%;
}
#c07_fl #c07-sub01 {
  position: absolute;
  top: 12%;
  left: 0%;
}
#c07_fl .sub-box {
  margin: 2.5em auto 0;
}
#c08_fl {
  margin-bottom: 2em;
}
#c08_fl .model_fl {
  width: 70%;
  margin-right: 30%;
}
#c08_fl #c08-sub01 {
  position: absolute;
  top: 15%;
  right: 0%;
}
#c08_fl .sub-box {
  margin: 2.5em auto 0;
}
#c08_fl .item_main .buy_btn {
  border-color: #000;
  color: #000;
  filter: none;
}
#c08_fl .model_fl .buy_btn::after {
  background: url("../images/btn_arrow_b.svg") no-repeat center;
}
#c08_fl .item_main .model_fl h2 {
  color: #000;
  filter: none;
}
/*==================================

商品リンク

==================================*/
.spec_wrap_fl {
  width: 80%;
  margin: 2em auto 0;
}
.spec_wrap_fl a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4%;
  width: 100%;
}
.spec_wrap_fl a .spec-img {
  position: relative;
  width: 39%;
}
.spec_wrap_fl a .spec-img img {}
.spec_wrap_fl a .spec-img img.icon-new {
  width: 35%;
  position: absolute;
  left: 0;
  top: 0;
}
.spec_wrap_fl a .spec-txt {
  width: 100%;
}
.spec_wrap_fl h3.spec_fl {
  font-size: 105%;
  line-height: 1.4;
}
.spec_wrap_fl h3.spec_fl .name_fl {
  font-family: "A1明朝 M JIS2004 AP", "A1明朝", serif;
  font-size: 105%;
  letter-spacing: 0.1em;
}
.buy_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto 0.5em;
}
.buy_wrap::before {
  display: block;
  width: 77%;
  height: 0;
  content: '';
  position: absolute;
  border-bottom: 1px solid #d9d9d9;
  right: 0;
  top: 50%;
}
.buy_text {
  background: #FFF;
  position: relative;
  padding-right: 0.5em;
  color: #808080;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}
.size_fl {
  margin-right: 1em;
}
.price_fl {}
.spec_wrap_fl a:hover .buy_btn {
  color: #000;
  background: #FFF;
}
.spec_wrap_fl a:hover .buy_btn::after {
  background-size: contain;
  background: url("../images/btn_arrow_b.svg") no-repeat center;
}
/*==================================

アーカイブ

==================================*/
#archive {
  margin: 5em auto 5em;
}
/*スクロール*/
.header-scroll_ffn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 1em;
  margin: 0 0 0.5em 0.9em;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  /*font-style: italic;*/
  /* width: 100%; */
}
/* スクロール表示位置 */
.scroll-horizontal {
  position: relative;
}
/* アニメーション線 */
.scroll-horizontal {
  content: "";
  /*transform: translateX(-50%);*/
  width: 30%;
  height: 1px;
  display: block;
  background-color: #000;
}
.scroll-horizontal::after {
  content: "";
  /*transform: translateX(-50%);*/
  width: 100%;
  height: 1px;
  background-color: #000;
  animation: scroll-horizontal 3s infinite;
  position: absolute;
  top: 0;
  left: 0;
}
.scroll-horizontal::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #FFF;
  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;
  }
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide.archive-cover {
  margin-left: 0.8em;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide.archive-cover img {}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide.archive-cover .cover-txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide.archive-cover .cover-txt img {
  width: 73%;
  margin-top: 1.5em;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide {
  position: relative;
  width: 55%;
  margin-right: 5%;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide a {
  display: block;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide a::after {
  display: block;
  width: 10%;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/archive_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 1%;
  right: 3%;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide img {
  width: 100%;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide .archive-spec {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 80%;
  width: 100%;
  z-index: 2;
}
.swiper.pickup-carousel .swiper-wrapper .swiper-slide .archive-spec .spec_wrap_fl .spec-txt .buy_wrap .buy_text {
  background: none;
}
/* spec */
.swiper.pickup-carousel .swiper-wrapper .swiper-slide .archive-spec .spec_wrap_fl {
  width: 100%;
  margin: 0;
  padding: 0.5em 1em;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: all 0.3s;
  z-index: 2;
}
.swiper.pickup-carousel .spec_wrap_fl .buy_btn::before, .swiper.pickup-carousel .buy_wrap::before {
  display: none;
}
@media (hover: hover) {
  .swiper.pickup-carousel .swiper-wrapper .swiper-slide a:hover .archive-spec .spec_wrap_fl {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .pickup-carousel .swiper-wrapper {
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  .pickup-carousel .swiper-slide {
    flex: 0 0 auto;
    width: 80%; /* お好みで */
  }
  /* スクロールバーを非表示（任意） */
  .pickup-carousel .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }
  /*.swiper.pickup-carousel .swiper-wrapper .swiper-slide a:active .archive-spec .spec_wrap_fl {
    opacity: 1;
  }*/
/* センターのアイテムのテキスト表示 */    
.swiper.pickup-carousel .swiper-wrapper .swiper-slide.is-center .archive-spec .spec_wrap_fl {
    opacity: 1;
}
    
}
/*==================================

アニメーション

==================================*/
.logo-fl.anime-fl {
  opacity: 0;
}
.fade_fl {
  opacity: 0;
}
.fade_fl.fadeIn_fl {
  animation: fade_fl 1.0s forwards 0s;
}
.logo-fl.anime-fl.on-fl {
  animation: fadeIn_fl 1.0s forwards 0.5s;
}
@keyframes fade_fl {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn_fl {
  0% {
    transform: translateY(25px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeInR_fl {
  0% {
    transform: translateY(-25px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
.item_fl.fadeIn_fl .model_fl img {
  /* animation: fadezoom 1.5s forwards 0.0s; */
}
.model_fl {
  transition: all 0.7s;
}
/*------------------------------------

フラットブラ

------------------------------------*/
#flat {
  position: relative;
  padding: 3em 0 1em;
}
#flat .buy_text, #flat .spec_wrap_fl .buy_btn::before {
  background: #F1F3FA;
}
#flat .spec_wrap_fl .buy_btn {
  background: #6E3E73;
  border: 1px solid #6E3E73;
}
#flat .spec_wrap_fl a:hover .buy_btn {
  color: #6E3E73;
  background: #FFF;
}
#flat::before {
  display: block;
  width: 100%;
  height: calc(100% - 11em);
  content: '';
  background: #F1F3FA;
  position: absolute;
  top: 11em;
  left: 0;
}
#flat .flatinner {
  position: relative;
  z-index: 1;
}
/* swiper */
#flat-slide {
  margin-bottom: 1.5em;
}
#flat-slide .swiper-wrapper {}
/*  */
#flat-slide .swiper-wrapper .swiper-slide {}
#flat-slide .swiper-wrapper .swiper-slide .slide-block {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6%;
}
#flat-slide .swiper-wrapper .swiper-slide .slide-block a {
  width: 47%;
}
#flat-slide .swiper-wrapper .swiper-slide .slide-block img {
  width: 100%;
}
#flat-slide .swiper-wrapper .swiper-slide .flat01 {
  margin-top: 8%;
}
#flat-slide .swiper-wrapper .swiper-slide .flat02 {}
/*  */
#flat-slide .swiper-wrapper .swiper-slide .flat03 {}
#flat-slide .swiper-wrapper .swiper-slide .flat04 {
  margin-top: 8%;
}
/*  */
#flat-slide .swiper-wrapper .swiper-slide .flat05 {
  margin-top: 8%;
}
#flat-slide .swiper-wrapper .swiper-slide .flat06 {}
#flat .flatinner .flat-txt { /* position: absolute; */ width: 100%; /* left: 0; */ /* top: 101%; */ /* z-index: 1; */ position: relative;
  z-index: 1;
}
#flat .flatinner .flat-txt .flat-main {
  width: 36%;
  margin: -9% auto 0;
}
#flat .flatinner .flat-txt .flat-main img {}
#wrapper-inner .lineup-ba-wrap {
  margin: 3em 0 0;
  position: relative;
}
#wrapper-inner .lineup-ba {
  background-image: url(../images/ba_photo.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 80%;
  aspect-ratio: 1/0.5;
  border-radius: 4.2rem;
  margin: 0 auto;
  position: relative;
}
#wrapper-inner .lineup-ba-wrap .lineup-ba .point {
  clip-path: inset(0 0 0 0);
  position: absolute;
  top: 23%;
  left: 5%;
  width: 13%;
}
#wrapper-inner .lineup-ba-wrap.on-fl .lineup-ba .point {
  animation: pointInfinite_ct 3.0s 0.3s infinite;
}
#wrapper-inner .lineup-ba div {}
#wrapper-inner .lineup-ba .ba-before .point {
  position: absolute;
  left: 2%;
}
#wrapper-inner .lineup-ba .ba-before p {}
#wrapper-inner .lineup-ba .ba-after {}
#wrapper-inner .lineup-ba .ba-after .point {
  position: absolute;
  left: 55.5%;
}
@keyframes pointInfinite_ct {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  10% {
    clip-path: inset(0 0 100% 0);
  }
  60%, 100% {
    clip-path: inset(0 0 0 0);
  }
}
#wrapper-inner .ba-txt {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 67%;
  margin: 0.1em auto;
}
#wrapper-inner .ba-txt p {
  margin: 0;
}
#wrapper-inner .note {
  /* color: #000; */
  text-align: center;
  font-size: 80%;
  margin: 0.3em 0 0;
}
/*------------------------------------

サイドナビ

------------------------------------*/
#side-item {
  position: fixed;
  top: 12px;
  left: 10px;
  height: 100%;
  mix-blend-mode: multiply;
  z-index: 2;
  display: none;
}
#side-item .side-item-inner {
  width: 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  height: calc(100% - 30px);
}
#side-item .side-logo {
  position: relative;
  transition: all 0.3s;
}
#side-item .side-logo img {
  background: #FFF;
}
#side-item .side-nav {
  display: block;
}
#side-item .side-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 0 1em;
  color: #1a4775;
  text-decoration: none;
  cursor: pointer;
}
#side-item .side-nav a span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: start;
  line-height: 1.3;
  letter-spacing: 0.05em;
  font-feature-settings: 'vert'on;
  display: block;
  font-family: "秀英にじみ明朝 L", serif;
}
#side-item .side-nav a::before {
  display: block;
  width: 0.4em;
  aspect-ratio: 1/1;
  content: '';
  border: 1px solid #1a4775;
  border-radius: 50%;
  margin: 0 auto 0.3em;
}
#side-item .side-nav a.is-current::before {
  background: #1a4775;
}
@media (hover: hover) {
  /* #category-nav-pc .side-inner .side-nav-wrap li a:hover {
				transform: translateX(-0.3em);
		} */
  #side-item .side-nav a:hover::before {
    background: #1a4775;
  }
}
@media (hover: hover) {
  a:hover .model_fl:not(.special-model) img {
    transform: scale(1.06);
  }
}
/*------------------------------------

アニメーション

------------------------------------*/
.fade-item {
  opacity: 0;
}
.fade_ct {
  animation: fadeInBottom_ct 1s 0.0s both;
}
@keyframes fadeIn_ct {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInBottom_ct {
  0% {
    transform: translateY(1em);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeInLeft_ct {
  0% {
    transform: translateX(1em);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeInRight_ct {
  0% {
    transform: translateX(-1em);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/*===================================

1000px以下

===================================*/
@media (max-width: 920px) {}
/*===================================

880px以下

===================================*/
@media (max-width: 880px) {}
/*===================================

スマホ

===================================*/
@media (max-width: 768px) {
  #side-nav {
    display: none;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  #sp-contents {
    width: 100%;
  }
  #wrapper {
    font-size: 3.1vw;
    overflow: hidden;
  }
    
  #wrapper-inner .main-logo {
    bottom: 4%;
  }
  #wrapper-inner .main-logo .logo-img {
    width: 73%;
    margin: 0 auto;
  }
  /*------------------------------------

アイテム

------------------------------------*/
  #items_fl {
    width: 100%;
  }
  /* スライドで出てくる */
  #items_fl .w200, #items_fl .w200 img {
    width: 30vw;
    max-width: none;
    display: block;
  }
  #items_fl .w250, #items_fl .w250 img {
    width: 39vw;
    max-width: none;
    display: block;
  }
  #c06_fl .sub-box p {
    width: 39vw;
  }
  #items_fl .w370, #items_fl .w370 img {
    width: 60vw;
  }
  #items_fl .w200, #items_fl .w200 img {}
}