@charset "UTF-8";
/*------------------------------------------
header
-------------------------------------------*/
/*------------------------------------------
style
-------------------------------------------*/
/*------------------------------------------
color
-------------------------------------------*/
/*------------------------------------------
font
-------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
html {
  font-size: 62.5%;
  font-family: "Noto Sans JP", sans-serif;
}
html p {
  line-height: normal;
}

.lp-header {
  width: 100%;
  height: 95px;
  background-color: #009712;
  color: #fff;
  position: fixed;
  left: 0;
  z-index: 30;
}
@media screen and (max-width: 1023px) {
  .lp-header {
    height: 65px;
  }
}
.lp-header .inner {
  display: flex;
  justify-content: space-between;
  height: inherit;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .lp-header .inner {
    width: 95%;
  }
}
.lp-header .inner nav ul {
  display: flex;
}
.lp-header .inner nav ul li a {
  text-decoration: none;
  color: #fff;
  padding: 0 20px;
  border-right: 1px dashed #fff;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 1100px) {
  .lp-header .inner nav ul li a {
    font-size: 1.8rem;
  }
}
.lp-header .inner nav ul li:first-of-type a {
  padding-left: 0;
}
.lp-header .inner nav ul li:last-of-type a {
  padding-right: 0;
  border-right: none;
}

.header-logo {
  text-decoration: none;
}
@media screen and (max-width: 1023px) {
  .header-logo img {
    width: 99px;
    height: 26px;
  }
}
.header-logo::after {
  content: "特設ページ";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 5.6px;
  background: #C62828;
  width: 110px;
  height: 20px;
  flex-shrink: 0;
  margin: 0 auto;
}
@media screen and (max-width: 1023px) {
  .header-logo::after {
    width: 69px;
    height: 13px;
    font-size: 0.78rem;
    letter-spacing: 3.11px;
  }
}

@media screen and (max-width: 1023px) {
  .pc-nav {
    display: none;
  }
}
.pc-nav ul li a.active {
  position: relative;
}
.pc-nav ul li a.active::before {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.drawer-btn-menu {
  margin-bottom: 5px;
  font-size: 1.4rem;
}

.drawer-btn-box {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.drawer-btn {
  display: none;
}
@media screen and (max-width: 1023px) {
  .drawer-btn {
    display: block;
  }
}
.drawer-btn1, .drawer-btn2, .drawer-btn3 {
  display: block;
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 50%;
}

.drawer-nav {
  transform: translateX(101%);
  transition: 0.3s;
  background-color: rgba(231, 240, 231, 0.92);
  width: 100%;
  height: 80vh;
  padding: 20px 50px;
}
.drawer-nav.is-active {
  transform: translateX(0);
}
.drawer-nav ul {
  display: flex;
  flex-direction: column;
}
.drawer-nav ul li {
  border-bottom: 1px dashed #009748;
}
.drawer-nav ul li:last-of-type {
  border-bottom: none;
}
.drawer-nav ul li a {
  color: #009748;
  font-size: 2rem;
  font-weight: 600;
  display: block;
  height: inherit;
  text-decoration: none;
  padding: 20px 0;
}

/*------------------------------------------
footer
-------------------------------------------*/
#footer-sub {
  padding: 100px 0;
  background: #E7F0E7;
}
@media screen and (max-width: 767px) {
  #footer-sub {
    padding: 40px 0;
  }
}
#footer-sub nav ul {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  #footer-sub nav ul {
    gap: 15px;
  }
}
@media screen and (max-width: 767px) {
  #footer-sub nav ul li {
    width: 100%;
  }
}
#footer-sub nav ul a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 216px;
  height: clamp(7rem, 6.155rem + 2.254vi, 9.4rem);
  border-radius: 14px;
  background: linear-gradient(180deg, #009748 0%, #009705 100%);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #footer-sub nav ul a {
    width: inherit;
    min-width: 360px;
  }
}
#footer-sub nav ul a.active {
  outline: 5px solid #fff;
  opacity: 0.8;
}

