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

body {
    margin: 0;
    padding: 0;
}

img {
    vertical-align: bottom;
}

.wrap {
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;
}

.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);
}


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

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

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


.video01 {
    width: 69%;
    height: auto;
    bottom: 21.5%;
    right: 15.5%;
}

.video02 {
    width: 69%;
    height: auto;
    bottom: 18.15%;
    right: 15.5%;
}
.video03 {
    width: 69%;
    height: auto;
    bottom: 20.5%;
    right: 15.5%;
}



/* -------------------------------------------------------------------- 
  オファー
-------------------------------------------------------------------- */
.box_cart { 
  position: relative; 
}

.box_cart .cart_01 {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

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

/* ------------------------------
  Reflection 1
------------------------------ */
.reflection {
  position: absolute;
  top: -180px;
  left: 0;
  width: 60px;
  height: 100%;
  z-index: 11;
  background-color: rgba(255,255,255,0.5);
  opacity: 0;

  /* ベンダープレフィックスは -webkit のみ残す */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

  -webkit-animation: reflection 2.3s ease-in-out infinite;
  animation: reflection 2.3s ease-in-out infinite;
}

/* ------------------------------
  Reflection 2
------------------------------ */
.reflection2 {
  position: absolute;
  top: -180px;
  left: -110px;
  width: 60px;
  height: 100%;
  z-index: 11;
  background-color: rgba(255,255,255,0.5);
  opacity: 0;

  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

  -webkit-animation: reflection2 2.3s ease-in-out infinite;
  animation: reflection2 2.3s ease-in-out infinite;
}

/* ------------------------------
  Keyframes（webkit＋標準のみ）
------------------------------ */
/* --- reflection --- */
@-webkit-keyframes reflection {
  0%   { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80%  { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: .5; }
  81%  { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@keyframes reflection {
  0%   { transform: scale(0) rotate(45deg); opacity: 0; }
  80%  { transform: scale(0) rotate(45deg); opacity: .5; }
  81%  { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* --- reflection2 --- */
@-webkit-keyframes reflection2 {
  0%   { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80%  { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: .5; }
  81%  { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@keyframes reflection2 {
  0%   { transform: scale(0) rotate(45deg); opacity: 0; }
  80%  { transform: scale(0) rotate(45deg); opacity: .5; }
  81%  { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { 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%;
}




/* -------------------------------------------------------------------- 
アコーディオン
-------------------------------------------------------------------- */
.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: 79%;
    position: absolute;
	bottom: 6.55%;
    left: 0%;
    z-index: 1;
}

/* tell_01 */

.box_tell {
	position: relative;

}

.box_tell .tell_01 {
    width: 86.7%;
    position: absolute;
    bottom: 22%;
    left: 7%;
    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*/


.box_sugosa {
	position: relative;

}

.box_sugosa .kirari {
    width: 90.4%;
    position: absolute;
    bottom: 0%;
    left: 5%;
    z-index: 1;
    overflow: hidden;
}

.box_sugosa .kirari2 {
    width: 41%;
    position: absolute;
    top: 23.2%;
    right: 4%;
    z-index: 1;
    overflow: hidden;
}
.box_sugosa .kirari3 {
    width:100%;
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 2;
    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: 12%;
}

.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('../images/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;
}


/* slider　カルーセルの設定ここから */

   swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    swiper-container {
      margin-left: auto;
      margin-right: auto;
    }



.slider_cl [class^="swiper-button-"]::after{
    content: "";
}

/*矢印のサイズ調整*/
.slider_cl [class^="swiper-button-"]{
    width: 40px;
    height: 40px;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{

bottom: 0;

}
/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 6px 30px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  /*background-color:;*/
  height: 20px;
  width: 20px;
  }
.swiper-pagination-bullet {
  background-color: gray;
}
.swiper-pagination-bullet-active {
  background-color: #473002;
}

@media screen and (max-width: 768px) {
.slider_cl [class^="swiper-button-"]{
    width: 30px;
}

/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 6px 10px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  /*background-color:;*/
  height: 10px;
  width: 10px;
  }


}

/*矢印の位置調整*/
.slider_cl .swiper-button-next{
    right: 30px;
}
.slider_cl .swiper-button-prev{
    left: 30px;
}

@media screen and (max-width: 768px) {
/*矢印の位置調整*/
.slider_cl .swiper-button-next{
    right: 10px;
}
.slider_cl .swiper-button-prev{
    left: 10px;
}
}

/* 背景画像の設定 */
.slbk {
    position: absolute;
    z-index: -1;
}


/* 滑らかな一定速度スクロール */
.slider_cl .swiper-wrapper {
  transition-timing-function: linear !important;
}

/** 追従ボタンここから **/
#btn-syokai {
  display: none;    
  position: fixed;
  bottom: 0;                  /* 画面下に固定 */
  left: 50%;                  /* 中央基準 */
  transform: translateX(-50%);/* 横中央に補正 */
  width: 700px;               /* ボタンの最大幅 */
  max-width: 100%;            /* スマホ画面でははみ出さない */
  padding: 0;
  margin: 0;
  text-align: center;
  z-index: 15;
}

#btn-syokai a {
  display: inline-block;
}

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

/* PC・SP表示切替（必要なら） */
.pc-block { display: block; }
.sp-block { display: none; }

@media screen and (max-width: 767px) {
  .pc-block { display: none; }
  .sp-block { display: block; }
}


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