﻿@charset "UTF-8";
body {
  counter-reset: number 0;
}

/* ===========================
.IndexMissionArea
=============================*/
.brandtitleSet {
  text-align: left;
  width: 80%;
  margin: 0 auto;
}
.brandtitleSet .ttlObj {
}
.brandtitleSet .txtObj {
}
@media screen and (min-width: 769px) {
  .brandtitleSet {
    width: 60%;
  }
  .brandtitleSet .ttlObj {
  }
  .brandtitleSet .txtObj {
  }
}

/* ===========================
mainSlider
=============================*/
.mainSlider {
}
.mainSlider .swiper-slide {
}
.mainSlider .swiper-slide a {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mainSlider {
  }
  .mainSlider .swiper-slide {
  }
  .mainSlider .swiper-slide a {
  }
}

/* ===========================
.IndexMissionArea
=============================*/
.IndexMissionArea {
}
.IndexMissionArea .imgTxtBlk {
}
.IndexMissionArea .imgTxtBlk .imgObj {
}
.IndexMissionArea .imgTxtBlk .txtGlp {
  margin: 5% auto 15%;
}
.IndexMissionArea .imgTxtBlk .txtGlp .ttlObj {
  position: relative;
  padding: 0 3em 0 0;
  width: 100%;
  text-align: right;
}
.IndexMissionArea .imgTxtBlk .txtGlp .ttlObj span {
  background: #fff;
  position: relative;
  padding: 0 1em;
}
.IndexMissionArea .imgTxtBlk .txtGlp .ttlObj::before {
  content: "";
  background: var(--clr-line);
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  left: 0;
}
.IndexMissionArea .imgTxtBlk .txtGlp .txtSet {
  margin: 9% auto 0;
  width: 80%;
  text-align: left;
}
.IndexMissionArea .imgTxtBlk .txtGlp .txtSet .sTtlObj {
}
.IndexMissionArea .imgTxtBlk .txtGlp .txtSet .txtObj {
  margin: 1.5em 0 0;
}