/*------------------------------------------
common
-------------------------------------------*/
.inner {
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .inner {
    width: 97.5%;
  }
}

.ContentsBlock {
  width: auto;
  max-width: none;
}

.contents-header {
  padding: 40px 0;
  background: #E7F0E7;
  margin-bottom: clamp(4rem, 1.183rem + 7.512vi, 12rem);
}
.contents-header ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 1.183rem + 0.845vi, 2.4rem);
}
.contents-header ul li {
  list-style: none;
}
@media screen and (max-width: 767px) {
  .contents-header ul li {
    width: 100%;
  }
}
.contents-header ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  width: 276px;
  height: 70px;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: normal;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(94deg, #11998E 1.7%, #38EF7D 100%);
}
@media screen and (max-width: 767px) {
  .contents-header ul li a {
    width: 100%;
    min-width: 365px;
  }
}
.contents-header.ce .inner {
  display: flex;
  justify-content: center;
}
.contents-header.ce ul {
  max-width: 1026px;
}

h1.header-sub {
  background-image: url("../img/sub-header.png");
  margin-top: clamp(13rem, 9.831rem + 8.451vi, 22rem);
  height: clamp(15rem, 13.239rem + 4.695vi, 20rem);
  max-height: none;
  position: relative;
}
h1.header-sub span {
  left: 0;
}
h1.header-sub .inner {
  height: inherit;
}
h1.header-sub .inner::before {
  content: "";
  background: url(../img/othello-subheader.png) no-repeat center/contain;
  display: block;
  width: 143px;
  height: 61px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media screen and (max-width: 767px) {
  h1.header-sub .inner::before {
    display: none;
  }
}
h1.header-sub.moa span {
  background-image: url(../img/有効成分と作用特性.png);
  max-width: 431px;
  margin-top: 0;
}
h1.header-sub.beneficial-insects span {
  background-image: url(../img/天敵・有用昆虫への影響.png);
  max-width: 528px;
  margin-top: 0;
}
h1.header-sub.control-effefct span {
  background-image: url(../img/防除効果.png);
  max-width: 187px;
  margin-top: 0;
}
h1.header-sub.usage span {
  background-image: url(../img/上手な使い方.png);
  max-width: 284px;
  margin-top: 0;
}

.ContentsBlock {
  background: url(../img/subpage-bg.png) no-repeat center/cover;
}

.sub-contents-wrapper {
  margin-bottom: clamp(4rem, 3.296rem + 1.878vi, 6rem);
}

strong.red {
  color: #F00;
}

.sub-p-title01 {
  margin-top: 0;
  margin-bottom: clamp(2rem, 0.944rem + 2.817vi, 5rem);
  color: #FFF;
  font-size: clamp(2rem, 1.577rem + 1.127vi, 3.2rem);
  font-weight: 700;
  line-height: normal;
  background-color: #009748;
  display: inline-block;
  padding: 5px 50px 5px 15px;
  padding-right: clamp(2.3rem, 1.349rem + 2.535vi, 5rem);
  position: relative;
}
.sub-p-title01::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #D9D9D9 50%, #fff 50%);
}

@media screen and (max-width: 432px) {
  .sub-p-title01-l {
    padding-right: clamp(1rem, -0.408rem + 3.756vi, 5rem);
  }
}

