/*▼
----------------------------------------------------------------------------*/

/*コダワリ　スタイル　兼用
-------------------------------------------------------------------------- */
.index-kodawari-container,.index-style-container {
  position: relative;
  overflow: hidden; 
  padding:10vw 5vw;
  background-color:#fff;
  border-top:1px dotted #ccc;
  display:none;
}
@media screen and (min-width: 820px) {
.index-kodawari-container,.index-style-container {
  padding:80px 60px;
}
}

.features {
  position: relative;
  margin: 0 auto 30px ;
  width:auto;
  max-height:60px;
  height:15vw;
  aspect-ratio:5.9 / 1;
  transform: translate(0px,0);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/features.svg);
}
@media screen and (min-width: 400px) {
.features {
  margin: 0 0 30px ;
}
}

.style {
  position: relative;
  margin: 0 auto 30px ;
  width:auto;
  max-height:60px;
  height:15vw;
  aspect-ratio:3.8 / 1;
  transform: translate(0px,0);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/style.svg);
}
@media screen and (min-width: 400px) {
.style {
  margin: 0 0 30px ;
}
}

/*☆チ－ム
-------------------------------------------------------------------------- */
.index-team-container {
  position: relative;
  overflow: hidden; 
  padding:10vw 5vw;
  background-color:#fff;
  border-top:1px dotted #ccc;
}

@media screen and (min-width: 820px) {
.index-team-container {
  padding:80px 60px;
}
}

.team {
  position: relative;
  margin: 0 auto 30px ;
  width:auto;
  max-height:60px;
  height:15vw;
  aspect-ratio:3.3 / 1;
  transform: translate(0px,0);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/team.svg);
}
@media screen and (min-width: 400px) {
.team {
  margin: 0 0 30px ;
}
}

/*☆インスタ
-------------------------------------------------------------------------- */
.index-insta-container {
  position: relative;
  overflow: hidden; 
  padding:10vw 5vw;
  background-color:#fff;
  border-top:1px dotted #ccc;
}
@media screen and (min-width: 820px) {
.index-insta-container {
  padding:80px 60px;
}
}



.insta {
  position: relative;
  margin: 0 auto 30px ;
  width:auto;
  max-height:60px;
  height:15vw;
  aspect-ratio:3.4 / 1;
  transform: translate(0px,0);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/insta.svg);
}
@media screen and (min-width: 400px) {
.insta {
  margin: 0 0 30px ;
}
}

/*▲
----------------------------------------------------------------------------*/






/*ナビ以外をくるんでいます
----------------------------------------------------------------------------*/
.sticky-wrap{  
  position: relative;
  transition: transform .4s;
  margin: 0 auto;
}
/*モーダルを開いたときにスクロールバーが消えるイベントに便乗
----------------------------------------------------------------------------*/
body.scrollbar-hide .sticky-wrap{  
 transform: translate(0,30px) scale(.98,1);
 transform: none;
}
@media screen and (min-width: 820px) {
body.scrollbar-hide .sticky-wrap{  
 transform: translate(0,30px) scale(.98,1);
 transform: none;
}
}

/*ナビヘッダー
----------------------------------------------------------------------*/
.navi-header {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  height: 0px;
  top:0;
  left:0;
/* overflow: hidden; */
/* border-bottom:1px solid #ddd;*/
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
/*box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.2);*/
  z-index:3;
  transition: opacity .4s;
}
.navi-header.hide{  
  opacity:1;
  pointer-events:auto;
}
@media screen and (min-width: 600px) {
.navi-header.hide{  
  opacity:1;
  pointer-events:auto;
}
}
/* ロゴ
---------------------------------------------------------------*/
a.top-image-title {
  position: absolute;
  display:block;
  width:25vw;
  max-width:100px;
  top:20px;
  left:5vw;
  aspect-ratio:2.9 / 1;
  transform: translate(0,0%);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/logo-202507-black.svg);
