/* =============================
    オープニング動画カバー
============================= */
.index-page-cover{
  position: fixed;
  align-items:center;
  justify-content:center;
  inset: 0;
  width: 100%;
  height:100svh;
  background: #fff;
  overflow: hidden;
  transition: opacity .6s ease;
  will-change: opacity;
  z-index: 997;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .6s ease, visibility 0s linear .6s;
}

.index-page-cover.hidden{
  opacity: 0;
  pointer-events: none;
}


/* オープニングビデオ
---------------------------------------------- */
.index-cover-video {
  display: block;
  width: 100%;
  height:100%;
  object-fit: cover;
  z-index: 1;

}
/* オープニング動画 ロゴ
---------------------------------------------- */
.index-cover-video-logo-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 80%;
  max-width: 400px;
  aspect-ratio: 3 / 1;
  z-index: 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/index/logo/logo-white.svg);
  opacity:.5;
}
/* ボディースクロール解除
---------------------------------------------- */
body {
  overflow: hidden;
}
body.is-loaded {
  overflow: auto;
}

/* =============================
    top splide用カーバー
============================= */
.index-page-cover-second{
  position: fixed;
  inset: 0;
  background: #fff;
  overflow: hidden;
  transition: opacity .4s ease;
  will-change: opacity;
  z-index: 996;
  opacity: 1;
  pointer-events: auto;
}

.index-page-cover-second.hide {
  opacity: 0;
  pointer-events: none;
}

/* =============================
   動画スキップボタン
============================= */

.index-cover-skip {
  position: absolute;
  right: 20px;
  bottom: 30px;
  z-index: 3;
  padding: 8px 18px;
  border: 1px solid #fff;
  border-radius: 20px;
  background: rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: .1em;
  cursor: pointer;
}




 /* =============================
    トップ へ
============================= */

#pageTop {
  position: fixed;
  bottom:20px;
  right:20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: calc(20px + env(safe-area-inset-right));
  left:auto;
  transform: translate3d(0,0,0) rotate(180deg);
  width: 56px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background-color:#fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:20%;
  background-image: url(../images/index/yajirushi-down.svg);
  border:1px solid #aaa;
  z-index:20;
  border-radius:100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
#pageTop.is-show {
  opacity: 1;
  pointer-events: auto;
}

 /* =============================
    ラッピング
============================= */

.tip-wrapper {
  position: relative;
  height: auto;
  min-height: 100%;
  background-color:#fff;
  padding-bottom:calc(100px + env(safe-area-inset-bottom));
}
body.js_isMobile .tip-wrapper {
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}

/*▼モーダルを開いた時親画面をスライド
------------------------------------------ */
#slide-wrap {
  transform-origin: center center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
body.scrollbar-hide #slide-wrap {
  transform: translateX(-25%);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}

@media screen and (min-width: 821px) {
body.scrollbar-hide #slide-wrap {
  transform: none;
}
}

/*▼お問い合わせフォームはスライドしない
------------------------------------------ */
body.scrollbar-hide.no-slide #slide-wrap {
  transform: translateX(0%);
}

/*▼ナビヘッダー
----------------------------------------------------------------------*/
.navi-header {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  height: 0px;
  height: 60px;
  top:0;
  left:0;
  z-index:3;
  transition: opacity .4s;
  border-bottom:1px solid #65707c;
  border-bottom:1px solid #B6BCC3;
  background-color:#fff;
  padding-right:20px;
  text-align:right;
  transform: translate3d(0,0,0);
}
.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:40vw;
  max-width:135px;
  top:50%;
  left:20px;
  aspect-ratio:3.2 / 1;
  transform: translate(0,-51%);
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/index/logo/logo-tb-kon.svg);
}
@media screen and (min-width: 820px) {
a.top-image-title {
  left:20px;
}
}

/* 
---------------------------------------------------------------*/
.navi-header-text {
  position: absolute;
  display:block;
  width:50%;
  top:50%;
  left:170px;
  transform: translate(0,-50%);
  color:#00002d;
  display:none;
  text-align:left;
  line-height: 1;
  font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.6rem);
}
@media screen and (min-width: 650px) {
.navi-header-text {
  display:block;
}
}