.IndexMissionArea .movieBlk {
}
.IndexMissionArea .movieBlk .movSet {
  position: relative;
  line-height: 1;
}
.IndexMissionArea .movieBlk .movSet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.IndexMissionArea .movieBlk .movSet .movObj {
  z-index: 1;
  position: relative;
}
.IndexMissionArea .movieBlk .txtBlk {
  width: 80%;
  text-align: left;
  margin: 20% auto 15%;
}
.IndexMissionArea .movieBlk .movSet .txtGlp {
  position: absolute;
  bottom: 5%;
  left: 0;
  text-align: left;
  color: var(--clr-wh);
  display: flex;
  flex-flow: wrap;
  right: 0;
  width: 100%;
  padding: 0 5%;
  z-index: 2;
}
.IndexMissionArea .movieBlk .movSet .txtGlp .ttlObj {
  width: 100%;
  line-height: 1;
}
.IndexMissionArea .movieBlk .movSet .txtGlp .txtObj {
  margin: 1em 0 0;
  width: 100%;
  line-height: 1;
}
.IndexMissionArea .movieBlk .movSet .txtGlp .btnObj {
  margin: 12% 0 0 auto;
}
.IndexMissionArea .movieBlk .movSet .txtGlp .btnObj .txtObj {
  border: 1px solid;
  text-align: center;
  padding: 1.4em 3em;
  width: 100%;
  line-height: 1;
  margin: 0;
  cursor: pointer;
  transition: 0.2s ease;
}
.IndexMissionArea .movieBlk .movSet .txtGlp .btnObj .txtObj:hover {
  transition: 0.2s ease;
  background: #fff;
  border: 1px solid #fff;
  color: var(--clr-def);
}
.IndexMissionArea .txtBlk {
}
@media screen and (min-width: 769px) {
  .IndexMissionArea {
  }
  .IndexMissionArea .imgTxtBlk {
    position: relative;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--clr-line);
    padding: 0 0 7%;
    margin: 0 auto 7%;
  }
  .IndexMissionArea .imgTxtBlk .imgObj {
    width: 48%;
    position: absolute;
    left: 5%;
    top: 0;
    z-index: 1;
  }
  .IndexMissionArea .imgTxtBlk .txtGlp {
    margin: 3% 0 0;
    width: 100%;
  }
  .IndexMissionArea .imgTxtBlk .txtGlp .ttlObj {
    padding: 0 7em 0 0;
  }
  .IndexMissionArea .imgTxtBlk .txtGlp .ttlObj span {
  }
  .IndexMissionArea .imgTxtBlk .txtGlp .ttlObj::before {
  }
  .IndexMissionArea .imgTxtBlk .txtGlp .txtSet {
    width: min(30%, 380px);
    margin: 5% auto 0 60%;
  }
  .IndexMissionArea .imgTxtBlk .txtGlp .txtSet .sTtlObj {
  }
  .IndexMissionArea .imgTxtBlk .txtGlp .txtSet .txtObj {
  }

  .IndexMissionArea .movieBlk {
  }
  .IndexMissionArea .movieBlk .movSet {
  }
  .IndexMissionArea .movieBlk .movSet .movObj {
  }
  .IndexMissionArea .movieBlk .txtBlk {
    width: 60%;
    margin: 7% auto 5%;
  }
  .IndexMissionArea .movieBlk .movSet .txtGlp {
  }
  .IndexMissionArea .movieBlk .movSet .txtGlp .ttlObj {
  }
  .IndexMissionArea .movieBlk .movSet .txtGlp .txtObj {
  }
  .IndexMissionArea .movieBlk .movSet .txtGlp .btnObj {
    margin: 3% 0 0 auto;
  }
  .IndexMissionArea .movieBlk .movSet .txtGlp .btnObj .txtObj {
  }
  .IndexMissionArea .txtBlk {
  }
}
/* ===========================
IndexIngredientsArea
=============================*/
.IndexIngredientsArea {
  position: relative;
  padding-top: min(10vw, 128px);
}
.IndexIngredientsArea .ITAtitleSet {
  position: relative;
  padding: 0 3em 0 0;
  width: 100%;
  text-align: right;
}
.IndexIngredientsArea .ITAtitleSet span {
  background: #fff;
  position: relative;
  padding: 0 1em;
}
.IndexIngredientsArea .ITAtitleSet::before {
  content: "";
  background: var(--clr-line);
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  left: 0;
}
.IndexIngredientsArea .ITAtitleSet::after {
}

.IndexIngredientsArea .ingredientSlideBlk {
  width: 100%;
  margin: 10% auto 0;
}
.IndexIngredientsArea .ingredientSlideBlk .swiper {
  width: 80%;
  margin: 0 auto 12%;
  background: var(--clr-wh);
}
.IndexIngredientsArea .ingredientSlideBlk .swiper-wrapper {
  /* width: 80%; */
}
.IndexIngredientsArea .ingredientSet {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: var(--clr-wh);
}
.IndexIngredientsArea .ingredientSet .imgObj {
  position: relative;
}
.IndexIngredientsArea .ingredientSet .txtGlp {
  margin: 5% auto 0;
  position: relative;
}
.IndexIngredientsArea .txtGlp .ttlObj {
  text-align: left;
}
.IndexIngredientsArea .txtGlp .txtObj {
  margin: 1em 0 0;
  text-align: left;
  width: 100%;
}