display:none;
}
@media screen and (min-width: 820px) {
a.top-image-title {
  left:60px;
}
}
/* 予約
---------------------------------------------------------------*/
a.header-yoyaku-box {
  position: absolute;
  display:block;
  width: 130px;
  height: 35px;
  top:20px;
  right:5vw;
  right:65px;
  transform: translate(0,0%);
  border-radius: 4px;
  background-color: #FF3276;
  transition: opacity .3s;
  opacity:0;
  pointer-events:none;
}
@media screen and (min-width: 820px) {
a.header-yoyaku-box {
  right:60px;
  right:70px;
}
}
a.header-yoyaku-box.show {
  opacity:1;
  pointer-events:none;
}

a.header-yoyaku-box::after {
  position: absolute;
  content:"空席確認・予約";
  width: 100%;
  left:0px;
  top:50%;
  transform: translate(0%,-50%);
  color:#fff;
  padding: 0 10px;
  line-height: 1;
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  text-align:center;
}
/*空席確認
---------------------------------------------------------------*/
.Vacant-seat {
  position: absolute;
  width: 130px;
  top:0%;
  left:50%;
  transform: translate(-50%,45%);
  z-index:3;
}



/* ▼HPB 本日空席
---------------------------------------------------------------*/
#result-vacancyExistence {
  position: relative;
  margin:0 auto;
  text-align:center;
  letter-spacing: 0rem;
}
.vacancyExistence {
  position: relative;
  display: inline-block;
  background-color: #FFFFFF;
  border: 1px solid  #FF3276;
  border-radius: 3px;
  color: #111;
  color:  #FF3276;
  line-height: 1;
  z-index: 10;
  margin: 10px auto 0;
  padding: 10px;
  font-size: 1.1rem;
  font-weight:bold;
}
.vacancyExistence .isPink {
  color:  #FF3276;
  display: inline;
}
.vacancyExistence:before, .vacancyExistence:after {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0 4px 4px 4px;
  left: 50%;
  transform: translate(-50%,0);
}
.vacancyExistence:before {
  border-bottom-color: #D36985;
  top: -5px;
}
.vacancyExistence:after {
  border-bottom-color: #FFFFFF;
  top: -4px;
}

/* ナビボタン
---------------------------------------------- */
.header-navi-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  top:18px;
  right:10px;
  transform: translate3d(0,0,0);
  cursor: pointer;
  background-color: rgba(0,0,0,1);
  border-radius:50%;
}
@media screen and (min-width: 820px) {
.header-navi-btn {
  right:20px;
}
}
.header-navi-btn::after {
  position: absolute;
  content:"MENU";
  width: 100%;
  left:0;
  bottom:-11px;
  color:#000;
  line-height: 1;
  font-size: 1.1rem;
  letter-spacing: 0rem;
  text-align:center;
  background-color: rgba(255,255,255,.6);
display:none;
}
.header-navi-btn span {
  background-color: #fff;
  display:block;
  width: 50%;
  height: 2px;
  position: absolute;
  top: calc(50% - (2px / 2));
  left: 50%;
  transform: translate(-50%,0);
}
.header-navi-btn span.top {
  transform: translate(-50%, -7px);
}
.header-navi-btn span.bottom {
  transform: translate(-50%, 7px);
}
/*ラッピング
---------------------------------------------------------------*/
.tip-wrapper {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 100%;
  background-color:#fff;
}
/*
---------------------------------------------------------------*/
#salonWrapper {
  position: relative;
  max-width: 1200px;
  max-width:none;
  margin:0 auto;
  padding:0 5vw 180px;
  padding:0 0vw 180px;
}
@media screen and (min-width: 821px) {
#salonWrapper {
  padding:0 60px 180px;
  padding:0 0px 180px;
}
}

/*▽ コンセプト
---------------------------------------------------------------*/
.midashi-box {
  position: relative;
  overflow: hidden;
  padding-top:0px;
  margin-bottom:5vw;
}
@media screen and (min-width: 769px) {
.midashi-box {
  margin-bottom:3vw;
}
}


/* 消す
------------------------------------------------*/
h1.h1-text {
display:none;
}