/*告知ボード
---------------------------------------------------------------*/
.openBoard-box {
  position: relative;
  display: inline-block;
}
.openBoard-box:after {
  position: absolute;
  content: "";
  top:10px;
  left:50%;
  transform: translate(-50%,0);
  width:22px;
  aspect-ratio:1 / 1;
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/index/bell/bell-kon.svg);
}

/*
---------------------------------------------------------------*/
#openBoard {
  position: relative;
  display: inline-block;
  text-align:center;
  line-height: 1;
  font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.5rem);
  letter-spacing: 0.05rem; 
  padding:10px 15px 11px;
  transform: translate(0%,110%);
  background-color:#d546a5;
  border:1px solid  #d546a5;
  color:#fff;
  border-radius: 3px;
}

#openBoard.closed {
  background-color:#00002d;
  border:1px solid  #00002d;
}
/*
---------------------------------------------------------------*/

#openBoard:before, #openBoard:after {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0 4px 4px 4px;
  left: 50%;
  transform: translate(-50%,1px);
}
#openBoard:before {
  border-bottom-color: #d546a5;
  top: -5px;
}
#openBoard:after {
  border-bottom-color: #d546a5;
  top: -4px;
}


#openBoard.closed:before {
  border-bottom-color: #00002d;
  top: -5px;
}
#openBoard.closed:after {
  border-bottom-color: #00002d;
  top: -4px;
}

/*
--------------------------------*/
.index-sticky-box {  
  position: relative;
  z-index:0;
}


/*▼イメージ画像 スライド
--------------------------------*/
#top-image-slide.splide {
    visibility: visible;
}

/*
--------------------------------*/
.index-slide-image-box {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top:60px;
  left:0;
  margin:0 auto;
  z-index:0;
  height:calc(100svh - 60px);
  overflow: hidden;
}

/*
--------------------------------*/
.logo-tb-salon {
  position: absolute;
  width:85%;
  max-width:600px; 
  bottom:20px;
  left:50%;
  transform: translate(-50%,0%);
  aspect-ratio:9 / 1;
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/index/logo/logo-totalbeauty-white.svg);
}

/*
--------------------------------*/
img.top-image-slide{
  position: relative;
  display:block;
  width:375px;
  height:calc(100svh - 60px);
  object-fit: cover;
  aspect-ratio:2 / 3;
}
img.top-image-slide.yoko{
  aspect-ratio:2.665 / 2;
  width:750px;
}

@media screen and (min-width: 414px) {
img.top-image-slide{
    width:414px;
  }
img.top-image-slide.yoko{
    width:828px;
  }
}

@media screen and (min-width: 600px) {
img.top-image-slide{
    width:500px;
  }
img.top-image-slide.yoko{
    width:1000px;
  }
}
@media screen and (min-width: 768px) {
img.top-image-slide{
    width:500px;
  }
img.top-image-slide.yoko{
    width:1000px;
  }
}

/*▼ロゴ　店舗名 メッセージ
---------------------------------------------------------------*/
.salon-box {
  position: relative;
  text-align:center;
  background-color:#fff;
  color:#00002d;
  padding:40px 20px 0;
  margin: 0 auto;
  z-index:2;
  min-height:400px;

}
@media screen and (min-width: 600px) {
.salon-box {
  padding:40px 60px 0;
}
}
/*
---------------------------------------------------------------*/
.salon-box-inner {
  position: relative;
  max-width:780px;
  margin: 0 auto;
}
/* 
---------------------------------------------------------------*/
.salon-box-text {
  position: relative;
  margin: 0 auto 20px;
  line-height: 1;
  font-size: clamp(1.8rem, 1.6rem + .5vw, 2.0rem);
  font-weight: 500;
  letter-spacing: 0.05em;
}
/* ロゴ
---------------------------------------------------------------*/
.salon-box-logo {
  position: relative; 
  width:85%; 
  max-width:600px; 
  margin: 0 auto 40px;
  aspect-ratio:3.5 / 1;
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
  background-image: url(../images/index/logo/logo-kon.svg);
}
/*▽メッセージ
---------------------------------------------------------------*/
.message-box {
  position: relative;
  margin:0 auto 70px;
  padding:0 0 40px;
  text-align:left;
  border-bottom:1px dotted #00002d;
}
@media screen and (min-width: 768px) {
.message-box {
  margin:0 auto 70px;
  padding:0 0 60px;
}
}

