:root {
  --max-1: 1500px;
  --max-2: 1200px;
  --max-3: 1100px;
  --outer: 50px;
  --center-offset: 20px;
}
.guidelines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.guidelines .guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-color, #00e8e8);
  opacity: var(--line-opacity, 0.9);
}
.guidelines .guide[data-set] {
  --cw: min(var(--w), 100vw);
}
.guidelines .container-start {
  left: calc(50% - var(--cw) / 2);
}
.guidelines .container-end {
  left: calc(50% + var(--cw) / 2);
}
.guidelines .center {
  left: 50%;
  background: lime;
  opacity: 0.95;
}
.guidelines .center-left {
  left: calc(50% - var(--center-offset));
}
.guidelines .center-right {
  left: calc(50% + var(--center-offset));
}
.guidelines [data-set="1"] {
  --w: var(--max-1);
  --line-color: #00ff00;
  --line-opacity: 0.85;
}
.guidelines [data-set="2"] {
  --w: var(--max-2);
  --line-opacity: 0.95;
}
.guidelines [data-set="3"] {
  --w: var(--max-3);
  --line-opacity: 0.7;
}
[id] {
  scroll-margin-top: var(--header-h, 0px);
}
body {
  scroll-behavior: smooth;
  color: #333;
  margin: 0;
  font-size: 0.875rem;
}
@media screen and (min-width: 769px) {
  body {
    font-size: 1rem;
  }
}
body {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo UI", "メイリオ", Meiryo, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: 0.5s ease;
  overflow-y: visible;
  overflow-anchor: none;
}
.b-visuallyHidden {
  position: fixed !important;
  top: 0px !important;
  left: 0px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
}
.b-inner {
  max-width: min(1100px, 94%);
  margin-inline: auto;
}
.b-inner__sm {
  max-width: min(850px, 94%);
  margin-inline: auto;
}
.b-inner__md {
  max-width: min(1200px, 94%);
  margin-inline: auto;
}
.b-inner__lg {
  max-width: min(1500px, 94%);
  margin-inline: auto;
}
.b-inner__wide {
  max-width: min(1600px, 94%);
  margin-inline: auto;
}
.br-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .br-sp {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .br-pc {
    display: none;
  }
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/NotoSansJP-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*[class*="b-sans-"] {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo UI", "メイリオ", Meiryo, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.b-sans-100 {
  font-weight: 100;
}
.b-sans-200 {
  font-weight: 200;
}
.b-sans-300 {
  font-weight: 300;
}
.b-sans-400 {
  font-weight: 400;
}
.b-sans-500 {
  font-weight: 500;
}
.b-sans-600 {
  font-weight: 600;
}
.b-sans-700 {
  font-weight: 700;
}
.b-sans-800 {
  font-weight: 800;
}
.b-sans-900 {
  font-weight: 900;
}
:root {
  --reveal-dist: 24px;
  --reveal-dur: 0.8s;
  --reveal-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --blur-delay: 0.12s;
  --blur-dur: 0.9s;
}
.reveal {
  opacity: 0;
  --tx: 0;
  --ty: 0;
  --scale: 1;
  filter: blur(var(--blur, 0));
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--scale));
  transition:
    opacity var(--dur, var(--reveal-dur)) var(--ease, var(--reveal-ease)) var(--delay, 0s),
    transform var(--dur, var(--reveal-dur)) var(--ease, var(--reveal-ease)) var(--delay, 0s),
    filter var(--blur-dur, var(--reveal-dur)) var(--ease, var(--reveal-ease)) calc(var(--delay, 0s) + var(--blur-delay, 0s));
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.reveal.-up {
  --ty: var(--reveal-dist);
}
.reveal.-down {
  --ty: calc(-1 * var(--reveal-dist));
}
.reveal.-left {
  --tx: calc(-1 * var(--reveal-dist));
}
.reveal.-right {
  --tx: var(--reveal-dist);
}
.reveal.-zoom {
  --scale: 0.94;
}
.reveal.-blur {
  --blur: 10px;
}
.reveal.-blur-sm {
  --blur: 6px;
}
.reveal.-blur-lg {
  --blur: 16px;
}
.reveal.-blur-slow {
  --blur-dur: 1.2s;
}
.reveal.-blur-later {
  --blur-delay: 0.24s;
}
@media screen and (max-width: 768px) {
  .reveal.-blur {
    --blur-delay: 0.08s;
    --blur-dur: 0.7s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur, 0.9s) var(--ease, var(--reveal-ease));
  transition-delay: var(--delay, 0s);
}
.reveal-clip.is-visible {
  clip-path: inset(0 0 0 0);
}
.reveal-underline {
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.5s ease;
  transition-delay: var(--delay, 0s);
}
.reveal-underline.is-visible {
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-clip,
  .reveal-underline {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
    background-size: 100% 100% !important;
  }
}
.c-ttl {
  margin-block-start: 0;
  text-box-trim: trim-both;
  text-box-edge: text;
}
.c-ttl__en {
  font-size: clamp(3rem, 1.55rem + 7.27vw, 7rem);
  color: hsl(156, 44%, 72%);
  letter-spacing: 0.1em;
  line-height: 1;
  font-weight: 600;
}
.c-ttl__ja {
  display: block;
  font-size: clamp(1.5rem, 1.34rem + 0.8vw, 1.9375rem);
  color: hsl(155, 99%, 30%);
  font-weight: 700;
}
.c-pic img {
  width: 100%;
  height: auto;
}
.c-txt {
  text-box-trim: trim-both;
  text-box-edge: text;
}
.c-btn {
  background: hsl(155, 99%, 30%);
  color: #fff;
  border-radius: 999px;
  position: relative;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: min(300px, calc(180 / 320 * 100vw));
  font-size: 0.9375rem;
}
@media screen and (min-width: 769px) {
  .c-btn {
    font-size: 1.0625rem;
  }
}
.c-btn {
  border: 1px solid hsl(155, 99%, 30%);
  padding-block: 0.85em;
  padding-inline: 1.5em 0.8em;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
  font-weight: 700;
}
.c-btn::after {
  content: "";
  display: inline-block;
  width: min(24px, calc(18 / 320 * 100vw));
  aspect-ratio: 1/1;
  background: url(../img/cmn/arrow.svg) no-repeat center center/contain;
  transition:
    filter 0.25s ease,
    transform 0.25s ease;
  will-change: filter, transform;
}
.c-btn:hover {
  background: #fff;
  color: hsl(155, 99%, 30%);
}
.c-btn:hover::after {
  transform: translateX(2px);
  filter: brightness(0) saturate(100%) invert(32%) sepia(89%) saturate(3469%) hue-rotate(144deg) brightness(98%) contrast(102%);
}
.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: #fff;
  padding-block: 1.5em;
  transition: background 0.3s ease;
}
@media screen and (max-width: 1200px) {
  .l-header {
    padding-block: 1em;
  }
}
.l-header.is-hide {
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
}
.l-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: min(1500px, 98%);
  margin-inline: auto;
}
@media screen and (max-width: 1200px) {
  .l-header__inner {
    width: 96%;
  }
}
.l-header__logo {
  margin-block: 0;
  position: relative;
  z-index: 2;
  width: min(200px, calc(125 / 1000 * 100vw));
}
@media screen and (max-width: 1200px) {
  .l-header__logo {
    width: min(200px, calc(100 / 320 * 100vw));
  }
}
.l-header__logo img {
  width: 100%;
  height: 100%;
}
.l-header__menuPc {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: min(2.5rem, 2.5vw);
  column-gap: min(2.5rem, 2.5vw);
}
@media screen and (max-width: 1200px) {
  .l-header__menuPc {
    display: none;
  }
}
.l-header__menuSp {
  position: relative;
  z-index: 1001;
  display: none;
}
@media screen and (max-width: 1200px) {
  .l-header__menuSp {
    display: block;
  }
}
.l-header__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}
@media screen and (max-width: 768px) {
  .l-header__nav {
    flex-direction: column;
  }
}
.l-header__nav {
  -moz-column-gap: min(2.5rem, 2.5vw);
  column-gap: min(2.5rem, 2.5vw);
}
.l-header__navItem {
  display: block;
  font-weight: 700;
  font-size: 0.8125rem;
}
@media screen and (min-width: 769px) {
  .l-header__navItem {
    font-size: 0.9375rem;
  }
}
.l-header__navItem {
  color: #333;
  text-decoration: none;
  background: none;
  margin: 0;
  padding: 0;
  border: 0px;
  cursor: pointer;
  transition: 0.3s ease;
}
.l-header__navItem:hover,
.l-header__navItem.is-active {
  color: hsl(155, 99%, 30%);
}
.l-header__navPanel {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.25s;
  will-change: opacity, transform;
}
.l-header__navPanel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s;
}
.l-header__btn {
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem;
  background: hsl(28, 99%, 45%);
  color: #fff;
  border-radius: 999px;
  font-size: 0.8125rem;
}
@media screen and (min-width: 769px) {
  .l-header__btn {
    font-size: 0.9375rem;
  }
}
.l-header__btn {
  letter-spacing: 0.075em;
  text-decoration: none;
  padding-inline: 2.125rem;
  padding-block: 0.5em;
  transition: 0.3s ease;
  margin-inline: auto;
  font-weight: 700;
  border: 1px solid hsl(28, 99%, 45%);
}
.l-header__btn img {
  transition: 0.3s ease;
}
.l-header__btn:hover {
  background: #fff;
  color: hsl(28, 99%, 45%);
}
.l-header__btn:hover img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(45%) saturate(4651%) hue-rotate(5deg) brightness(92%) contrast(104%);
}
.l-header__ov {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0s linear 0.35s;
  will-change: opacity, transform;
  background: #fff;
}
.l-header.is-menu-open .l-header__ov {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0s;
}
.l-header__ovIn {
  height: 100%;
  overflow: auto;
}
.l-header__toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  z-index: 1001;
}
.l-header__toggleIcon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition:
    transform 0.35s ease,
    opacity 0.2s ease,
    background-color 0.35s ease;
  will-change: transform, opacity;
}
.l-header__toggleIcon::before,
.l-header__toggleIcon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transition:
    transform 0.35s ease,
    opacity 0.2s ease,
    background-color 0.35s ease;
  will-change: transform, opacity;
  transform-origin: center;
}
.l-header__toggleIcon::before {
  top: -7px;
}
.l-header__toggleIcon::after {
  top: 7px;
}
.l-header .l-header__toggle[aria-expanded="true"] .l-header__toggleIcon {
  background: rgba(0, 0, 0, 0);
}
.l-header .l-header__toggle[aria-expanded="true"] .l-header__toggleIcon::before {
  transform: translateY(7px) rotate(45deg);
}
.l-header .l-header__toggle[aria-expanded="true"] .l-header__toggleIcon::after {
  transform: translateY(-7px) rotate(-45deg);
}
.navPanel {
  padding-block: clamp(2rem, 1.59rem + 2.05vw, 3rem);
  gap: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  max-width: min(1100px, 94%);
  margin-inline: auto;
}
.navPanel__ttl {
  line-height: 1;
}
.navPanel__ttl .en {
  font-size: clamp(1.375rem, 1.12rem + 1.28vw, 2rem);
  color: hsl(155, 99%, 30%);
  letter-spacing: 0.075em;
  font-weight: 700;
}
.navPanel__ttl .ja {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
}
@media screen and (min-width: 769px) {
  .navPanel__ttl .ja {
    font-size: 0.875rem;
  }
}
.navPanel__ttl .ja {
  margin-block-start: 0.75em;
}
.navPanel__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
}
.navPanel__list > a {
  color: #333;
  text-decoration: none;
  transition: 0.3s ease;
}
.navPanel__list > a:hover {
  transform: scale(0.95);
}
.navPanel__txt {
  display: block;
  line-height: 1;
  margin-block-start: 1.2em;
  font-weight: 700;
  font-size: 0.8125rem;
}
@media screen and (min-width: 769px) {
  .navPanel__txt {
    font-size: 0.9375rem;
  }
}
.spMenu {
  /* padding-inline: 1em; */
  background: linear-gradient(40deg, hsl(172, 85%, 16%) 0%, hsl(155, 99%, 30%) 48%, hsl(142, 72%, 40%) 100%);
  /* padding-block-start: 3.125rem; */
}
.spMenu__list {
  list-style: none;
  margin-block: 0 2em;
  padding-inline-start: 0;
}
.spMenu__item {
  border-bottom: 1px solid #e6e6e6;
  padding-inline: 1em;
}
.spMenu__item.--contact {
  border-bottom: none;
  background: hsl(28, 99%, 45%);
}
.spMenu__item > a,
.spMenu__item > span {
  text-decoration: none;
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .spMenu__item > a,
  .spMenu__item > span {
    font-size: 1.125rem;
  }
}
.spMenu__item > a,
.spMenu__item > span {
  /* color: #333; */
  width: 100%;
  display: block;
  /* padding-block: 0.5em; */
  padding-block: 1em;
}
.spMenu__sub {
  list-style: disc;
  padding-inline-start: 0;
  margin-inline-start: 1.5em;
  margin-block: -0.5em 1em;
  /* padding-block-end: 0.5em; */
  font-size: 0.8125rem;
}
@media screen and (min-width: 769px) {
  .spMenu__sub {
    font-size: 0.9375rem;
  }
}
.spMenu__sub > li:not(:last-child) {
  margin-block-end: 0.5em;
}
.spMenu__sub > li::marker {
  color: #fff;
}

