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

/*---------------------
  共通
---------------------*/
/* font-size */
.txtSizeS {
    font-size: clamp(12px, 1.2vw, 14px);
}
.txtSizeM {
    font-size: clamp(12px, 1.5vw, 18px);
}
.txtSizeL {
    font-size: clamp(17px ,2.1vw ,25px);
}
@media screen and (max-width: 750px) {
  .txtSizeS {
      font-size: clamp(12px, 1.2vw, 14px);
  }
  .txtSizeM {
      font-size: clamp(12px, 1.5vw, 18px);
  }
  .txtSizeL {
      font-size: clamp(17px ,2.1vw ,25px);
  }
}

/* color */
.txtColorR{ color:#ed3232;}
.txtColorG{ color:#555;}

/* text-align */
.txtL{ text-align: left;}
.txtC { text-align: center;}
.txtR { text-align: right;}

/* width */
.widthSizeXSmall {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
}

.widthSizeSmall {
    width: 60%;
    margin-right: auto;
    margin-left: auto;
}
.widthSizeDefault {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
@media screen and (max-width: 750px) {
  .widthSizeDefault,
  .widthSizeSmall { width: 98%;}
  .widthSizeXSmall { width: 94%;}
}

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


/* margin padding */
.mt0p{ display: block;  margin-top:0; }
.mt2p{ display: block;  margin-top:2%; }
.mt4p{ display: block;  margin-top:4%; }
.mt6p{ display: block;  margin-top:6%; }
.mb0p{ display: block;  margin-bottom:0; }
.mb2p{ display: block;  margin-bottom:2%; }
.mb4p{ display: block;  margin-bottom:4%; }
.mb6p{ display: block;  margin-bottom:6%; }
.pt0p{ display: block;  padding-top:0; }
.pt2p{ display: block;  padding-top:2%; }
.pt6p{ display: block;  padding-top:6%; }
.pb0p{ display: block;  padding-bottom:0; }
.pb2p{ display: block;  padding-bottom:2%; }
.pb6p{ display: block;  padding-bottom:6%; }

@media screen and (max-width:750px){
.mt0pSp{ display: block;  margin-top:0; }
.mt2pSp{ display: block;  margin-top:2%; }
.mt6pSp{ display: block;  margin-top:6%; }
.mb0pSp{ display: block;  margin-bottom:0; }
.mb2pSp{ display: block;  margin-bottom:2%; }
.mb6pSp{ display: block;  margin-bottom:6%; }
.pt0pSp{ display: block;  padding-top:0; }
.pt2pSp{ display: block;  padding-top:2%; }
.pt6pSp{ display: block;  padding-top:6%; }
.pb0pSp{ display: block;  padding-bottom:0; }
.pb2pSp{ display: block;  padding-bottom:2%; }
.pb6pSp{ display: block;  padding-bottom:6%; }
}

/* 注釈 */
.txtAttention{padding-left:1em;	text-indent:-1em;}
.txtAttention:before{content: "※";}

/*---------------------
  kv
---------------------*/
#kv{}

/*---------------------
  colorband
---------------------*/
.colorband{
  background: #f7f2ea;
  width: 100%;
  margin: 0 auto;
  padding: 3% 0;
  text-align: center;
}
 .colorband p{ font-size: clamp(17px ,2.1vw ,25px); font-weight: bold; margin: 0; }
@media screen and (max-width: 750px) {
  .colorband p{ font-size: clamp(11px ,1.9vw ,13px); font-weight: bold;}
}
.colorband .dateTxtCam { padding-right: 1em;}
.colorband .drawLine{text-decoration:line-through;}

/*---------------------
  appDownload
---------------------*/
.appDownloadArea{
  width: 90%;
  margin: 5% auto 0% auto;
  padding-bottom: 3%;
  border-bottom: solid 3px #eee;
}
@media screen and (max-width: 750px) {
.appDownloadArea{ width: 90%; }
}

.appDownloadArea dl{
  width: 60%;
  margin: 0 auto;
  aspect-ratio: 560/ 182;  
  position: relative;
  display: block;
}
@media screen and (max-width: 750px) {
  .appDownloadArea dl{
    width: 100%;
    aspect-ratio: 338/ 140;
  }
}

.appDownload dt{
  position: absolute;
  top: 0;
  left: 0;
}
.appDownload dd{
  position: absolute;
  width: 26%;
}
@media screen and (max-width: 750px) {
  .appDownload dd{
    position: absolute;
    width: 41%;
  } 
}

.appDownload dd a{
  display: block;
  width: 100%;
}
.appDownload dd a img{
  width: 100%;
}
.appDownload dd.btnAppStore{
  top: 35%;
  left: 47%;  
}
@media screen and (max-width: 750px) {
  .appDownload dd.btnAppStore{
    top: 29%;
    left: 55%;
  } 
}

.appDownload dd.btnGoogleApp{
  position: absolute;
  top: 66%;
  left: 47%;  
}
@media screen and (max-width: 750px) {
  .appDownload dd.btnGoogleApp{
    top: 64%;
    left: 55%;
  } 
}
.appAttTxt{
  width: 56%;
  margin: 0 auto;
  color: #555;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  text-indent: -1em; 
  font-size: clamp(12px, 1.5vw, 16px);
}
@media screen and (max-width: 750px) {
  .appAttTxt{
    width: 90%;
    font-size: min(2.4vw,14px);
  }
}
.appAttTxt::before{
  content: "・";
}

/*---------------------
  description
---------------------*/
#description{
  padding-top: 5%; 
}
#descriptionArea{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 2%;
  border-bottom: solid 3px #eee;
}
@media screen and (max-width: 750px) {
  #descriptionArea{ padding-bottom: 0;} 
}
/* description-summary */
#summary{
  display: flex;
  justify-content: space-between;  
}
#summaryImgArea{ display:flex; align-items: center;}
#summaryImgArea img{width: 100%;}
#summaryTxtArea{
width: 78%;
box-sizing: border-box;
padding-left: 10px;
text-align: left;

}
.summaryTxt{
  box-sizing: border-box;
  padding-left: 10px;
  text-align: left;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: dashed 2px #eee; 
}
@media screen and (max-width: 750px) {
  #summary{
    display: block;
    position: relative;
    min-height: 22rem;
  }
  #summaryImgArea{
    position: absolute;
    display: block;
    width: 20%;
    top: 0;
    left: 0;
  }
  .summaryTxt{
    position: absolute;
    display: block;
    width: 80%;
    margin-top:0; 
    padding-top: 0;
    top: 0;
    left: 22%;
    border: none;
  }
  #summary .summaryAttTxt {
    border-top: dashed 2px #eee;
    padding-top: 4%;
    position: absolute;
    top: 7rem;
    left: 0;
  }
}
.summaryAttTxt li{
  padding-left: 1em;
  text-indent: -1em;
}
.summaryAttTxt li::before{
  content: "※";
}