/* 店のキャッチコピー
---------------------------------------------------------------*/
#result-shopCatchCopy {
  position: relative;
  margin-bottom:30px;
  font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  font-weight: 500 !important;
}

/* ajax使用時のみ
---------------------------------------------------------------*/
p.shopCatchCopy {
  position: relative;
  font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  font-weight: 500 !important;
}
b, strong {
  font-weight: 500 !important;
}

/* 店の説明
---------------------------------------------------------------*/
#result-slnTopImgDescription {
  position: relative;
  font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.6rem);
}
/* ajax使用時のみ
---------------------------------------------------------------*/
.slnTopImgDescription {
  position: relative;
  font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.6rem);
}
/* 予約ボタン非表示 */
.slnTopImgBtnReserve {
  display: none;
}


/*コンテンツ
--------------------------------------------- */
.contents-box {
  position: relative;
  margin: 0 auto;
  padding:0px 20px 0;
  z-index:2;
  background-color:#fff;
  color:#00002d;
}
@media screen and (min-width: 600px) {
.contents-box {
  padding:0px 60px 0;
}
}

/* =============================
    ↓メインコンテンツ
============================= */

.main-contents-box {
  position: relative;
  max-width:780px;
  padding:0 0 25px;
  margin: 0 auto;
  border-bottom:1px dotted #00002d;
}
@media screen and (min-width: 768px) {
.main-contents-box {
  padding:0 0 40px;
}
}
/*メインコンテンツ タイトル
--------------------------------------------- */
.index-contents-title {
  position: absolute;
  width: 100%;
  top:-40px;
  left:0;
  margin: 0 auto 0px;
  font-size: 1.6rem;
  line-height:1;
}
@media screen and (min-width: 768px) {
.index-contents-title {
  top:-40px;
}
}

/* =============================
    ↑メインコンテンツ
============================= */


/* =============================
    ↓プロダクツ　おすすめ商品 コンテンツ
============================= */

.products-contents-box {
  position: relative;
  max-width:780px;
  padding:40px 0;
  margin: 0 auto 40px;
  border-bottom:1px dotted #00002d;
}

/*タイトル
--------------------------------------------- */
.products-contents-title {
  position: relative;
  margin: 0 auto 30px;
  font-size: 1.6rem;
  line-height:1;
}
@media screen and (min-width: 600px) {
.products-contents-title {
  margin: 0 auto 0px;
}
}

/*
-------------------------------- */
.osusume-wrap {
  position: relative;
  color:#272731;
}
/*
---------------------------------------------------------------*/
.video-wrap {
  position: relative;
  margin: 0 auto 0px;
  letter-spacing: -10rem;
  font-size: 0;
}
/* 
---------------------------------------------------------------*/
.videoBox {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  aspect-ratio: 1.78 / 1;
  margin: 0 auto;
border-radius:4px;
}
@media screen and (min-width: 600px) {
  .videoBox {
   display: inline-block;
   vertical-align: middle;
   width: 50%;
  }
}

/* 
---------------------------------------------------------------*/
video {
  background-color: transparent;
border-radius:4px;
}

