@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=EB+Garamond:400,500,700&display=swap");
@media only screen and (max-width: 767px) {
  .site-main {
    padding-top: 50px;
  }
}

.section-hero {
  background-color: #fafafa;
  height: 90vh;
  position: relative;
  max-height: 800px;
  background-image: url(../../img/okashi/hero-img.jpg);
}

@media (min-width: 768px) {
  .section-hero .section-content {
    position: relative;
    height: 100%;
  }
  .section-hero .headline {
    position: relative;
    height: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .section-hero {
    height: 240px;
  }
}

.section-hero .panel {
  position: absolute !important;
  bottom: -50px;
  left: 20px;

}

@media only screen and (max-width: 767px) {
  .section-hero .panel {
    bottom: -40px;
    left: 40px;
  }
}

.section-thought {
  margin-top: 260px;
  padding-bottom: 100px;
}

@media only screen and (max-width: 767px) {
  .section-thought {
    margin-top: 130px;
    padding-bottom: 40px;
  }
  .section-thought .figure {
    margin: 0 10%;
  }
}

@media only screen and (min-width: 768px) {
  .section-thought .headline {
    text-align: right;
    padding: 0 1em 1em;
  }
}

@media only screen and (max-width: 767px) {
  .section-thought .headline {
    text-align: center;
    padding: 1.75em 0 0.5em;
  }
}

.section-thought .content {
  font-size: 1.4rem;
}

@media only screen and (min-width: 768px) {
  .section-thought .content {
    margin-left: 20%;
  }
}

@media only screen and (max-width: 767px) {
  .section-thought .content {
    font-size: 1.3rem;
    padding: 0 10px;
  }
}

.section-thought .content li {
  line-height: 1.8;
  margin: 0.75em 0;
}

@media only screen and (max-width: 767px) {
  .section-thought .content li {
    margin-left: 2em;
    text-indent: -2em;
  }
}

.section-item .desc {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.4rem;
}

.section-item .headline {
  background-repeat: no-repeat;
  background-position: 50% 0;
}

@media only screen and (max-width: 767px) {
  .section-item .headline {
    background-size: cover;
  }
}

.section-item .headline .row {
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (max-width: 767px) {
  .section-item .headline .row {
    height: 350px;
  }
}

.section-item .headline__title {
  font-size: 3.6rem;
  line-height: 1.6;
}

@media only screen and (max-width: 767px) {
  .section-item .headline__title {
    font-size: 2.4rem;
  }
}

.section-item .headline__en {
  font-size: 1.4rem;
}

@media only screen and (max-width: 767px) {
  .section-item .headline__en {
    font-size: 1.0rem;
  }
}

@media only screen and (max-width: 767px) {
  .section-item .headline {
    position: relative;
  }
  .section-item .headline .panel {
    position: absolute;
    width: 100%;
    bottom: 25px;
    left: 0;
    text-align: center;
  }
}

.section-item .content {
  padding: 50px 0;
}

@media only screen and (max-width: 767px) {
  .section-item .content {
    padding: 2em 20px;
  }
}

.section-item .content dt {
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .section-item .content dt {
    text-align: center;
    padding-bottom: 0.25em;
  }
}

@media only screen and (max-width: 767px) {
  .section-item .content dd {
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 767px) {
  .section-item .content .desc {
    font-size: 1.2rem;
  }
}

.section-item.monaka .headline {
  background-image: url(../../img/okashi/monaka.jpg);
  background-color: #EAE8D2;
}

@media only screen and (min-width: 768px) {
  .section-item.monaka .headline {
    padding-left: 3em;
  }
}

@media only screen and (max-width: 767px) {
  .section-item.monaka .headline {
    background-image: url(../../img/okashi/monaka-m2x.jpg);
  }
}

.section-item.monaka .block {
  margin-left: auto;
}

.section-item.monaka .block dl + dl {
  margin-top: 2em;
}

.section-item.asadora .headline {
  background-image: url(../../img/okashi/asadora.jpg);
  background-color: #ECDBC7;
}

@media only screen and (max-width: 767px) {
  .section-item.asadora .headline {
    background-image: url(../../img/okashi/asadora-m2x.jpg);
  }
}

@media only screen and (min-width: 768px) {
  .section-item.asadora .headline .panel {
    margin-left: 70%;
  }
}

.section-item.shiodaifuku .headline {
  background-image: url(../../img/okashi/shiodaifuku.jpg);
  background-color: #EDE1E0;
}

@media only screen and (max-width: 767px) {
  .section-item.shiodaifuku .headline {
    background-image: url(../../img/okashi/shiodaifuku-m2x.jpg);
  }
}

@media only screen and (min-width: 768px) {
  .section-item.shiodaifuku .headline .panel {
    padding-left: 120px;
  }
}

.section-item.shiodaifuku .block {
  margin-left: auto;
}