a,
a:active,
a:focus,
a:visited {
  color: inherit;
  text-decoration: none;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  font-family: inherit;
  color: inherit;
}
svg {
  width: 100%;
  height: 100%;
}

img[src$=".svg"] {
  width: 100%;
}
:after,
:before {
  box-sizing: inherit;
}
@media screen and (max-width: 767px) {
  .active-tb-pc {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .active-sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .deactive-tb-sp {
    display: none !important;
  }
}
.negative-spacing- {
  letter-spacing: -0.0125em !important;
}
.negative-spacing-pc {
  letter-spacing: -0.0125em !important;
}
@media screen and (max-width: 767px) {
  .negative-spacing-pc {
    letter-spacing: normal;
  }
}
.negative-spacing-sp {
  letter-spacing: normal;
}
@media screen and (max-width: 767px) {
  .negative-spacing-sp {
    letter-spacing: -0.0125em !important;
  }
}
.fullscreen-pd-right-item {
  box-sizing: content-box;
}
:root {
  font-size: calc(10px + 4 * (100vw - 1400px) / 1160) !important;
  --scroll-bar-width: 15px;
  --header-height: 10.6rem;
  --page-gutter: 4.6rem;
  --content-width: 100rem;
  --content-width-large: 120rem;
  --body-border-size: 1rem;
  --g-border-radius: 1.4rem;
  --g-border-radius-large: 5rem;
  --hover-transition: 0.5s;
  --font-sans: "YakuHanJPs_Noto", "Noto Sans JP", sans-serif;
  --font-sans-yakuhan-all: "YakuHanJP_Noto", "Noto Sans JP", sans-serif;
  --font-sans-no-yakuhan: "Noto Sans JP", sans-serif;
  --font-serif: "YakuHanMPs_Noto", "Noto Serif JP", serif;
  --font-serif-yakuhan-all: "YakuHanMP_Noto", "Noto Serif JP", serif;
  --font-serif-no-yakuhan: "Noto Serif JP", serif;
  --g-color-green: #289e64;
  --g-color-dark-green: #257d41;
  --g-color-light-green: #cdede0;
  --g-color-orange: #ffe128;
  --g-color-light-orange: #fff053;
  --g-color-dark-orange: #f0b900;
}
@media screen and (max-width: 1439px) {
  :root {
    font-size: 0.714286vw !important;
  }
}
@media screen and (max-width: 767px) {
  :root {
    font-size: 1.333333vw !important;
  }
}
@media screen and (min-width: 768px) {
  :root body.--scroll {
    --header-height: 6.4rem;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --header-height: 11.6rem;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --page-gutter: 4.5rem;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --content-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --content-width-large: 100%;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --g-border-radius-large: 8rem;
  }
}
body {
  font-family: var(--font-sans);
  line-height: 1.77;
  /* font-size: 1.4em; */
  -webkit-font-smoothing: antialiased;
  padding-top: var(--body-border-size);
  padding-right: var(--body-border-size);
  padding-left: var(--body-border-size);
  background-color: var(--g-color-light-green);
  /* pointer-events: none; */
}
@media screen and (max-width: 767px) {
  body {
    font-size: 2.6em;
  }
}

.header {
  position: fixed;
  left: var(--body-border-size);
  right: 0;
  top: var(--body-border-size);
  display: flex;
  align-items: center;
  width: calc(100% - var(--body-border-size) * 2);
  height: var(--header-height);
  background-color: transparent;
  border-radius: var(--g-border-radius) var(--g-border-radius) 0 0;
  z-index: 999;
  transition: background-color 0.25s ease-out, height 0.25s ease-out;
  will-change: transform;
}
body.--scroll .header {
  background-color: white;
}
body.--scroll .header.transparent {
  background-color: transparent;
}
@media screen and (max-width: 767px) {
  body.--scroll .header {
    transition: background-color 0.25s ease-out;
  }
}
body.--scroll.modal-sp-menu-active .header {
  background-color: transparent;
}
.header__inner {
  display: grid;
  grid-template-columns: auto max-content max-content;
  grid-template-rows: max-content max-content;
  align-items: center;
  width: 100%;
  padding-right: 6rem;
  padding-left: 6rem;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__inner {
    grid-template-rows: max-content;
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .header__inner {
    padding-right: 3.5rem;
    padding-left: 3.5rem;
    grid-template-rows: initial;
  }
}
.header__logo {
  position: relative;
  grid-row: 1 / span 2;
  width: 17.2rem;
  transition: width 0.25s ease-out;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__logo {
    width: 14rem;
  }
}
@media screen and (max-width: 767px) {
  .header__logo {
    width: 24.6rem;
  }
}
.header__logo a {
  display: block;
}
.header__logo img[src$="logo-border.svg"] {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.25s ease-out, opacity 0.25s ease-out;
}
body.--scroll .header__logo img[src$="logo-border.svg"] {
  visibility: hidden;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  body.--scroll .header__logo img[src$="logo-border.svg"] {
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  }
}
body.--scroll.modal-sp-menu-active .header__logo img[src$="logo-border.svg"] {
  opacity: 1;
  visibility: visible;
}
.header__logo img[src$="logo.svg"] {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.25s ease-out, opacity 0.25s ease-out;
}
body.--scroll .header__logo img[src$="logo.svg"] {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  body.--scroll .header__logo img[src$="logo.svg"] {
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  }
}
body.--scroll.modal-sp-menu-active .header__logo img[src$="logo.svg"] {
  opacity: 0;
  visibility: hidden;
}

/* .no-menu .header__cta,
.no-menu .header__pc-menu,
.no-menu .header__sp-menu-button,
.no-menu .menu {
  display: none;
} */

.header__cta-items {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__cta-items {
    margin-left: 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  .header__cta-items {
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  }
}
body.modal-sp-menu-active .header__cta-items {
  opacity: 0;
  visibility: hidden;
}
.header__cta-items-button {
  white-space: nowrap;
}
.header__cta-items-button.button {
  padding-right: 0;
  padding-left: 0;
  width: 15rem;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__cta-items-button.button {
    font-size: 1.3rem;
    width: 12.75rem;
    height: 3.23rem;
  }
}
@media screen and (max-width: 767px) {
  .header__cta-items-button.button {
    width: 20rem;
  }
}
.header__cta-items-button.button.header__cta-items-button--small {
  width: 10rem;
}
@media screen and (min-width: 768px) {
  body.--scroll
    .header__cta-items-button.button.header__cta-items-button--small {
    width: 8.5rem;
  }
}
.header__cta-items-button img[src*="logo-kobun"] {
  width: 7rem;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__cta-items-button img[src*="logo-kobun"] {
    width: 5.95rem;
  }
}
.header__cta-items-button img[src*="logo-drill-planet"] {
  width: 12rem;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__cta-items-button img[src*="logo-drill-planet"] {
    width: 10.2rem;
  }
}
.button.button--orange .header__cta-items-button .button__text {
  text-shadow: rgb(255, 255, 255) 3px 0px 0px,
    rgb(255, 255, 255) 2.83487px 0.981584px 0px,
    rgb(255, 255, 255) 2.35766px 1.85511px 0px,
    rgb(255, 255, 255) 1.62091px 2.52441px 0px,
    rgb(255, 255, 255) 0.705713px 2.91581px 0px,
    rgb(255, 255, 255) -0.287171px 2.98622px 0px,
    rgb(255, 255, 255) -1.24844px 2.72789px 0px,
    rgb(255, 255, 255) -2.07227px 2.16926px 0px,
    rgb(255, 255, 255) -2.66798px 1.37182px 0px,
    rgb(255, 255, 255) -2.96998px 0.42336px 0px,
    rgb(255, 255, 255) -2.94502px -0.571704px 0px,
    rgb(255, 255, 255) -2.59586px -1.50383px 0px,
    rgb(255, 255, 255) -1.96093px -2.27041px 0px,
    rgb(255, 255, 255) -1.11013px -2.78704px 0px,
    rgb(255, 255, 255) -0.137119px -2.99686px 0px,
    rgb(255, 255, 255) 0.850987px -2.87677px 0px,
    rgb(255, 255, 255) 1.74541px -2.43999px 0px,
    rgb(255, 255, 255) 2.44769px -1.73459px 0px,
    rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}
.header__cta-items-button-tooltip {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14rem;
  transform: translateY(calc(100% + 0.9rem)) translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__cta-items-button-tooltip {
    width: 11.9rem;
  }
}
a:hover .header__cta-items-button-tooltip {
  opacity: 1;
  visibility: visible;
}
.header__pc-menu {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.85rem;
  font-size: 1.4rem;
  color: white;
  transition: color 0.25s ease-out;
}
.header__pc-menu.color-black {
  color: black;
}
@media screen and (min-width: 768px) {
  body.--scroll .header__pc-menu {
    margin-top: 0;
    font-size: 1.2rem;
    grid-row: 1;
  }
}
@media screen and (max-width: 767px) {
  .header__pc-menu {
    display: none;
  }
}
body.--scroll .header__pc-menu {
  color: inherit;
}
.header__pc-menu-items {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 3.2rem;
  width: 100%;
  font-weight: 500;
  letter-spacing: 0.06rem;
}
body:not(.--scroll) .header__pc-menu-items a {
  transition: opacity 0.2s ease-out;
}
body:not(.--scroll) .header__pc-menu-items a:hover {
  opacity: 0.8;
}
body.--scroll .header__pc-menu-items a {
  transition: color 0.2s ease-out;
}
body.--scroll .header__pc-menu-items a:hover {
  color: var(--g-color-dark-green);
}
@media screen and (min-width: 768px) {
  body.--scroll .header__pc-menu-items {
    gap: 2rem;
  }
}
.header__sp-menu-button {
  position: relative;
  display: block;
  width: 6rem;
  height: 3.63rem;
  margin-left: 2.9rem;
}
@media screen and (min-width: 768px) {
  .header__sp-menu-button {
    display: none;
  }
}
.header__sp-menu-button:after {
  content: "";
  display: block;
  position: absolute;
  width: 150%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header__sp-menu-button span {
  display: block;
  position: absolute;
  width: 5rem;
  height: 0.3rem;
  background-color: white;
  transition: background-color 0.25s ease-out;
}
body.--scroll .header__sp-menu-button span {
  background-color: var(--g-color-green);
}
body.--scroll.modal-sp-menu-active .header__sp-menu-button span {
  background-color: white;
}
.header__sp-menu-button span:first-of-type {
  top: 0;
  transition: top 0.175s 0.175s, transform 0.175s 0s;
}
.header__sp-menu-button.modal-active span:first-of-type {
  top: 50%;
  left: 0;
  transform: rotate(35deg);
  transition: top 0.175s 0s, transform 0.175s 0.175s;
}
.header__sp-menu-button span:nth-of-type(2) {
  top: 50%;
  right: 0;
  transition: opacity 0.175s 0.175s;
  transform: translateY(-50%);
}
.header__sp-menu-button.modal-active span:nth-of-type(2) {
  opacity: 0;
  transition: opacity 0.175s;
}
.header__sp-menu-button span:nth-of-type(3) {
  top: 100%;
  left: 0;
  transition: top 0.175s 0.175s, transform 0.175s 0s;
  transform: translateY(-100%);
}
.header__sp-menu-button.modal-active span:nth-of-type(3) {
  top: 50%;
  transform: translateY(0) rotate(-35deg);
  transition: top 0.175s 0s, transform 0.175s 0.175s;
}
.button {
  --shadow-gap: 0.5rem;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  padding-right: 2em;
  padding-left: 2em;
  height: 3.8rem;
  margin-bottom: var(--shadow-gap);
  border: 1px solid transparent;
  background-color: gray;
  color: white;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2rem;
  transition: transform 0.175s ease-out, filter 0.175s ease-out;
  filter: drop-shadow(0 var(--shadow-gap) 0 black);
}
@media screen and (max-width: 767px) {
  .button {
    font-size: 2.1rem;
    height: 5.9rem;
    border-radius: 3rem;
  }
}
.button:hover {
  cursor: pointer;
  transform: translateY(calc(var(--shadow-gap) / 2));
  filter: drop-shadow(0 calc(var(--shadow-gap) / 2) 0 black);
}
@media screen and (max-width: 767px) {
  .button {
    width: 100%;
  }
}

.button.button--orange {
  overflow: hidden;
  background-color: var(--g-color-orange);
  filter: drop-shadow(0 var(--shadow-gap) 0 var(--g-color-dark-orange));
  color: var(--g-color-green);
  will-change: transform;
}
.button.button--orange:hover {
  filter: drop-shadow(
    0 calc(var(--shadow-gap) / 2) 0 var(--g-color-dark-orange)
  );
}
.button.button--orange:before {
  content: "";
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translateY(-45%);
  display: block;
  border-radius: inherit;
  background-color: var(--g-color-light-orange);
}
.button.button--green {
  color: var(--g-color-green);
  background-color: white;
  filter: drop-shadow(0 var(--shadow-gap) 0 var(--g-color-dark-green));
  will-change: transform;
}
.button.button--green:hover {
  filter: drop-shadow(
    0 calc(var(--shadow-gap) / 2) 0 var(--g-color-dark-green)
  );
}
.button.button--green-border {
  border: solid 1px var(--g-color-dark-green);
  background-color: white;
  color: inherit;
  filter: drop-shadow(0 var(--shadow-gap) 0 var(--g-color-dark-green));
  will-change: transform;
}
.button.button--green-border:hover {
  filter: drop-shadow(
    0 calc(var(--shadow-gap) / 2) 0 var(--g-color-dark-green)
  );
}
.button img {
  display: block;
}
.button__text.button__text--long {
  /* font-size: 2.6rem; */
  font-size: 2.1rem;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .button__text.button__text--long {
    font-size: 4.8rem;
    letter-spacing: 0.04em;
  }
}
.button.button--orange .button__text {
  text-shadow: rgb(255, 255, 255) 0.1em 0 0,
    rgb(255, 255, 255) 0.0944956667em 0.0327194667em 0,
    rgb(255, 255, 255) 0.0785886667em 0.061837em 0,
    rgb(255, 255, 255) 0.0540303333em 0.084147em 0,
    rgb(255, 255, 255) 0.0235237667em 0.0971936667em 0,
    rgb(255, 255, 255) -0.0095723667em 0.0995406667em 0,
    rgb(255, 255, 255) -0.0416146667em 0.0909296667em 0,
    rgb(255, 255, 255) -0.0690756667em 0.0723086667em 0,
    rgb(255, 255, 255) -0.0889326667em 0.0457273333em 0,
    rgb(255, 255, 255) -0.0989993333em 0.014112em 0,
    rgb(255, 255, 255) -0.0981673333em -0.0190568em 0,
    rgb(255, 255, 255) -0.0865286667em -0.0501276667em 0,
    rgb(255, 255, 255) -0.0653643333em -0.0756803333em 0,
    rgb(255, 255, 255) -0.0370043333em -0.0929013333em 0,
    rgb(255, 255, 255) -0.0045706333em -0.0998953333em 0,
    rgb(255, 255, 255) 0.0283662333em -0.0958923333em 0,
    rgb(255, 255, 255) 0.0581803333em -0.081333em 0,
    rgb(255, 255, 255) 0.0815896667em -0.0578196667em 0,
    rgb(255, 255, 255) 0.096017em 0.0279415667em 0;
}
.button__icon {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  display: block;
  width: 0.45em;
  height: 0.7em;
  line-height: 0;
}
.button__icon svg {
  fill: currentColor;
}
.button.button--orange .button__icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 135%;
  height: 135%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='m13.34,9.51L3.34.51C2.75-.01,1.91-.15,1.19.17.46.49,0,1.21,0,2v18c0,.79.46,1.51,1.19,1.83.26.12.54.17.81.17.48,0,.96-.18,1.34-.51l10-9c.42-.38.66-.92.66-1.49s-.24-1.11-.66-1.49Z' style='fill: %23fff; stroke-width: 0px;'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.large-button {
  --shadow-gap: 0.7rem;
  display: block;
  /* font-size: 2.9rem; */
  font-size: 2.5rem;
  filter: drop-shadow(0 var(--shadow-gap) 0 #c87d00);
  transition: transform 0.175s ease-out, filter 0.175s ease-out;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .large-button {
    font-size: 4.06rem;
  }
}
.large-button:hover {
  transform: translateY(calc(var(--shadow-gap) / 2));
  filter: drop-shadow(0 calc(var(--shadow-gap) / 2) 0 #c87d00);
}
.large-button__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
  color: var(--g-color-green);
  line-height: 1.5;
  text-shadow: rgb(255, 255, 255) 0.1em 0 0,
    rgb(255, 255, 255) 0.0944956667em 0.0327194667em 0,
    rgb(255, 255, 255) 0.0785886667em 0.061837em 0,
    rgb(255, 255, 255) 0.0540303333em 0.084147em 0,
    rgb(255, 255, 255) 0.0235237667em 0.0971936667em 0,
    rgb(255, 255, 255) -0.0095723667em 0.0995406667em 0,
    rgb(255, 255, 255) -0.0416146667em 0.0909296667em 0,
    rgb(255, 255, 255) -0.0690756667em 0.0723086667em 0,
    rgb(255, 255, 255) -0.0889326667em 0.0457273333em 0,
    rgb(255, 255, 255) -0.0989993333em 0.014112em 0,
    rgb(255, 255, 255) -0.0981673333em -0.0190568em 0,
    rgb(255, 255, 255) -0.0865286667em -0.0501276667em 0,
    rgb(255, 255, 255) -0.0653643333em -0.0756803333em 0,
    rgb(255, 255, 255) -0.0370043333em -0.0929013333em 0,
    rgb(255, 255, 255) -0.0045706333em -0.0998953333em 0,
    rgb(255, 255, 255) 0.0283662333em -0.0958923333em 0,
    rgb(255, 255, 255) 0.0581803333em -0.081333em 0,
    rgb(255, 255, 255) 0.0815896667em -0.0578196667em 0,
    rgb(255, 255, 255) 0.096017em 0.0279415667em 0;
}
.large-button__text small {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .large-button__text small {
    line-height: 1.25;
    font-size: 2.2rem;
  }
}
.large-button__icon {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  display: block;
  width: 0.45em;
  height: 0.7em;
  line-height: 0;
  color: var(--g-color-green);
}
@media screen and (max-width: 767px) {
  .large-button__icon {
    width: 0.495em;
    height: 0.77em;
  }
}
.large-button__icon svg {
  fill: currentColor;
}
.large-button__icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='m13.34,9.51L3.34.51C2.75-.01,1.91-.15,1.19.17.46.49,0,1.21,0,2v18c0,.79.46,1.51,1.19,1.83.26.12.54.17.81.17.48,0,.96-.18,1.34-.51l10-9c.42-.38.66-.92.66-1.49s-.24-1.11-.66-1.49Z' style='fill: %23fff; stroke-width: 0px;'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  .sp-none {
    display: none !important;
  }
  .hero__title {
    order: unset;
  }
}
@media screen and (min-width: 768px) {
  .pc-none {
    display: none !important;
  }
  .hero__note-item {
    padding-left: 1em;
    text-indent: -1em;
  }
}

/*------------------
導入ガイド
------------------*/
.header__pc-menu-items > li > a{
  padding-bottom: 15px;
}
.header__pc-menu-items li ul{
  position: absolute;
    top: -1000px;
    color: #000000;
    background: rgba(255,255,255,0.9);
    box-shadow: 0px 0px 15px rgb(0 0 0 / 25%);
    padding: 20px;
    font-size: 1.6rem;
}
.i-label {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-top: -1.05em;
  margin-right: 0.3em;
  -webkit-transform: translateY(0.14em);
  transform: translateY(0.14em);
  vertical-align: baseline;
}
.header__pc-menu-items li:hover ul{
  top: 10rem;
  right: 14rem;
}
body.--scroll .header__pc-menu-items li:hover ul {
  top: 5rem;
  right: 61rem;
}