/*  Safari(iOS)
 初回動画レイヤー生成時のホワイトフラッシュ対策
---------------------------------------------------------------*/
.video-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  object-fit: cover;
  z-index: 2;
  background-color: transparent;
}
/* 
---------------------------------------------------------------*/
.video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition:opacity .35s ease;
  transform: translateZ(0);
  will-change: opacity;
  backface-visibility: hidden;
  z-index: 3;
}
.video-cover.bykarte {
  background-image: url(../images/index/products/bykarte/bykarte-image.webp);
}
.video-cover.milbon {
  background-image: url(../images/index/products/milbon/milbon-image.webp);
}
.video-cover.refa {
  background-image: url(../images/index/products/refa/refa-image.webp);
}
/* 
---------------------------------------------------------------*/
.video-cover-fade-out{
  opacity:0;
}

/*
---------------------------------------------------------------*/
.video-image-box {
  position: relative;
  transform: translate(0%, 0%);
  z-index: 3;
  pointer-events: none;
}
@media screen and (min-width: 600px) {
  .video-image-box {
  display: inline-block;
  vertical-align: middle;
  width: calc(50% - 0px);
  aspect-ratio: 1.15 / 1;
  }  
}

/*
-------------------------------- */
.mainvisual-images-inner {
  position: relative;
  margin:0 auto;
  width: 85%;
  aspect-ratio: 1.78 / 1;
  z-index: 2;
}
@media screen and (min-width: 600px) {
.mainvisual-images-inner {
  position: absolute;
  width: 100%;
  top:50%;
  transform: translate(-10%, -50%);
  z-index: 2;
}
}

/*
---------------------------------------------------------------*/
.mainvisual-image {
  position: absolute;
  width: auto;
  transform-origin: center;
  rotate: 30deg;
  pointer-events: none;
}

.bykarte .mainvisual-image {
  height: 100%;
}
.refa .mainvisual-image {
  height: 80%;
}
.milbon .mainvisual-image {
  height: 100%;
}
@media only screen and (min-width: 600px) {
  .bykarte .mainvisual-image {
    height: 110%;
  }
  .refa .mainvisual-image {
    height: 100%;
  }
  .milbon .mainvisual-image {
    height: 100%;
  }
}

/*左
---------------------------------------------------------------*/
.mainvisual-image:first-child {
  top: auto;
  bottom: -2%;
  left: 5%;
  right: auto;
  animation: float 12s ease-in-out infinite;
}

.bykarte .mainvisual-image:first-child {
  left: 10%;
}

.milbon .mainvisual-image:first-child {
  left: 5%;
}

.refa .mainvisual-image:first-child {
  left: 3%;
}

/*右
---------------------------------------------------------------*/
.mainvisual-image:nth-child(2) {
  top: -2%;
  bottom: auto;
  left: auto;
  right: 5%;
  animation: float 12s -2s ease-in-out infinite;
}
.bykarte .mainvisual-image:nth-child(2) {
  right: 10%;
}

.milbon .mainvisual-image:nth-child(2) {
  right: 5%;
}

.refa .mainvisual-image:nth-child(2) {
  right: 3%;
}

/*中央
---------------------------------------------------------------*/
.mainvisual-image:last-child {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: float 12s -4s ease-in-out infinite;
}

/*
---------------------------------------------------------------*/
/* 初期状態は停止 */
.mainvisual-image{

  animation-play-state: paused;
}
/* 表示中だけ動かす */
.splide__slide.is-active .mainvisual-image{
  animation-play-state: running;
}

/* 商品Splide全体停止時 */
#products-slide.product-animation-stop .mainvisual-image{
  animation-play-state: paused !important;
}

/*
---------------------------------------------------------------*/
@keyframes float {
  0% {
    transform: translate(12px, 20px);
  }
  50% {
    transform: translate(-12px, -20px);
  }
  100% {
    transform: translate(12px, 20px);
  }
}

@keyframes float {
  0% {
    transform: translate(8%, 16%);
  }
  50% {
    transform: translate(-8%, -16%);
  }
  100% {
    transform: translate(8%, 16%);
  }
}