.IndexIngredientsArea .ingredientSlideBlk .pagenationBlk {
  border-top: 1px solid var(--clr-line);
  width: 100%;
  padding: 3% 0 0;
}
.IndexIngredientsArea .ingredientSlideBlk .pagenationBlk .swiper-pagination {
  position: relative;
}
.IndexIngredientsArea .SusBlk {
  margin: 20% auto 0;
}
.IndexIngredientsArea .SusBlk .ttlObj {
}
.IndexIngredientsArea .SusBlk .susLists {
  width: 80%;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  margin: 8% auto 0;
  border-left: 1px solid var(--clr-line);
  border-top: 1px solid var(--clr-line);
}
.IndexIngredientsArea .SusBlk .susList {
  width: 50%;
  border-right: 1px solid var(--clr-line);
  border-bottom: 1px solid var(--clr-line);
  padding: 5% 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
}
.IndexIngredientsArea .SusBlk .susList .imgObj {
  width: 30%;
  margin: 0 auto 5%;
}
.IndexIngredientsArea .SusBlk .susList .txtObj {
  margin: auto 0;
}
.IndexIngredientsArea .SusBlk .iconGlp {
  width: 75%;
  margin: 6% auto 0;
}
.IndexIngredientsArea .SusBlk .iconGlp .iconObj {
}
.IndexIngredientsArea .SusBlk .iconGlp .txtObj {
  margin: 5% auto 0;
}
.IndexIngredientsArea .imgBtmObj {
  margin: 20% auto 0;
}
.IndexIngredientsArea .imgBtmObj .mainImgBlk {
}
@media screen and (min-width: 769px) {
  .IndexIngredientsArea {
    padding-top: min(3vw, 60px);
    background: none;
  }
  .IndexIngredientsArea .ITAtitleSet {
    position: absolute;
    top: 5%;
    z-index: -1;
  }
  .IndexIngredientsArea .ITAtitleSet span {
  }
  .IndexIngredientsArea .ITAtitleSet::before,
  .IndexIngredientsArea .ITAtitleSet::after {
    content: "";
  }
  .IndexIngredientsArea .ITAtitleSet::after {
  }

  .IndexIngredientsArea .ingredientSlideBlk {
    margin: 0 auto 0;
  }
  .IndexIngredientsArea .ingredientSlideBlk .swiper {
    width: 90%;
    margin: 0 auto 50px;
    background: none;
  }
  .IndexIngredientsArea .ingredientSet::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 72%;
    background: #fff;
    z-index: 0;
  }
  .IndexIngredientsArea .ingredientSet {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
    background: none;
  }
  .IndexIngredientsArea .ingredientSet .imgObj {
    width: 60%;
  }
  .IndexIngredientsArea .ingredientSet .txtGlp {
    width: 40%;
    margin: 5% auto 0 0;
    padding: 0 0 0 5%;
  }
  .IndexIngredientsArea .txtGlp .ttlObj {
  }
  .IndexIngredientsArea .txtGlp .txtSet {
  }
  .IndexIngredientsArea .ingredientSlideBlk .pagenationBlk {
    padding: 1.85% 0 0;
  }
  .IndexIngredientsArea .SusBlk {
  }
  .IndexIngredientsArea .SusBlk .ttlObj {
  }
  .IndexIngredientsArea .SusBlk {
    margin: min(5%, 120px) auto 0;
  }
  .IndexIngredientsArea .SusBlk .ttlObj {
  }
  .IndexIngredientsArea .SusBlk .susLists {
    margin: 5% auto 0;
    width: min(62%, 800px);
  }
  .IndexIngredientsArea .SusBlk .susList {
    width: 25%;
    padding: 30px 0;
  }
  .IndexIngredientsArea .SusBlk .susList .imgObj {
  }
  .IndexIngredientsArea .SusBlk .susList .txtObj {
  }
  .IndexIngredientsArea .SusBlk .iconGlp {
    width: min(30%, 400px);
    margin: 3% auto 0;
  }
  .IndexIngredientsArea .SusBlk .iconGlp .iconObj {
  }
  .IndexIngredientsArea .SusBlk .iconGlp .txtObj {
  }
  .IndexIngredientsArea .imgBtmObj {
    margin: 5% auto 0;
  }
  .IndexIngredientsArea .imgBtmObj .mainImgBlk {
  }
}
/* ===========================
IndexOrganicArea
=============================*/
.IndexOrganicArea {
  width: 90%;
  border: 1px solid var(--clr-line);
  margin: 0 auto;
  padding: 10% 10% 8%;
}
.IndexOrganicArea .ttlGlp {
}
.IndexOrganicArea .ttlGlp .txtObj {
}
.IndexOrganicArea .iconNum {
  width: 40%;
  margin: 5% auto 8%;
}
.IndexOrganicArea .iconNum img {
}
.IndexOrganicArea .txtObj {
}
.IndexOrganicArea .txtLists {
  display: flex;
  flex-flow: wrap;
  text-align: left;
  align-items: center;
  margin: 13% auto;
}
.IndexOrganicArea .txtListTtl {
  width: 5%;
  margin: 0 0 1em 0;
}
.IndexOrganicArea .txtList {
  width: 95%;
  padding: 0 0 0 1em;
  margin: 0 0 1em 0;
}
.IndexOrganicArea .btnObj {
}
.IndexOrganicArea .btnObj.txtBtn {
}
.IndexOrganicArea .btnObj.txtBtn a {
  text-decoration: none;
  position: relative;
  padding: 0 2em 0 0;
}
.IndexOrganicArea .btnObj.txtBtn a::before,
.IndexOrganicArea .btnObj.txtBtn a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1em;
  height: 1px;
  background: var(--clr-def);
}
.IndexOrganicArea .btnObj.txtBtn a::after {
  transform: rotate(90deg);
}
@media screen and (min-width: 769px) {
  .IndexOrganicArea {
    width: min(60%, 800px);
    padding: 60px 0;
  }
  .IndexOrganicArea .ttlGlp {
  }
  .IndexOrganicArea .ttlGlp .txtObj {
  }
  .IndexOrganicArea .iconNum {
    width: min(15%, 120px);
    margin: 20px auto;
  }
  .IndexOrganicArea .iconNum img {
  }
  .IndexOrganicArea .txtObj {
  }
  .IndexOrganicArea .txtLists {
    width: 60%;
    margin: 5% auto;
  }
  .IndexOrganicArea .txtListTtl {
  }
  .IndexOrganicArea .txtList {
  }
  .IndexOrganicArea .btnObj {
  }
  .IndexOrganicArea .btnObj.txtBtn {
  }
  .IndexOrganicArea .btnObj.txtBtn a {
  }
  .IndexOrganicArea .btnObj.txtBtn a::before,
  .IndexOrganicArea .btnObj.txtBtn a::after {
  }
  .IndexOrganicArea .btnObj.txtBtn a::after {
  }
}
/* ===========================
IndexProductArea
=============================*/
.IndexProductArea {
  display: flex;
  flex-flow: wrap;
}
.IndexProductArea .predSet {
  position: relative;
  z-index: 1;
  width: 50%;
  margin: 0 0 10%;
}
.IndexProductArea .predSet a {
  text-decoration: none;
}
.IndexProductArea .predSet .imgObj {
  width: 70%;
  margin: 15% auto 0%;
}
.IndexProductArea .predSet .prdName {
  text-decoration: none;
}
.IndexProductArea .predSet .bgObj {
  position: absolute;
  top: 0;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .IndexProductArea {
  }
  .IndexProductArea .predSet {
    width: 25%;
    margin: 0;
  }
  .IndexProductArea .predSet a {
  }
  .IndexProductArea .predSet .imgObj {
    width: 58%;
  }
  .IndexProductArea .predSet .prdName {
  }
  .IndexProductArea .predSet .bgObj {
  }
}
/* ===========================
IndexTopicsArea
=============================*/
.IndexTopicsArea {
}
.IndexTopicsArea .ttlGlp {
}
.IndexTopicsArea .ttlGlp .ttlObj {
  text-align: left;
  width: 80%;
  margin: 0 auto;
}
.IndexTopicsArea .topicsLists {
}
.IndexTopicsArea .topicsLists .topicsList {
}
.IndexTopicsArea .topicsLists .topicsList .date {
  text-align: right;
}
.IndexTopicsArea .topicsLists .topicsList a {
  width: 100%;
  text-decoration: none;
}
.IndexTopicsArea .topicsLists .topicsList .imgObj {
  margin: 3% auto 10%;
  border: 1px solid var(--clr-line);
}
.IndexTopicsArea .topicsLists .topicsList .txtObj {
  white-space: normal;
  text-align: left;
}
.IndexTopicsArea .btnObj {
  width: 81%;
  margin: 0 auto 0 10%;
}
.IndexTopicsArea .btnObj.mainBtn {
}
.IndexTopicsArea .btnObj.mainBtn a {
  text-decoration: none;
  width: 100%;
  border: 1px solid #b2b2b2;
  padding: 1em 1.5em;
  position: relative;
  text-align: left;
  transition: all ease 0.4s;
}
.IndexTopicsArea .btnObj.mainBtn a::before {
  content: "";
  position: absolute;
  border-right: 0.11em solid;
  border-bottom: 0.11em solid;
  width: 0.5em;
  height: 0.5em;
  top: 50%;
  right: 5%;
  transform: rotate(-45deg) translate(0, -50%);
  transition: all ease 0.4s;
}
.IndexTopicsArea .btnObj.mainBtn a::after {
  content: "";
  position: absolute;
  width: 1.15em;
  height: 0.1em;
  right: calc(5% + 1px);
  top: calc(50% + 1px);
  background: var(--clr-def);
  transform: translate(0, -50%);
  transition: all ease 0.4s;
}
.IndexTopicsArea .btnObj.mainBtn a:hover {
  background: var(--clr-base);
  color: var(--clr-wh);
}

