@charset "UTF-8";

/* ------------------------------------------------------------
カテゴリページ・商品ページ
------------------------------------------------------------ */
#fabulous1m {
  overflow-x: hidden;
}
.fv {
    position: relative;
}
.fv_logo{
  width: 58%;
  position: absolute;
  top: 61%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.fv_lens_list {
  display: flex;
  position: absolute;
  top: 79%;
  left: 0;
  right: 0;
  margin: auto;
  list-style: none;
}
.fv_lens_list_item{
  position: absolute;
}
.fv_lens_list_item:first-child{
  left: 3.8%;
  width: 19.7%;
  z-index: 3;
}
.fv_lens_list_item:nth-child(2){
  left: 21.9%;
  width: 19.7%;
  z-index: 2;
}
.fv_lens_list_item:nth-child(3){
  right: 4%;
  width: 54.7%;
  z-index: 1;
}
.release{
  position: relative;
}
.release_main {
  position: absolute;
  top: 22.5%;
  left: 10%;
  width: 80%;
}
.release_sub01{
  position: absolute;
  top: 45%;
  right: 1.2%;
  width: 48.7%;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.release_sub02{
  position: absolute;
  top: 68%;
  left: 13%;
  width: 41.3%;
  opacity: 0;
}
.release_list{
  list-style: none;
}
.release_list_item{
  position: absolute;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
/* 大ハート（anime）にactiveが付いたら連動表示 */
.release_main.active ~ .release_sub01 {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s;
}
.release_main.active ~ .release_sub02 {
  opacity: 1;
  transition-delay: 0.1s;
  animation-delay: 0.6s;
}
/* 表示時：ふわっと登場 → 継続的にぽこぽこ動く */
.release_main.active ~ .release_list .release_list_item {
  opacity: 1;
  transform: scale(1);
  animation: popPop 1.5s ease-in-out infinite;
  transition-delay: 0.5s;
}
/* 各アイテムに遅延をつける（ふわっと順番に） */
.release_list_item.heart01 { transition-delay: 0.1s; animation-delay: 0.6s; }
.release_list_item.heart02 { transition-delay: 0.15s; animation-delay: 0.7s; }
.release_list_item.heart03 { transition-delay: 0.2s; animation-delay: 0.8s; }
.release_list_item.heart04 { transition-delay: 0.25s; animation-delay: 0.9s; }
.release_list_item.heart05 { transition-delay: 0.3s; animation-delay: 1s; }

/* ポコポコかわいい動き */
@keyframes popPop {
  0%, 100% { transform: scale(.9); }
  50%      { transform: scale(1.2); }
}

.release_sub01 {
  transition-delay: 0.2s;
}

.release_list_item.heart01{
  top: 26%;
  left: 15.5%;
  width: 2.45%;
}
.release_list_item.heart02{
  top: 31%;
  left: 7%;
  width: 4.9%;
}
.release_list_item.heart03{
  top: 36%;
  right: 9%;
  width: 1.96%;
}
.release_list_item.heart04{
  top: 40%;
  right: 15%;
  width: 3.22%;
}
.release_list_item.heart05{
  top: 82%;
  left: 13%;
  width: 2.8%;
}

.new{
  background-color: #f6c8dd;
  position: relative;
  padding-top: 6%;
}
.new::after {
  content: "";
  display: block;
  min-height: 1100px;
}
@media screen and (max-width: 480px) {
  .new::after {
    min-height: 182vw;
  }
}
.new_title{
  margin: 0 auto 4.5%;
  width: 47.4%;
}
.new_text {
  width: 82.6%;
  margin: 0 auto 8%;
  position: relative;
}
.new_image {
  position: absolute;
  width: 28.2%;
  top: 34%;
  left: 44.3%;
}
.new_lab_name{
  position: absolute;
  width: 33.2%;
  right: 9.7%;
  top: 22%;
}
.new_lab_image{
  position: absolute;
  width: 51.6%;
  left: 2.9%;
  top: 21%;
}
.new_lab_wear{
  width: 47.6%;
  position: absolute;
  right: 4.2%;
  top: 35.4%;
}
.new_lab_lens{
  position: absolute;
  left: 5.3%;
  width: 36.5%;
  top: 47.5%;
}
.new_lab_text{
  position: absolute;
  right: 0;
  width: 57.9%;
  top: 44%;
}

.new_bb_name{
  position: absolute;
  width: 42.6%;
  left: 5.3%;
  top: 60.5%;
}
.new_bb_image{
  position: absolute;
  right: 2.4%;
  width: 51.6%;
  top: 59%;
}
.new_bb_wear{
  width: 47.6%;
  position: absolute;
  left: 4.1%;
  top: 74%;
}
.new_bb_lens{
  width: 36.5%;
  position: absolute;
  right: 5.2%;
  top: 85.8%;
}
.new_bb_text{
  position: absolute;
  left: 0;
  width: 57.9%;
  top: 84.6%;
}

.lineup {
  position: relative;
}
.lineup_wrap{
  background-image: url(/images/pc/type/se_fabulous1m/bg_lineup_top.webp),url(/images/pc/type/se_fabulous1m/bg_lineup_bottom.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center, bottom center;
  padding: 5% 0 12%;
}
.lineup_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 9.6%;
  list-style: none;
}
.lineup_list_item {
  width: 31.3%;
  position: relative;
  margin-bottom: 18px;
  list-style: none;
}
.lineup_list_item:first-child,
.lineup_list_item:nth-child(2) {
  width: 48%;
}

.lineup_list_item:last-child {
  width: 60%;
  margin-top: 3%;
}
.lineup_list_item a{
  text-decoration: none;
}
.lineup_lens {
  position: absolute;
  top: 60%;
  left: -14%;
  width: 48%;
}
.lineup_list_item:first-child .lineup_lens,
.lineup_list_item:nth-child(2) .lineup_lens{
  top: 60%;
  left: -9%;
  width: 37%;
}

.lineup_SubTitle{
  color: #c80f32;
  font-size: 0.9rem;
  letter-spacing: 3px;
  margin-top: 8px;
  padding-left: 30%;
  text-align: left;
}
@media screen and (max-width: 480px) {
  .lineup_SubTitle{
    font-size: 1.6vw;
    letter-spacing: 2px;
    margin-top: 4px;
  }
}
.lineup_list_item:first-child .lineup_SubTitle,
.lineup_list_item:nth-child(2) .lineup_SubTitle{
  font-size: 1.4rem;
  padding-left: 25%;
}
@media screen and (max-width: 480px) {
  .lineup_list_item:first-child .lineup_SubTitle,
  .lineup_list_item:nth-child(2) .lineup_SubTitle{
    font-size: 2.4vw;
  }
}
.lineup_list_new{
  position: absolute;
  top: -5%;
  left: -5%;
  width: 26.83%;
}
.lineup_list_limited{
  position: absolute;
  top: -5%;
  left: -5%;
  width: 38.37%;
}
.campaign {
  position: relative;
}
.campaign_main {
  position: absolute;
  top: 17.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 86%;
  z-index: 2;
}
.campaign_frame {
  position: absolute;
  top: 19%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 82.2%;
}
.campaign_btn{
  position: absolute;
  top: 79.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 97.2%;
}

.about{
  background-color: #f5c8dd;
  position: relative;
  padding-top: 40%;
}
.about_title{
  position: absolute;
  top: 3.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 42%;
}
.about_image{
  position: relative;
}
.about_lens{
  position: absolute;
  top: 46%;
  left: 8%;
  width: 43.8%;
}
.about_text{
  position: absolute;
  top: 48%;
  right: 10%;
  width: 38.5%;
}

.color_list_item {
  position: relative;
  list-style: none;
}
.color_list_wrap{
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 86%;
}
.color_list.color_limited{
  background-color: #c80f31;
  padding-bottom: 5%;
}
.color_list.color_limited .color_list_item:first-child .color_list_wrap{
  top: 41%;
}

.color_lens{
  position: relative;
  margin-right: -7%;
}
.color_lens::before {
  content: "";
  position: absolute;
  top: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 34%;
  height: 12%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  filter: blur(10px);
  transform: translateY(10px);
  mix-blend-mode: multiply;
  z-index: -1;
  pointer-events: none;
}
.color_name{
  font-size: 1.2rem;
  color: #c80f32;
  text-align: center;
  position: absolute;
  font-weight: 700;
  left: 0;
  right: 0;
  top: 6%;
  letter-spacing: 5px;
}
@media screen and (max-width: 480px) {
  .color_name{
    font-size: 2.2vw;
  }
}
.color_list.color_limited .color_name{
  color: #f6c8dd;
  top: 6%;
}
.color_list.color_limited .color_list_item:first-child .color_name{
  top: 17%;
}
.color_text{
  color: #c80f32;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  line-height: 1.6;
  margin: 0 auto;
  letter-spacing: 3px;
}
@media screen and (max-width: 480px) {
  .color_text{
    font-size: 3.73vw;
    line-height: 1.4;
  }
}
.color_list.color_limited .color_text{
  color: #f6c8dd;
}

.spec{
  position: relative;
}
.spec::before{
  background-image: url(/images/pc/type/se_fabulous1m/bg_spec_wave.webp);
  background-position: top center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  width: 100%;
  height: 5vw;
  position: absolute;
  top: -5vw;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.specBg{
  background-image: url(/images/pc/type/se_fabulous1m/bg_spec_top.webp),url(/images/pc/type/se_fabulous1m/bg_spec_bottom.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center, bottom center;
  padding: 5% 0 6%;
}
.spec_image{
  width: 76.6%;
  margin: 0 auto 10px;
}
.spec_text{
  color: #444;
  font-size: 2.4rem;
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: 3px;
  font-weight: 500;
  line-height: 1.4;
}
@media screen and (max-width: 480px) {
  .spec_text{
    font-size: 3.73vw;
  }
}
.spec_lens_list {
  display: flex;
  align-items: center;
  position: relative;
  width: 82.9%;
  margin: 0 auto 10px;
}
.spec_lens_list_item{
  position: relative;
  margin-left: -42px;
  z-index: 0;
  list-style: none;
}
@media screen and (max-width: 480px) {
  .spec_lens_list_item{
    margin-left: -23px;
  }
}
.spec_lens_list_item:first-child{
  margin-left: 0;
  width: 25%;
  z-index: 15;
}
.spec_lens_list_item:nth-child(2){
  width: 25%;
  z-index: 14;
}
.spec_lens_list_item:nth-child(3){
  z-index: 13;
}
.spec_lens_list_item:nth-child(4){
  z-index: 12;
}
.spec_lens_list_item:nth-child(5){
  z-index: 11;
}
.spec_lens_list_item:nth-child(6){
  z-index: 10;
}
.spec_lens_list_item:nth-child(7){
  z-index: 9;
}
.spec_lens_list_item:nth-child(8){
  z-index: 8;
}
.spec_lens_list_item:nth-child(9){
  z-index: 7;
}
.spec_lens_list_item:nth-child(10){
  z-index: 6;
}
.spec_lens_list_item:nth-child(11){
  z-index: 5;
}
.spec_lens_list_item:nth-child(12){
  z-index: 4;
}
.spec_lens_list_item:nth-child(13){
  z-index: 3;
}
.spec_lens_list_item:nth-child(14){
  z-index: 2;
}
.spec_lens_list_item:nth-child(15){
  z-index: 1;
}
@media screen and (max-width: 480px) {
  .spec_lens_list_item:first-child,
  .spec_lens_list_item:nth-child(2){
    width: 38.9%;
  }
}

.specInfo{
  margin: 0 5%;
}

.specDetail{
  margin-bottom: 8%;
}
.specDetail_block{
  position: relative;
  margin: 0 5.5%;
}
.specDetail_text {
  font-size: 1.4rem;
  color: #444;
  text-align: left;
  position: absolute;
  line-height: 1.6;
  top: 48%;
  z-index: 2;
  left: 35.3%;
}
@media screen and (max-width: 480px) {
  .specDetail_text {
    font-size: 2.4vw;
  }
}
.specDetail_block:nth-child(2) .specDetail_text,
.specDetail_block:nth-child(3) .specDetail_text {
  top: 44%;
}
.specDetail_note{
  font-size: 1.1rem;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .specDetail_note{
    font-size: 2vw;
  }
}
.specPwr{
  margin: 0 9.5%;
}

/*単品ページ*/
.contentsSingle{
  background-color: #f6c8dd;
  padding-bottom: 1vw;
}
.other_products{
  margin-top: 40px;
}
.other_products_title{
  background-color: #c80f31;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  padding: 10px 15px;
  text-align: left;
}
@media screen and (max-width: 480px) {
  .other_products_title{
    font-size: 5.33333vw;
  }
}
.other_products_text {
  font-size: 2rem;
  font-weight: bold;
  color:#c80f31;
  text-align: center;
  padding:10px;
}
@media screen and (max-width: 480px) {
  .other_products_text {
    font-size: 4vw;
  }
}

.renewal_banner{
  background-image: url(/images/pc/type/se_fabulous1m/bg_renewal_bnr.webp);
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  padding: 0 10%;
}

.renewal_image{
  position: relative;
}
.renewal_text{
  color: #444;
  font-size: 1.6rem;
  position: absolute;
  top: 23%;
  left: 0;
  right: 0;
  line-height: 1.8;
  margin: 0 auto;
  width: 80%;
  text-align: left;
}
@media screen and (max-width: 480px) {
  .renewal_text{
    font-size: 2.65vw;
  }
}
.renewal_note{
  background-color: rgba(246, 200, 221, 0.6);
}

.anime {
  opacity: 0; 
  transform: translate(50px, -50px) scale(1);
}

.anime.active {
  animation: enterAndBounce 0.8s ease-out forwards;
  transform-origin: bottom left;
}

@keyframes enterAndBounce {
  0%   {
    opacity: 0;
    transform: translate(50px, -50px) scale(1);
  }
  20%  {
    opacity: 1;
    transform: translate(0, 0) scale(0.88, 0.92);
  }
  35%  {
    opacity: 1;
    transform: translate(0, 0) scale(1.15, 1.1);
  }
  50%  {
    opacity: 1;
    transform: translate(0, 0) scale(0.96, 0.98);
  }
  65%  {
    opacity: 1;
    transform: translate(0, 0) scale(1.07, 1.04);
  }
  75%  {
    opacity: 1;
    transform: translate(0, 0) scale(0.98, 0.99);
  }
  85%  {
    opacity: 1;
    transform: translate(0, 0) scale(1.03, 1.015);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* シンプルフェードアップ */
.fadeUp {
  opacity: 0;
  transform: translateY(20px); /* 少し下に配置 */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.fadeUp.active {
  opacity: 1;
  transform: translateY(0);
}
/* 遅延時間を transition-delay で指定する */
.fadeUp.delay1 { transition-delay: 0s; }
.fadeUp.delay2 { transition-delay: 0.1s; }
.fadeUp.delay3 { transition-delay: 0.2s; }
.fadeUp.delay4 { transition-delay: 0.3s; }
.fadeUp.delay5 { transition-delay: 0.4s; }
.fadeUp.delay6 { transition-delay: 0.5s; }
.fadeUp.delay7 { transition-delay: 0.6s; }
.fadeUp.delay8 { transition-delay: 0.7s; }
.fadeUp.delay9 { transition-delay: 0.8s; }
.fadeUp.delay10 { transition-delay: 0.9s; }
.fadeUp.delay11 { transition-delay: 1.0s; }
.fadeUp.delay12 { transition-delay: 1.1s; }
.fadeUp.delay13 { transition-delay: 1.2s; }
.fadeUp.delay14 { transition-delay: 1.3s; }
.fadeUp.delay15 { transition-delay: 1.4s; }

/* シンプルフェードイン */
.fadeIn {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.fadeIn.active {
  opacity: 1;
}
/* 遅延時間を transition-delay で指定する */
.fadeIn.delay1 { transition-delay: 0.5s; }
.fadeIn.delay2 { transition-delay: 0.2s; }

/*きらっと*/
.renewal_banner.shiny a{
  display: block;
  position: relative;
  overflow: hidden;
  transition: 300ms;
}
.renewal_banner.shiny a::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  transition: 300ms;
  animation: shinyshiny 2.5s ease-in-out infinite;
}
@keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.expansion{
  opacity: 0;
  transform: scale(0.1);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.expansion.active {
  animation: scaleBounce 0.6s ease-out forwards;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s;
}
@keyframes scaleBounce {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 右から左 */
.fadeRight {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.fadeRight.active {
  opacity: 1;
  transform: translateX(0);
}

/* 左から右  */
.fadeLeft {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.fadeLeft.active {
  opacity: 1;
  transform: translateX(0);
}

/* カテゴリページ*/
.fa1mCate .new::after {
  min-height: 1800px;
}
@media screen and (max-width: 480px) {
  .fa1mCate .new::after {
    min-height: 182vw;
  }
}

.fa1mCate .lineup_SubTitle {
  font-size: 1.4rem;
}
@media screen and (max-width: 480px) {
  .fa1mCate .lineup_SubTitle {
    font-size: 1.6vw;
  }
}

.fa1mCate .color_name {
  font-size: 1.6rem;
}
@media screen and (max-width: 480px) {
  .fa1mCate .color_name{
    font-size: 2.2vw;
  }
}

.fa1mCate .color_text {
  font-size: 3.5rem;
  line-height: 1.6;
}
@media screen and (max-width: 480px) {
  .fa1mCate .color_text{
    font-size: 3.73vw;
    line-height: 1.4;
  }
}

.fa1mCate .spec_text {
  font-size: 3rem;
  line-height: 1.4;
}
@media screen and (max-width: 480px) {
  .fa1mCate .spec_text{
    font-size: 3.73vw;
    line-height: 1.6;
  }
}

.fa1mCate .spec_lens_list_item:first-child,
.fa1mCate .spec_lens_list_item:nth-child(2){
  width: 15%;
}
@media screen and (max-width: 480px) {
  .fa1mCate .spec_lens_list_item:first-child,
  .fa1mCate .spec_lens_list_item:nth-child(2){
    width: 38.9%;
  }
}

.fa1mCate .specDetail_text {
  font-size: 2rem;
  margin: 13px 0;
}
@media screen and (max-width: 480px) {
  .fa1mCate .specDetail_text {
    font-size: 2.4vw;
    margin: 0;
  }
}

.fa1mCate .renewal_text {
  font-size: 2.5rem;
}
@media screen and (max-width: 480px) {
  .fa1mCate .renewal_text {
    font-size: 2.65vw;
  }
}