/*
-------------------------------- */
.osusume-disc-box {
  position: relative;
  letter-spacing: 0rem;
  text-align: center;
  z-index: 3;
  transform: translate(0, 0);
}
/*ロゴ
-------------------------------- */
.osusume-logo {
  position: relative;
  width: 60%;
  max-width: 300px;
  aspect-ratio: 5 / 1;
  margin: 0 auto 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url(../images/index/products/bykarte/bykarte-logo.svg);
}
.osusume-logo.bykarte {
  background-image: url(../images/index/products/bykarte/bykarte-logo.svg);
}
.osusume-logo.milbon {
  background-image: url(../images/index/products/milbon/milbon-logo.svg);
}
.osusume-logo.refa {
  background-image: url(../images/index/products/refa/refa-logo.svg);
}

/*
-------------------------------- */
a.osusume-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 250px;
  height:40px;
  margin:0 auto;
  background-color:#00002d;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  font-weight:500;
  line-height:1;
  border-radius:30px;
}

/*splide
--------------------------------------------- */
#products-slide .splide-controller {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  margin: 20px 0 0;
  padding: 0 10px;
}

/*
--------------------------------------------- */
#products-slide ul.splide__pagination {
  font-size: 0;
}
#products-slide .splide__pagination__page:focus-visible {
  outline: 1px solid #00002d;
  outline-offset: 0px;
  z-index: 1;
  transition: none;
}
#products-slide .splide__arrow > svg {
  display: none !important;
}
#products-slide .splide__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  justify-content: flex-start;
  margin: 0 auto 0px;
  text-align: center;
}
@media screen and (min-width: 600px) {
  #products-slide .splide__pagination {
    margin: 0;
  }
}
/*
--------------------------------------------- */
#products-slide .splide__pagination > li {
  font-size: 0;
}
/*
--------------------------------------------- */
#products-slide .splide__pagination__page {
  width: 2rem;
  height: 3px;
  cursor: pointer;
  transition: 0.8s cubic-bezier(0.2, 1, 0.2, 1);
  vertical-align: top;
  background-color: #fff !important;
  border-radius: 6px;
  border: 1px solid #272731 !important;
}
#products-slide .splide__pagination__page.is-active {
  width: 4rem;
  height: 3px;
  border-radius: 6px;
  background-color: #272731 !important;
}

/*
--------------------------------------------- */
#products-slide .splide__arrows {
  display: none;
}
@media screen and (min-width: 600px) {
  #products-slide .splide__arrows {
    display: flex;
    gap: 1rem;
    margin: 0 0 0 auto;
  }
}

#products-slide .splide__arrow--prev,
#products-slide .splide__arrow--next {
  position: relative;
  flex-shrink: 0;
  margin: 0;
}
#products-slide .splide__arrow:disabled {
  pointer-events: none;
  opacity: 0.5;
}

#products-slide .splide__arrow:disabled::before {
  box-shadow: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0);
}

#products-slide .splide__arrow--prev,
#products-slide .splide__arrow--next {
  display: grid;
  place-content: center;
  width: 30px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: 0.4s cubic-bezier(0.2, 1, 0.2, 1);
  background-color: #fff;
  border-radius: 50%;
}

#products-slide .splide__arrows button {
  outline: none; /* 外枠を消す */
  border:1px solid #272731
}

#products-slide .splide__arrow--prev::after,
#products-slide .splide__arrow--next::after {
  width: 8px;
  height: 8px;
  content: "";
  border: solid #272731;
  border-width: 3px 3px 0 0;
}
#products-slide .splide__arrow--prev::after {
  margin-left: 0.4rem;
  transform: rotate(-135deg);
}
#products-slide .splide__arrow--next::after {
  margin-right: 0.4rem;
  transform: rotate(45deg);
}
#products-slide .splide__arrow:disabled {
  pointer-events: none;
  opacity: 0;
}
#products-slide .splide__arrow:focus-visible {
  outline: 3px solid rgba(180, 233, 0, 0.8);
  outline-offset: 3px;
  z-index: 1;
  transition: none;
}

#products-slide .splide__slide {
}

/* =============================
    ↑おすすめ商品 コンテンツ
============================= */


/* =============================
    ↓オンラインショップ コンテンツ
============================= */