.sub-p-title02 {
  color: #009748;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  font-weight: 700;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
.sub-p-title02::before {
  content: "";
  width: 105%;
  height: 3px;
  display: block;
  background-color: #009748;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sub-contents {
  padding-bottom: clamp(4rem, 1.183rem + 7.512vi, 12rem);
}
.sub-contents .inner {
  padding-top: clamp(2rem, 0.592rem + 3.756vi, 6rem);
  padding-bottom: clamp(4rem, 1.887rem + 5.634vi, 10rem);
  padding-right: clamp(1rem, -0.761rem + 4.695vi, 6rem);
  padding-left: clamp(1rem, -0.761rem + 4.695vi, 6rem);
  border-radius: 20px;
  background: #FFF;
}
@media screen and (max-width: 1200px) {
  .sub-contents .inner {
    padding-left: clamp(1rem, -0.761rem + 4.695vi, 6rem);
    padding-right: clamp(1rem, -0.761rem + 4.695vi, 6rem);
  }
}
.sub-contents .inner p {
  font-size: clamp(1.4rem, 1.33rem + 0.188vi, 1.6rem);
}

.sub-p-title03 {
  margin-top: 30px;
  margin-bottom: clamp(1.6rem, 1.459rem + 0.376vi, 2rem);
  font-size: clamp(2.1rem, 1.994rem + 0.282vi, 2.4rem);
  padding: 10px 20px 10px 10px;
  color: #009748;
  border-bottom: 2px solid #009748;
  border-top: 2px solid #009748;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
@media screen and (max-width: 767px) {
  .sub-p-title03 {
    width: 100%;
  }
}
.sub-p-title03::after {
  content: "";
  display: block;
  font-size: 1.4rem;
  color: #fff;
  padding: 0 20px;
  border-radius: 8px 8px 0 0;
  background-color: #009748;
  position: absolute;
  top: -36px;
  left: 0;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  .sub-p-title03::after {
    top: -33px;
  }
}
.sub-p-title03.udonko::after {
  content: "うどんこ病";
}

.sub-p-title04 {
  padding: 8px 30px 8px 20px;
  padding-left: clamp(1.6rem, 1.459rem + 0.376vi, 2rem);
  background-color: #009748;
  color: #fff;
  display: block;
  font-weight: 600;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(1.4rem, 1.33rem + 0.188vi, 1.6rem);
  position: relative;
  margin: 20px 0;
  margin-bottom: clamp(1.4rem, 1.189rem + 0.563vi, 2rem);
}
@media screen and (max-width: 767px) {
  .sub-p-title04 {
    padding-right: 60px;
  }
}
.sub-p-title04::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent; /* 高さ20px */
  border-bottom: 0 solid transparent; /* 下側は0 */
  border-right: 30px solid #fff; /* 幅30px・色付き */
}
.sub-p-title04::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent; /* 下方向に高さ */
  border-right: 30px solid #fff; /* 右方向に幅＋色 */
}

.ce-text-wrapper h3 {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.6rem;
  color: #009712;
  margin: 0;
  font-weight: 700;
}
.ce-text-wrapper h3.pu {
  border-bottom: dotted 2px #009712;
}
.ce-text-wrapper p {
  margin-bottom: 10px;
}

.point-02 {
  max-width: 1000px;
  margin: 20px 0;
  padding: 20px;
  border-radius: 15px;
  border: 1px solid #009712;
  position: relative;
}
.point-02 p {
  margin: 0;
}
.point-02::before {
  content: "";
  display: block;
  background: url(../img/POINT.png) no-repeat center/contain;
  width: 44px;
  height: 19px;
  position: absolute;
  top: -11px;
}

#penetration-translocation .point-02 {
  width: -moz-fit-content;
  width: fit-content;
}

a.guideline-link {
  font-weight: 700;
  color: #000;
  position: relative;
  text-decoration: none;
  border-bottom: 1px solid #000;
}

