@charset "utf-8";
/* CSS Document */
/*---------------------
  404
---------------------*/
#area404{
  max-width: 1000px;
  width: 100%;
  text-align: center;
  margin-right: auto;
  margin-left:  auto;
  padding: 10% 0;
  font-size: 1.2rem;
}
/*---------------------
  doit.php
---------------------*/
html {
    scroll-behavior: smooth;
}

body{
	-webkit-text-size-adjust:100%;
  box-sizing: border-box;
}
div#contents_box{ padding: 0;}

section{
  max-width: 1140px;
  margin: 0 auto;
}
picture img{
  vertical-align: bottom;
}
div a {
  width: fit-content;
  margin: 0 auto;
  color:#007FEB;
}
div a:hover {
text-decoration:underline;
}
div a:visited {
color:#007FEB;
}


@media screen and (min-width:750px) {
/*　PC　*/  
.ws35{ width: 35%; display: block; margin: 0 auto;}
.ws40{ width: 40%; display: block; margin: 0 auto;}
.ws50{ width: 50%; display: block; margin: 0 auto;}
.ws60{ width: 60%; display: block; margin: 0 auto;}
.ws80{ width: 80%; display: block; margin: 0 auto;}
.ws90{ width: 90%; display: block; margin: 0 auto;}
.ws100{ width: 100%; display: block; margin: 0 auto;}

.mt0{ margin-top: 0;}
.mb0{ margin-bottom: 0;}


.mtPer1{ margin-top: 1%;}
.mtPer2{ margin-top: 2%;}
.mtPer3{ margin-top: 3%;}
.mtPer4{ margin-top: 4%;}
.mtPer6{ margin-top: 6%;}
.mtPer8{ margin-top: 8%;}
.mtPer10{ margin-top: 10%;}
.mtPer20{ margin-top: 20%;}  
.mbPer1{ margin-bottom: 1%;}
.mbPer2{ margin-bottom: 2%;}
.mbPer3{ margin-bottom: 3%;}
.mbPer4{ margin-bottom: 4%;}
.mbPer6{ margin-bottom: 6%;}
.mbPer8{ margin-bottom: 8%;}
.mbPer10{ margin-bottom: 10%;}
.mbPer20{ margin-bottom: 20%;}  
  
 
.pt20{ padding-top: 20px;}
.pt40{ padding-top: 40px;}
.pb10{ padding-bottom: 20px;}
.pb20{ padding-bottom: 20px;}
.pb40{ padding-bottom: 40px;}

.ptPer1{ padding-top: 1%;}
.ptPer2{ padding-top: 2%;}
.ptPer3{ padding-top: 3%;}
.ptPer4{ padding-top: 4%;}
.ptPer6{ padding-top: 6%;}
.ptPer8{ padding-top: 8%;}
.ptPer10{ padding-top: 10%;}
.ptPer20{ padding-top: 20%;}
.pbPer1{ padding-bottom: 1%;}
.pbPer2{ padding-bottom: 2%;}
.pbPer3{ padding-bottom: 3%;}
.pbPer4{ padding-bottom: 4%;}
.pbPer6{ padding-bottom: 6%;}
.pbPer8{ padding-bottom: 8%;}
.pbPer10{ padding-bottom: 10%;}
.pbPer20{ padding-bottom: 20%;}
  
.disN{ display: none;}
}
@media screen and (max-width:750px) {
/* SP */

.wsSp40{ width: 40%; display: block; margin: 0 auto;}
.wsSp50{ width: 50%; display: block; margin: 0 auto;}
.wsSp60{ width: 60%; display: block; margin: 0 auto;}
.wsSp70{ width: 70%; display: block; margin: 0 auto;}
.wsSp80{ width: 80%; display: block; margin: 0 auto;}
.wsSp90{ width: 90%; display: block; margin: 0 auto;}

.mtSp0{ margin-top: 0;}
.mtSp5{ margin-top: 5px;}
.mtSp10{ margin-top: 10px;}
.mtSp20{ margin-top: 20px;}
.mtSp40{ margin-top: 40px;}
.mbSp0{ margin-bottom: 0;}
.mbSp5{ margin-bottom: 5px;}
.mbSp10{ margin-bottom: 10px;}
.mbSp20{ margin-bottom: 20px;}
.mbSp40{ margin-bottom: 40px;}
.mbSp80{ margin-bottom: 80px;}
  
.mtSpPer1{ margin-top: 1%;}
.mtSpPer2{ margin-top: 2%;}
.mtSpPer3{ margin-top: 3%;}
.mtSpPer4{ margin-top: 4%;}
.mtSpPer6{ margin-top: 6%;}
.mtSpPer8{ margin-top: 8%;}
.mtSpPer10{ margin-top: 10%;}
.mtSpPer20{ margin-top: 20%;}   
.mbSpPer1{ margin-bottom: 1%;}
.mbSpPer2{ margin-bottom: 2%;}
.mbSpPer3{ margin-bottom: 3%;}
.mbSpPer4{ margin-bottom: 4%;}
.mbSpPer6{ margin-bottom: 6%;}
.mbSpPer8{ margin-bottom: 8%;}
.mbSpPer10{ margin-bottom: 10%;}
.mbSpPer20{ margin-bottom: 20%;}    
  
  

.ptSp20{ padding-top: 20px;}
.ptSp40{ padding-top: 40px;}
.pbSp10{ padding-bottom: 20px;}
.pbSp20{ padding-bottom: 20px;}
.pbSp40{ padding-bottom: 40px;}

.ptSpPer1{ padding-top: 1%;}
.ptSpPer2{ padding-top: 2%;}
.ptSpPer3{ padding-top: 3%;}
.ptSpPer4{ padding-top: 4%;}
.ptSpPer6{ padding-top: 6%;}
.ptSpPer8{ padding-top: 8%;}
.ptSpPer10{ padding-top: 10%;}
.ptSpPer20{ padding-top: 20%;} 
.pbSpPer1{ padding-bottom: 1%;}
.pbSpPer2{ padding-bottom: 2%;}
.pbSpPer3{ padding-bottom: 3%;}  
.pbSpPer4{ padding-bottom: 4%;}
.pbSpPer6{ padding-bottom: 6%;}
.pbSpPer8{ padding-bottom: 8%;}
.pbSpPer10{ padding-bottom: 10%;}
.pbSpPer20{ padding-bottom: 20%;} 
  
 
.disNSp{ display: none;}
}


