﻿/*フッター TCart説明
-----------------------------------------------------*/
.guide-tcart-disc-box{
  position: relative;
  margin:0 auto 30px;
}
/* 
------------------------------------------------*/
.guide-tcart-disc-title {
  position: relative;
  margin:0px auto 20px;
  padding:8px 0 6px 15px;
  border-bottom:1px solid #71797C;
  color:#71797C;
  font-size: 1.6rem;
  letter-spacing:0.05rem;
  font-weight:bold;
  line-height:1;
}
.guide-tcart-disc-title:after{
  position: absolute;
  content:"";
  top:50%;
  left:0px;
  transform : translate(0px,-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color:#71797C;
}


/* 
-----------------------------------------------------*/
.guide-tcart-disc-text{
  position: relative;
  display:block;
  margin:0 auto 10px;
  color:#71797C;
  letter-spacing: 0.0rem;
  text-align:left;
  font-size: 1.5rem;
  line-height:2;
}
.guide-tcart-disc-text.bold {
  font-size: 1.5rem;
  color:#71797C;
  font-weight:bold;
  font-family:'Hiragino Maru Gothic Pro';
}
.guide-tcart-disc-text.sub {
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
}

/*
--------------------------------*/
a.guide-tcart-disc-link-swich {
   position: relative;
   display: block;
   max-width:240px;
   height:40px;
   margin: 20px 0 30px;
   background-color:#71797C;
   border-radius:40px;
   color:#fff;
}
a.guide-tcart-disc-link-swich:after {
    position: absolute;
    content:"";
    margin:0;
    width: 6px;
    height: 6px;
    top:50%;
    right:20px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    pointer-events: none;
    transform : translate(0px,-50%) rotate(45deg);
}
a.guide-tcart-disc-link-swich.net:after {
    width: 18px;
    height: 18px;
    top:50%;
    right:18px;
    border-top:0px solid #fff;
    border-right:0px solid #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(../images/link-mark-white.svg);
    pointer-events: none;
    transform : translate(0px,-50%) rotate(0deg);
}

a.guide-tcart-disc-link-swich::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: #fff;
    font-size:1.4rem;
    font-weight:bold;
    font-family:'Hiragino Maru Gothic Pro';
}

a.guide-tcart-disc-link-swich.net::before {
    content: 'ネットで購入専用サイト';
}
a.guide-tcart-disc-link-swich.tenpo::before {
    content: '店舗で購入ご利用ガイド';
}
a.guide-tcart-disc-link-swich.otoi::before {
    content: 'お問い合わせフォーム';
}

/*営業時間外はお問い合わせ不可
------------------------------------------------*/
body.oyasumi a.guide-tcart-disc-link-swich.otoi{
  width:100%;
  max-width:none;
  height:auto;
  pointer-events:none;
}
body.oyasumi a.guide-tcart-disc-link-swich.otoi::before {
   position: relative;
    display: block;
    content: '只今の時間お問い合わせはご利用いただけません';
    line-height:1.4;
    left:0px;
    padding:10px 20px;
    font-weight:normal;
    text-align:center;
    letter-spacing: 0.1rem;
    font-size:1.3rem;
}
body.oyasumi a.guide-tcart-disc-link-swich.otoi::after {
    content:none;
}

/* 
-----------------------------------------------------*/
a.guide-link-tcart{
  color:#0086ff;
  text-decoration: underline;
}

/*
-------------------------------------------- */
.guide-tcart-note-marker {
  background: linear-gradient(transparent 75%, #ffff7f 75%);
}
.guide-tcart-note-marker.bold {
  font-weight:bold;
}



/* ご利用ガイド
------------------------------------------------*/
.guide-contaner {
  position: relative;
  text-align:left;
  background-color:#fff;
}
/* 
------------------------------------------------*/
.guide-box {
  position: relative;
  max-width: 600px;
  margin:0px auto;
  padding:80px 5vw 100px;
}
@media screen and (min-width: 769px) {
.guide-box {
  padding:80px 30px 100px;
}
}
/*モーダルになかに入っているとき
-------------------------------------------- */
body.modalNaka .guide-box {
  padding:60px 5vw 100px;
}
@media screen and (min-width: 769px) {
body.modalNaka .guide-box {
  padding:60px 30px 100px;
}
}
/*
-------------------------------------------------------------------------- */
.top-logo,a.top-logo {
  position: relative;
  display:block;
  margin:0px auto 30px;
  width:100px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/teecart-logo-202205.svg);
  opacity:.85;
  aspect-ratio:2.2 / 1;
}
body.js_isPc a.top-logo:hover{
  opacity:.5
}
/*モーダルになかに入っているとき
-------------------------------------------- */
body.modalNaka .top-logo,
body.modalNaka a.top-logo {
  display:none;
}

/* サロンで受け取り
------------------------------------------------*/
.get-salonBox {
  position: relative;
  padding-bottom:60px;
}
/* 
------------------------------------------------*/
.get-salon-image {
  position: relative;
  width: 90%;
  margin:0 auto 30px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  aspect-ratio:1 / 1.4;
}
.get-salon-image.lazyloaded {
  background-image: url(../images/guide/net.svg);
}