/*------------------------------------------

CONTENTS

01_hero-view
02_introduction
03_about
04_crops

-------------------------------------------*/
.fusekiwide-tp {
  background: linear-gradient(180deg, #009748 0%, #003117 100%);
}
.fusekiwide-tp .ContentsBlock {
  background-image: none;
}

/*------------------------------------------
01_hero-view
-------------------------------------------*/
h1 {
  background-image: url("../img/top-bg.png");
  height: 800px;
  max-height: none;
  position: relative;
}
@media screen and (max-width: 630px) {
  h1 {
    height: 530px;
  }
}
h1 .inner {
  position: relative;
}
h1 span {
  background-image: none;
}
h1 .caution {
  font-size: clamp(1rem, 0.859rem + 0.376vi, 1.4rem);
  color: #fff;
  font-weight: normal;
  position: absolute;
  bottom: 0;
  left: 0;
}

.tp-kv .inner {
  height: 740px;
}
@media screen and (max-width: 630px) {
  .tp-kv .inner {
    height: 500px;
  }
}

.fusekiwide {
  display: block;
  margin: 60px auto 0;
  margin-top: clamp(3rem, 1.944rem + 2.817vi, 6rem);
  width: clamp(28.1rem, 17.149rem + 29.202vi, 59.2rem);
}

.kv-copy {
  position: absolute;
  right: 80px;
  top: 0;
}
@media screen and (max-width: 767px) {
  .kv-copy {
    right: 20px;
    top: 120px;
  }
}
.kv-copy .kv-copy-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .kv-copy .kv-copy-sp {
    display: block;
    width: clamp(11rem, 7.866rem + 8.357vi, 19.9rem);
  }
}
.kv-copy .copy02 {
  margin-bottom: -120px;
  margin-right: -20px;
}
@media screen and (max-width: 767px) {
  .kv-copy .copy02 {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .kv-copy .copy01 {
    display: none;
  }
}

/*------------------------------------------
02_introduction
-------------------------------------------*/
#introduction {
  background: url(../img/introduction-bg.png) center center/cover no-repeat;
  padding: 120px 0;
  padding-top: clamp(4rem, 1.183rem + 7.512vi, 12rem);
  padding-bottom: clamp(4rem, 1.183rem + 7.512vi, 12rem);
}
#introduction p {
  font-size: clamp(1.8rem, 1.589rem + 0.563vi, 2.4rem);
  color: #fff;
  text-align: center;
  line-height: 220%;
}
#introduction p .br-sp {
  display: none;
}
@media screen and (max-width: 410px) {
  #introduction p .br-sp {
    display: block;
  }
}
#introduction p strong {
  font-size: clamp(2.2rem, 1.777rem + 1.127vi, 3.4rem);
}

/*------------------------------------------
03_about
-------------------------------------------*/
#about {
  padding-top: clamp(6rem, 3.183rem + 7.512vi, 14rem);
  padding-bottom: clamp(6rem, 3.183rem + 7.512vi, 14rem);
  background: url(../img/tp-about-bg.png) lightgray 50%/cover no-repeat;
  font-size: 1.8rem;
}
#about .inner {
  display: flex;
}
@media screen and (max-width: 1000px) {
  #about .inner {
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;
  }
}
@media screen and (max-width: 1285px) {
  #about {
    overflow: hidden;
  }
}

.about-wrapper {
  background-color: #fff;
  border-radius: 50%;
  width: 884px;
  height: 884px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  .about-wrapper {
    padding-top: clamp(3rem, 1.944rem + 2.817vi, 6rem);
    border-radius: 0;
    width: 100%;
    height: auto;
    background: transparent;
  }
}
.about-wrapper h2 {
  margin: 0 auto;
  margin-bottom: clamp(2rem, 1.296rem + 1.878vi, 4rem);
  width: clamp(17.87rem, 8.81rem + 24.16vi, 43.6rem);
}
.about-wrapper p {
  max-width: 572px;
  margin-bottom: 0;
  font-weight: 500;
}

.about-point {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(0rem, -1.408rem + 3.756vi, 4rem);
}
@media screen and (max-width: 767px) {
  .about-point {
    padding-right: 17px;
  }
}
.about-point p {
  display: flex;
  max-width: 626px;
  font-size: clamp(1.4rem, 1.259rem + 0.376vi, 1.8rem);
}
.about-point p::before {
  content: "";
  transform: translateY(3px);
  margin-right: clamp(0.4rem, 0.189rem + 0.563vi, 1rem);
  flex-shrink: 0;
  display: block;
  background: url(../img/othello-pc.png) no-repeat left center/contain;
  width: clamp(3.35rem, 2.945rem + 1.08vi, 4.5rem);
  height: clamp(1.4rem, 1.224rem + 0.469vi, 1.9rem);
}
.about-point p.caution {
  font-size: clamp(1rem, 0.93rem + 0.188vi, 1.2rem);
  margin-left: clamp(3.35rem, 2.593rem + 2.019vi, 5.5rem);
  display: block;
  line-height: normal;
}
.about-point p.caution::before {
  display: none;
}