.IndexTopicsArea .btnObj.mainBtn a:hover::before {
  right: 4%;
}
.IndexTopicsArea .btnObj.mainBtn a:hover::after {
  background: var(--clr-wh);
  right: calc(4% + 1px);
}

/* 横スクロール用ラッパー */
.IndexTopicsArea .topicsLists.horizontal-scroll {
  display: flex;
  /* 要素間の余白 */
  overflow-x: auto; /* 横スクロール */
  overflow-y: hidden; /* 縦スクロール防止 */
  padding: 0 0 10%;
  width: 90%;
  margin: 5% 0 0 auto;
}

/* SimpleBar が生成するラッパー内部 */
.IndexTopicsArea .topicsLists.horizontal-scroll .simplebar-content {
  display: flex;
  /* gap: 10%; */
}

/* 各トピック */
.IndexTopicsArea .topicsLists .topicsList {
  flex: 0 0 auto; /* 横並びで縮まない */
  width: 90%; /* 固定幅（必要に応じて調整） */
  flex-direction: column;
  overflow: hidden;
  display: flex;
  padding: 0 10% 0 0;
}

/* 画像 */
.IndexTopicsArea .topicsLists .topicsList .imgObj img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキスト */
.IndexTopicsArea .topicsLists .topicsList .txtObj {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .IndexTopicsArea {
    width: min(80%, 900px);
    margin: 0 auto;
  }
  .IndexTopicsArea .ttlGlp {
  }
  .IndexTopicsArea .ttlGlp .ttlObj {
    width: 100%;
  }
  .IndexTopicsArea .topicsLists {
    width: 100%;
    padding: 0 0 40px;
  }
  .IndexTopicsArea .topicsLists.horizontal-scroll {
    width: 100%;
    padding: 0 0 40px;
  }
  .IndexTopicsArea .topicsLists .topicsList {
    width: calc(100% / 3 - 5%);
    padding: 0 0 0 0;
  }
  .IndexTopicsArea .topicsLists .topicsList + .topicsList {
    margin: 0 0 0 5%;
  }
  .IndexTopicsArea .topicsLists .topicsList .date {
  }
  .IndexTopicsArea .topicsLists .topicsList a {
  }
  .IndexTopicsArea .topicsLists .topicsList .imgObj {
    margin: 3% auto 6%;
  }
  .IndexTopicsArea .topicsLists .topicsList .txtObj {
  }
  .IndexTopicsArea .btnObj {
    width: min(40%, 320px);
    margin: 0 auto;
  }
  .IndexTopicsArea .btnObj.mainBtn {
  }
  .IndexTopicsArea .btnObj.mainBtn a {
  }

  .IndexTopicsArea .btnObj.mainBtn a::before {
  }
  .IndexTopicsArea .btnObj.mainBtn a::after {
  }
}
/* ===========================
IndexFooterArea
=============================*/
.IndexFooterArea {
  overflow: hidden;
}
.IndexFooterArea .imgTxtBlk {
  position: relative;
}
.IndexFooterArea .imgTxtBlk .imgObj {
  display: block;
}
.IndexFooterArea .imgTxtBlk .mainImgBlk {
}
.IndexFooterArea .imgTxtBlk .txtBlk {
  position: absolute;
  bottom: 5%;
}
.IndexFooterArea .imgTxtBlk .txtObj {
  text-align: left;
  word-break: break-all;
  display: flex;
  white-space: nowrap;
  color: var(--clr-wh);
  white-space: nowrap;
}
.IndexFooterArea .imgTxtBlk .txtObj span {
  display: inline-block;
  padding-right: 1rem; /* 間隔調整 */
}
@media screen and (min-width: 769px) {
  .IndexFooterArea {
  }
  .IndexFooterArea .imgTxtBlk {
    position: relative;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    border-top: 1px solid var(--clr-line);
    border-bottom: 1px solid var(--clr-line);
  }
  .IndexFooterArea .imgTxtBlk .imgObj {
    width: 55%;
  }
  .IndexFooterArea .imgTxtBlk .txtBlk {
    position: relative;
    bottom: 5%;
    width: 45%;
    border: 0;
    overflow: hidden;
  }
  .IndexFooterArea .imgTxtBlk .txtObj {
    color: var(--clr-def);
  }
  .IndexFooterArea .imgTxtBlk .txtObj span {
  }
}

