@charset "UTF-8";
.cat_container {
  max-width: 800px;
  margin: 0 auto 30px;
}
.cat_container img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.lilme {
  overflow: hidden;
}
.lilme_lp {
  overflow: hidden;
}
.fv {
  position: relative;
  overflow: hidden;
}
.fv_logo {
  position: absolute;
  top: 1.6%;
  left: 0;
  right: 0;
  margin: auto;
  width: 62%;
}
.fv_catch {
  position: absolute;
  top: 14.7%;
  left: 0;
  right: 0;
  margin: auto;
  width: 35.6%;
}
.fv_new {
  position: absolute;
  top: 14.8%;
  left: 3.7%;
  right: 0;
  width: 13.6%;
}
.fv_heartKey {
  position: absolute;
  top: 25%;
  left: 2.5%;
  right: 0;
  width: 20%;
}
.fv_obj {
  position: absolute;
}
.fv_objL {
  position: absolute;
  top: 41%;
  left: 7%;
  right: 0;
  width: 9.6%;
}
.fv_objR {
  position: absolute;
  top: 35%;
  left: auto;
  right: 2.1%;
  width: 9.2%;
}
.fv_lensImage {
  position: absolute;
  top: 49%;
  left: 4%;
  right: 0;
  width: 20%;
}
.fv_sakuga {
  position: absolute;
  top: 16%;
  left: auto;
  right: 4%;
  width: 19.5%;
}
.fv_kiraKira {
  position: absolute;
  top: 27.2%;
  right: 3.8%;
  left: auto;
  width: 21.7%;
}
.fv_kiraMori {
  position: absolute;
  top: 42.7%;
  left: auto;
  right: -0.2%;
  width: 19.6%;
}
.fv_keep {
  position: absolute;
  top: 67.2%;
  left: auto;
  right: 0;
  width: 45%;
}
.fv_lensSpec {
  position: absolute;
  top: 83%;
  left: 0;
  right: 0;
  width: 100%;
}

.concept {
  position: relative;
  padding-bottom: 6%;
  overflow: hidden;
}
.concept_title {
  margin: 6.2% auto 0;
  width: 67.3%;
}

.concept_leadTitle {
  width: 67.2%;
  margin: 2% auto;
}

.concept_productImage {
  margin: 3% auto;
  width: 92%;
}

.concept_lead {
  margin: 4.3% auto;
  width: 67.6%;
}

.concept_kirakiraBeam {
  margin: 6.4% auto 4.2% 10.4%;
  width: 84.9%;
}

.concept_inner {
  position: relative;
}

.concept_keep_pop {
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0;
  width: 80%;
  margin: 0 auto;
}

.concept_keep_bear {
  position: absolute;
  top: 12%;
  left: 5%;
  right: 0;
  width: 42.7%;
  margin: 0 auto;
}

.concept_keep_lens {
  position: relative;
  width: 82.9%;
  margin: 0 auto;
  padding-top: 17.4%;
}
.concept_keep_lens_image {
}

.concept_catch_text {
  text-align: center;
  margin: 9.1% auto 8.2%;
  font-size: 2.9rem;
  letter-spacing: 0.2rem;
  line-height: 1.6;
  font-weight: bold;
}
.product_detail_lp .concept_catch_text {
  font-size: 1.6rem;
}

.concept_catch_text_line {
  position: relative;
}
.concept_catch_text_line::before,
.concept_catch_text_line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
  height: 2px;
  background-color: #000;
  width: 4em;
}
.concept_catch_text_line::before {
  left: -4.5em;
  right: auto;
}
.concept_catch_text_line::after {
  left: auto;
  right: -4.5em;
}

.concept_item_wrap {
  background-image: url(/images/pc/type/se_lilme1d_26/kirakira_beeeeeeam_kirakira_power_highlight_on.webp);
  background-position: 97.7% center;
  background-size: 2.8%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.concept_item_list {
  margin: 0% 6% 0% 4%;
  list-style: none;
}
.concept_item {
  margin-bottom: 1%;
  list-style: none;
}
.concept_item::marker {
  content: none;
}
.concept_type_wrap {
  display: flex;
  align-items: flex-start;
}

.subscription {
  position: relative;
  overflow: hidden;
}
.subscription_title {
  position: absolute;
  top: 0.5%;
  left: 0;
  right: 0;
  width: 93.1%;
  margin: 0 auto;
}
.subscription_set {
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  width: 80%;
  margin: 0 auto;
}
.subscription_lead {
  position: absolute;
  top: 26.1%;
  left: 1.3%;
  right: 0;
  width: 95%;
  margin: 0 auto;
}
.subscription_lens_set {
  position: absolute;
  top: 67.8%;
  left: 2.4%;
  right: 0;
  width: 85.4%;
  margin: 0 auto;
}
.subscription_btn {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.lineup {
  overflow: hidden;
}
.lineUp_main {
}
.lineUp_balloon {
}
.lineUp_title {
}
.lineup_new_title {
  overflow: hidden;
  width: 100%;
  margin: 6% auto 4.7%;
}
.lineup_new_title_track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.lineup .lineup_new_title_img {
  height: 60px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.lineup_new_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0% 4% 0;
}
.lineup_new_item {
  margin: 0 2% 13%;
}
.lineup_new_link {
}

.lineup_fav_title {
  overflow: hidden;
  width: 100%;
  margin: -0.9% auto 5.1%;
}
.lineup_fav_title_track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
  animation-direction: reverse;
}
.lineup .lineup_fav_title_img {
  height: 60px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.lineup_fav_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0% 4% 0;
}
.lineup_fav_item {
  margin: 0 2% 13%;
}
.lineup_fav_link {
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 16px));
  }
}

