@charset "UTF-8";
/* ==========================================================================
   トップページ汎用レイアウト 初期セット
   - 特定案件名やブランド名は書かない
   - 必要に応じてクラス名・カラーは各案件ごとに上書きする前提
   ========================================================================== */
/* --------------------------------------
   ページ全体ラッパー
   -------------------------------------- */
.p-index {
  overflow: hidden;
  /* トップページ全体のインナーラッパー */
  position: relative;
}
.p-index__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: 4rem 2rem;
}
@media screen and (max-width: 499px) {
  .p-index__inner {
    width: 100%;
  }
}
@media screen and (max-width: 499px) {
  .p-index__inner {
    padding: 3rem 1.5rem;
  }
}

/* --------------------------------------
   左右の文字
   -------------------------------------- */
.p-index-en {
  position: absolute;
  top: 0;
  width: 7%;
  margin: 0;
  z-index: 10;
}

.p-index-en__left {
  left: -10px;
}

.p-index-en__right {
  right: -10px;
}

/* --------------------------------------
   ヒーローセクション（キービジュアル）
   -------------------------------------- */
.p-index-hero {
  /* 背景をブラウザ横幅いっぱいに広げる */
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
}
@media screen and (max-width: 499px) {
  .p-index-hero {
    margin-left: 0;
    margin-right: 0;
    padding-inline: 0;
  }
}
/* --------------------------------------
   セクション共通（見出しなど）
   -------------------------------------- */