/*消す
--------------------------------------------- */
.midash-box-inner-text {
display:none;
}




/*イメージ画像
--------------------------------*/
.midashi-box-inner-image2 {
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  margin:0 auto 5vw;
}
/*
--------------------------------*/
#slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media screen and (min-width: 821px) {
#slideshow {

}
}
/*
--------------------------------*/
.slide-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition-property: opacity;
  transition-duration: .8s;
  opacity: 0;
}
.slide-image.lazyloaded.showSlide {
  opacity: 1;
  will-change:opacity;
}

/* 
--------------------------------------------- */
.top-image-logo {
  position: absolute;
  top:50%;
  left:50%;
  width:70%;
  max-width:400px;
  aspect-ratio:3.1 / 1;
  transform: translate(-50%,-50%);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/logo-2025-top.png);
}

/*イメージトップスライド
--------------------------------*/
.midashi-box-inner-image {
  position: relative;
}

/*
--------------------------------*/
#top-image-slide .splide__slide  {
  position: relative;
  aspect-ratio:1.8 / 3;
}
/*
--------------------------------*/
img.top-image-slide{
  position: relative;
  display:block;
  width:100%;
  object-fit: cover;
  aspect-ratio:1.8 / 3;
}

@media screen and (min-width: 415px) {
img.top-image-slide,
#top-image-slide .splide__slide{
  aspect-ratio:1.8 / 3;
}
}

@media screen and (min-width: 821px) {
img.top-image-slide,
#top-image-slide .splide__slide{
  aspect-ratio:1.8 / 3;
}
}


/* メッセージ
--------------------------------------------- */
.message {
  position: relative;
  margin: 0 auto 30px ;
  width:auto;
  max-height:60px;
  height:15vw;
  aspect-ratio:5.5 / 1;
  transform: translate(0px,0);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/message.svg);
}
@media screen and (min-width: 400px) {
.message {
  margin: 0 0 30px ;
}
}



/*▽サロンコンテンツ
---------------------------------------------------------------*/
.top-box {
  position: relative;
  overflow: hidden;
  margin-bottom:10vw;
  letter-spacing: -10rem;
  font-size: 0rem;
}
@media screen and (min-width: 769px) {
.top-box {
  margin-bottom:5vw;
}
}
/*▽ テキストボックス
--------------------------------------------- */
.top-box-inner-text {
  position: relative;
  margin:0 auto 5vw;
  color:#4C505B;
  padding:0 7vw;
}
@media screen and (min-width: 821px) {
.top-box-inner-text {
  padding:0 7vw;
}
}

/*★ 年末年始の休業のお知らせ ～12/31
--------------------------------------------- */
/*
.top-box-inner-text::after {
  position: relative;
  display:block;
  content:"";
  width: 100%;
  max-width: 450px;
  aspect-ratio:1.8 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/nenmatsunenshi.webp);
  background-image: url(../images/nenmatsunenshi-2024-2025.webp);
  margin-top:30px;
}

*/


/* TOTAL BEAUTY
--------------------------------------------- */
.midashi-TB {
  position: relative;
  line-height:1;
  letter-spacing: 0rem;
  font-size: 0rem;
  margin: 0 0 40px ;
  width:95%;
  max-width:300px;
  aspect-ratio:2.9 / 1;
  transform: translate(-10px,0);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/logo-202507-black.svg);
}
@media screen and (min-width: 821px) {
.midashi-TB {
}
}
/*トップアクセス
----------------------------------- */
.top-acces-box {
 position: relative;
}
/*店名
----------------------------------- */
.top-salon-name {
  position: relative;
  margin:0px 0 5px;
  font-size: 2.2rem;
  line-height: 1.0;
  letter-spacing: 0.2rem;
  font-family: 'Josefin_Sans-Italic';
  font-weight: 500;
  color:#111111;
}
.top-salon-address {
  position: relative;
  margin-bottom:10px;
}

