@charset "UTF-8";
* {
  box-sizing: border-box;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: inherit;
}
body {
  line-height: 1;
}
article,
aside,
detailsF,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
input:focus {
  outline: none;
}
ol,
ul {
  list-style-type: none;
}
img {
  vertical-align: top;
  width: 100%;
  height: auto;
}

/* header.css移動済み */
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.css移動済み */

body.contents-hidden {
  visibility: hidden;
  opacity: 0;
  background-color: transparent;
}
#content {
  border-radius: var(--g-border-radius) var(--g-border-radius) 0 0;
  height: calc(100vh - var(--body-border-size));
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: scroll;
  overscroll-behavior: none;
  pointer-events: auto;
}
#content::-webkit-scrollbar {
  display: none;
}
.main {
  overflow: hidden;
}
/* header.css移動済み */
.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;
}
@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;
}
.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;
}
@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;
  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;
  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%, -45%);
  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;
}
/* /header.css移動済み */
.hero {
  overflow: hidden;
  position: relative;
  height: calc(100vh - var(--body-border-size) * 2);
  height: calc(100dvh - var(--body-border-size) * 2);
  min-height: 80rem;
  background: linear-gradient(
    0deg,
    rgb(126, 197, 205) 2.3508%,
    rgb(85, 140, 182) 13.94%,
    rgb(70, 81, 115) 47.4432%,
    rgb(18, 30, 87) 89.3068%,
    rgb(0, 0, 61) 100%
  );
  border-radius: 1.4rem;
}
.hero:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  height: 90.5%;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(129, 78, 149, 0.8) 1%,
    rgba(0, 0, 0, 0) 100%
  );
}
@media screen and (max-width: 767px) {
  .hero {
    min-height: 150rem;
  }
}
.hero__starry-sky {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 98%;
  height: 98%;
}
.hero__starry-sky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__content-wrapper {
  position: absolute;
  bottom: 0.9057142857vw;
  left: 0;
  z-index: 4;
  width: 100%;
  height: calc(100% - var(--header-height));
}
@media screen and (max-width: 767px) {
  .hero {
    min-height: 150rem;
  }
  .hero__content-wrapper {
    bottom: -3.9057142857vw;
  }
}
.hero__content {
  position: absolute;
  top: 50%;
  left: 50.5%;
  transform: translate(-50%, -50%) scale(0.93);
  display: grid;
  grid-template-columns: auto auto;
  gap: 5.1428571429vw;
}
@media (min-aspect-ratio: 16/9) {
  .hero__content {
    transform: translate(-50%, -50%) scale(0.85);
  }
}
@media screen and (max-width: 767px) {
  .hero__content {
    left: 0;
    transform: translateY(-51%);
    display: block;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-right: 3.2rem;
    padding-left: 3.2rem;
  }
}
@media only screen and (max-width: 767px) and (max-height: 667px) {
  .hero__content {
    transform: translateY(-51%) scale(0.9);
  }
}
.hero__text {
  margin-top: 1.7857142857vw;
}
@media screen and (max-width: 767px) {
  .hero__text {
    display: contents;
  }
}
@media screen and (max-width: 767px) {
  .hero__title {
    order: 1;
  }
}
.hero__title img {
  display: block;
  will-change: transform;
}
.hero__title img[src*="hero-title"] {
  width: 33.3833714286vw;

  max-width: 60%;
  margin-left: 10%;
}
@media screen and (max-width: 767px) {
  .hero__title img[src*="hero-title"] {
    width: 47.7rem;
    margin-right: auto;
    margin-left: auto;
  }
}
.hero__title img[src*="logo"] {
  margin-top: 2vw;
  width: 33.2142857143vw;
}
@media screen and (max-width: 767px) {
  .hero__title img[src*="logo"] {
    width: 41rem;
    margin-top: 2rem;
    margin-right: auto;
    margin-left: auto;
  }
}
.hero__paper {
  width: 27.3272642857vw;
  margin-top: 3.8571428571vw;
  margin-right: auto;
  margin-left: auto;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .hero__paper {
    order: 3;
    display: inline-flex;
    flex-direction: row-reverse;
    margin-top: 2.4rem;
    margin-left: 9rem;
    margin-right: auto;
    width: auto;
  }
}
.hero__paper img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.hero__paper img[src*="paper-test-lead"] {
  width: 26.2658428571vw;
  filter: drop-shadow(0 0 1rem rgb(5, 34, 74));
}
@media screen and (max-width: 767px) {
  .hero__paper img[src*="paper-test-lead"] {
    width: 17.6rem;
    margin-top: 1.3rem;
    margin-left: -4rem;
    filter: drop-shadow(0.2rem 0.2rem 0.8rem rgba(5, 34, 74, 0.55));
  }
}
.hero__paper img[src*="paper-test-set"] {
  width: 27.3272642857vw;
  margin-top: -0.6428571429vw;
}
@media screen and (max-width: 767px) {
  .hero__paper img[src*="paper-test-set"] {
    width: 28.7rem;
    margin-top: 0;
  }
}
.hero__paper .hero__paper-label {
  width: 11.1543164286vw;
  margin-top: -3.2142857143vw;
  filter: drop-shadow(0 0 1rem rgba(61, 138, 83, 0.75));
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .hero__paper .hero__paper-label {
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(calc(-50% - 6.64rem));
    width: 16.7rem;
    margin-top: 0;
  }
}
.hero__images-container {
  margin-top: 1.7857142857vw;
}
@media screen and (max-width: 767px) {
  .hero__images-container {
    display: contents;
  }
}
.hero__images {
  position: relative;
  z-index: -1;
  --containerWidth: 537;
  --containerHeight: 410;
  width: 41.8571428571vw;
  aspect-ratio: var(--containerWidth) / var(--containerHeight);
  will-change: transform;
}
@media screen and (min-width: 768px) {
  .hero__images {
    transform: scale(0.95);
    transform-origin: left bottom;
  }
}
@supports not (aspect-ratio: var(--containerWidth) / var(--containerHeight)) {
  .hero__images {
    padding-top: calc(var(--containerHeight) / var(--containerWidth) * 100%);
    height: 0;
  }
}
@media screen and (max-width: 767px) {
  .hero__images {
    --containerWidth: 520;
    --containerHeight: 387.1111;
    order: 2;
    width: 52rem;
    margin-top: 3.6rem;
    margin-right: auto;
    margin-left: auto;
  }
}
.hero__images img {
  display: block;
}
.hero__images img[src*="hero-rocket"] {
  position: absolute;
  left: calc((45 / var(--containerWidth)) * 100%);
  top: calc((-60 / var(--containerHeight)) * 100%);
  z-index: 1;
  width: calc((135 / var(--containerWidth)) * 100%);
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .hero__images img[src*="hero-rocket"] {
    left: calc((-62 / var(--containerWidth)) * 100%);
    top: calc((-64 / var(--containerHeight)) * 100%);
    width: calc((175 / var(--containerWidth)) * 100%);
  }
}
.hero__images img[src*="hero-earth"] {
  position: absolute;
  left: calc((-672.7352 / var(--containerWidth)) * 100%);
  top: calc((-64 / var(--containerHeight)) * 100%);
  width: calc((2237 / var(--containerWidth)) * 100%);
  z-index: -2;
  will-change: transform, opacity;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .hero__images img[src*="hero-earth"] {
    left: calc((-580.496 / var(--containerWidth)) * 100%);
    top: calc((48 / var(--containerHeight)) * 100%);
    width: calc((2048 / var(--containerWidth)) * 100%);
  }
}
.hero__images .hero__images-seiun-wrapper {
  position: absolute;
  right: calc((-98.6859 / var(--containerWidth)) * 100%);
  top: calc((-72.6736 / var(--containerHeight)) * 100%);
  width: calc((208.6914 / var(--containerWidth)) * 100%);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .hero__images .hero__images-seiun-wrapper {
    right: calc((-146.542 / var(--containerWidth)) * 100%);
    top: calc((-120 / var(--containerHeight)) * 100%);
    width: calc((271.1099 / var(--containerWidth)) * 100%);
  }
}
.hero__images .hero__images-tower-wrapper {
  position: absolute;
  right: calc((-24.953 / var(--containerWidth)) * 100%);
  bottom: calc((-140 / var(--containerHeight)) * 100%);
  width: calc((84.603 / var(--containerWidth)) * 100%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .hero__images .hero__images-tower-wrapper {
    right: calc((-32.25 / var(--containerWidth)) * 100%);
    bottom: calc((-222.0247 / var(--containerHeight)) * 100%);
    width: calc((86.0131 / var(--containerWidth)) * 100%);
  }
}
.hero__images .hero__images-tower-wrapper img {
  display: block;
  will-change: transform;
}
.hero__images-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 2rem;
  overflow: hidden;
  border-radius: 2rem;
  background-color: #f5f6f9;
  padding: 0.9318357143vw;
  will-change: transform;
  filter: drop-shadow(0 0 1rem rgba(61, 140, 84, 0.5));
}
@media screen and (max-width: 767px) {
  .hero__images-wrapper {
    padding: 1.5rem;
  }
}
.hero__button {
  margin-top: 3.2142857143vw;
  width: 27.5714285714vw;
}
@media screen and (max-width: 767px) {
  .hero__button {
    order: 5;
    width: 52rem;
    margin-top: 3.6rem;
    margin-right: auto;
    margin-left: auto;
  }
}
.hero__note {
  margin-top: 1vw;
  color: white;
  font-size: 1.2rem;
  white-space: nowrap;
  letter-spacing: 0.04em;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .hero__note {
    order: 6;
    margin-top: 1.5em;
    line-height: 1.4;
    font-size: 1.8rem;
    white-space: initial;
  }
}
@media screen and (max-width: 767px) {
  .hero__note-item {
    white-space: wrap;
    display: inline;
  }
}