/* ===========================
popup
=============================*/
.popupArea[data-pop_type="movie"] {
}
.popupArea[data-pop_type="movie"] .popWrap {
  padding: 0;
}
.popupArea[data-pop_type="movie"] .popWrap .popupSet {
  height: auto;
  padding: 0px;
  line-height: 1;
  font-size: 0;
  overflow: hidden;
  /* background: #000; */
}
.popupArea[data-pop_type="movie"] .popWrap .popupSet {
}
.popupArea[data-pop_type="movie"] .popWrap .popupSet iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}
@media screen and (min-width: 769px) {
  .popupArea[data-pop_type="movie"] {
  }
  .popupArea[data-pop_type="movie"] .popWrap {
    width: min(95vw, 1280px);
  }
  .popupArea[data-pop_type="movie"] .popWrap .popupSet {
  }
  .popupArea[data-pop_type="movie"] .popWrap .popupSet {
  }
  .popupArea[data-pop_type="movie"] .popWrap .popupSet iframe {
  }
}

/*popup text*/

.popupSet .organicBlk {
  width: 95%;
  margin: 0 auto;
}
.popupSet .ttl-modal {
  padding: 0;
  text-align: left;
}
.popupSet .list-order {
  width: 100%;
  text-align: left;
  margin: 6% auto;
}
.popupSet .list-order .txtObj {
  padding: 0 0 0 2.5em;
  position: relative;
}
.popupSet .list-order .txtObj::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--clr-base);
  counter-increment: number 1;
  content: counter(number) ".";
}
.popupSet .list-order .txtObj + .txtObj {
  margin: 1.25em 0 0;
}
.popupSet .organicBlk .notes {
  text-align: left;
}
@media screen and (min-width: 769px) {
  .popupSet .ttl-modal {
  }
  .popupSet .list-order {
    margin: 4% auto;
  }
  .popupSet .list-order .txtObj {
  }
  .popupSet .list-order .txtObj + .txtObj {
  }
}

/* ===========================

=============================*/
@media screen and (min-width: 769px) {
}

/* ===========================

=============================*/
@media screen and (min-width: 769px) {
}

/* ===========================

=============================*/
@media screen and (min-width: 769px) {
}

/* ===========================

=============================*/
@media screen and (min-width: 769px) {
}

/* ===========================

=============================*/
@media screen and (min-width: 769px) {
}

/* ===========================

=============================*/
@media screen and (min-width: 769px) {
}