.p-index-section {
  padding: 5rem 0;
}
@media screen and (max-width: 499px) {
  .p-index-section {
    padding: 3.5rem 0;
  }
}
.p-index-section__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: 0 2rem;
}
@media screen and (max-width: 499px) {
  .p-index-section__inner {
    width: 100%;
  }
}
@media screen and (max-width: 499px) {
  .p-index-section__inner {
    padding: 0 1.5rem;
  }
}
.p-index-section__head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.p-index-section__eyebrow {
  font-size: 12px;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #004517;
  margin-bottom: 0.75rem;
}
.p-index-section__title {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.p-index-section__lead {
  font-size: 14px;
  font-size: 1.4rem;
  color: #626262;
}

/* --------------------------------------
   山口グルメ丼とは？
   -------------------------------------- */
.p-index-feature {
  width: 100%;
  background: transparent url(../assets/img/index/feature_bg.png) repeat-y;
  background-size: cover;
}
.p-index-feature__head {
  padding-top: 10rem;
  font-style: normal;
  font-weight: 800;
  font-size: 50px;
  font-size: 5rem;
  text-align: center;
  color: #004517;
  margin-bottom: 6rem;
}
.p-index-feature__w {
  display: flex;
  flex-wrap: wrap;
}
.p-index-feature__left {
  width: 55%;
}
.p-index-feature__detail {
  width: 30%;
}
.p-index-feature__ttl {
  font-style: normal;
  font-weight: 800;
  font-size: 26px;
  font-size: 2.6rem;
  color: #004517;
  margin-top: 0;
}

/* --------------------------------------
   参加エリア
   -------------------------------------- */
.p-index-area {
  display: none;
  background: #006934;
}
.p-index-area__head {
  margin-top: 0;
  text-align: center;
  font-style: normal;
  font-weight: 800;
  font-size: 50px;
  font-size: 5rem;
  color: #fffbea;
}
.p-index-area__list {
  padding: 0;
  list-style: none;
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
}
@media screen and (max-width: 499px) {
  .p-index-area__list {
    width: 100%;
  }
}
.p-index-area__list li {
  width: 48%;
  margin-bottom: 6rem;
}
.p-index-area__map {
  background: linear-gradient(180deg, #006934 0%, #429834 80%);
}
.p-index-area__img {
  max-width: 1100px;
  margin-inline: auto;
}
@media screen and (max-width: 499px) {
  .p-index-area__img {
    width: 100%;
  }
}
.p-index-area__img a {
  display: block;
}
.p-index-area__img a:hover img {
  opacity: 1;
}
.p-index-area__img img {
  background: #fff;
  border-radius: 70px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.p-index-area__txt {
  max-width: 530px;
  margin: 0 auto;
  margin-top: -130px;
}

/* --------------------------------------
   加盟店紹介ブログ
   -------------------------------------- */
.p-index-blog {
  display: none;
}

/* --------------------------------------
   お知らせ
   -------------------------------------- */
.p-index-news {
  background: #fef9e1;
  padding: 10rem 0 3rem 0;
}
.p-index-news__inner {
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 499px) {
  .p-index-news__inner {
    width: 100%;
  }
}
.p-index-news__head {
  margin-top: 0;
  color: #004517;
  font-style: normal;
  font-weight: 800;
  font-size: 50px;
  font-size: 5rem;
}
.p-index-news__left {
  width: 20%;
}
.p-index-news__right {
  width: 71%;
}
.p-index-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-index-news__list li {
  border-bottom: 1px solid #ded7b5;
  margin-bottom: 30px;
  padding-bottom: 30px;
}
.p-index-news__list li a {
  display: flex;
  flex-wrap: wrap;
}
.p-index-news__date {
  width: 12%;
  color: #004517;
  font-weight: 400;
  font-size: 15px;
  font-size: 1.5rem;
  margin: 0 2% 0 0;
}
.p-index-news__title {
  width: 78%;
  color: #000;
  font-weight: 500;
  font-size: 15px;
  font-size: 1.5rem;
  margin: 0 2% 0 0;
}
.p-index-news__arrow {
  margin: 0;
}

/* --------------------------------------
   インスタグラム
   -------------------------------------- */
.p-index-insta {
  background: #fef9e1;
  padding-top: 6rem;
}
.p-index-insta__inner {
  max-width: 1100px;
  margin-inline: auto;
  border-bottom: 1px solid #004517;
  padding-bottom: 6rem;
}
@media screen and (max-width: 499px) {
  .p-index-insta__inner {
    width: 100%;
  }
}
.p-index-insta__head {
  color: #004517;
  font-weight: 600;
  font-size: 16px;
  font-size: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rem;
}
.p-index-insta__ttl {
  font-style: normal;
  font-weight: 800;
  font-size: 50px;
  font-size: 5rem;
  margin: 0;
}
.p-index-insta__link a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.p-index-insta__link img {
  display: inline-block;
  margin-right: 2rem;
}
.p-index-insta__id {
  color: #004517;
}
.p-index-insta__txt {
  text-align: center;
  color: #004517;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  font-size: 2rem;
}
.p-index-insta__btn {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.p-index-insta__btn li {
  margin: 0 1rem;
}

/* --------------------------------------
   CM動画
   -------------------------------------- */
.p-index-movie {
  background: #fef9e1;
  padding: 6rem 0;
}
.p-index-movie__head {
  font-style: normal;
  font-weight: 800;
  font-size: 50px;
  font-size: 5rem;
  text-align: center;
  color: #004517;
  margin-bottom: 6rem;
}
.p-index-movie__txt {
  text-align: center;
  color: #004517;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  font-size: 2rem;
}
.p-index-movie__more {
  display: none;
  text-align: center;
}

/* --------------------------------------
   スポンサー
   -------------------------------------- */
.p-index-sponsor {
  background: #fef9e1;
  width: 100%;
  position: relative;
}
.p-index-sponsor__top {
  max-width: 1100px;
  margin-inline: auto;
  background-color: #fff;
  border-radius: 50px 50px 0 0;
  padding: 50px;
}
@media screen and (max-width: 499px) {
  .p-index-sponsor__top {
    width: 100%;
  }
}
.p-index-sponsor__inner {
  background: transparent url(../assets/img/index/sponsor_bg.png) no-repeat;
  background-size: cover;
  padding: 6rem 0;
}
.p-index-sponsor__head {
  font-style: normal;
  font-weight: 800;
  font-size: 50px;
  font-size: 5rem;
  text-align: center;
  color: #004517;
  margin: 0 0 6rem 0;
}
.p-index-sponsor__txt {
  text-align: center;
  color: #004517;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  font-size: 2rem;
}
.p-index-sponsor__img {
  width: 100%;
  height: auto;
  display: block;
}/*# sourceMappingURL=index.css.map */