@charset "UTF-8";
/* A Modern CSS Reset */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Josefin+Sans:wght@600;700&display=swap");
*, *::before, *::after {
  box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0; }

ul[role="list"], ol[role="list"] {
  list-style: none; }

html:focus-within {
  scroll-behavior: smooth; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img, picture {
  max-width: 100%;
  display: block; }

input, button, textarea, select {
  font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important; } }
a {
  color: #222;
  text-decoration: none;
  transition: .3s; }

a:hover {
  text-decoration: underline;
  transition: .3s; }

p {
  line-height: 1.8em;
  color: #222; }

a img {
  border-style: none; }
  a img:hover {
    opacity: 0.7; }

/** float **/
.fl0 {
  float: left; }

.fl10 {
  float: left;
  margin-right: 10px; }

.fr0 {
  float: right; }

.fr10 {
  float: right;
  margin-left: 10px; }

/** padding **/
.pb10 {
  padding-bottom: 10px; }

.pb20 {
  padding-bottom: 20px; }

.pb30 {
  padding-bottom: 30px; }

.pb40 {
  padding-bottom: 40px; }

.pb50 {
  padding-bottom: 50px; }

.pb60 {
  padding-bottom: 60px; }

.pb70 {
  padding-bottom: 70px; }

/** margin **/
.mb10 {
  margin-bottom: 10px; }

.mb20 {
  margin-bottom: 20px; }

.mb30 {
  margin-bottom: 30px; }

.mb40 {
  margin-bottom: 40px; }

.mb50 {
  margin-bottom: 50px; }

.mt10 {
  margin-top: 10px; }

.mt20 {
  margin-top: 20px; }

.mt30 {
  margin-top: 30px; }

.mt40 {
  margin-top: 40px; }

.mt50 {
  margin-top: 50px; }

.ml10 {
  margin-left: 10px; }

.ml20 {
  margin-left: 20px; }

.ml30 {
  margin-left: 30px; }

.ml40 {
  margin-left: 40px; }

.ml50 {
  margin-left: 50px; }

.mr10 {
  margin-right: 10px; }

.mr20 {
  margin-right: 20px; }

.mr30 {
  margin-right: 30px; }

.mr40 {
  margin-right: 40px; }

.mr50 {
  margin-right: 50px; }

/** text **/
.tcenter {
  text-align: center; }

.tright {
  text-align: right; }

.tleft {
  text-align: left; }

/** clear **/
.clear {
  clear: both; }

.sp {
  display: block; }
  @media screen and (min-width: 768px) {
    .sp {
      display: none; } }

.tab {
  display: none; }
  @media screen and (min-width: 768px) {
    .tab {
      display: block; } }
  @media screen and (min-width: 1025px) {
    .tab {
      display: none; } }

.pc {
  display: none; }
  @media screen and (min-width: 768px) {
    .pc {
      display: none; } }
  @media screen and (min-width: 1025px) {
    .pc {
      display: block; } }

.tabpc {
  display: none; }
  @media screen and (min-width: 768px) {
    .tabpc {
      display: block; } }

.inner {
  padding: 0 20px; }
  @media screen and (min-width: 768px) {
    .inner {
      padding: 0 40px; } }
  @media screen and (min-width: 1025px) {
    .inner {
      padding: 0 5%; } }

.flb_sb {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.flb_ct, .loading {
  display: flex;
  justify-content: center; }

.flb_st, .company dl {
  display: flex;
  justify-content: flex-start; }

.flb_ed {
  display: flex;
  justify-content: flex-end; }

.fadeIn {
  opacity: 0;
  transition: 3s; }
  .fadeIn.is-show {
    opacity: 1; }

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50px);
  transition: 2s; }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_left {
  opacity: 0;
  transform: translate(-50px, 0);
  transition: 2s; }
  .fadeIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_right {
  opacity: 0;
  transform: translate(50px, 0);
  transition: 2s; }
  .fadeIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1; }

@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeout {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    z-index: -1; } }
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1); }
  50%, 70% {
    transform: scale(0.95); } }
@keyframes tocenter {
  0% {
    transform: translateX(-250%); }
  100% {
    transform: translateX(0); } }
@keyframes toright {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(250%); } }
@keyframes move {
  50% {
    border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%; }
  75% {
    border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%; } }
@keyframes wave {
  0% {
    transform: translate(0); }
  100% {
    transform: translate(-66.66%); } }
body {
  background: #fff;
  line-height: 1.8em;
  font-size: 15px;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  color: #222;
  -webkit-text-size-adjust: 100%; }
  @media screen and (min-width: 768px) {
    body {
      font-size: 16px; } }
  @media screen and (min-width: 1025px) {
    body {
      font-size: 17px; } }

* {
  box-sizing: border-box; }

img {
  max-width: 100%;
  height: auto; }