.disB{ display: block;}

.disNoTxt{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}


/*　ページ内リンク用　*/
section#aboutContents,
section#weekdayBenefits{
    content: "";
    display: block;
    /*margin-top: -64px; */
    /*padding-top: 64px;*/
}


section picture img{
  width: 100%;
}




/*color Band*/
.colorband{
  color:#464646;
  background: #dedede;
  font-weight: bold;
  text-align: center;
  padding:10px;
  font-size: min(2.8vw, 32px);

}
.dateTxtCam{ display: block; text-align: center;}

/* internalNav */
#internalNav{
  display: flex;
  justify-content: space-between;
  padding: 40px 0;
}


#internalNav .shopInfoLink{
  width: 55%;
  background: url(../img/202409/pc/bg_shopInfoLink.png);
  background-size: cover;
  background-position: top;
  background-repeat: repeat;
  aspect-ratio: 610/293;
  position: relative;
}

#internalNav .shopInfoLink p{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#internalNav .shopInfoLink ul{
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  bottom: 12%;
  left: 5%;
  width: 90%;
}
#internalNav .shopInfoLink li{
  list-style: none;
  width: 35%;
}
#internalNav .deliveryInfoLink{
  width: 42%;
  background:  url("../img/202409/pc/bg_deliInfoLink.png");
  background-size: cover;
  background-position: top;
  background-repeat: repeat;
  aspect-ratio: 470/293;
  position: relative;
}
#internalNav .deliveryInfoLink ul{
  width: 41%;
  margin: 0 auto;
  position: absolute;
  bottom: 12%;
  left: 32%;
}
#internalNav .deliveryInfoLink li{
  list-style: none;
}


#internalNav .deliveryInfoLink p{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#about{
  padding-top: 64px;
  margin-top: -64px;   
}
#aboutContents{
  margin: 0;
  padding: 2% 5%;
  background : repeating-linear-gradient(to right,  #ffa548,#ffa548 3.13%, #ffae5b 0,#ffae5b 6.26%);
}
#aboutContents .summaryBg{
  background: url(../img/202509/pc/bg_summary_02.png);
  background-repeat: no-repeat;
  width: 90%;
  background-size: 100%;
  padding: 6% 0;
  aspect-ratio: 1008 / 1722;
}
  #contentsAreaApp,
  #contentsAreaShop{
    position: relative;
    aspect-ratio: 854/303;
  }

  #contentsAreaApp a{
    position: absolute;
    bottom: 14%;
    left: 10%;
  }

  #contentsAreaShop a{
    position: absolute;
    bottom: 24%;
    left: 10%;
  }