.productimg {
  width: 195px;
  height: 417px;
  position: relative;
  margin-top: 305px;
}
@media screen and (max-width: 1000px) {
  .productimg {
    margin-top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.productimg img {
  position: relative;
  z-index: 1;
}
.productimg::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  width: 513px;
  height: 513px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1000px) {
  .productimg::before {
    display: none;
  }
}

/*------------------------------------------
04_crops
-------------------------------------------*/
#crops {
  padding-top: 60px;
  padding-bottom: 60px;
  margin-bottom: 120px;
  background: url(../img/crops-bg.png) no-repeat center/cover;
}
#crops h2 {
  color: #009748;
  padding-right: clamp(2.3rem, 1.701rem + 1.596vi, 4rem);
  padding-left: clamp(2.3rem, 1.701rem + 1.596vi, 4rem);
  font-size: clamp(2.4rem, 1.837rem + 1.502vi, 4rem);
  font-weight: 700;
  line-height: normal;
  display: block;
  margin: 0 auto;
  margin-bottom: clamp(2rem, 0.592rem + 3.756vi, 6rem);
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
#crops h2::before, #crops h2::after {
  content: "";
  display: block;
  width: clamp(4.38rem, 3.387rem + 2.648vi, 7.2rem);
  height: clamp(0.4rem, 0.294rem + 0.282vi, 0.7rem);
  border-radius: 10px;
  background: #009748;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#crops h2::before {
  left: clamp(-7.2rem, -3.387rem - 2.648vi, -4.38rem);
}
#crops h2::after {
  right: clamp(-7.2rem, -3.387rem - 2.648vi, -4.38rem);
}

.crops-list {
  display: flex;
  gap: clamp(1.6rem, -0.654rem + 6.009vi, 8rem);
  flex-wrap: wrap;
  justify-content: center;
}

.crops-item img {
  border-radius: 50%;
  height: clamp(15rem, 12.606rem + 6.385vi, 21.8rem);
  width: clamp(15rem, 12.606rem + 6.385vi, 21.8rem);
  -o-object-fit: cover;
     object-fit: cover;
}

.crops-info {
  text-align: center;
  color: #009748;
  font-weight: 700;
}
.crops-info p {
  font-size: clamp(1rem, 0.789rem + 0.563vi, 1.6rem);
  margin-bottom: 0;
}
.crops-info p:first-of-type {
  font-size: clamp(1.4rem, 1.189rem + 0.563vi, 2rem);
  padding-bottom: 20px;
  position: relative;
}
.crops-info p:first-of-type::after {
  content: "";
  display: block;
  width: clamp(11.86rem, 9.945rem + 5.108vi, 17.3rem);
  height: 1.5em;
  border-bottom: 1px dashed #009748;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/*------------------------------------------
mode-of-action
-------------------------------------------*/
.sub-contents-wrapper:last-of-type {
  margin-bottom: 0 !important;
}
.sub-contents-wrapper p {
  margin-bottom: 10px;
}

p.point {
  margin-bottom: 6px;
  padding-left: clamp(2.2rem, 1.038rem + 3.099vi, 5.5rem);
  position: relative;
}
p.point:last-of-type {
  margin-bottom: 20px;
}
p.point::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  transform: translateY(3px);
  flex-shrink: 0;
  display: block;
  background: url(../img/othello-pc.png) no-repeat left center/contain;
  width: clamp(1.8rem, 0.849rem + 2.535vi, 4.5rem);
  height: clamp(1.1rem, 0.818rem + 0.751vi, 1.9rem);
}

#symptoms .inner .point:last-of-type {
  margin-bottom: clamp(1rem, -0.056rem + 2.817vi, 4rem);
}