/*返金保証キャンペーン*/
.campaignRefund {
  color: #2e2e2e;
  position: relative;
}
.campaignRefund::after {
  background-image: url(https://fatp275ehc.user-space.cdn.idcfcloud.net/images/pc/type/se_lilme1d/bg_lineup_wrap.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  content: "";
  display: block;
  width: 98%;
  height: 40px;
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.campaignRefund_text {
  width: 67.4%;
  margin: 0 auto 16px;
}
.campaignRefund_image {
  background-image: url(https://fatp275ehc.user-space.cdn.idcfcloud.net/images/pc/type/se_lilme1d/bg_campaign_refund.webp);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 7.5% 5% 5%;
}
.campaignRefund_btn {
  cursor: pointer;
  position: relative;
  list-style: none;
}
.campaignRefund_wrap {
  padding: 0;
}
.campaignRefund_wrap .campaignRefund_btn .campaign_arrow {
  position: absolute;
  right: 13%;
  top: 28px;
  transform: rotate(0deg);
  width: 32px;
}
.campaignRefund_wrap[open] .campaignRefund_btn .campaign_arrow {
  transform: rotate(180deg);
  transition: 0.3s;
}
.campaignRefund_inner {
  padding: 20px 5%;
  background-color: #fff;
}
.campaignRefund_inner_text {
  color: #575757;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: center;
}
.campaignRefund_info {
  margin-bottom: 20px;
}
.campaignRefund_info_Subtitle {
  background: #8cc8f0;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
  padding: 10px 0;
  text-align: center;
}
.campaignRefund_info_Subtitle sup {
  font-size: 1.1rem;
  vertical-align: super;
}
.campaignRefund_info_block {
  background-color: #e8f4fc;
  padding: 20px 3.33% 20px;
}
.campaignRefund_info_group {
  margin-bottom: 16px;
}
.campaignRefund_info_group:last-child {
  margin-bottom: 0;
}
.campaignRefund_info_term {
  color: #575757;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
}
.campaignRefund_info_desc.brandName {
  font-weight: 700;
}
.campaignRefund_info_desc {
  color: #575757;
  font-size: 1.4rem;
  margin-left: 3%;
  margin-bottom: 5px;
  line-height: 1.4;
}
.campaignRefund_info_desc:last-child {
  margin: 0 0 0 3%;
}
.campaignRefund_list {
  margin-bottom: 20px;
  margin-left: 5%;
}
.campaignRefund_sublist {
  margin-left: 3%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.campaignRefund_subitem {
  color: #575757;
  font-size: 1.4rem;
  line-height: 1.6;
  list-style: decimal;
}
.campaignRefund_item {
  color: #575757;
  font-size: 1.2rem;
  line-height: 1.6;
  list-style: disc;
  margin-bottom: 5px;
}
.campaignRefund_item > span {
  font-weight: 700;
}
.campaignRefund_list_note {
  color: #2e2e2e;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 10px;
  list-style: none;
}

.campaignRefund_space {
  margin-top: 0;
  padding-top: 0;
}
.campaignRefund_bg {
  background: linear-gradient(90deg, #f5b9de, #efb1d6);
  padding-bottom: 11%;
}
.campaignRefund_bnr {
  width: 94%;
  margin-left: 1.8%;
}
.campaignRefund_bnr + .campaignRefund_bnr {
  margin-top: 0.4%;
}
.campaignRefund_wrap .campaignRefund_btn_position .campaign_arrow {
  right: 19%;
}
.campaignRefund_caution {
  margin-top: 2%;
}

/*定期便ページ*/
.teiki {
  background-color: #fff;
  position: relative;
  padding: 0;
}
.teiki .productFaq {
  background-color: transparent;
  padding: 12% 4.9% 10%;
}
.teiki .productFaq_title {
  color: #d87eb1;
}
.teiki .productFaq_subTitle {
  color: #444444;
}
.teiki .productFaq_summary {
  background-color: #d87eb1;
  color: #fff;
}

.spec_teiki .spec_wrap {
  align-items: flex-start;
  top: 30.5%;
}
.spec_teiki .specLens_list {
  padding-top: 21.5%;
}

.lilme_lp .faq_li1d .productFaq_summary {
  background-image: url(/images/pc/type/se_lilme1d_26/arrow_product_faq_open.svg), url(/images/pc/type/se_lilme1d_26/icon_q.svg);
}
.lilme_lp .faq_li1d .productFaq_details[open] .productFaq_summary {
  background-image: url(/images/pc/type/se_lilme1d_26/arrow_product_faq_close.svg), url(/images/pc/type/se_lilme1d_26/icon_q.svg);
}
.lilme_lp .faq_li1d .productFaq_answer {
  background-image: url(/images/pc/type/se_lilme1d_26/icon_a.svg), url(/images/pc/type/se_lilme1d_26/bg_answer.webp);
}

.other_products {
  margin-top: 40px;
}
.other_products {
  margin-top: 40px;
}
.other_products_title {
  background-color: #f85993;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  padding: 10px 15px;
  text-align: left;
}
.other_products_image {
  margin-bottom: 30px;
}
.other_products_subTitle {
  font-size: 1.4rem;
  color: #3c3c3c;
  margin: 6px 0 0;
}
.other_products_text {
  color: #f85993;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  text-align: center;
}

.anime {
  opacity: 0;
  transform: scale(0) translateY(50px);
  transform-origin: center bottom; /* 下部分を基準にスケール */
}
/* フェードイン＋拡大＋2回ぷるん（0.75sバージョン） */
@keyframes fadeInJelly {
  0% {
    opacity: 0;
    transform: scale(0) translateY(50px);
  }
  25% {
    opacity: 1;
    transform: scale(1.1) translateY(-10px);
  }
  35% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  45% {
    opacity: 1;
    transform: scale(1.2, 0.8) rotate(2deg); /* 1回目のぷるん */
  }
  55% {
    opacity: 1;
    transform: scale(0.9, 1.1) rotate(-2deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.05, 0.95) rotate(1deg);
  }
  65% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }

  /* 2回目のぷるん（小さく揺れる） */
  75% {
    opacity: 1;
    transform: scale(1.02, 0.98) rotate(1deg);
  }
  85% {
    opacity: 1;
    transform: scale(0.98, 1.02) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* アニメーション適用 */
.anime.active {
  animation: fadeInJelly 0.75s ease-out forwards;
}
.anime.active.delay1 {
  animation-delay: 0s;
}
.anime.active.delay2 {
  animation-delay: 0.1s;
}
.anime.active.delay3 {
  animation-delay: 0.2s;
}
.anime.active.delay4 {
  animation-delay: 0.3s;
}

/* シンプルフェードアップ */
.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;
}

/* シンプルフェードダウン */
.fadeDown {
  opacity: 0;
  transform: translateY(-20px); /* 少し上に配置 */
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
}
.fadeDown.active {
  opacity: 1;
  transform: translateY(0);
}

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

/* 右から左 */
.fadeRight {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
}
.fadeRight.active {
  opacity: 1;
  transform: translateX(0);
}
/* 遅延時間を transition-delay で指定する */
.fadeRight.delay1 {
  transition-delay: 0s;
}
.fadeRight.delay2 {
  transition-delay: 0.1s;
}
.fadeRight.delay3 {
  transition-delay: 0.2s;
}
.fadeRight.delay4 {
  transition-delay: 0.3s;
}
.fadeRight.delay5 {
  transition-delay: 0.4s;
}
.fadeRight.delay6 {
  transition-delay: 0.5s;
}
.fadeRight.delay7 {
  transition-delay: 0.6s;
}
.fadeRight.delay8 {
  transition-delay: 0.7s;
}
.fadeRight.delay9 {
  transition-delay: 0.8s;
}

/* 左から右  */
.fadeLeft {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.fadeLeft.active {
  opacity: 1;
  transform: translateX(0);
}
/* 遅延時間を transition-delay で指定する */
.fadeLeft.delay1 {
  transition-delay: 0s;
}
.fadeLeft.delay2 {
  transition-delay: 0.1s;
}
.fadeLeft.delay3 {
  transition-delay: 0.2s;
}
.fadeLeft.delay4 {
  transition-delay: 0.3s;
}
.fadeLeft.delay5 {
  transition-delay: 0.4s;
}
.fadeLeft.delay6 {
  transition-delay: 0.5s;
}
.fadeLeft.delay7 {
  transition-delay: 0.6s;
}
.fadeLeft.delay8 {
  transition-delay: 0.7s;
}
.fadeLeft.delay9 {
  transition-delay: 0.8s;
}

/*スライドマスク*/
.slideMask {
  overflow: hidden;
  display: block;
}
.slideMask img {
  width: 0%;
  object-fit: cover;
  object-position: 0% 50%;
  transition: width 1s;
}
.slideMask.active img {
  width: 100%;
}