/* couponContents */
#coupon{
  padding-top: 64px;
  margin-top: -64px;  
}
#couponContents{
  background: url(../img/202502/pc/bg_couponContents.png);
  background-size: contain;
}
.couponInfoArea a{display: block; width: 100%;}
.couponInfoArea ul.btnArea{ width:82%; list-style: none;}
.couponInfoArea ul.btnArea li.reserve{ width:50%; margin: 4% auto 0 auto; }

.couponInfoArea ul.btnTwinArea{
  width: 60%;
  display: flex;
  justify-content: space-between;
  padding: 40px 0 20px 0;
  margin: 0 auto;
  
  list-style: none;
}
.couponInfoArea .btnTwinArea li{
  width: 48%;
}



.couponInfoArea .btnArea{
  width: 40%;
  padding: 40px 0 20px 0;
  margin: 0 auto;
}

#weekdayInfo{
  padding-top: 50px;
  margin-top: -50px;   
}

#weekdayBenefits{
  background: url("../img/202409/pc/bg_couponContents.png");
  background-size: contain;
}
#weekdayBenefitsArea{
  position: relative;
  background-size: contain;
}
#weekdayBenefitsArea a{
  position: absolute;
  bottom: 23%;
  left: 34%;
  width: 40%;
  margin: 0 auto;
}
#deliveryInfo{
  padding-top: 64px;
  margin-top: -64px;  
}
#deliveryPurchase{
  background: url("../img/202409/pc/bg_deliContents.png");
  background-size: contain;

}


#summaryConArea{
  margin: 4% auto;
  padding: 2% 0;
  background: url(../img/202409/pc/bg_summary_line.png);
  background-repeat: repeat;
}

#summaryConArea h2{
  width: 90%;
  display: block;
  margin: 40px auto;
}

#summaryConArea{
  background: url(../img/202409/pc/bg_summary_dot.png);
  background-repeat: no-repeat;
  width: 80%;
  background-size: 100%;
  padding-top: 10px;
  aspect-ratio: 1008/1043;
}
#summaryConArea h3{
  display: block;
}

#aboutSite{
  position: relative;
  background: url(../img/202409/pc/bg_siteLink.png);
  background-repeat: no-repeat;
  width: 90%;
  margin: 0 auto;
  background-size: 100%;
  aspect-ratio: 854/476;

}
#aboutSite ul {
  position: absolute;
  bottom: 9%;
  left: 6%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 2%;
  padding: 2%;
  width: 83%;
  margin: 0 auto;
  list-style: none;
}
#aboutCoupon p{
  width: 90%;
  margin: 20px auto;
}


@media screen and (max-width:750px) {

  .colorband{
    font-size:min(4vw, 18px);

  } 
  
  #internalNav{
    display: block;
    padding: 0 0 20px 0;

  }
  #internalNav .shopInfoLink {
    width: 90%;
    margin: 0 auto;
    background: url(../img/202409/sp/bg_shopInfoLink.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    aspect-ratio: 700/280;
  }
  #internalNav .shopInfoLink ul {
      display: flex;
      justify-content: space-evenly;
      position: absolute;
      bottom: 11%;
      left: 0%;
      width: 100%;
  }
  #internalNav .deliveryInfoLink {
    width: 90%;
    margin: 0 auto;
    background: url(../img/202409/sp/bg_deliInfoLink.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    aspect-ratio: 700/280;
  }
  #internalNav .deliveryInfoLink ul {
    width: 71%;
    margin: 0 auto;
    position: absolute;
    bottom: 12%;
    left: 14%;
}


  #aboutContents {
    margin: 0;
    padding: 0;

  }
  #aboutContents h2{
    width: 100%;

  }
  #contentsAreaApp a{ position: static;}

