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

/*---------------------
  doit.php(default)
---------------------*/
html {
    scroll-behavior: smooth;
}

body{
	-webkit-text-size-adjust:100%;
}
div#contents_box{ padding: 0;}
picture img{
  vertical-align: bottom;
  width: 100%;
  height: auto;
}
li{ list-style-position: inside; list-style: none;}

div a {
  width: fit-content;
  margin: 0 auto;
  color:#0068b7;
}
div a:hover {
text-decoration:underline;
}
div a:visited {
color:#0068b7;
}

@media screen and (min-width:768px) {
/*　PC*/　  

.disN{ display: none;}
}
@media screen and (max-width:768px) {
/* SP */
.disNSp{ display: none;}
}

/* br要素の打ち消し */
@media screen and (min-width:769px){.spBr{ display: none;}}
@media screen and (max-width:768px){.pcBr{ display: none;}}


.disB{ display: block;}

.disNoTxt{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}
/*---------------------
  doit.php
---------------------*/
#wapper{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}
#wapper{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

#wapper h1{
   margin-bottom: 4%;
}
@media screen and (max-width: 768px) {
  #wapper h1{
     margin-bottom: 0;
  }
}

  /* ---- #aboutShop --- */
#aboutShop h2{
  background-image: url("../img/pc/bg_title.png");
  background-size: 100%;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: bold;
  line-height: 1;
  margin: 0 0 2% 0;
  padding: 4.7% 0;
}
@media screen and (max-width: 768px) {
  #aboutShop h2{
    background-image: url("../img/sp/bg_title.png");
    background-size: 100%;
    font-size: clamp(26px, 3.6vw, 36px);
    margin: 0 0 2% 0;
    padding: 4.7% 0;
  }
}

  /* ---- #about --- */
#about{ 
  margin-bottom: 8%;
  font-size: clamp(14px, 2.0vw, 20px);
}

#about h3{
  text-align: center;
}
#about img{
  width: 100%;
}

#about p.catch{ width: 75%; margin: 4% auto;}

@media screen and (max-width: 768px) {
  #about p.catch,
  #about h3{ width: 90%; margin: 4% auto;}
}

#about .thirdsArea{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2%;
  row-gap: 2%;
   margin-top: 2%;
  margin-bottom: 4%;
}
@media screen and (max-width: 768px) {
  #about .thirdsArea{ width: 90%; margin: 2% auto 4% auto;}
}

#about p.secondaryTxt{ width: 53%; margin: 4% auto;}
@media screen and (max-width: 768px) {
  #about p.secondaryTxt{ width: 90%; margin: 4% auto;}
}

/* ---- #opTimesArea --- */
#opTimesArea{
width: 52%;
margin: 0 auto;
border: 5px solid #ffd903;
border-radius: 5px;
}
@media screen and (max-width: 768px) {
  #opTimesArea{ width: 90%; margin: 4% auto;}
}
#opTimesArea h4{
  margin: 0;
  padding: 0.5rem;
  line-height: 1;
  background: #ffd903;
  text-align: center;
  font-size: clamp(21px ,3.1vw ,32px);
}

#opTimesBg{ 
  padding: 2%;
}


#opTimesArea ul{
  display: flex;
  justify-content: space-around;
  align-items: center;
  justify-items: center;
  margin: 0 auto;
  font-weight: bold;
  font-size: clamp(16px ,2.4vw ,24px);  
}
@media screen and (max-width: 768px) {
  #opTimesArea{ width: 90%; margin: 4% auto;}
  #opTimesArea ul{
     font-size: clamp(15px ,2.6vw ,20px); 
  }
}


#opTimesArea ul .timeArea{font-size: clamp(20px ,3.0vw ,30px);}
@media screen and (max-width: 768px) {
  #opTimesArea ul .timeArea{font-size: clamp(22px ,3.0vw ,30px);}
}


#opTimesArea span{
  color :#666;
  display: block;
  font-weight: normal;
  font-size: clamp(11px ,1.4vw ,14px);
}
@media screen and (max-width: 768px) {
    #opTimesArea span{
      font-size: clamp(10px ,1.2vw ,12px);
    }
}

#opTimesArea ul .timeArea span{ color:#0a0a0a; font-weight: bold;}


#opTimesArea p{
text-align: center;
}

/* ---- #features --- */
#features{margin: 4% 0 0 0}
#features img{
  width: 100%;
}
#features #featPrice{
    margin: 4% 0;
    position: relative;
    aspect-ratio: 820 / 315;
    background-image: url(../img/pc/bg_featPrice.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position-x: center;
}

@media screen and (max-width: 768px) {
      #features #featPrice {
        margin: 6% 0;
        position: relative;
        aspect-ratio: 820 / 400;
        background-image: url(../img/sp/bg_featPrice.png);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position-x: 5%;
    }
}

#features #featPrice h3{
  position: absolute;
  width: 50%;
  top: 0;
  right: 2%;
}