.online-shop-contents-box {
  position: relative;
  max-width:780px;
  padding:0px 0px 40px;
  margin: 0 auto 40px;
  border-bottom:1px dotted #00002d;
}
/*オンラインショップ コンテンツ タイトル
--------------------------------------------- */
.online-shop-contents-title {
  position: relative;
  margin: 0 auto 40px;
  font-size: 1.6rem;
  line-height:1;
  padding-left:30px;
}
.online-shop-contents-title::before{
  position: absolute;
  content: "";
  width:30px;
  height:30px;
  left:0;
  top:50%;
  transform: translate(0%, -50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  background-image: url(../images/index/online-shop/netshop.svg);
}

/*サブコンテンツ
--------------------------------------------- */
.sub-contents-box {
  position: relative;
  max-width:780px;
  padding:40px 0;
  margin: 0 auto 40px;
  border-bottom:1px dotted #00002d;
  border-top:1px dotted #00002d;
}
/*サブコンテンツ タイトル
--------------------------------------------- */
.index-sub-contents-title {
  position: relative;
  margin: 0 auto 30px;
  font-size: 1.6rem;
  line-height:1;
}
/*コンテンツラップ
--------------------------------------------- */
.about-link-wrap  {
  position: relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}
@media screen and (min-width: 500px) {
.about-link-wrap  {
  gap:15px;
}
}
@media screen and (min-width: 700px) {
.about-link-wrap  {
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
}
/*オンラインショップ ラップ
--------------------------------------------- */
.online-shop-contents-box .about-link-wrap  {
  gap:10px;
}
@media screen and (min-width: 700px) {
.online-shop-contents-box .about-link-wrap  {
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
}

/*
--------------------------------------------- */
.about-link-box  {
  position: relative;
}
/*
--------------------------------------------- */
a.about-link-box-inner,
.about-link-box-inner {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   justify-content: space-around;
   text-align:center;
   width:100%;
   aspect-ratio: 1 / 1;
   cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
/*オンラインショップ
--------------------------------------------- */
.online-shop-contents-box a.about-link-box-inner,
.online-shop-contents-box .about-link-box-inner {
   position: relative;
   display: block;
   text-align:center;
   width:100%;
   aspect-ratio:auto;
   cursor: pointer;
}

/*メインカテゴリーアイコン
--------------------------------------------- */
.about-contents-image {
  position: relative;
  width: 40%;  
  max-width: 65px;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  cursor: pointer;
}
.about-contents-image.info {
  background-image: url(../images/index/category/info/info-kon.svg);
}
.about-contents-image.access {
  background-image: url(../images/index/category/access/access-kon.svg);
}
.about-contents-image.yoyaku {
  background-image: url(../images/index/category/yoyaku/yoyaku-kon.svg);
}
.about-contents-image.price {
  background-image: url(../images/index/category/price/price-kon.svg);
  aspect-ratio: 1 / 1.2;
}
.about-contents-image.team {
  background-image: url(../images/index/category/team/team-kon.svg);
  width: 42%;  
}
.about-contents-image.style {
  background-image: url(../images/index/category/style/style-kon.svg);
}
.about-contents-image.blog {
  background-image: url(../images/index/category/blog/blog-kon.svg);
}
.about-contents-image.insta {
  background-image: url(../images/index/category/insta/insta-kon.svg);
  width: 35%;  
  max-width: 60px;
}
.about-contents-image.kuchikomi {
  background-image: url(../images/index/category/kuchikomi/kuchikomi-kon.svg);
}
.about-contents-image.group-salon {
  background-image: url(../images/index/category/group-salon/group-salon-kon.svg);
}
.about-contents-image.faq {
  background-image: url(../images/index/category/faq/faq-kon.svg); 
  width: 45%;  
  max-width: 70px;
}
.about-contents-image.mail {
  background-image: url(../images/index/category/mail/mail-kon.svg);
}

/*サブカテゴリーアイコン
--------------------------------------------- */
.about-contents-image.kaisha {
  background-image: url(../images/index/category/kaisha/kaisha.svg);
  width: 45%;  
  max-width: 70px;
}
.about-contents-image.kiyaku {
  background-image: url(../images/index/category/kiyaku/kiyaku.svg);
}
.about-contents-image.prapoli {
  background-image: url(../images/index/category/prapoli/prapoli.svg);
}
.about-contents-image.recruit {
  background-image: url(../images/index/category/recruit/recruit.svg);
}

/*
--------------------------------------------- */
.about-link-text {
  position: relative;
  display: block;
  color:#00002d;
  font-size:1.4rem;
  font-weight: 500;
  letter-spacing: 0em;
  line-height:1;
} 
@media screen and (min-width: 768px) {
.about-link-text {
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.7rem);
  letter-spacing: 0.03em;
  font-weight: 400;
}
}
.about-link-text-sub {
   position: relative;
   display: block;
   color:#00002d;
   font-size:1.3rem;
   letter-spacing: 0em;
   line-height:1;
} 


/*オンラインショップ  コンテンツアイコン
--------------------------------------------- */
.online-shop-contents-box .about-contents-image {
  position: relative; 
  width: 100%;  
  max-width: none;  
  aspect-ratio: 1.4 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:70%;
  background-size:contain;
  cursor: pointer; 
}

@media screen and (min-width: 768px) {
.online-shop-contents-box .about-contents-image {

}
}

.online-shop-contents-box .about-contents-image.tcart {
  background-image: url(../images/index/online-shop/tcart.webp);
}
.online-shop-contents-box .about-contents-image.milbon-id {
  background-image: url(../images/index/online-shop/milbon-id.webp);
}
.online-shop-contents-box .about-contents-image.b-happy {
  background-image: url(../images/index/online-shop/bhappy.webp);
}


/*オンラインショップ ロゴ
--------------------------------------------- */
.online-shop-contents-box .about-link-icon {
  position: relative; 
  aspect-ratio: 6 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  cursor: pointer; 
  margin-bottom:10px;
} 
.online-shop-contents-box .about-link-icon.tcart {
  background-image: url(../images/index/online-shop/tcart-icon.svg);
} 

.online-shop-contents-box .about-link-icon.milbon {
  background-size:80%;
  background-image: url(../images/index/online-shop/milbon-id-icon.svg);
}

.online-shop-contents-box .about-link-icon.bhappy {
  background-image: url(../images/index/online-shop/bhappy-icon.svg);
} 

/*
--------------------------------------------- */
.online-shop-contents-box .about-link-text-sub {
  line-height:1.6;
  text-align:center;
} 

/* =============================
    ↑オンラインショップ コンテンツ
============================= */


/* =============================
    ↓お得情報・お知らせ  コンテンツ
============================= */

.otoku-box{
  position: relative;
  overflow:hidden;
  margin: 0 auto 20px;
  color:#00002d;
}
@media screen and (min-width: 768px) {
.otoku-box{
  margin: 0 auto 40px;
}
}

/*
--------------------------------------------- */
.otoku-box-inner-slide{
  position: relative;
}

/*タイトル
--------------------------------------------- */
.index-otoku-title {
  position: relative;
  max-width:calc(100% - 40px);
  margin: 0 auto 0px;
  font-size: 1.6rem;
  line-height:1;
  margin: 0 auto 40px;
}
@media screen and (min-width: 600px) {
.index-otoku-title {
  padding:0px 0px 0;
  max-width:calc(100% - 120px);
}
}
@media screen and (min-width: 768px) {
.index-otoku-title {
  margin: 0 auto 40px;
}
}
@media screen and (min-width: 900px) {
.index-otoku-title {
  max-width:780px;
}
}

/*
---------------------------------------------- */
#otoku-slide .splide__track{
  overflow: visible;
  position: relative;
  width:calc(100% - 0px);
  padding:0 0 0px;
  margin: 0 auto 0px;
}
@media screen and (min-width: 900px) {
#otoku-slide .splide__track{
  width:100%;
  max-width:780px;
  margin: 0 auto 0px;
}
}
/*
---------------------------------------------- */
a.otoku-image-link,
.otoku-image-link{
  position: relative;
  display:block;
}
/* 
--------------------------------------------- */
.otoku-image {
  position: relative;
}
img.otoku-image{
  position: relative;
  display:block;
  width:100%;
  object-fit: cover;
  aspect-ratio:1 / 1;
}
/* 
--------------------------------------------- */
.otoku-text-box {
  position: relative;
  padding:10px 10px 0;
  font-size: 1.4rem;
}
.otoku-text {
  position: relative;
  font-size: 1.4rem;
  font-weight:500;
}
.otoku-sub-text {
  position: relative;
  font-size: 1.4rem;
}

/* =============================
    ↑お得情報・お知らせ  コンテンツ
============================= */


/* =============================
    ↓空席確認
============================= */

.Vacant-seat {
  position: absolute;
  width: 100%;
  top:0%;
  left:50%;
  transform: translate(-50%,0%);
  z-index:3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.Vacant-seat.show {
  opacity:1;
}

/*空席あり
---------------------------------------------------------------*/
#result-vacancyExistence {
  position: relative;
  margin:0 auto;
  text-align:center;
  letter-spacing: 0rem;
  transform: translate(0,-80%);
}

@media screen and (min-width: 600px) {
#result-vacancyExistence {
  transform: translate(0,-65%);
}
}