#aboutContents .summaryBg{
  background: url(../img/202409/sp/bg_summary_02.png);
  background-repeat: no-repeat;
  width: 90%;
  background-size: 100%;
  padding-top: 6%;
  aspect-ratio: 700/1768;
}
  #contentsAreaShop a{ position: static;}
  
  #coupon{
  padding-top: 50px;
  margin-top: -50px;  
  }
  
  
  #couponContents{
  background: url(../img/202409/sp/bg_couponContents.png);
  }

  .couponInfoArea ul.btnTwinArea {
    width: 80%;
    display: block;
    margin: 0 auto;
  }
 .couponInfoArea ul.btnTwinArea li{
  width: 100%;
  padding: 20px 0 20px 0;
  margin: 0 auto;
} 

  .couponInfoArea .btnArea {
    width: 80%;
    padding: 30px 0 20px 0;
    margin: 0 auto;
  }
  
  #weekdayInfo{
  padding-top: 40px;
  margin-top: -40px;   
  }
  
  #weekdayBenefits{
  background: url(../img/202409/sp/bg_couponContents.png);
  }

  #weekdayBenefitsArea a {
    position: absolute;
    bottom: 33%;
    left: 14%;
    width: 75%;
    display: block;
}
    


  #deliveryPurchase {
      background: url(../img/202409/sp/bg_deliContents.png);
   }
  
  
  #summaryConArea{
  width: 90%;
  margin: 0 auto;
  background: url(../img/202409/sp/bg_summary_dot.png) no-repeat top;
  aspect-ratio: 700/1438;
  background-size: contain;
  }

  #summaryConArea h2{
    display: block;
    margin: 10px auto;
  }

  #aboutSite{
    position: relative;
    background: url(../img/202409/sp/bg_siteLink.png);
    background-repeat: no-repeat;
    width: 94%;
    margin: 0 auto;
    background-size: 100%;
    aspect-ratio: 670/668;

  }
  #aboutSite ul {
      position: absolute;
      bottom: 10%;
      left: 3%;
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr);
      gap: 2%;
      padding: 2%;
      width: 91%;
      margin: 0 auto;
  }
  #aboutCoupon p{
    width: 94%;
    margin: 10px auto;
  }

}
#aboutBag{
    padding-top: 60px;
    margin-top: -60px; 
  }
  

/*
#storeMapLists
*/
#aboutContents #storeMapLists {
  width: 90%;
  margin:  0 auto;
  padding-top: 70px;
  margin-top: -70px;
  padding-bottom: 6%;
}
#aboutContents #storeMapLists #storeMapListsBg{
    background: url(../img/202502/pc/bg_summary_03.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: 100%;
    padding: 6% 0 0 0;
    aspect-ratio: 332 / 1135 ;
}
#aboutContents #storeMapLists h4{
  position: relative;
  width: 80%;
  margin: 2% auto 3% auto;
  padding-bottom: 0.5rem;
  padding-left: 2.3rem;
  font-size: min(2.4vw, 28px);
  color :#464646;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #333;  
}

#aboutContents #storeMapLists h4:before {
content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: url(../img/mapicon.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: 0.5%;
    left: 0;
}


#aboutContents #storeMapLists iframe{
  width: 80%;
  height: 18%;
  margin: 0 auto 5% auto;
}

@media screen and (max-width:750px) {
  #aboutContents #storeMapLists #storeMapListsBg{
    background: url(../img/202502/sp/bg_summary_03.png);
    aspect-ratio: 700 / 3218 ;
    background-repeat: no-repeat;
    width: 100%;
    background-size: 100%;
  }
  #aboutContents #storeMapLists h4{
      font-size: min(4vw, 18px);     
  } 
  #aboutContents #storeMapLists h4:before {
    width: 2rem;
    height: 1.5rem;
    top: 0;
  }

  #aboutContents #storeMapLists iframe{ 
    width: 91%; 
    height: 19%;
    margin: 0 auto 4% auto;
  }


}




/*---------------------
  floating-menu.php
---------------------*/
/*
JS使用時は初期値を非表示にする。
.floating{ display: none;}  
*/
.floating{ display: block;}  
.menuArea {
    position: fixed;
    width: 124px;    
    right: 0px;
    bottom: 4%;
    z-index: 9999;
    padding: 10px 2px 8px 12px;
    
    background: url(../img/202409/pc/bg_floating.png);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 131/340;  
}
.menuArea ul li{
  list-style: none;
}
.menuArea ul li picture img{
    width: 95%;
}
  #floatAreaShop {
     /*aspect-ratio: 120/142;*/  
  }

  #floatAreaShop ul{
    display: flex;
    flex-flow: nowrap;
    align-items: center;
    flex-wrap: wrap;
    /*height: 72%;*/
  }
   #floatAreaDeli {
      /*aspect-ratio: 120/94;*/  
  }
