@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin: 0 5px;
}

/*矢印の設定*/

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px;
  /*ドットボタンのサイズ*/
  height: 8px;
  /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc;
  /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #333;
  /*ドットボタンの現在地表示の色*/
}


/*========= レイアウトのためのCSS ===============*/

body {
  /* background:#eee; */
  font-family: "Yu Gothic", YuGothic, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", sans-serif;
}

#timeSaleBlock {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

h2,
p {
  text-align: center;
  padding: 20px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: #333;
}

a:hover,
a:active {
  text-decoration: none;
}

.textBold {
  font-weight: bold;
}

.colorRed {
  color: #e71f19;
}
.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
}

/*\*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

@media screen and (max-width: 767px) {
  .slider {
    /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 93%;
    margin: 0 auto;
  }
  
  .slider img {
    width: 100%;
    /*スライダー内の画像を横幅100%に*/
    height: auto;
  }
  
  .shopSlider {
    width: 100%;
    margin-bottom: 40px;
  }
  .shopSlider li {
    background-color: #fff100;
    position: relative;
    padding-bottom: 5px;
  }

  .shopSlider li dl {
    width: 100%;
    /* display: flex; */
    /* margin: 0 !important; */
    line-height: 1;
    margin-top: 5px;
    margin-bottom: 0px !important;
    text-align: center;
  }

  .shopSlider li dl dt {
    width: 100%;
  }

  .shopSlider li dl dt p {
    padding: 0;
    margin: 0;
  }

  .shopSlider li dl dd {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }

  .shopSlider li dl dd p {
    padding: 0 !important;
    margin: 0 !important;
  }

  .slideTextS {
    font-size: clamp(12px, 2vw, 13px) !important;
    /* font-weight: bold; */
    line-height: 1.2;
  }

  .slideTextM {
    font-size: clamp(14px, 2.5vw, 16px) !important;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px !important;
  }

  .slideTextL {
    font-size: clamp(35px, 4vw, 40px) !important;
    line-height: 1;
  }
  .slideTextSS {
    font-size: clamp(9px, 2vw, 11px) !important;
    /* font-weight: bold; */
  }

  .timeSaleMark {
    padding: 5px;
    /* padding-bottom: 5px; */
    background-color: #fff100;
    /* padding-left: 10px;
    padding-right: 10px; */
    position: absolute;
    top: 5px;
    left: 5px;
    color: #e60012;
    font-size: clamp(11px, 1.3vw, 13px) !important;
    border-radius: 6px;
    font-weight: bold;
  }

  .slideLink {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  .shopName {
    background-color: #e60012;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: clamp(16px, 2vw, 20px) !important;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1;
    letter-spacing: -0.1em;
  }

  #timeSaleBtn {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #timeSaleBtn img {
    margin-top: 20px;
    width: 100%;
    transform: rotate(-5deg);
    /* margin-bottom: 30px; */
  }

  #timerText {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 25px;
    margin-bottom: 30px !important;
    font-size: clamp(25px, 3vw, 33px) !important;
    margin-left: auto;
    margin-right: auto;
    background-color: #231815;
    color: #fff100;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1 !important;
    letter-spacing: 0.03em;
  }

  .smallText {
    font-size: clamp(13px, 1.8vw, 18px) !important;
  }

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
    position: absolute;
    /*絶対配置にする*/
    top: 40%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    height: auto;
    width: 10%;
    max-width: 70px;
    z-index: 999;
  }

  .slick-prev img,
  .slick-next img {
    width: 100%;
  }

  .slick-prev {
    /*戻る矢印の位置と形状*/
    left: -2.5%;
    /* transform: rotate(-135deg); */
  }

  .slick-next {
    /*次へ矢印の位置と形状*/
    right: -2.5%;
    /* transform: rotate(45deg); */
  }
}

@media screen and (min-width: 768px) {
  .slider {
    /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 94%;
    max-width: 1300px;
    margin: 0 auto;
  }
  
  .slider img {
    width: 100%;
    /*スライダー内の画像を横幅100%に*/
    height: auto;
    max-width: 400px;
  }
  /*スライド03追加*/



  .shopSlider {
    width: 100%;
    margin-bottom: 80px;
  }

  .shopSlider li {
    background-color: #fff100;
    position: relative;
    padding-bottom: 5px;
  }

  .shopSlider li dl {
    width: 100%;
    /* display: flex; */
    /* margin: 0 !important; */
    line-height: 1.2;
    margin-top: 5px;
    margin-bottom: 0px !important;
  }

  .shopSlider li dl dt {
    width: 48%;
    padding-left: 5px;
    float: left;
    box-sizing: border-box;
  }

  .shopSlider li dl dt p {
    text-align: left;
    padding: 0 !important;
    margin: 0 !important;
  }

  .shopSlider li dl dd {
    width: 52%;
    text-align: center !important;
    float: right;
    padding: 0 !important;
    margin: 0 !important;
  }

  .shopSlider li dl dd p {
    padding: 0 !important;
    margin: 0 !important;
  }

  .slideTextS {
    font-size: clamp(13px, 2vw, 14px) !important;
  }

  .slideTextM {
    font-size: clamp(14px, 2.5vw, 16px) !important;
  }

  .slideTextL {
    font-size: clamp(40px, 4.5vw, 48px) !important;
    letter-spacing: -0.05em;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1;
  }
  .slideTextSS {
    font-size: clamp(9px, 1vw, 10px) !important;
    letter-spacing: -0.1em;
  }

  .rightText {
    text-align: right !important;
  }

  .timeSaleMark {
    padding: 5px;
    /* padding-bottom: 5px; */
    background-color: #fff100;
    /* padding-left: 10px;
    padding-right: 10px; */
    position: absolute;
    top: 10px;
    left: 10px;
    color: #e60012;
    font-size: clamp(12px, 1.5vw, 14px) !important;
    border-radius: 6px;
    font-weight: bold;
  }

  .slideLink {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  .shopName {
    background-color: #e60012;
    padding-top: 15px;
    padding-bottom: 15px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: clamp(28px, 2vw, 32px) !important;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 40px;
    font-weight: bold;
    padding-left: 30px;
    padding-right: 30px;
    line-height: 1;
  }

  #timeSaleBtn {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
  }

  /* #timeSaleBtn img {
    margin-top: 30px;
    width: 100%;
    transform: rotate(-5deg);
    margin-bottom: 30px;
  } */

  #timerText {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    margin-bottom: 60px !important;
    font-size: clamp(50px, 6vw, 60px) !important;
    margin-left: auto;
    margin-right: auto;
    background-color: #231815;
    color: #fff100;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 15px;
    padding-left: 35px;
    padding-right: 35px;
    line-height: 1 !important;
    letter-spacing: 0.03em;
  }

  .smallText {
    font-size: clamp(28px, 4vw, 35px) !important;
  }

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
    position: absolute;
    /*絶対配置にする*/
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    height: auto;
    width: 5%;
    max-width: 60px;
    z-index: 999;
  }

  .slick-prev img,
  .slick-next img {
    width: 100%;
  }

  .slick-prev {
    /*戻る矢印の位置と形状*/
    left: 3%;
    /* transform: rotate(-135deg); */
  }

  .slick-next {
    /*次へ矢印の位置と形状*/
    right: 3%;
    /* transform: rotate(45deg); */
  }
}