/*------------------
タブ
------------------*/
.tab {
  width: 93rem;
  margin-top: 3.6rem;
  margin-right: auto;
  margin-left: auto;
}
.tab-btn {
  display: flex;
  align-items: flex-end;
}
.tab-btn__item {
  text-align: center;
  width: 31%;
  padding: 13px 5px;
  color: white;
  background-color: var(--g-color-green);
  cursor: pointer;
  margin-right: 5px;
  border-radius: 1rem 1rem 0 0;
  font-size: 2.8rem;
  font-weight: 700;
  border-top: 0.4rem solid #4bd591;
  border-right: 0.4rem solid #0a5f4a;
}
.tab-btn__item.current {
  background-color: white;
  padding: 10px;
  color: #000;
  border: none;
}
.tab-content {
  display: none;
  padding: 1.6rem;
  border-radius: 0 2rem 2rem;
  background-color: white;
}
.tab-content.show {
  display: block;
}
.tab-btn__item:last-child {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .tab {
    width: 100%;
    margin-top: 9.2rem;
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
}
.tab-btn__item {
  width: 100%;
}
.tab-content {
  border-radius: 0 0 2rem 2rem;
}
}

/*------------------
キャラクター
------------------*/
.hero__images-container {
  margin-top: 7.785714rem;
}
.hero__images .hero__images-seiun-wrapper {
  position: absolute;
  right: calc((-73.6859 / var(--containerWidth))* 100%);
  top: calc((-78.6736 / var(--containerHeight))* 100%);
  width: calc((348.6914 / var(--containerWidth))* 100%);
  z-index: 1;
}
.hero__images .hero__images-tower-wrapper {
  width: calc((119.603 / var(--containerWidth))* 100%);
}