.top-salon-addressInner,a.top-salon-addressInner {
  position: relative;
  display:inline-block;
  font-size: 1.2rem;
  line-height: 1.0;
  letter-spacing: 0.08rem;
  margin:3px 0;
}
a.top-salon-addressInner.link  {
  border-bottom:1px solid #4C505B;
  color:#4C505B;
}
a.top-salon-addressInner.add  {
 font-size: 1.1rem;
}
a.top-salon-addressInner.tel {
  cursor:not-allowed;
}
.top-salon-addressInner.smoll {
  font-size: 1.0rem;
}
.top-salon-addressInner .large {
  font-size: 2.6rem;
  line-height: 1.1;
  padding-right: 5px;
  font-family: 'Roboto';
  font-weight: 400;
  color:#111111;
}
/*tiptopについて
---------------------------------------------------------------*/
.about-icon-box {
  position: relative;
  width: 100%;
  text-align:left;
  letter-spacing:-10rem;
  font-size:0;
}
/* 
---------------------------------------------- */
.about-icon-inner {
  position: relative;
  display:inline-block;
  vertical-align:top;
  width:20px;
  aspect-ratio: 1 / 1;
  margin-right:15px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.about-icon-inner.lazyloaded.alcohol {
  background-image: url(../images/icon/alcohol.png);
}
.about-icon-inner.lazyloaded.mask {
  background-image: url(../images/icon/mask.png);
}
.about-icon-inner.lazyloaded.taionkei {
  background-image: url(../images/icon/taionkei.png);
}
.about-icon-inner.lazyloaded.patation {
  background-image: url(../images/icon/patation.png);
}
.about-icon-inner.lazyloaded.kanki {
  background-image: url(../images/icon/kanki.png);
}
.about-icon-inner.lazyloaded.wifi {
  background-image: url(../images/icon/wifi.png);
}
.about-icon-inner.lazyloaded.kiz {
  background-image: url(../images/icon/kiz.png);
}
.about-icon-inner.lazyloaded.lgbt {
  background-image: url(../images/icon/lgbt.png);
}
.about-link-box  {
  position: relative;
  display:inline-block;
  vertical-align:top;
  padding-top:5px;
}
a.about-link  {
  position: relative;
  display:inline-block;
  line-height: 1.0;
  letter-spacing:0rem;
  font-size:1.4rem;
  color:#4C505B;
  color:#111111;
font-weight:bold;
  border-bottom:1px solid #4C505B;
}
/*▽スライドショー
--------------------------------------------- */
.top-box-inner-image {
  position: relative;
  overflow: hidden;
  margin-bottom:5vw;
  overflow: hidden;
}
#ranking-slide .splide__slide  {
  position: relative;
  aspect-ratio:1 / 1;
}
img.top-box-salon-image{
  position: relative;
  display:block;
  width:100%;
  object-fit: cover;
  aspect-ratio:1 / 1;
}
/* 
--------------------------------------------- */
.top-box-salon-image {
  position: relative;
  aspect-ratio:1 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
/*▽サロン説明
---------------------------------------------------------------*/
.top-box-inner-about {
  position: relative;
  display:inline-block; 
  vertical-align: middle;
  width:100%;
  padding:0 7vw;
  letter-spacing: 0rem;
  margin:0 auto 5vw;
}

@media screen and (min-width: 821px) {
.top-box-inner-about {
  position: relative;
  display:inline-block; 
  vertical-align: middle;
  max-width:700px;
  padding:0;
  margin-left:7vw;
}
}


/*カスタム動画・VEENA
---------------------------------------------------------------*/
.videoBox {
  position: relative;
  display:block; 
  width:100%;
  max-width:none;
  margin: 30px auto 20px;
  overflow: hidden;
  background-color:#fff;
  aspect-ratio:1.78 / 1;
  border-radius:0vw;
}
@media screen and (min-width: 900px) {
.videoBox{
  display:inline-block; 
  vertical-align: middle;
  width:50%;
  margin: 30px auto 20px;
  max-width:none;
  border-radius:0vw;
}
}
/*動画用ローダー
--------------------------------*/
.loader-flower-video{
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateZ(0) scale(0.74);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.loader-flower-video div { 
  box-sizing: content-box; 
}

.loader-flower-video.loading div {
  left: 47px;
  top: 24px;
  position: absolute;
  background: #535353;
  width: 6px;
  height: 12px;
  border-radius: 3px / 6px;
  transform-origin: 3px 26px;
  animation: loader-flower linear 1s infinite;
}

.loader-flower-video div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.9166666666666666s;
  background: #535353;
}
.loader-flower-video div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -0.8333333333333334s;
  background: #535353;
}
.loader-flower-video div:nth-child(3){
  transform: rotate(60deg);
  animation-delay: -0.75s;
  background: #535353;
}
.loader-flower-video div:nth-child(4){
  transform: rotate(90deg);
  animation-delay: -0.6666666666666666s;
  background: #535353;
}
.loader-flower-video div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.5833333333333334s;
  background: #535353;
}
.loader-flower-video div:nth-child(6){
  transform: rotate(150deg);
  animation-delay: -0.5s;
  background: #535353;
}
.loader-flower-video div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.4166666666666667s;
  background: #535353;
}
.loader-flower-video div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.3333333333333333s;
  background: #535353;
}
.loader-flower-video div:nth-child(9){
  transform: rotate(240deg);
  animation-delay: -0.25s;
  background: #535353;
}
.loader-flower-video div:nth-child(10){
  transform: rotate(270deg);
  animation-delay: -0.16666666666666666s;
  background: #535353;
}
.loader-flower-video div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.08333333333333333s;
  background: #535353;
}
.loader-flower-video div:nth-child(12){
  transform: rotate(330deg);
  animation-delay: 0s;
  background: #535353;
}