#floatAreaDeli ul li img{ width:90%;}
#floatAreaSummary ul li img{ width:90%;}




@media screen and (max-width:750px) {
    .menuArea {
      background-image: none;
      border-radius: 0;
      position: fixed;
      left: 0;
      bottom: 0;
      padding: 0;
      z-index: 9999;
      background-color: #ff9e13;
      width: 100%;
      display: flex;
      /* justify-content: space-evenly; */
      /* height: 7%; */
      aspect-ratio: 760 / 106;
      }
  .menuArea ul li picture img{ width: 100%; }
      .floatMds{
          text-indent: 100%;
          white-space: nowrap;
          overflow: hidden;
          height: 0;
          margin: 0;
          padding: 0;
      }
  #floatAreaShop {
    aspect-ratio: unset;
    width: 50%; 
  }
  #floatAreaShop ul{ height: auto;}
    #floatAreaShop ul li{
      width: 50%;
  }
  
  #floatAreaDeli {
    aspect-ratio: unset;
    width: 25%; 
  }
  #floatAreaDeli ul li img{ width: 100%;}
  #floatAreaSummary {
    aspect-ratio: unset;
    width: 25%; 
  }
  #floatAreaSummary ul li img{ width: 100%;}
}

/*---------------------
  floating-menu.php
  #fm202409
---------------------*/
@media screen and (min-width:751px) {
  #aboutContents .summaryBg{ padding: 2% 0;}
  #fm202409 .menuArea {
    position: fixed;
    width: 124px;
    right: 0px;
    bottom: 4%;
    z-index: 9999;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: 4px solid #fff;
    border-radius: 20px 0 0 20px;
    background: #ffa548;
    aspect-ratio: unset;
}
  #fm202409 .floating ul { display: block; padding-right: 2%;}
  #fm202409 .floatMds{width: fit-content; margin: 2% auto;}

  #fm202409 .menuArea li{padding-bottom: 4%;}
  #fm202409 .menuArea li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85px;
    height: 45px;
    margin: 0 auto;
    padding: 1em;
/*    border: 3px solid #ff8200;*/
    border-radius: 5px;
    background-color: #fff;
    color: #834000;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    
  }  
  
/*  #fm202409 .menuArea li a br{ display: none;}*/
  
  #contentsAreaShop a.reserve{
    position: absolute;
    bottom: 39%;
    left: 11%;
  }
  
  #contentsAreaShop a.shop{
    position: absolute;
    bottom: 24%;
    left: 11%;
  }  
}
@media screen and (max-width:750px) {    
  .couponInfoArea ul.btnArea{ width : 96%;}
  .couponInfoArea ul.btnArea li.reserve{ width: 85%;}
  #aboutContents .summaryBg{ background: none;}  
  #aboutContents .aboutCampaign{
    background: url(../img/202409/sp/bg_summary_02.png);
    background-size: contain;
    background-repeat: none;
    background-position: top;
    aspect-ratio: 700 / 956;
  }
  #contentsAreaApp a {
    position: absolute;
    width: 60%;
    bottom: 18%;
    left: 5%;
  }
  
  #contentsAreaShop a.reserve{
    position: absolute;
    width: 55%;
    bottom: 39%;
    left: 6%;
  }
  
  #contentsAreaShop a.shop{
    position: absolute;
    width: 55%;
    bottom: 21%;
    left: 6%;
  } 
  
  
  #aboutContents .aboutCoupon{
    background: url(../img/202409/sp/bg_summary_03.png);
    background-size: contain;
    background-repeat: none;
    background-position: top;
    aspect-ratio: 700 / 893;  
  }
  
  
  
  #fm202409 .menuArea {
    background-color: #ff5000;
    height: 10vh;
    aspect-ratio : unset;
  }
  #fm202409 .menuArea ul{ 
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    height: 100%;
  }
  
  #fm202409 .menuArea li{
    height: 100%;

  }
  #fm202409 .menuArea li a{
    width: 100%;
    height: 100%;
    display: flex;
    color: #fff;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: clamp(13px, 2.4vw, 18px);
  }  
  #fm202409 .menuArea li a:hover{
    text-decoration: none;
  }
  #fm202409 #floatAreaShop li{ width:49%;}
  #fm202409 #floatAreaShop li:last-child{
     border-left: 1px solid #aaa; 
  }
}