@charset "utf-8";
@import url("page.css");
.service__wrapper h2{
  font-size: 2rem;
  color: #909090;
  margin: 0 0 2rem;
}
.service__wrapper .row{
  margin-bottom: 30px;
}
.service__wrapper .box{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  column-gap: 30px;
}
@media screen and  (max-width: 768px){
  main{
    padding-bottom: 20px;
  }
  .page__wrapper.service__wrapper{
    padding:0;
  }
  .service__wrapper .row{
    margin-bottom: 0px;
  }
  .service__wrapper .box{
    column-gap: 16px;
    row-gap: 16px;
  }
}
.row{
  padding: 3rem 0 8rem;
  border-bottom:solid 1px #CBCBCB;
}
.row.row__second{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  column-gap: 30px;
  padding-bottom: 5rem;
}
.row__third{
  padding: 3rem 0 0 ;
  border-bottom:none;
}
.service__wrapper .row.row__third{
  margin-bottom: 0;
}
@media screen and  (max-width: 768px){
  .row{
    padding: 1.6rem 16px;
    border-bottom:none;
  }
  .row.row__second{
    display: block;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .row__third{
    padding: 3.4rem 16px 0 ;
    border-bottom:none;
    background: #f5f5f5;
  }
  .row__third__bottom{
    padding-top: 16px;
    padding-bottom: 30px;
  }
}
.service__wrapper .unit{
  text-align: center;
  width: 100%;
  transition:all 0.3s cubic-bezier(0.250, 0.250, 0.750, 0.750);
}
.service__wrapper .unit{
   flex: 1;
}
.service__wrapper .row__second .payment__wrapper{
   flex: 1;
}
.service__wrapper .row__second .point__wrapper{
   flex: 1;
}
.service__wrapper .row__second .unit{
  flex:none;
  width: calc(50% - 15px);
  margin-bottom: 30px;
}
.service__wrapper .row__third .unit{
  flex:none;
  width: calc(25% - calc(90px / 4));
  margin-bottom: 30px;
}
@media screen and  (max-width: 768px){
  .service__wrapper .unit{
     flex: none;
     width:calc(50% - 8px);
  }
  .service__wrapper .row__second .unit{
    margin-top:-30px;
  }
  .service__wrapper .row__second .unit:first-child,
  .service__wrapper .row__second .unit:nth-child(2){
    margin-top:0px;
  }
  .service__wrapper .row__second .payment__wrapper{
    padding:3.4rem 16px 0;
    margin-bottom: 0rem;
    background: #F5F5F5;
  }
  .service__wrapper .row__second .point__wrapper{
    padding:3.4rem 16px 0;
  }
  .service__wrapper .row__third {
    padding-bottom: 30px;
  }
  .service__wrapper .row__third .unit{
    flex:none;
    width:calc(50% - 8px);
    margin-bottom: 0;
  }
}
.service__wrapper .unit a{
  display: block;
  border:solid 3px #EAEAEA;
  border-radius: 8px;
  position:relative;
  min-height: 160px;
  box-sizing: border-box;
  padding-top: 40px;
  background: #fff;
  transition:all 0.3s cubic-bezier(0.250, 0.250, 0.750, 0.750);
}
.service__wrapper .unit a:hover{
  opacity: 0.3;
  transition:all 0.3s cubic-bezier(0.250, 0.250, 0.750, 0.750);
}
.service__wrapper .unit a p{
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  bottom:3rem;
  text-align: center;
  width: 100%;
  font-size:1.8rem;
  font-weight: 500;
  color: #434343;
}
.service__wrapper .unit a p span.icon__arrow__s{
  position: relative;
  top:-2px;
}
.unit__location img{
  width: 32px;
  height: auto;
}
.unit__bentou img{
  width: 35px;
  height: auto;
}
.unit__bentou p{
  font-size: 1.6rem;
  line-height: 2rem;
  position: relative;
}
.unit__bentou p span{
  display: block;
}
.service__wrapper .unit.unit__bentou a p span.icon__arrow__s{
  position: absolute;
  bottom:1rem;
  top:auto;
  right:16%;
}
@media screen and  (max-width: 768px){
  .service__wrapper .unit.unit__bentou a p span.icon__arrow__s{
    position: absolute;
    bottom:1.4rem;
    top:auto;
    right:10%;
  }
}
.unit__delivery img{
  width: 46px;
  height: auto;
}
.unit__onlineshop img{
  width: 45px;
  height: auto;
}
.service__wrapper .unit.unit__ic_service a{
  padding-top: 34px;
}
.unit__ic_service img{
  width: 46px;
  height: auto;
}
.unit__yoshinoyapreca img{
  width: 54px;
  height: auto;
}
.unit__t-point img,
.unit__v-point img{
  width: 34px;
  height: auto;
}
.service__wrapper .unit.unit__t-point a,
.service__wrapper .unit.unit__v-point a{
  padding-top: 40px;
}
.unit__rakuten img{
  width: 40px;
  height: auto;
}
.service__wrapper .unit.unit__rakuten a{
  padding-top: 40px;
}
.unit__yoshinoya-app img{
  width: 47px;
  height: auto;
}
.unit__email-newsletter img{
  width: 45px;
  height: auto;
}
.service__wrapper .unit.unit__email-newsletter a{
  padding-top: 48px;
}
.unit__line img{
  width: 45px;
  height: auto;
}
.unit__twitter img{
  width: 45px;
  height: auto;
}
.service__wrapper .unit.unit__twitter a{
  padding-top: 48px;
}
.unit__instagram img{
  width: 40px;
  height: auto;
}
.service__wrapper .unit.unit__instagram a {
  padding-top:44px;
}
.service__wrapper .unit.unit__instagram a p{
  letter-spacing: -2px;
}
.unit__youtube img{
  width: 52px;
  height: auto;
}
.service__wrapper .unit.unit__youtube a{
  padding-top: 48px;
}