/*---------------------
  limitShopInfo
---------------------*/
#limitShopInfo{padding-top: 5%;}
#limitShopInfoBg{
  width: 90%;
  margin: 0 auto;
  border-bottom: solid 3px #eee;
}
/*---------------------
  ondayShopInfo
---------------------*/
#ondayShopInfo{padding: 5% 0;}
#ondayShopInfoBg{
  width: 90%;
  margin: 0 auto;
  border-bottom: solid 3px #eee;
}
.pointGet{
  width: 60%;
  margin: 5% auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row-reverse;
  text-align: left;
}

@media screen and (max-width: 750px) {
.pointGet{
    width: 100%;
    margin-top: 10%;
    margin-bottom: 0;
    flex-flow: column-reverse;
  }
}

.pointGetTxt{  
  width: 65%;
  margin: 0 auto;
  padding-left: 5%;
  display: flex;
  align-items: center;
  justify-content: end;
}
@media screen and (max-width: 750px) {
.pointGetTxt{ 
    width: 100%;
    padding: 0;
    justify-content: center;
    text-align: center;
  }
}
.pointGetImg{  
  width: 35%;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .pointGetImg{  
    width: 50%;
    margin: 0 auto;
  }
}
.pointGetImg img{ width: 100%;}

/*---------------------
  shopMapList
---------------------*/
#shopMapList{
  width: 80%;
  margin: 0 auto;
}
#shopMapList .ckIcon {
    margin: 2% auto;
    font-weight: bold;
    padding: 1% 2% 1% 4%;
    line-height: 1.1;
    text-align: left;
    border-bottom: 1px solid #333;
    background-image: url(../img/checkIcon.png);
    background-size: 19px auto;
    background-repeat: no-repeat;
    background-position-x: 1%;
    background-position-y: center;
}
@media screen and (max-width: 750px) {
  #shopMapList .ckIcon {
      padding: 4% 2% 1% 8%;
      min-height: 1.35rem;
      background-size: 0.9rem;
  }
  
}

#shopMapList iframe{ 
  width:100%;
  height: 52vh;
  margin: 1% auto 2% auto;
  border: 0;
}

/*---------------------
  appLink
---------------------*/
#appLink{}
#appLink .catchTxt{
  border: solid 2px #ff8a00;
  border-radius: 12px;
  width: 90%;
  margin: 6% auto;
  font-size: clamp(16px ,2.0vw ,24px);
  line-height: 1.4;
  padding: 2% 0 2%;
  color: #ff8a00;
  text-align: center;
}
@media screen and (max-width: 750px) {
  #appLink .catchTxt{
    font-size: clamp(11px ,2.2vw ,18px);
  }
}
#bkAppLink{ position: relative; aspect-ratio : 960 /417;}
@media screen and (max-width: 750px) {
  #bkAppLink{ width: 100%; position: relative; aspect-ratio : 375 /571;}
}

#bkAppLink img{ width:100%; }
#bkAppLink dt{ 
  position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
#bkAppLink dd{ position: absolute; width: 17%;}
@media screen and (max-width: 750px) {
  #bkAppLink dd{ width: 36%;}
}

#bkAppLink dd.btnAppStore{ bottom: 10%; left: 26%;}
@media screen and (max-width: 750px) {
  #bkAppLink dd.btnAppStore{ bottom: 20%; left: 5%;}
}

#bkAppLink dd.btnGoogleApp{  bottom: 10%; left: 45%;}
@media screen and (max-width: 750px) {
  #bkAppLink dd.btnGoogleApp{ bottom: 10%; left: 5%;}
}