@charset "UTF-8";
.about_item-heading {
  font-size: clamp(25px, 3.26vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.about_item-heading span {
  display: inline-block;
}
.about_item-heading .fs_s {
  font-size: clamp(15px, 1.95vw, 18px);
  margin-bottom: 0.4em;
  display: block;
}
.about_item-txt {
  font-size: clamp(15px, 1.95vw, 18px);
  line-height: 1.94;
  letter-spacing: 0.1em;
}
.about_item-txt p:not(:last-child) {
  margin-bottom: 1.3em;
}
.about_item-txt span {
  display: inline-block;
}
/* -------------------------------------
sec_about
------------------------------------- */
.section_about {
  padding-bottom: 108px;
}
.about_item {
  display: flex;
  justify-content: space-between;
}
/* about_about_item1 */
.about_item1 {
  margin-bottom: clamp(70px, 24.5vw, 392px);
}
.about_item1 .about_item__lft,
.about_item1 .about_item__rght {
  width: 45%;
  max-width: 450px;
}
.about_item1 .about_item__rght {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 67px;
}
.about_item1 .about_item__lft-txtbk {
  margin-bottom: 80px;
}
.about_item1 .about_item__lft-txtbk .about_item-heading {
  margin-bottom: 1em;
}

.about_item1 .about_item__lft-imgbk::before {
  content: "";
  width: 120vw;
  max-width: 1920px;
  min-width: 640px;
  aspect-ratio: 16 / 5;
  background: url(../imgs/about/bg_1.svg) no-repeat left top/contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-41%, -1.5%);
}
.about_item1 .about_item__lft-imgbk .img2 {
  width: 56%;
  max-width: 250px;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(20%, 80%);
}
.about_item1 .about_item__rght-txtbk {
  max-width: 21em;
}
/* about_item2 */
.about_item2 {
  margin-bottom: 72px;
}
.about_item2 .about_item__lft {
  width: 50%;
  max-width: 493px;
}
.about_item2 .about_item__rght {
  width: 48%;
  max-width: 480px;
}
.about_item2 .about_item__lft-txtbk {
  padding-top: min(9.13vw, 146px);
}
.about_item2 .about_item__lft-txtbk .about_item-heading {
  margin-bottom: 1em;
}
.about_item2 .about_item__rght-imgbk::before {
  content: "";
  width: 50.63vw;
  max-width: 810px;
  min-width: 324px;
  aspect-ratio: 27 / 10;
  background: url(../imgs/about/bg_2.svg) no-repeat left top/contain;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(3%, 80.5%);
}
.about_item2 .about_item__rght-imgbk .img2 {
  width: 53%;
  max-width: 250px;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(20%, 50%);
}
/* about_item3 */
.about_item3 {
  flex-direction: row-reverse;
}
.about_item3 .about_item__lft {
  width: 40%;
  max-width: 400px;
}
.about_item3 .about_item__rght {
  width: 50%;
  max-width: 500px;
  transform: translateX(4%);
}
.about_item3 .about_item__rght-txtbk {
  padding-top: min(5.75vw, 92px);
}
.about_item3 .about_item__rght-txtbk .about_item-heading {
  margin-bottom: 1.2em;
}
/* -------------------------------------
section_milk
------------------------------------- */
.milk__headingbk {
  padding-top: 30px;
}
.mid_v {
  height: 43.75vw;
  min-height: 336px;
}
.mid_v__img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.mid_v__txtbk {
  position: absolute;
  right: 1.88vw;
  bottom: 3.13vw;
}

.mid_v__txt {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: right;
}
.mid_v__txt span {
  background-color: #fff;
  display: inline-block;
}
.mid_v__txt .fs_s {
  font-size: 1.69vw;
  line-height: 2.22;
  margin-bottom: 0.37em;
  padding: 0 0.74em;
}
.mid_v__txt .fs_l {
  line-height: 1.818;
  font-size: 2.06vw;
  padding: 0 0.6em;
}
/* milk_item1 */
.milk_item1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 65px 0 70px;
}
.milk_item1 .milk_item__imgbk {
  width: 43%;
  max-width: 428px;
}
.milk_item1 .milk_item__imgbk img {
  width: 100%;
  max-width: 369px;
  margin: 0 0 0 auto;
}
.milk_item1 .milk_item__txtbk {
  width: 50%;
}
.milk_item1 .milk_item__txtbk .about_item-heading {
  margin-bottom: 0.5em;
}
.milk_item1 .milk_item__txt .fs_l {
  font-size: 1.167em;
}
/* milk_item2 */
.milk_item2 {
  padding-top: 96px;
  margin-bottom: 100px;
}
.milk_item2 .milk_item__txtbk {
  max-width: 29em;
}
.milk_item2 .milk_item__txtbk .about_item-heading {
  margin-bottom: 0.6em;
}
.milk_item__graphbk .milk_item__graph-notes {
  font-size: clamp(13px, 1.69vw, 18px);
  letter-spacing: 0;
  text-align: right;
  margin-bottom: 10px;
}
.milk_item__graphbk .milk_item__graph-notes span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.milk_item__graphbk .milk_item__graph-notes span::before {
  content: "";
  width: 5.55em;
  height: 5px;
}
.milk_item2 .milk_item__graphbk .milk_item__graph-notes span::before {
  background-color: #43342c;
}
.milk_item2 .milk_item__graphbk .milk_item__graph-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.milk_item2 .milk_item__graphbk .milk_item__graph-item {
  /* 1440px */
  width: 20.83vw;
  max-width: 300px;
  min-width: 160px;
}
/* milk_item3 */
.milk_item3 {
  display: flex;
  justify-content: space-between;
}
.milk_item3 .milk_item__txtbk {
  width: 50%;
}
.milk_item3 .milk_item__txtbk .about_item-heading {
  margin-bottom: 1.2em;
}
.milk_item3 .milk_item__graphbk {
  max-width: 345px;
}
.milk_item3 .milk_item__graphbk .milk_item__graph-notes span::before {
  background-color: #d35100;
}
.milk_item3 .milk_item__graphbk .milk_item__graph-item {
  /* 1440px */
  width: 20.83vw;
  max-width: 300px;
  min-width: 160px;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 1600px) {
  /* -------------------------------------
	sec_about
	------------------------------------- */
  .about_item3 .about_item__rght {
    transform: initial;
  }
  /* -------------------------------------
	section_milk
	------------------------------------- */
  .mid_v__txt .fs_s {
    font-size: clamp(23px, 2.99vw, 27px);
  }
  .mid_v__txt .fs_l {
    font-size: clamp(28px, 3.65vw, 33px);
  }
}
@media screen and (max-width: 768px) {
  /* -------------------------------------
	sec_about
	------------------------------------- */
  .about_item1 .about_item__lft-imgbk::before {
    transform: translate(-37%, -1.5%);
  }

  /* -------------------------------------
	section_milk
	------------------------------------- */
  .milk_item__graph-item {
    /* 1440px */
    width: 26.17vw;
    max-width: 200px;
  }
  .milk_item2 .milk_item__graphbk .milk_item__graph-item,
  .milk_item3 .milk_item__graphbk .milk_item__graph-item {
    width: 26.04vw;
  }
}
@media screen and (max-width: 640px) {
  .about_item {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .about_item__lft,
  .about_item__rght {
    width: 100% !important;
  }
  .about_item__lft-imgbk,
  .about_item__rght-imgbk,
  .about_item1 .about_item__rght {
    max-width: 310px;
    margin: 0 auto;
  }
  .about_item1 {
    gap: 190px;
  }
  .about_item1 .about_item__lft-txtbk {
    margin-bottom: 40px;
  }
  .about_item1 .about_item__lft-imgbk::before {
    transform: translate(-50%, -1.5%);
  }
  .about_item1 .about_item__rght {
    flex-direction: column-reverse;
    gap: 30px;
  }
  .about_item2 {
    margin-bottom: 150px;
  }
  .about_item2 .about_item__rght-imgbk::before {
    left: auto;
    right: 0;
    transform: translate(50%, 80.5%);
  }
  .about_item2 .about_item__lft-txtbk,
  .about_item3 .about_item__rght-txtbk {
    padding: 0;
  }

  /* -------------------------------------
	section_milk
	------------------------------------- */

  .milk_item1 {
    flex-direction: column-reverse;
    gap: 40px;
  }
  .milk_item1 .milk_item__txtbk,
  .milk_item3 .milk_item__txtbk {
    width: 100%;
  }
  .milk_item1 .milk_item__imgbk {
    width: 70%;
    max-width: 250px;
  }
  .milk_item2 .milk_item__txtbk {
    margin-bottom: 40px;
  }
  .milk_item2 .milk_item__graphbk,
  .milk_item3 .milk_item__graphbk {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
  }
  .milk_item2 .milk_item__graphbk .milk_item__graph-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 5px;
  }

  .milk_item2 .milk_item__graphbk .milk_item__graph-item,
  .milk_item3 .milk_item__graphbk .milk_item__graph-item {
    width: 42vw;
    max-width: 200px;
    min-width: initial;
    margin: 0 auto;
  }
  .milk_item3 {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}
@media screen and (max-width: 480px) {
  .mid_v__txt .fs_s {
    font-size: min(4.79vw, 23px);
  }
  .mid_v__txt .fs_l {
    font-size: min(5.83vw, 28px);
  }
  .about_item-heading {
    font-size: clamp(20px, 5.21vw, 25px);
  }
  .about_item-txt {
    font-size: clamp(14px, 3.13vw, 15px);
  }
  .about_item-heading .fs_s {
    font-size: clamp(14px, 3.13vw, 15px);
  }
  .milk_item__graphbk .milk_item__graph-notes {
    font-size: clamp(12px, 3.13vw, 13px);
  }
}