.scw-smallpoint {
  padding-left: clamp(2.2rem, 1.038rem + 3.099vi, 5.5rem);
  margin-bottom: 20px;
}
.scw-smallpoint .scw-smallpoint-title {
  color: #009712;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0;
}
.scw-smallpoint p {
  font-size: clamp(1.2rem, 1.13rem + 0.188vi, 1.4rem);
}

/*------------------------------------------
beneficial-insects
-------------------------------------------*/
#beneficial-insects {
  padding-top: clamp(4rem, 1.183rem + 7.512vi, 12rem);
}
#beneficial-insects h2 {
  margin-top: 0;
  text-align: center;
  font-size: clamp(1.8rem, 1.589rem + 0.563vi, 2.4rem);
  font-weight: 900;
  color: #009748;
  margin-bottom: 4px;
}
#beneficial-insects h2 br {
  display: none;
}
@media screen and (max-width: 767px) {
  #beneficial-insects h2 br {
    display: block;
  }
}
#beneficial-insects p {
  text-align: center;
  margin-bottom: clamp(2rem, 1.859rem + 0.376vi, 2.4rem);
  font-size: clamp(1.2rem, 1.059rem + 0.376vi, 1.6rem);
}
#beneficial-insects p.caution {
  font-size: clamp(1rem, 0.93rem + 0.188vi, 1.2rem);
  line-height: normal;
  text-align: left;
}
#beneficial-insects p.caution-sub {
  text-align: right;
  opacity: 0.8;
  font-size: clamp(1rem, 0.93rem + 0.188vi, 1.2rem);
  margin-bottom: 10px;
}

.bi-wrap {
  max-width: 752px;
  margin: 0 auto;
}

/*------------------------------------------
control-effect
-------------------------------------------*/
.graph {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.graph img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 514px;
}
.graph.graph-s img {
  max-width: 50%;
}
@media screen and (max-width: 767px) {
  .graph.graph-s img {
    max-width: 100%;
    width: 100%;
  }
}

.leaves-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 0.372rem + 1.408vi, 2.4rem);
}
.leaves-wrap .leaves {
  width: clamp(16.25rem, 6.268rem + 26.62vi, 44.6rem);
  height: clamp(10.5rem, 4.056rem + 17.183vi, 28.8rem);
  position: relative;
}
.leaves-wrap .leaves img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.leaves-wrap .leaves p {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  display: block;
  width: 100%;
  background: #E8E8E8;
  margin-bottom: 0;
  padding-top: clamp(0.4rem, 0.189rem + 0.563vi, 1rem);
  padding-bottom: clamp(0.4rem, 0.189rem + 0.563vi, 1rem);
}
.leaves-wrap .leaves.focus {
  border: 5px solid #009748;
}
.leaves-wrap .leaves.focus p {
  margin-bottom: -5px;
  background-color: #009748;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.96px;
  font-size: clamp(1rem, 0.789rem + 0.563vi, 1.6rem);
}
@media screen and (max-width: 767px) {
  .leaves-wrap .leaves.focus p {
    letter-spacing: -0.6px;
  }
}

#penetration-translocation .inner .graph-s img {
  max-width: 100%;
}
#penetration-translocation .inner .caution {
  opacity: 0.7;
  padding-top: clamp(1rem, 0.648rem + 0.939vi, 2rem);
  font-size: clamp(1.2rem, 1.13rem + 0.188vi, 1.4rem);
  line-height: normal;
}
#penetration-translocation .sub-p-title04 {
  margin-bottom: 12px;
}
#penetration-translocation .sub-p-title04 + p {
  margin-bottom: 20px;
}