.spMenu__sub > li a {
  text-decoration: none;
  /* color: #333; */
  color: #fff;
  font-weight: 700;
}
.l-cta {
  display: block;
  max-width: min(1200px, 94%);
  margin-inline: auto;
  margin-inline: auto;
  background: hsl(155, 99%, 30%);
  color: #fff;
  border-radius: 1.25rem;
  padding-block: clamp(1.5rem, 1.35rem + 0.77vw, 1.875rem);
  padding-inline: clamp(1.625rem, 1.06rem + 2.82vw, 3rem);
  margin-block-end: clamp(4.375rem, 2.89rem + 7.44vw, 8rem);
}
.l-cta__grid {
  display: grid;
  align-items: center;
  gap: clamp(1.125rem, 0.77rem + 1.79vw, 2rem);
}
@media screen and (min-width: 769px) {
  .l-cta__grid {
    grid-template-columns: 1fr auto;
  }
}
.l-cta__bd {
  justify-self: center;
}
.l-cta__ttl {
  line-height: 1;
  margin-block: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  font-size: clamp(1.75rem, 1.3rem + 2.27vw, 3rem);
  font-weight: 700;
}
.l-cta__ttl img {
  width: min(40px, calc(24 / 320 * 100vw));
  height: auto;
}
.l-cta__txt {
  line-height: 1.75;
  margin-block: 2.5em;
}
@media screen and (max-width: 768px) {
  .l-cta__txt {
    margin-block: 1.5em;
  }
}
.l-cta__btn {
  background: hsl(28, 99%, 45%);
  border-color: hsl(28, 99%, 45%);
}
.l-cta__btn:hover {
  color: hsl(28, 99%, 45%);
}
.l-cta__btn:hover::after {
  filter: brightness(0) saturate(100%) invert(51%) sepia(92%) saturate(3637%) hue-rotate(8deg) brightness(97%) contrast(98%);
}
.l-cta__pic {
  display: block;
  width: min(585px, calc(316 / 769 * 100vw));
}
@media screen and (max-width: 768px) {
  .l-cta__pic {
    justify-self: center;
    width: 100%;
    display: none;
  }
}
.l-footer {
  padding-block-start: clamp(2rem, 1.59rem + 2.05vw, 3rem);
  background: rgba(0, 0, 0, 0) linear-gradient(102deg, #e0f5f0 0%, #98d8bd 100%) 0% 0% no-repeat padding-box;
}
.l-footer__bd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
@media screen and (max-width: 768px) {
  .l-footer__bd {
    flex-direction: column;
    gap: 2rem;
  }
}
.l-footer__bd {
  padding-block-end: clamp(2.25rem, 1.74rem + 2.56vw, 3.5rem);
}
.l-footer__left {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
}
/* @media screen and (max-width: 768px) {
  .l-footer__left {
    flex-direction: column;
  }
} */
.l-footer__left {
  gap: clamp(3.625rem, 2.65rem + 4.87vw, 6rem);
}
.l-footer__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.l-footer__logo img {
  width: min(200px, calc(160 / 320 * 100vw));
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.l-footer__add {
  /* font-size: 0.875rem; */
  font-size: 10px;
}
@media screen and (min-width: 769px) {
  .l-footer__add {
    font-size: 0.875rem;
  }
}
.l-footer__add {
  line-height: 1.7857142857;
}
.l-footer__company .l-footer__logo,
.l-footer__lab .l-footer__logo {
  height: min(72px, 100%);
}
.l-footer__pic {
  display: block;
  width: clamp(9rem, 4.05rem + 24.77vw, 22.625rem);
  width: min(362px, calc(230 / 320 * 100vw));
  margin-block-end: 1rem;
}
.l-footer__btn {
  width: min(362px, calc(230 / 320 * 100vw));
  background: rgb(0, 81.6, 55.76);
  font-weight: 700;
}
.l-footer__btn:hover {
  color: rgb(0, 81.6, 55.76);
}
.l-footer__btn:hover::after {
  filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(643%) hue-rotate(118deg) brightness(95%) contrast(101%);
}
.l-footer__sns {
  margin-block-start: clamp(1.625rem, 1.31rem + 1.59vw, 2.5rem);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.625rem;
}
@media screen and (max-width: 768px) {
  .l-footer__sns {
    justify-content: center;
  }
}
.l-footer__copy {
  display: block;
  width: 100%;
  background: hsl(155, 99%, 30%);
  color: #fff;
  text-align: center;
  font-size: 0.625rem;
  padding-block: 1em;
}