/* 
---------------------------------------------------------------*/
.video-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index:2;
  background-color:#fff;
}
video {
  background-color:#fff;
}

/*動画下キスト
---------------------------------------------------------------*/
.video-link-box {
  position: relative;
  display:block; 
  width:100%;
  max-width:500px;
  margin: 0 auto 20px;
  text-align:center;
}
@media screen and (min-width: 900px) {
.video-link-box {
  display:inline-block; 
  vertical-align: middle;
  width:calc(48% - 10px);
  max-width:none;
  margin: 0 0 20px 20px;


}
}
/*
---------------------------------------------------------------*/
.veena-text{
  position: relative;
  color: #4C505B;
  font-size:1.4rem;
  letter-spacing: 0rem;
 padding:20px 0 0;
}
span.veena-bold{
  font-weight:bold;
}
/* 
--------------------------------------------- */
.veena-link {
  position: relative;
  display:block;
  width: 100%;
  max-width:500px;
  margin: 0 auto 0;
  aspect-ratio:12 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/veena/veena.jpg);
}



/*特設 浴衣
---------------------------------------------------------------*/
.yukata-box {
  position: relative;
  display:block; 
  width:100%;
  margin: 30px auto 0px;
  overflow: hidden;
  background-color:#fff;
display:none;
}

@media screen and (min-width: 900px) {
.yukata-box{
  display:inline-block; 
  vertical-align: middle;
  width:50%;
  margin: 0 auto 0px;
display:none;
}
}

/*
---------------------------------------------------------------*/
.yukata-image {
  position: relative;
  display:block;
  margin: 0 auto 20px;
  aspect-ratio:1.9 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url(../yukata2025-fuchu/yukata-image.jpg);
  border-radius:3vw;
}
@media screen and (min-width: 900px) {
.yukata-image {
  border-radius:3vw;
}
}

/*テキスト
---------------------------------------------------------------*/
.yukata-link-box {
  position: relative;
  display:block; 
  margin: 0 auto 0;
  text-align:left;
  padding:0 30px;
}
/*
---------------------------------------------------------------*/
.yukata-text{
  position: relative;
  color: #4C505B;
  font-size:1.4rem;
  letter-spacing: 0rem;
 margin: 0 auto 20px;
}