@media screen and (min-width: 768px) {
  .hero__images-wrapper {
    width: 95% !important;
  }
}
@media screen and (max-width: 767px) {
  .hero__images {
    margin-top: 6rem;
}
.hero__images .hero__images-tower-wrapper {
  width: calc((115.0131 / var(--containerWidth))* 100%);
}
}

/*------------------
btn
------------------*/
.btn_g .large-button__text {
  color: #fff;
  text-shadow: none;
}
.btn_g .large-button__icon {
  color: #fff;
}
.large-button.btn_g {
  filter: drop-shadow(0 var(--shadow-gap) 0 #0a5f4a);
}
.large-button.btn_g:hover {
  filter: drop-shadow(0 var(--shadow-gap) 0 #0a5f4a);
}
.large-button.btn_g {
  font-size: 2.2rem !important;
}
.large-button.large-button1 {
  letter-spacing: -0.03em;
  font-size: 2.2rem !important;
}
@media screen and (min-width: 768px) {
.sp_block {
  display: none;
}
.hero__button {
  width: 37rem;
  margin-left: 9rem;
  margin-top: 0rem;
}
}
@media screen and (max-width: 767px) {
.pc_block {
  display: none;
}
.large-button.large-button1, .large-button.btn_g {
  font-size: 3rem !important;
}
}