@charset 'utf-8';

/*=====挨拶部分の設定=====*/
.mainImg {
  margin-bottom: 6%;
}

.intro {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 11%;
}

.intro h1 {
  font-size: 2.0rem;
  margin-bottom: 4%;
}

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

.introTxt p:last-child {
  margin-top: 4%;
}

/*=====SHOP&MENU、SCHOOLの設定=====*/
.contens {
  display: flex;
  justify-content: space-around;
  margin-bottom: 8%;
}

.contens h2,
.news h2,
.insta h2,
.sns h2,
.concept h2,
.shopinfo h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 3%;
}

.contens h3 {
  font-size: 1.7rem;
  margin-bottom: 10%;
}

.contens p {
  font-size: 1.6rem;
  margin-top: 10%;
}

.shop,
.school {
  background-color: #ecd9b9;
  border-radius: 18%;
  padding: 4% 6% 2%;
  text-align: center;
}

p.more {
  background-color: #3b3221;
  font-size: 2.2rem;
  padding: 1.8% 15%;
  display: inline-block;
}

p.more a {
  color: #fff;
}

p.more:hover {
  opacity: 0.8;
}

/*=====NEWSの設定=====*/
.news {
  margin-bottom: 10%;
}

.aicon {
  margin-bottom: 1%;
  text-align: center
}

.news h2 {
  text-align: center
}

.news .txt {
  margin: 0 auto;
  width: 65%;
}

.news p {
  font-size: 1.8rem;
  margin-bottom: 4%;
}

.news .info {
  text-decoration: underline;
}

.btn {
  text-align: center;
  margin-top: 3%;
}

.news p.more {
  font-size: 2.2rem;
  padding: 1% 5%;
  display: inline-block;
}

/*=====instagramの設定=====*/
.instaWrapper, .conceptWrapper {
  margin-left: -200%;
  margin-right: -200%;
  padding-left: 200%;
  padding-right: 200%;
  background-color: #ebd9b9;
}

.insta,
.concept {
  background-color: #ebd9b9;
  padding: 2%;
  margin-bottom: 6%;
}

.insta h2,
.shopinfo h2 {
  text-align: center;
  margin: 4% 0;
}

.instaImg {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5%;
}

/*=====snsの設定=====*/
.sns {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 7%;
}

.sns p {
  font-size: 1.3rem;
  line-height: 2.0;
  margin-top: 10%;
}

/*=====twitterの設定=====*/
.twitterTime {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 13%;
}

/*=====conceptの設定=====*/
.concept {
  padding: 5% 10%;
  margin-bottom: 9%;
}

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

.concept h2 {
  text-align: center;
}

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

/*=====SHOP　INFORMATIONの設定=====*/
.shopinfo {
  text-align: center;
  margin-bottom: 15%;
}

.shopinfo p {
  font-size: 2.5rem;
  border: 2px solid #252424;
  padding: 2%;
  display: inline-block;
}


/*=====レスポンシブ調整用=====*/
@media (max-width:960px) {
  .insta img {
    width: 90%;
  }
}

@media (max-width:900px) {
  .concept {
  padding: 5% 2%;
}
}



/*=====スマホ用の設定=====*/
@media (max-width:768px) {
  .sp {
    display: none;
  }
  
  /*=====挨拶部分の設定=====*/
  .intro {
    display: block;
    padding: 0 2%;
  }
  
  .introImg {
    margin-top: 17%;
    margin-bottom: 10%;
    text-align: center;
  }
  
  .intro h1 {
    font-size: 1.7rem;
    margin-bottom: 2%;
    text-align: center;
  }

  .introTxt p {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
  }
  
  /*=====SHOP&MENU、SCHOOLの設定=====*/
.contens {
  display: block;
  padding: 0 2%;
  margin-top: 15%;
  margin-bottom: 18%;
}
  
  .shop, .school {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
  }
  
  .school {
    margin-bottom: 15%;
  }
  
  .contens h2, .news h2, .insta h2, .sns h2, .concept h2, .shopinfo h2 {
    font-size: 1.9rem;
  }
  
  .contens h3 {
    font-size: 1.6rem;
    margin-bottom: 7%;
  }
  
  .contens p {
    font-size: 1.3rem;
  }
  
   .shop p.more, .school p.more {
    font-size: 1.5rem;
     margin-top: 6%;
  }
  
  /*=====NEWSの設定=====*/
  .news {
    margin-bottom: 15%;
    padding: 0 2%;
  }
  
  .news .txt {
    width: 90%;
  }
  
  .news p.more {
    padding: 1.8% 12%;
    font-size: 1.8rem;
  }
  
  .news p {
    font-size: 1.5rem;
  }
  
  .news p.more {
    font-size: 1.5rem;
  }
  
  
  /*=====instagramの設定=====*/
  .instaWrapper, .conceptWrapper {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
  
  .instaImg {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .instaImg img {
    width: 100%;
  }
  
  .instaImg li {
    width: calc(33.33% – 13px);
    margin-bottom: 3%;
  }
  
  /*=====snsの設定=====*/
.sns {
  display: contents;
}
  
  .sns h2 {
    margin-top: 5%;
  }
  
  .sns p {
    margin-top: 3%;
  }
  
  .youtube, .cookpad {
    margin-bottom: 10%;
  }
  
  /*=====twitterの設定=====*/
  .twitter {
    margin-top: 15%;
    margin-bottom: 10%;
  }
  
.twitterTime {
  width: 90%;
  margin-top: 7%;
}

  /*=====conceptの設定=====*/
  .concept {
    margin-top: 20%;
    margin-bottom: 20%;
  }
  
  .conceptInner {
    display: block;
  }
  
  .conceptImg {
    text-align: center;
    margin-bottom: 5%;
  }
  
  .concept p {
    width: 75%;
    margin: 0 auto;
    font-size: 1.5rem;
  }
  
  /*=====SHOP　INFORMATIONの設定=====*/
  .shopinfo {
    padding: 0 2%;
  }
  
  .shopinfo p {
    font-size: 1.6rem;
  }
}

  /*=====レスポンシブ調整用=====*/
@media (max-width:630px) {
  .introTxt p {
    width: 53%;
  }
}

@media (max-width:590px) {
  .introTxt p {
    width: 58%;
  }
}

@media (max-width:540px) {
  .introTxt p {
    width: 63%;
  }
}

@media (max-width:500px) {
  .introTxt p {
    width: 65%;
  }
}

@media (max-width:480px) {
  .introTxt p {
    width: 68%;
  }
}

@media (max-width:460px) {
  .introTxt p {
    width: 70%;
  }
}

@media (max-width:440px) {
  .introTxt p {
    width: 74%;
  }
}

@media (max-width:420px) {
  .introTxt p {
    width: 78%;
  }
}

@media (max-width:400px) {
  .introTxt p {
    width: 83%;
  }
}

@media (max-width:380px) {
  .introTxt p {
    width: 85%;
  }
}

@media (max-width:370px) {
  .introTxt p {
    width: 87%;
  }
}