.vacancyExistence {
  position: relative;
  display: inline-block;
  background-color:#d546a5;
  border-radius: 3px;
  color:  #fff;
  line-height: 1;
  z-index: 10;
  margin: 0px auto 0;
  padding: 8px 5px;
  font-size: 1.25rem;
  font-weight:500; 
}
@media screen and (min-width: 400px) {
.vacancyExistence {
   font-size:1.3rem;
   letter-spacing: 0.1rem;
}
}
@media screen and (min-width: 500px) {
.vacancyExistence {
   padding: 10px;
   font-size:1.4rem;
}
}

.vacancyExistence .isPink {
  color:  #fff;
  display: inline;
}
/* ▼ 三角 */
.vacancyExistence:before,
.vacancyExistence:after {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  left: 50%;
  transform: translateX(-50%);
  transform: translate(-50%,-1px);
}

/* 外枠 */
.vacancyExistence:before {
  border-width: 4px 4px 0 4px;
  border-top-color: #d546a5;
  bottom: -5px;
}

/* 内側（白） */
.vacancyExistence:after {
  border-width: 4px 4px 0 4px;
  border-top-color: #d546a5;
  bottom: -4px;

}

/*HPB 本日満席
---------------------------------------------------------------*/
.sold-out-box {
  position: relative;
  margin:0 auto;
  text-align:center;
  letter-spacing: 0rem;
  transform: translate(0,-80%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.sold-out-box.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media screen and (min-width: 600px) {
.sold-out-box  {
  transform: translate(0,-65%);
}
}
.sold-out {
  position: relative;
  display: inline-block;
  background-color: #00002d;
  border-radius: 3px;
  color:  #fff;
  line-height: 1;
  z-index: 10;
  margin: 0px auto 0;
  padding: 8px 5px;
  font-size: 1.25rem;
  font-weight:500; 
}
@media screen and (min-width: 400px) {
.sold-out {
   font-size:1.3rem;
   letter-spacing: 0.1rem;
}
}
@media screen and (min-width: 500px) {
.sold-out {
   padding: 10px;
   font-size:1.4rem;
}
}

/* ▼ 三角 */
.sold-out:before,
.sold-out:after {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  left: 50%;
  transform: translateX(-50%);
  transform: translate(-50%,-1px);
}

/* 外枠 */
.sold-out:before {
  border-width: 4px 4px 0 4px;
  border-top-color:#00002d;
  bottom: -5px;
}

/* 内側 */
.sold-out:after {
  border-width: 4px 4px 0 4px;
  border-top-color: #00002d;
  bottom: -4px;
}
/* =============================
    ↑空席確認
============================= */


/* クレジット
---------------------------------------------- */
.copyright {
  position: relative;
  font-size:1.1rem;
  text-align:center;
}