/*------------------------------------------
usgae
-------------------------------------------*/
.contents-header.usage .inner ul {
  gap: clamp(2rem, 1.296rem + 1.878vi, 4rem);
  margin-bottom: 30px;
}
.contents-header.usage .inner ul li {
  position: relative;
  height: auto;
}
@media screen and (max-width: 767px) {
  .contents-header.usage .inner ul li {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.contents-header.usage .inner ul li.strawberry {
  background: url(../img/legume/usage-strawberry.png) no-repeat center/contain;
}
.contents-header.usage .inner ul li.cucumber {
  background: url(../img/legume/usage-cucumber.png) no-repeat center/contain;
}
.contents-header.usage .inner ul li.tomato {
  background: url(../img/legume/usage-tomato.png) no-repeat center/contain;
}
.contents-header.usage .inner ul li.eggplants {
  background: url(../img/legume/usage-eggplants.png) no-repeat center/contain;
}
.contents-header.usage .inner ul li a {
  height: clamp(10.95rem, 8.749rem + 5.869vi, 17.2rem);
  margin-bottom: 0;
  width: clamp(15rem, 12.007rem + 7.981vi, 23.5rem);
  position: relative;
  font-size: clamp(1.15rem, 0.921rem + 0.61vi, 1.8rem);
  z-index: 1;
  background: transparent;
  align-items: flex-end;
  padding-bottom: clamp(0.8rem, 0.73rem + 0.188vi, 1rem);
}
@media screen and (max-width: 767px) {
  .contents-header.usage .inner ul li a {
    min-width: auto;
  }
}
.contents-header.usage .inner ul li a::after {
  position: absolute;
  content: "";
  width: clamp(1.5rem, 1.183rem + 0.845vi, 2.4rem);
  height: clamp(1.5rem, 1.183rem + 0.845vi, 2.4rem);
  background: url(../img/arrow-right.svg) no-repeat center/contain;
  right: 27px;
  transition: 0.3s;
  bottom: clamp(0.8rem, 0.73rem + 0.188vi, 1rem);
}
.contents-header.usage .inner ul li a:hover::after {
  right: 19px;
}

a.guideline {
  background: linear-gradient(90deg, #009705 0%, #009748 100%);
  text-decoration: none;
  color: #fff;
  padding: 20px 60px 20px 40px;
  font-size: 1.6rem;
  border-radius: 46px;
  margin: 0 auto;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
}
@media screen and (max-width: 620px) {
  a.guideline {
    width: 100%;
    font-size: 1.05rem;
    padding: 13px 40px 13px 20px;
    text-align: center;
  }
}
a.guideline::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/arrow-right.svg) no-repeat center/contain;
  right: 27px;
  transition: 0.3s;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 620px) {
  a.guideline::after {
    right: 17px;
  }
}
a.guideline:hover::after {
  right: 7px;
}

.point-of-usage {
  max-width: 1000px;
  padding: 20px 20px 20px 10px;
  border-radius: 15px;
  border: 1px solid #009748;
  margin-bottom: 20px;
  position: relative;
}
.point-of-usage p {
  margin-bottom: 0;
}
.point-of-usage p:last-of-type {
  margin-bottom: 0;
}
.point-of-usage p.point {
  transform: translateX(-10px);
}
@media screen and (max-width: 630px) {
  .point-of-usage p.point {
    transform: translateX(0);
  }
}
.point-of-usage::before {
  position: absolute;
  content: "";
  top: -11px;
  left: 20px;
  width: 44px;
  height: 19px;
  background: url(../img/POINT.png) no-repeat center/contain;
}

p.caution-usage {
  margin-bottom: 40px;
  font-size: clamp(1rem, 0.93rem + 0.188vi, 1.2rem);
  text-align: right;
}
@media screen and (max-width: 977px) {
  p.caution-usage {
    text-align: left;
  }
}

#tomato .graph {
  margin-bottom: clamp(2rem, 0.592rem + 3.756vi, 6rem);
}
#tomato .graph:last-of-type {
  margin-bottom: 0;
}

#eggplants .graph {
  margin-bottom: clamp(2rem, 0.592rem + 3.756vi, 6rem);
}
#eggplants .graph:last-of-type {
  margin-bottom: 0;
}

#guideline {
  padding-bottom: clamp(4rem, 1.183rem + 7.512vi, 12rem);
}

