@charset 'utf-8';

/*=====メイン画像部分の設定=====*/
h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 4%;
  text-align: center;
  letter-spacing: 0.7rem;
}

.mainImg {
  margin-bottom: 4%;
}

/*=====スティックメロンパン部分の設定=====*/
.melonBread,
.dailyBread {
  display: flex;
  justify-content: space-around;
  margin-bottom: 8%;
}

.melonBread .txt,
.dailyBread .txt {
  width: 40%;
}

.melonBread h2,
.dailyBread h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  background-color: #ebd9b9;
  padding: 3%;
  margin-bottom: 7%;
}

.melonBread p,
.dailyBread p {
  font-size: 1.8rem;
}

.melonBread p:last-child {
  margin-top: 7%;
}

/*=====MENU部分の設定=====*/
.menu {
  margin-bottom: 15%;
}

.menu h2,
.weekMenu h2 {
  text-align: center;
  margin-bottom: 5%;
}

.menu .menuImg,
.weekMenu .menuImg,
.galleryImg {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 8%;
}

.menu .menuImg li,
.galleryImg li {
  width: calc(25% - 10px);
}

.menu .menuImg p,
.weekMenu .menuImg {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

.menu .menuImg .price,
.weekMenu .menuImg span {
  font-size: 1.5rem;
  font-weight: normal;
}

.new {
  position: relative
}

.new:before {
  content: url("../img/aicon_new.png");
  position: absolute;
  top: 0;
  left: 0;
}

.premium {
  position: relative;
}

.premium:after {
  content: url("../img/aicon_premium.jpg");
  position: absolute;
  margin-left: 3%;
}

.limitation {
  position: relative;
}

.limitation:after {
  content: url("../img/aicon_limitation.jpg");
  position: absolute;
  margin-left: 3%;
}

.menu .txt,
.weekMenu .txt {
  font-size: 1.8rem;
}

/*=====日替わりパン部分の設定=====*/
.dailyBread {
  margin-bottom: 10%;
}

.dailyBread p {
  margin-bottom: 4%;
}

.dailyBread .txt {
  width: 35%;
}

/*=====週メニュー部分の設定=====*/
.weekMenu {
  margin-bottom: 9%;
}

.weekMenu .menuImg {
  margin-bottom: 7%;
}

.pause {
  position: relative;
}

.pause:after {
  content: url("../img/aicon_pause.jpg");
  position: absolute;
  top: 45%;
  left: 7%;
}

/*=====ぷらんた〜るのパンについての設定=====*/
.conceptWrapper {
  margin-left: -200%;
  margin-right: -200%;
  padding-left: 200%;
  padding-right: 200%;
  background-color: #ebd9b9;
}

.concept {
  background-color: #ebd9b9;
  padding: 5% 10% 7%;
  margin-bottom: 6%;
}

.conceptInner {
  display: flex;
  justify-content: space-around;
}

.concept h2,
.gallery h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 4%;
}

.concept p {
  font-size: 1.8rem;
}

/*=====本日のパン　ギャラリーの設定=====*/
.gallery {
  width: 98%;
  margin: 6% auto 10%;
}

.galleryImg p {
  font-size: 1.5rem;
  margin-bottom: 3%;
}

/*=====レスポンシブ調整用=====*/

@media (max-width:920px) {
  .concept {
    padding: 5% 1% 7%;
  }
}


/*=====スマホ用の設定=====*/
@media (max-width:768px) {
  .sp {
    display: none;
  }
  
  h1 {
    font-size: 2.4rem;
  }

  /*=====スティックメロンパン部分の設定=====*/
  .melonBread,
  .dailyBread,
  .conceptInner {
    display: block;
  }
  
  .melonBread {
    padding: 0 2%;
    margin-top: 15%;
    margin-bottom: 20%;
  }
  
  .melonBread h2 {
    padding: 2%;
    font-size: 1.9rem;
  }
  
  .melonBread p {
    font-size: 1.5rem;
  }

  .melonBread .txt,
  .dailyBread .txt {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .melonBreadImg,
  .dailyBreadImg,
  .conceptImg {
    text-align: center;
    margin-top: 10%;
  }

  /*=====MENU部分の設定=====*/
  .menu {
    width: 90%;
    padding: 0 3%;
  }
  
  .menu h2 img {
    width: 40%;
  }
  
  .menu .menuImg li img {
    width: 87%;
  }
  
  .menu .menuImg li,
  .galleryImg li,
  .weekMenu .menuImg li {
    width: calc(33.333% - 10px);
  }
  
  .menu .menuImg p {
    font-size: 1.5rem;
  }
  
  .menu .menuImg .price {
    font-size: 1.4rem;
  }
  
  .menu p.txt {
    font-size: 1.29rem;
    margin-bottom: 20%;
  }
  
  /*=====日替わりパンの設定=====*/
  .dailyBread {
    padding: 0 3%;
  }
  
  .melonBread h2, .dailyBread h2, .concept h2, .gallery h2 {
    font-size: 1.9rem;
  }
  
  .dailyBread P {
    font-size: 1.5rem;
  }
  
  .dailyBreadImg {
    margin-bottom: 20%;
  }

  /*=====週メニュー部分の設定=====*/
  .weekMenu {
    padding: 0 3%;
    margin-bottom: 20%;
  }
  
  .weekMenu h2 img {
    width: 40%;
  }
  
  .weekMenu ul li {
    margin-bottom: 8%;
  }
  
  .weekMenu ul li img {
    width: 87%;
  }
  
  .weekMenu p {
    font-size: 1.5rem;
  }
  
  .menu .menuImg .price,
.weekMenu .menuImg span {
    font-size: 1.4rem;
  }
  
  .pause:after {
    content: '';
    /*何も入れない*/
    display: inline-block;
    /*忘れずに！*/
    width: 100px;
    /*画像の幅*/
    height: 50px;
    /*画像の高さ*/
    background-image: url("../img/aicon_pause.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
  
  .weekMenu p.txt {
    font-size: 1.29rem;
  }

  /*=====ぷらんた〜るのパンについての設定=====*/
  .conceptWrapper {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
  
  .conceptImg {
    margin-bottom: 5%;
  }

  .concept p {
    font-size: 1.5rem;
    width: 70%;
    margin: 0 auto;
  }
  
  /*=====ギャラリーの設定=====*/
  .gallery{
    margin-top: 20%;
    width: 95%;
  }
  
  .gallery p {
    font-size: 1.3rem;
    margin-bottom: 7%;
  }
}


/*=====レスポンシブ調整用=====*/
@media (max-width:420px) {

  .menu .menuImg li,
  .galleryImg li,
  .weekMenu .menuImg li {
    width: calc(50% - 10px);
  }

  .melonBread .txt,
  .dailyBread .txt {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}