#features #featPrice p{
  position: absolute;
  width: 40%;
  top: 58%;
  right: 10%;
  color: #000;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff,
  -2px 2px 0 #fff,  2px -2px 0 #fff,
  2px 0 0 #fff, -2px  0 0 #fff,
  0 2px 0 #fff,  0 -2px 0 #fff;
  font-size: clamp(14px, 2.0vw, 20px);
}

@media screen and (max-width: 768px) {
    #features #featPrice p{
      position: absolute;
        width: 40%;
        top: 35%;
        right: 5%;
    }
}

#features #featGoods{
    margin: 4% 0;
    position: relative;
    aspect-ratio: 820 / 380;
    background-image: url(../img/pc/bg_featGoods.png);
  background-repeat: no-repeat;
    background-position-x: right;
}

@media screen and (max-width: 768px) {
#features #featGoods {
        margin: 6% 0;
        position: relative;
        aspect-ratio: 820 / 470;
        background-image: url(../img/sp/bg_featGoods.png);
        background-repeat: no-repeat;
        background-position-x: 95%;
        background-position-y: bottom;
        background-size: 50%;
  }
}


#features #featGoods h3{
  position: absolute;
  width: 50%;
  top: 0;
  left: 0;
}
#features #featGoods h4{
  position: absolute;
  width: 50%;
  top: 32%;
  left: 10%;
  font-size: clamp(20px, 3.0vw, 30px);
}
@media screen and (max-width: 768px) {
#features #featGoods h4{
position: absolute;
    width: 50%;
    top: 21%;
    left: 5%;
    font-size: clamp(18px, 2.8vw, 28px);
}
}


#features #featGoods h4 span{
font-size: clamp(14px, 2.0vw, 20px);
}
#features #featGoods p{
  position: absolute;
  width: 28%;
  top: 62%;
  left:10%;
  color: #000;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff,
  -2px 2px 0 #fff,  2px -2px 0 #fff,
  2px 0 0 #fff, -2px  0 0 #fff,
  0 2px 0 #fff,  0 -2px 0 #fff;
  font-size: clamp(14px, 2.0vw, 20px);
}
@media screen and (max-width: 768px) {
#features #featGoods p{
    position: absolute;
    width: 44%;
    top: 56%;
    left: 5%;
    color: #000;
}
}

#features #featPurchase{
    margin: 4% 0 0 0;
    position: relative;
    aspect-ratio: 820 / 490;
    background-image: url(../img/pc/bg_featPurchase.png);
    background-size: 69%;
    background-repeat: no-repeat;
    background-position-x: 25%;
    background-position-y: top;
}
@media screen and (max-width: 768px) {
#features #featPurchase{
        margin: 6% 0 ;
        position: relative;
        aspect-ratio: 820 / 600;
        background-image: url(../img/sp/bg_featPurchase.png);
        background-size: 30%;
        background-repeat: no-repeat;
        background-position-x: 15%;
        background-position-y: center;
}
}



#features #featPurchase h3{
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #features #featPurchase h3{
    width: 90%;
    margin: 0 auto;
  }
}


#features #featPurchase p{
  position: absolute;
  width: 37%;
  top: 28%;
  left: 46%;
  color: #000;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;
  font-size: clamp(14px, 2.0vw, 20px);
}

@media screen and (max-width: 768px) {
  #features #featPurchase p{
  position: absolute;
    width: 48%;
    top: 28%;
    left: 46%;
  }
}

#features .btnConArea{
position: absolute;
    top: 70%;
    right: 0;
    width: 100%;  
}
@media screen and (max-width: 768px) {
    #features .btnConArea{
    position: absolute;
        top: 78%;
        right: 0;
        width: 100%;  
}
}



#features .btnArea{
  width: 52%;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 768px) {
#features .btnArea{
  width: 80%;
  margin: 0 auto;
  position: relative;
}
}

#features .btnArea a{
  width: 76%;
    background: #f29f05;
  color:#fff;
  padding: 4% 12%;
  display: block;
  font-size: clamp(18px, 2.8vw, 28px);
}
@media screen and (max-width: 768px) {
#features .btnArea a{
  width: 76%;
    background: #f29f05;
  color:#fff;
  padding: 4% 12%;
  display: block;
  font-size: clamp(16px, 2.6vw, 26px);
}
}


#features .btnArea a:hover{
 text-decoration: none;
 opacity: 0.7;  
}
#features .btnArea a::after{
  position: absolute;
  content :"";
  top: 32%;
  right: 5%;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 0.85rem solid transparent;
  border-bottom: 0.85rem solid transparent;
  border-left: 1rem solid #ffffff;
  border-right: 0;
}


#features .btnArea a span.txtSizeS{
  font-size: clamp(12px, 2.0vw, 20px);
}

#features .btnArea a span.txtSizeS{
  font-size: clamp(12px, 2.0vw, 20px);
}
#features .btnArea a span.weightB{ font-weight: bold;}

