@charset "UTF-8";
/* CSS Document */

body {
    margin: 0;
    padding: 0;
}

img {
    vertical-align: bottom;
}

.lp_wrap {
    max-width: 768px;
    margin: 0 auto;
    overflow: hidden;
}

.lp_wrap img {
    display: block;
    width: 100%;
}



a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}


a:hover {
  opacity: 0.8;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}

img:hover {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}

.ozio-rl {
	position: relative;
}
.ozio-abl {
	position: absolute;
}

.wrap_ref {
  bottom: 0;
  left: 0;
  right: 0;
  overflow :hidden;
}


/* -------------------------------------------------------------------- 
  オファー
-------------------------------------------------------------------- */
.box_cart {
  position: relative;
}
.box_cart .cart_01 {
  position: absolute;
  height: auto;
  left: 0;
  right: 0;
  margin: auto;
  overflow :hidden;
}

.box_cart .cart_01:hover,
.box_cart .cart_01 a:hover {
  opacity: 0.8;
}

.reflection {
    height      :100%;
    width       :60px;
    position    :absolute;
    top         :-180px;
    left        :0;
    z-index: 11;
    background-color: rgba(255,255,255,.5);
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2.3s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2.3s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2.3s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2.3s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2.3s ease-in-out infinite;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    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; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

.reflection2 {
    height      :100%;
    width       :60px;
    position    :absolute;
    top         :-180px;
    left        :-110px;
    z-index: 11;
    background-color: rgba(255,255,255,.5);
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2.3s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2.3s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2.3s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2.3s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2.3s ease-in-out infinite;
}
 
@keyframes reflection2 {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection2 {
    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; }
}
@-moz-keyframes reflection2 {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection2 {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection2 {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}



.man {
  width: 18.75%;
  height: auto;
  top:72.5%;
  right:50%;
  z-index:2;  
}

.btn_anime {
  display:inline-block;
    animation: btn 3.5s ease infinite;
}

@keyframes btn {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  70% { transform:translateX(-15px) }
  75% { transform:translateX(0) }
  80% { transform:translateX(-15px) }
  100% { transform:translateX(0) }
}

.img-before {
  width: 93%;
  height: auto;
  position: absolute;
  top:0;
  left:3.5%;
}

.img-danmen {
  width: 76.82%;
  height: auto;
  position: absolute;
  top:2.1%;
  left:11.6%;
}

.img-keana {
  width: 76.82%;
  height: auto;
  position: absolute;
  top:2.7%;
  left:11.6%;
}

.img-text {
  position: absolute;
  bottom:11%;
}


/* -------------------------------------------------------------------- 
動画
-------------------------------------------------------------------- */

.ozio_mv{
  display: block;
  width: 100%;
  height: auto;
}


.video01 {
    width: 100%;
    height: auto;
    top: 0%;
    right: 0%;
	display:block;
}

.video02 {
    width: 100%;
    height: auto;
    bottom: 0%;
    left: 0%;
}

/* 下に敷く動画 */
.ozio_mvunder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

/* 上に重ねるPNG */
.ozio_mvover {
	position: relative;
	z-index: 2;
	width: 100%;
	height: auto;
}

/* 画像の上にMV */

.ozio-rl {
  position: relative;
}

.ozio_mvunder {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.ozio_mvover {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 50.1%;
  height: auto;
}


/* FV　gel movie */
.pfctger_mv01 {
	position: relative;
	width: 100%;
	aspect-ratio: 768 / 731;
	overflow: hidden;
}

.pfctger_mv01_movie {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	position: relative;
	z-index: 1;
}

.pfctger_mv01_png01 {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 2;
	pointer-events: none;
}

.pfctger_mv01_png02 {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 3;
	pointer-events: none;
}

/* mv02 */
.pfctger_mv02 {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.pfctger_mv02_img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	pointer-events: none;
}

.pfctger_mv02_movie {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: auto;
	z-index: 1;
}




/* -------------------------------------------------------------------- 
gif
-------------------------------------------------------------------- */

.pps_gif {
  position: relative;
}

.pps_gif .gif_01 {
  position: absolute;
  width: 100%;
  bottom: 0%;
  z-index: 1;
}

.pps_gif .pps-txt {
    position: absolute;
    width: 100%;
    top: 2.25%;
    z-index: 3;
}


/* -------------------------------------------------------------------- 
アコーディオン
-------------------------------------------------------------------- */
.ac,
.ac dd {
  margin: 0;
}

.ac dt {
  cursor: pointer;
}

.ac dt img {
  width: 100% !important;
  height: auto;
}

.ac .wrap_btn .btn {
  width: auto;
  top: 0;
  left: 0;
}

.ac dd,
.ac .wrap_btn .btn.cls {
  display: none;
}

.ac .wrap_btn.open .btn.opn {
  display: none !important;
}

.ac .wrap_btn.open .btn.cls {
  display: inline !important;
}

.wrap_btn {
  position: relative;
}

.wrap_btn:hover {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.ac .btn {
    padding: 0;
}

.container {
  position: relative;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

.image-a {
  display: block;
}

.image-b {
    position: absolute;
    top: 0%;
    left: 0%;
}

/* ofa_01 */

.box_cart {
	position: relative;

}

.box_cart .cart_01 {
    width: 85.9%;
    position: absolute;
    bottom: 6.3%;
    left: 0%;
    z-index: 1;
}

/* tell_01 */

.box_tell {
	position: relative;

}

.box_tell .tell_01 {
    width: 79.4%;
    position: absolute;
    bottom: 22%;
    left: 10.5%;
    z-index: 1;
}

/* tell link black */

a[href*="tel:"] {
  pointer-events: none; /* PCではクリック無効 */
}

@media screen and (max-width: 640px) {
  a[href*="tel:"] {
    pointer-events: auto; /* スマホではクリック有効 */
  }
}



/* 画像重ね contents*/


.ozio_item {
  position: relative;
}

/* PNG① */
.ozio_item-layer01 {
    width: 100% !important;
    position: absolute;
    bottom: -59%;
    left: 0%;
    z-index: 5;
    overflow: hidden;
}

/* PNG② */
.ozio_item-layer02 {
  position: absolute;
  bottom: 0%;
  left: 0%;
  z-index: 6;
  overflow: hidden;
}

/* PNG③ */
.ozio_item-layer03 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  overflow: hidden;
}


/* coll_01 */

.box_call {
	position: relative;

}

.box_call .call_01 {
    position: absolute;
    width: 78%;
    bottom: 7.6%;
    left: 11.2%;
    z-index: 1;
}

/* syousai */

.box_syousai{
  position: relative;
}
.box_syousai .syousai_01 {
    position: absolute;
    width: 100%;
    right: 0%;
    bottom: 9.7%;
}

.box_syousai .syousai_01:hover,
.box_syousai .syousai_01 a:hover {
  opacity: 0.8;
}


/* reflection_01 */

.box_reflection_01 {
	position: relative;
}

.box_reflection_01 .reflection_01 {
    position: absolute;
    width: 50%;
    /*height: 41%;*/
    bottom: 19.1%;
    right: 0%;
    /* z-index: 10; */
    overflow: hidden;
}

.item-pkg{

position: relative;
z-index: 10;

}

.box_reflection_01 .new{
    position: absolute;
    width: 31%;
    top: -1%;
    right: 4.1%;
    /*z-index: 1;*/
    overflow: hidden;
}

/* reflection_02 */

.box_reflection_01 .reflection_02 {
    position: absolute;
    bottom: 45.7%;
    right: 3.4%;
    z-index: 1;
    overflow: hidden;
    width: 36.2%;
}

/* reflection_03 */

.box_reflection_01 .reflection_03 {
    position: absolute;
    bottom: 50.56%;
    left: 6.6%;
    z-index: 1;
    overflow: hidden;
    width: 39.6%;
}


/* 点滅 */
.blink {
	animation: tikatika 1.2s step-end infinite;
}
 
@keyframes tikatika {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* sns カルーセル右から */

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity {
    background-image: url('https://nachulife.jp/excludes/nachulife/lp/rmop/ps_n_rmop_tk_0001/img/common/boserum-ww-re_top_18.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
    max-width: 768px;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 25s infinite linear 0.5s both;
}


ul.scroll-infinity__list.scroll-infinity__list--left {
    margin: 0;
}

li.scroll-infinity__item {
    margin: 0 8px;
}


/* =========================
  Swiperスライダー
========================= */

.slider_cl {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* 背景画像 */
.slider_cl .slbk {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* スライド本体 */
.slider_cl .swiper-wrapper {
  position: relative;
  z-index: 1;
}

.slider_cl .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* スライド画像 */
.slider_cl .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* Swiper標準の矢印を消す */
.slider_cl .swiper-button-prev::after,
.slider_cl .swiper-button-next::after {
  content: "";
}

/* 矢印ボタン */
.slider_cl .swiper-button-prev,
.slider_cl .swiper-button-next {
  z-index: 3;
  width: 45px;
  height: 45px;
  margin-top: 0;
  transform: translateY(-50%);
}

/* 矢印画像 */
.slider_cl .swiper-button-prev img,
.slider_cl .swiper-button-next img {
  display: block;
  width: 100%;
  height: auto;
}

/* 矢印位置 */
.slider_cl .swiper-button-prev {
  left: 40px;
}

.slider_cl .swiper-button-next {
  right: 40px;
}

/* ページネーション */
.slider_cl .swiper-pagination {
  z-index: 3;
  bottom: 0;
}

/* ページネーションの丸 */
.slider_cl .swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  margin: 0 16px 30px !important;
  background-color: gray;
  opacity: 1;
}

/* 選択中 */
.slider_cl .swiper-pagination-bullet-active {
  background-color: #473002;
}

@media screen and (max-width: 768px) {
  .slider_cl .swiper-button-prev,
  .slider_cl .swiper-button-next {
    width: 30px;
    height: 30px;
  }

  .slider_cl .swiper-button-prev {
    left: 10px;
  }

  .slider_cl .swiper-button-next {
    right: 10px;
  }

  .slider_cl .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px 10px !important;
  }
}

/* 2つ目の位置調整のみ */

/* 2個目のスライダーだけページネーション位置を調整 */
.slider_cl--recipe .swiper-pagination {
  bottom: 50px;
}

/* 共通CSSの下マージンを2個目だけ上書き */
.slider_cl--recipe .swiper-pagination-bullet {
  margin: 0 13px !important;
}

@media screen and (max-width: 768px) {
  .slider_cl--recipe .swiper-pagination {
    bottom: 20px;
  }

  .slider_cl--recipe .swiper-pagination-bullet {
    margin: 0 4px !important;
  }
}




/** 追従ボタンここから **/

#btn-syokai {
display: none; /* 初期状態で非表示 */
padding:0;
margin:0;
position: fixed;
bottom:0;
right:0%;
text-align: right;
z-index:15;
}

#btn-syokai img {
width: 100%;
height: auto
}

.pc-block {
display:block;
}

.sp-block {
display: none;
}

.btn_op {
width: 1620px;
max-width: 100%;
margin: auto 0;
transition: opacity 5s ease;
}

/* スマホサイズにのみ */
@media (max-width: 767px) {
#counter{

        top: 62%;
        left: 32.5%;
        letter-spacing: -0.4rem;
        font-size: 6.3rem;
       width: 42%;

}

#btn-syokai {
width:100%;
bottom:-2.5%;
}

.pc-block {
display: none;
}

.sp-block {
display:block;
}

}

/**230628 追従ボタンここまで **/


/* 特殊演出01 */
.ozio-bubble-veil{
  position:relative;
  width:768px;
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
}

.ozio-bv-bg{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}

.ozio-bv-pulse{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.ozio-bv-pulse canvas{
  width:100%;
  height:100%;
  display:block;
}

.ozio-bv-objects{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.ozio-bv-obj{
  position:absolute;
  display:block;
}

/* png text */

.ozio-bv-obj{
    position: absolute;
    top: 26.3%;
    left: 0%;
    z-index: 999;
}



/* 特殊演出02 */
.ozio-kirakira02{
  position:relative;
  width:768px;
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
}

.ozio-k02-bg{
  display:block;
  width:100%;
  height:auto;
}

.ozio-k02-canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}

.ozio-k02-png{
    position: absolute;
    left: 0%;
    bottom: 13%;
    z-index: 3;
}