/* ローディング */
.loading {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  align-items: center;
  overflow: hidden;
  z-index: 999; }
  .loading.fadeout {
    animation: fadeout 1s ease-out forwards; }
  .loading .logo {
    display: block;
    width: min(70%, 400px);
    animation: tocenter .7s ease-out forwards; }
    .loading .logo.poyo {
      animation: poyopoyo 2s ease-out forwards; }
    .loading .logo.toright {
      animation: toright .7s ease-out forwards; }

/* ティザーサイト */
.circle, .teaser::before, .mv::after {
  background: linear-gradient(90deg, #cfeaf9, #00c6ff);
  border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
  animation: move 10s linear infinite; }

.teaser {
  height: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 100px; }
  .teaser::before {
    content: "";
    display: block;
    width: 80%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: -7%;
    right: -10%; }
    @media screen and (min-width: 768px) {
      .teaser::before {
        width: 70%;
        top: -10%; } }
    @media screen and (min-width: 1025px) {
      .teaser::before {
        width: 50%;
        top: -20%;
        right: -10%; } }

/* ヘッダー */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 10px; }
  header h1 {
    width: 110px; }
    @media screen and (min-width: 768px) {
      header h1 {
        width: 120px; } }
    @media screen and (min-width: 1025px) {
      header h1 {
        width: 150px; } }

/* フッター */
footer {
  background: linear-gradient(#cfeaf9, #00c6ff);
  padding: 30px 0;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center; }
  @media screen and (min-width: 768px) {
    footer {
      padding: 50px 0; } }
  footer p {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em; }
    @media screen and (min-width: 768px) {
      footer p {
        font-size: 13px; } }

/* コンテンツ */
.mv {
  position: relative;
  padding-left: 10px;
  padding-top: 140px;
  padding-bottom: 70px; }
  @media screen and (min-width: 768px) {
    .mv {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0; } }
  @media screen and (min-width: 1025px) {
    .mv {
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 50px; } }
  .mv::after {
    content: "";
    display: block;
    width: 40%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 90%;
    left: -10%;
    z-index: -1;
    background: linear-gradient(70deg, #00c6ff, #cfeaf9);
    opacity: .6; }
    @media screen and (min-width: 1025px) {
      .mv::after {
        width: 30%;
        top: 70%; } }
  .mv .img {
    position: absolute;
    display: block;
    width: 40%;
    top: 10px;
    right: 10px; }
    @media screen and (min-width: 768px) {
      .mv .img {
        position: relative;
        top: auto;
        right: auto;
        width: 28%; } }
  @media screen and (min-width: 768px) {
    .mv .txt {
      width: 70%; } }
  .mv h2, .mv h3 {
    font-weight: 600;
    line-height: 1.8em;
    font-size: 16px;
    letter-spacing: 0.08em; }
    @media screen and (min-width: 768px) {
      .mv h2, .mv h3 {
        font-size: 20px; } }
    @media screen and (min-width: 1025px) {
      .mv h2, .mv h3 {
        font-size: min(2vw, 24px);
        line-height: 2em; } }
  .mv h2 {
    padding-bottom: 10px; }
    @media screen and (min-width: 768px) {
      .mv h2 {
        padding-bottom: 0; } }

.ttl {
  padding-left: 30px;
  position: relative;
  font-size: 26px;
  letter-spacing: 0.08em;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    .ttl {
      font-size: 30px;
      margin-bottom: 30px; } }
  @media screen and (min-width: 1025px) {
    .ttl {
      font-size: 34px; } }
  .ttl::before, .ttl::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 22%; }
  .ttl::before {
    left: 0;
    background: #0a8b54; }
  .ttl::after {
    left: 10px;
    background: #8dc21f; }

.company {
  position: relative;
  padding-bottom: 100px; }
  @media screen and (min-width: 768px) {
    .company {
      padding-bottom: 150px; } }
  @media screen and (min-width: 1025px) {
    .company {
      padding-bottom: 200px; } }
  .company dl {
    flex-wrap: wrap; }
    .company dl dt, .company dl dd {
      display: block;
      letter-spacing: 0.06em;
      padding: 10px 0; }
      @media screen and (min-width: 1025px) {
        .company dl dt, .company dl dd {
          padding: 12px 0; } }
    .company dl dt {
      font-weight: 600;
      width: 80px;
      border-bottom: #0a8b54 1px solid;
      margin-right: 10px; }
      @media screen and (min-width: 768px) {
        .company dl dt {
          width: 100px; } }
    .company dl dd {
      width: calc(100% - 90px);
      border-bottom: #8dc21f 1px solid; }
      @media screen and (min-width: 768px) {
        .company dl dd {
          width: calc(100% - 110px); } }
      @media screen and (min-width: 1025px) {
        .company dl dd {
          width: calc(50% - 120px);
          margin-right: 10px; } }
      .company dl dd ul {
        margin: 0;
        list-style: none;
        padding: 0; }