/* ---- #itemList --- */
#itemList ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2%;
  row-gap: 0.8rem;
  margin-bottom: 6%;
}
@media screen and (max-width: 768px) {
  #itemList ul{
    width: 90%;
    margin: 0 auto 6% auto;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2%;
    row-gap: 0.4rem;
  }
}

#itemList ul li img{
  width: 100%;
}


/* ---- #linkArea --- */
#linkArea{
  max-width: 1000px;
  width: 80%;
  margin: 4% auto 8% auto;
}

@media screen and (max-width: 768px) {
  #linkArea{ width: 90%;}
  #linkArea .jmty{ width: 90%; margin:0 auto;}
}


#linkArea h3{text-align: center;}

#linkArea a{
  /*display: flex;
  align-items: center;*/ 
}
#linkArea a img{
  width: 100%;
}

/*---------------------
  info.php
---------------------*/
#infoArea{
  width: 86%;
  margin: 4% auto;
  padding: 2%;
  border: 3px solid #0068b7;
}
@media screen and (max-width:768px) {
  /* SP */
    #infoArea{
      width: 82%;
      padding: 4%;
    }
}
#infoArea h2{
  font-size: clamp(18px, 2.4vw, 24px);  
}
  #infoArea p{
  margin: 1rem 0 0 0;
  }


@media screen and (max-width:768px) {
  /* SP */
  #infoArea p{
  font-size: clamp(14px ,2.3vw ,18px);
  }
}
  #infoArea a{
  text-decoration: underline;
  }

  #infoArea a:hover{
  text-decoration: none;
  }

/*---------------------
coupon.php
---------------------*/
#couponArea{
  padding: 2% 0;
}


@media screen and (max-width:768px) {
  /* SP */
  #couponArea{
  padding: 0 0 2% 0;
  }
  #couponArea img{
    width: 100%;
  }
}
#couponArea .summaryTxt{
  color:#fff;
  background:#005eaa;
  padding:  0.8rem 0;
  line-height: 1.2;
  text-align: center;
  font-weight: bold;
  font-size: clamp(20px, 3.0vw, 30px);
}


#couponArea p{
  width: 95%;
  margin: 1.5% auto 1% auto;
  text-align: center;

}
@media screen and (max-width:768px) {
  /* SP */
  #couponArea p{
    width: 90%;
    margin: 2% auto;
    text-align: center;

  }
}

#couponArea .couponBg{
  position: relative;
  width: 80%;
  margin: 8% auto 5% auto;
  padding: 4% 0 0 0;
  border: #ff9933 5px solid;
  border-radius: 15px;
}
@media screen and (max-width:768px) {
  #couponArea .couponBg{
    width: 90%;
  }
  
}
#couponArea .couponBg .lead{
  position: absolute;
  top: -17%;
  left: 2%;
}
@media screen and (max-width:768px) {
  #couponArea .couponBg .lead{
    position: absolute;
    top: -16%;
    left: 5%;
  }
}

#couponArea .couponBg .noteArea{
  text-align: right;
  color:#ff9933;  
  font-size: clamp(10px, 1.4vw, 14px);
}
@media screen and (max-width:768px) {
    #couponArea .couponBg .noteArea{
      color: #070707;  
  }  
}
#couponArea .couponBg .noteArea span::before{
    content: '※';
  
}
@media screen and (max-width:768px) {
    #couponArea .couponBg .noteArea span{
      display: block; 
  }  
}

#couponArea .infoArea{
  display: flex;
  align-items: center;
  color: #fff;
  background:#ff9933;
  padding: 1% 0 0 1%;
}
#couponArea .infoArea .viewDate{
  width: 35%;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: bold;
}
@media screen and (max-width:768px) {
    #couponArea .infoArea .viewDate{
      width: 38%;
    }
    #couponArea .infoArea .viewDate p{
      font-size: clamp(16px, 2.4vw, 25px);
      line-height: 1.2;
      font-weight: bold;
    } 
  
}

#couponArea .infoArea .infoTxt{
  display: flex;
  align-items: center;
  justify-content : flex-end;
  width: 46%;
  font-size: clamp(14px, 2.0vw, 20px);
}
@media screen and (max-width:768px) {
  #couponArea .infoArea .infoTxt{
    font-size: clamp(11px, 1.7vw, 18px);
    font-weight: bold;
  } 
}
#couponArea .infoArea .infoTxt p{
    display: inline;
    padding-left: 0.5rem;
    width: fit-content;
}
@media screen and (max-width:768px) {
  #couponArea .infoArea .infoTxt p{
    font-size: clamp(9px, 2.2vw, 25px);
    font-weight: bold;
  } 
}
#couponArea .infoArea .code p{
  color: #b91a2a;
   font-size: clamp(10px, 1.4vw, 14px);
}
#couponArea .infoArea .code span{
  color: #fff;
  font-size: clamp(20px, 3.0vw, 30px);
  font-weight: bold;
}
/*---------------------
coupon_stillness.php
---------------------*/
#couponArea a{ 
  display: block; 
  width:90%;
  margin: 5% auto;
}