/*
--------------------------------*/
a.yukata-link {
   position: relative;
   display: block;
   max-width:240px;
   height:40px;
   margin: 0 0 20px;
   background-color:#fff;
   border-radius:40px;
   border:1px solid #333;
}
a.yukata-link:after {
    position: absolute;
    content:"";
    margin:0;
    width: 6px;
    height: 6px;
    top:50%;
    right:20px;
    border-top:2px solid #000;
    border-right:2px solid #000;
    pointer-events: none;
    transform : translate(0px,-50%) rotate(45deg);
}
a.yukata-link::before {
    content: '浴衣スタイルコレクション';
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top:0;
    left:-5px;
    width:100%;
    height: 100%;
    line-height:1;
    letter-spacing: 0.1rem;
    color: #000;
    font-size:1.4rem;
    font-weight:bold;
    font-family:'Hiragino Maru Gothic Pro';
}




/* ▼HPB ajax
---------------------------------------------------------------*/
/* 店のキャッチコピー
---------------------------------------------------------------*/
#result-shopCatchCopy {
  position: relative;
  margin-bottom:10px;
}
.shopCatchCopy {
  position: relative;
  color: #4C505B;
  font-size: 1.8rem;
  font-family: "游明朝", YuMincho;
  font-weight: 700;
}
/* 店の説明
---------------------------------------------------------------*/
#result-slnTopImgDescription {
  position: relative;
}
.slnTopImgDescription {
  position: relative;
  color: #4C505B;
  font-size: 1.3rem;
  line-height:2;
}
/* 予約ボタン非表示 */
.slnTopImgBtnReserve {
  display: none;
}
/*▲
-------------------------------------------------------------------------- */

/* ▼共通　空席確認・予約
---------------------------------------------------------------*/
a.index-yoyaku-link {
  position: relative;
  display:block;
  max-width: 80%;
  width: 200px;
  height: 40px;
  margin:0 auto;
  border-radius: 40px;
  background-color: #FF3276;
  overflow: hidden;
}
a.index-yoyaku-link::before {
  position: absolute;
  content:"";
  width: 20px;
  height: 20px;
  top:50%;
  right:10px;
  transform: translate(0%, -50%);
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center center;
  background-image: url(../images/navi/arow.svg);
}
a.index-yoyaku-link::after {
  position: absolute;
  content:"空席確認・予約";
  width: 100%;
  left:0px;
  top:50%;
  transform: translate(-10px,-50%);
  color:#fff;
  padding: 0 10px;
  line-height: 1;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  text-align:center;
}

/*▼20250420追記　店販キャンペーン
--------------------------------*/
.products-box {
  position: relative;
  overflow: hidden;
  padding:10px 0 60px;
  margin:0 auto 13vw;
  background-color:#07679d;
}
@media screen and (min-width: 820px) {
.products-box {
  margin:0 auto 90px;
  padding:10px 0px 60px;
}
}
/*
--------------------------------*/
.index-sale-image-box {
  position: relative;
  background-color:#07679d;
  margin:0 auto 0px;
}
.index-sale-image {
  position: relative;
  max-width:650px;
  aspect-ratio:1.84 / 1;
  margin:0 auto 0px;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
  background-image: url(../images/sale/tcart-sale.webp);
}
/*
-------------------------------------------------------------------------*/
.products-image{
  position: relative;
  aspect-ratio:1.5 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.products-image.product01 {
  background-image: url(../images/sale/opening-1.webp);
}
.products-image.product02 {
  background-image: url(../images/sale/opening-2.webp);
}
.products-image.product03 {
  background-image: url(../images/sale/opening-3.webp);
}
.products-image.product04 {
  background-image: url(../images/sale/opening-4.webp);
}
.products-image.product05 {
  background-image: url(../images/sale/opening-5.webp);
}
.products-image.product06 {
  background-image: url(../images/sale/opening-6.webp);
}
/*
--------------------------------*/
.products-box-inner {
  position: relative;
}
/*
--------------------------------*/
#products-slide.splide  {
  position: relative;
  margin:0;
  padding:0;
}
#products-slide .splide__slide  {
  position: relative;
  aspect-ratio:1.5 / 1;
}

