:root {
  --vw: 1vw;
}


/* ---------------------------------------------------------
#sec-intro
----------------------------------------------------------*/
/* PC版: 横並びレイアウト（イラスト左・テキスト右） */
#sec-intro .wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
}
#sec-intro .wrapper .pic {
  width: min(18.22 * var(--vw), 350px);
}
#sec-intro .wrapper .pic img {
  width: 100%;
  height: auto;
}
#sec-intro .wrapper .txt {
  width: min(39.06 * var(--vw), 750px);
  font-size: min(1.25 * var(--vw), 24px);
  line-height: 1.8333333333;
}

/* SP版: 大きな画像 + テキスト縦並び */
@media screen and (max-width: 768px) {
  #sec-intro .wrapper {
    display: block;
  }
  #sec-intro .wrapper .pic {
    width: 100%;
    border-radius: calc(5.33 * var(--vw));
    overflow: hidden;
  }
  #sec-intro .wrapper .pic img {
    width: 100%;
    height: auto;
    display: block;
  }
  #sec-intro .wrapper .txt {
    width: 100%;
    font-size: calc(4.26 * var(--vw));
    margin-top: calc(5.33 * var(--vw));
  }
}

/* ---------------------------------------------------------
#sec-subject
----------------------------------------------------------*/
#sec-subject .border-box dt, #sec-subject .border-box dd {
  font-size: min(1.09 * var(--vw), 21px);
  line-height: 1.9047619048;
  text-justify: distribute;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  #sec-subject .border-box dt, #sec-subject .border-box dd {
    font-size: calc(4.26 * var(--vw));
  }
}
#sec-subject .border-box dt {
  margin-top: min(1.87 * var(--vw), 36px);
  font-size: min(1.51 * var(--vw), 29px);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  #sec-subject .border-box dt {
    margin-top: calc(8 * var(--vw));
    font-size: calc(4.8 * var(--vw));
  }
}
#sec-subject .border-box dt:first-child {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  #sec-subject .border-box dd {
    margin-top: calc(2.13 * var(--vw));
  }
}

/* ---------------------------------------------------------
#sec-lifestyle
----------------------------------------------------------*/
/* PC版: 横並びレイアウト（画像左・テキスト右） */
#sec-lifestyle > .wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  align-items: flex-start;
  margin-top: min(2.6 * var(--vw), 50px);
}
#sec-lifestyle > .wrapper .left-col {
  width: min(39.06 * var(--vw), 750px);
}
#sec-lifestyle > .wrapper .left-col .ttl-green {
  font-size: min(1.19 * var(--vw), 23px);
  line-height: 1.7391304348;
}
#sec-lifestyle > .wrapper .left-col .txt-normal {
  margin-top: min(1.45 * var(--vw), 28px);
  font-size: min(1.25 * var(--vw), 24px);
  line-height: 1.8333333333;
}
#sec-lifestyle > .wrapper .right-col {
  width: min(18.22 * var(--vw), 350px);
  margin-top: min(5.62 * var(--vw), 108px);
}
#sec-lifestyle > .wrapper .right-col img {
  width: 100%;
  height: min(22.91 * var(--vw), 440px);
  object-fit: cover;
  border-radius: 20px;
}

/* SP版: 大きな画像 + テキスト縦並び */
@media screen and (max-width: 768px) {
  #sec-lifestyle > .wrapper {
    display: flex;
    flex-direction: column-reverse;
    margin-top: calc(5.33 * var(--vw));
  }
  #sec-lifestyle > .wrapper .left-col {
    width: 100%;
    margin-top: calc(5.33 * var(--vw));
  }
  #sec-lifestyle > .wrapper .left-col .ttl-green {
    font-size: calc(5.33 * var(--vw));
  }
  #sec-lifestyle > .wrapper .left-col .txt-normal {
    margin-top: calc(4.26 * var(--vw));
    font-size: calc(4.26 * var(--vw));
  }
  #sec-lifestyle > .wrapper .right-col {
    width: 100%;
    border-radius: calc(5.33 * var(--vw));
    overflow: hidden;
    margin-top: 0;
  }
  #sec-lifestyle > .wrapper .right-col img {
    width: 100%;
    height: auto;
    display: block;
  }
}
#sec-lifestyle .ttl-green-center {
  font-size: min(1.51 * var(--vw), 29px);
  margin-top: min(4.68 * var(--vw), 90px);
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .ttl-green-center {
    font-size: calc(5.33 * var(--vw));
    font-weight: 700;
    margin-top: calc(13.33 * var(--vw));
  }
}
#sec-lifestyle .border-box {
  padding: min(2.5 * var(--vw), 48px) min(3.48 * var(--vw), 67px);
  margin-top: min(1.35 * var(--vw), 26px);
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .border-box {
    padding: calc(5.33 * var(--vw)) calc(3.73 * var(--vw));
    margin-top: calc(5.33 * var(--vw));
  }
}
#sec-lifestyle .bg-green {
  padding: min(0 * var(--vw), 0px) min(2.29 * var(--vw), 44px) min(0 * var(--vw), 0px) min(3.64 * var(--vw), 70px);
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .bg-green {
    padding: 0 calc(5.33 * var(--vw)) calc(5.33 * var(--vw));
  }
}
#sec-lifestyle .bg-green .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .bg-green .wrapper {
    display: block;
  }
}
#sec-lifestyle .bg-green .wrapper .ill {
  width: min(15.2 * var(--vw), 292px);
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .bg-green .wrapper .ill {
    width: calc(53.33 * var(--vw));
    margin: 0 auto;
  }
}
#sec-lifestyle .bg-green .wrapper .right-col {
  width: min(40.36 * var(--vw), 775px);
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .bg-green .wrapper .right-col {
    width: 100%;
  }
}
#sec-lifestyle .bg-green .wrapper .right-col h4 {
  font-size: min(1.51 * var(--vw), 29px);
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .bg-green .wrapper .right-col h4 {
    font-size: calc(4.8 * var(--vw));
    font-weight: 700;
    letter-spacing: 0.03em;
  }
}
#sec-lifestyle .bg-green .wrapper .right-col .txt-normal {
  margin-top: min(1.04 * var(--vw), 20px);
}
@media screen and (max-width: 768px) {
  #sec-lifestyle .bg-green .wrapper .right-col .txt-normal {
    margin-top: calc(3.73 * var(--vw));
  }
}