.dc-inner {
  background: url(../img/guidline-bg.png) no-repeat center/cover;
  background-color: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.dc-inner .inner {
  border-radius: 20px;
  width: 98%;
  position: relative;
}
.dc-inner .inner::before {
  content: "";
  position: absolute;
  display: block;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 98%;
  background-color: #fff;
}

.guideline-inner {
  position: relative;
  z-index: 2;
  width: 920px;
  margin: 0 auto;
  padding-top: clamp(1.5rem, 0.303rem + 3.192vi, 4.9rem);
  padding-bottom: clamp(2.5rem, 1.268rem + 3.286vi, 6rem);
}
@media screen and (max-width: 1200px) {
  .guideline-inner {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .guideline-inner {
    width: 98%;
  }
}
.guideline-inner .subjects {
  text-align: center;
  font-weight: 700;
  padding: 10px 20px;
  background: #E7F0E7;
  margin: 0 auto;
  margin-bottom: clamp(2.4rem, 1.837rem + 1.502vi, 4rem);
  width: -moz-fit-content;
  width: fit-content;
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: clamp(1rem, 0.789rem + 0.563vi, 1.6rem);
}
.guideline-inner .subjects br {
  display: none;
}
@media screen and (max-width: 767px) {
  .guideline-inner .subjects {
    width: 100%;
  }
  .guideline-inner .subjects span {
    display: none;
  }
  .guideline-inner .subjects br {
    display: block;
  }
}
.guideline-inner img {
  max-width: 853px;
  width: 100%;
  height: auto;
  display: block;
}
.guideline-inner .gl-img {
  overflow-y: hidden !important;
}
.guideline-inner h2.guideline {
  padding-top: clamp(1.5rem, 1.324rem + 0.469vi, 2rem);
  color: #009748;
  font-size: clamp(1.8rem, 1.307rem + 1.315vi, 3.2rem);
  text-align: center;
  margin: 0 0 22px 0;
  font-weight: 700;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.guideline-inner h2.guideline + p {
  text-align: center;
  margin-bottom: 20px;
  font-size: clamp(1.4rem, 1.33rem + 0.188vi, 1.6rem);
  line-height: normal;
}
@media screen and (max-width: 815px) {
  .guideline-inner h2.guideline + p br {
    display: none;
  }
}
.guideline-inner h2.guideline + p + p + p {
  font-size: clamp(1.8rem, 1.589rem + 0.563vi, 2.4rem);
  font-weight: 700;
  margin-bottom: 4px;
  line-height: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.guideline-inner h2.guideline + p + p + p + p {
  margin-bottom: 20px;
  font-size: clamp(1.2rem, 1.059rem + 0.376vi, 1.6rem);
}
.guideline-inner .js-scrollable {
  margin-bottom: clamp(2rem, 1.296rem + 1.878vi, 4rem);
}

.points-to-consider {
  margin-bottom: clamp(2rem, 1.296rem + 1.878vi, 4rem);
}
.points-to-consider h3 {
  margin-top: 0;
  margin-bottom: clamp(0.5rem, 0.43rem + 0.188vi, 0.7rem);
  font-size: clamp(1.8rem, 1.589rem + 0.563vi, 2.4rem);
  font-weight: 700;
  color: #333;
}
.points-to-consider p {
  font-size: clamp(1.2rem, 1.059rem + 0.376vi, 1.6rem);
}

.precautions {
  margin-bottom: 10px;
}
.precautions h3 {
  font-size: clamp(1.2rem, 1.077rem + 0.329vi, 1.55rem);
  margin: 0 0 8px 0;
  color: #333;
  line-height: normal;
}
.precautions p {
  font-size: clamp(1rem, 0.93rem + 0.188vi, 1.2rem);
  margin-bottom: clamp(0.2rem, 0.13rem + 0.188vi, 0.4rem);
  line-height: normal;
}
.precautions p span {
  padding-left: 10px;
  display: block;
}
.precautions p span a {
  text-decoration: none;
  color: #333;
}

/*------------------------------------------
color
-------------------------------------------*/