/*
--------------------------------*/
.sale-text-box {
  position: relative;
  padding:30px 10px 0px;
  text-align:center;
  color:#fff;
}
@media screen and (min-width: 600px) {
.sale-text-box {
  padding:50px 10px 0px;
}
}
/*
--------------------------------*/
.sale-text {
  position: relative;
  color:#fff;
  line-height: 1;
  font-size: 4rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin:0 auto 20px;
  font-family: 'Roboto';
  font-weight: 500;
  font-family: 'Josefin_Sans';
  font-weight: 700;
display:none;
}
.sale-text-sub {
  position: relative;
  font-size: 1.4rem;
display:none;
}
@media screen and (min-width: 600px) {
.sale-text {
  font-size: 5rem;
}
.sale-text-sub {
  position: relative;
  font-size: 1.6rem;
}
}
/*
--------------------------------*/
a.tcart-sale-swichi {
  position: relative;
  display:block;
  width: 250px;
  color:#fff;
  line-height: 1;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin:0 auto 0px;
  border-radius:10px;
  border:2px solid rgba(255,255,255,1);
padding:10px 10px 10px 0;
}

a.tcart-sale-swichi::after {
    position: absolute;
    content:"";
    margin:0;
    width: 8px;
    height: 8px;
    top:50%;
    right:20px;
    border-top:3px solid #FFF;
    border-right:3px solid #FFF;
    pointer-events: none;
    transform : translate3d(0%,-50%,0) rotate(45deg);
    z-index:4;
}


/* ▼20250420追記リンク 楽天ビューティー こだわり
---------------------------------------------------------------*/
a.index-go-rakuten-kodawari {
  position: relative;
  display:block;
  width: 290px;
  height: 40px;
  margin:0 auto;
  overflow: hidden;
}
a.index-go-rakuten-kodawari::before {
  position: absolute;
  content:"";
  width: 30px;
  height: 30px;
  top:50%;
  right:0px;
  transform: translate(0%, -50%);
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center center;
  background-image: url(../images/navi/arow-pink.svg);
}
a.index-go-rakuten-kodawari::after {
  position: absolute;
  content:"";
  width: calc(100% - 30px);
  height: 100%;
  top:0;
  left:0;
  transform: translate(0%,0%);
  background-repeat: no-repeat;
  background-size:contain;
  background-position: left 0px center;
  background-image: url(../images/icon/rakuten2.svg);
}
/*楽天ビューティー スタイル
---------------------------------------------------------------*/

a.index-go-rakuten-style {
  position: relative;
  display:block;
  width: 290px;
  height: 40px;
  margin:0 auto;
  overflow: hidden;
}
a.index-go-rakuten-style::before {
  position: absolute;
  content:"";
  width: 30px;
  height: 30px;
  top:50%;
  right:0px;
  transform: translate(0%, -50%);
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center center;
  background-image: url(../images/navi/arow-pink.svg);
}
a.index-go-rakuten-style::after {
  position: absolute;
  content:"";
  width: calc(100% - 30px);
  height: 100%;
  top:0;
  left:0;
  transform: translate(0%,0%);
  background-repeat: no-repeat;
  background-size:contain;
  background-position: left 0px center;
  background-image: url(../images/icon/rakuten2.svg);
}
/*インスタ
---------------------------------------------------------------*/

a.index-go-insta {
  position: relative;
  display:block;
  width: 290px;
  aspect-ratio:3.85 / 1;
  margin:0 auto;
  overflow: hidden;
}
a.index-go-insta::before {
  position: absolute;
  content:"";
  width: 30px;
  height: 30px;
  top:50%;
  right:0px;
  transform: translate(0%, -50%);
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center center;
  background-image: url(../images/navi/arow-black.svg);
}
a.index-go-insta::after {
  position: absolute;
  content:"";
  width: calc(100% - 30px);
  height: 100%;
  top:0;
  left:0;
  transform: translate(0%,0%);
  background-repeat: no-repeat;
  background-size:contain;
  background-position: left 0px center;
  background-image: url(../images/icon/insta-logo.png);
}