@charset "UTF-8";
/* CSS Document */

/* start-about */

.about-left-text {
  flex: 1;
  max-width: 70%;
}

.about-right-img {
  flex: 1;
  max-width: 25%;
}

.aboutA-left-img {
  flex: 1;
  max-width: 40%;
}

.aboutA-right-text{
  flex: 1;
  max-width: 60%;
}

.aboutB-left-text {
  flex: 1;
  max-width: 60%;
}

.aboutB-right-img {
  flex: 1;
  max-width: 40%;
}

.about2-left-img {
  flex: 1;
  max-width: 40%;
}

.about2-right-text {
  flex: 1;
  max-width: 60%;
}

.about-right-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about-right-img figure {
  margin: 0;
  text-align: center;
}

.about-right-img figcaption {
  font-size: 12px;
  color: #666;
  text-align: center;
}

figcaption {
  font-size: 12px;
  color: #666;
  text-align: center;
}


/* スマホの場合 */
@media (max-width: 768px) {
  .sub-mt-wrapper {
    flex-direction: column; /* 上下に並べる */
    gap: 20px; /* 上下間隔を調整 */
  }

  .about-left-text {
    max-width: 100%; /* 幅を100%に */
  }

  .about-right-img {
    max-width: 70%; /* 幅を100%に */
  }
    
    
  .aboutA-left-img {
  flex: 1;
  max-width: 80%;
}

.aboutA-right-text{
  flex: 1;
  max-width: 100%;
}

.aboutB-left-text {
  flex: 1;
  max-width: 100%;
}

.aboutB-right-img {
  flex: 1;
  max-width: 80%;
}  
    
    
    

  .about2-left-img {
    max-width: 70%; /* 幅を100%に */
  }

  .about2-right-text {
    max-width: 100%; /* 幅を100%に */
  }
}

.about-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.about-left-50img,
.about-right-50img {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.about-left-50img img {
  width: 50%;
  height: auto;
  display: block;
}

.about-right-50img img {
  width: 85%;
  height: auto;
  display: block;
}

@media screen and (max-width: 768px) {
  .about-img-wrapper {
    flex-direction: column;
    height: auto;
  }

  .about-left-50img,
  .about-right-50img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .about-left-50img img {
    width: 70%; /* スマホでは少し大きめにする場合 */
  }
}

/* 全体の枠とレイアウト */
.about-em-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border: 2px solid #287E3A; /* 緑の囲み */
  border-radius: 8px;
  background-color: #F9FFF9; /* ごく薄い緑背景 */
  box-sizing: border-box;
  width: 90%;
 margin: 0 auto;
}

/* 左側：EM発酵物質の役割 */
.about-em-box {
  flex: 1 1 30%;
  background-color: #E6F4E9; /* 薄い緑背景 */
  padding: 20px;
  font-weight: bold;
 color: #287E3A;
  border-radius: 6px;
  margin: 0;
  box-sizing: border-box;
}

/* 右側：リスト部分（囲まない） */
.about-em-list {
  flex: 1 1 45%;
  list-style: none;  /* 点を消す */
  padding: 0;
  margin: 0;
}

/* リスト項目 */
.about-em-list li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* チェックマーク */
.about-em-list li::before {
  content: "✔ ";
  color: #287E3A;
  font-weight: bold;
  margin-right: 5px;
}

/* スマホ対応：上下表示 */
@media (max-width: 768px) {
  .about-em-wrapper {
    flex-direction: column;
    width: 100%;
  }
 .about-em-box,
  .about-em-list {
    flex: 1 1 100%;
  }

   .about-em-box {
    width: 100%;           /* ← 横幅100%に */
   
  }
}

.about-antioxidant-box {
  flex: 1 1 45%;
  background-color: #fdf7f0; /* ← 薄いベージュ */
  padding: 20px;
  border-radius: 8px;
  color: #333;
  box-sizing: border-box;
  align-self: flex-start;
}

.about-antioxidant-box p:first-of-type {
  font-weight: bold;
  margin-bottom: 10px;
}

.about-antioxidant-box ul {
  margin: 0 0 15px 0;
  padding: 0;
  list-style: none;
}

.about-antioxidant-box li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 6px;
}

.about-antioxidant-box li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #cc6600; /* ベージュに合う濃いオレンジ */
  font-weight: bold;
}

.about-arrowantioxidant-line {
  margin-top: 10px;
  font-weight: bold;
  color: #cc6600;
  font-style: normal;
}

.about-antioxidant-text {
  flex: 1 1 50%;
  line-height: 1.8;
  color: #444;
}

/* スマホ時の調整 */
@media screen and (max-width: 768px) {
  .about-antioxidant-box,
  .about-antioxidant-text {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* end-about */