/* ==========================================================================
   Foundation
   ========================================================================== */
/* Color
   ========================================================================== */
/* Weight
   ========================================================================== */
/* header
   ========================================================================== */
/* Font Size
   ========================================================================== */
/* Media Queries
   ========================================================================== */
/**
   * Breakpoints2
   */
:root {
  --is-tablet: false;
  --is-mobile: false;
}
@media (max-width: 960px) {
  :root {
    --is-tablet: true;
  }
}
@media (max-width: 640px) {
  :root {
    --is-mobile: true;
  }
}

/* Project
   ----------------------------------------------------------------- */
.splide__track {
  overflow: visible;
}

.splide-controller {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1rem;
  width: max-content;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  position: relative;
}

.splide__arrows {
  width: 100%;
  height: 1rem;
  padding: 0 1rem;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
}
.splide__arrows .splide__arrow {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.splide__arrows .splide__arrow svg {
  width: 100%;
  height: 100%;
  fill: #8ab027;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.splide__arrows .splide__arrow--prev {
  left: -1rem;
}
.splide__arrows .splide__arrow--prev svg {
  rotate: 180deg;
}
.splide__arrows .splide__arrow--next {
  right: -1rem;
}

.splide__pagination {
  gap: 0.6rem;
}
.splide__pagination li {
  width: 0.6rem;
  height: 0.6rem;
  position: relative;
  z-index: 2;
}
.splide__pagination li button {
  width: 100%;
  height: 100%;
  background: #ebebeb;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.splide__pagination li button.is-active {
  background: #8ab027;
}

.splide__toggle {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #8ab027;
  position: relative;
  z-index: 10;
}
.splide__toggle svg {
  width: 60%;
  fill: #8ab027;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.operate_screen .splide__arrows .splide__arrow svg {
  fill: rgb(55.2, 70.4, 15.6);
}
.operate_screen .splide__pagination li button {
  background: #fff;
}
.operate_screen .splide__pagination li button.is-active {
  background: rgb(55.2, 70.4, 15.6);
}
.operate_screen .splide__toggle {
  border: 1px solid rgb(55.2, 70.4, 15.6);
}
.operate_screen .splide__toggle svg {
  fill: rgb(55.2, 70.4, 15.6);
}

@media screen and (min-width: 961px) {
  .p-inpage {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 654px) and (max-width: 1343px) {
  .p-inpage {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 961px) {
  .p-inpage .c-inpage_link {
    font-size: clamp(1rem, 0.9147727273rem + 0.4261363636vw, 1.1875rem);
  }
}

.tab-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 3rem 0;
}

.tab_item:first-of-type .tab_item-btn {
  border-radius: 5px 0 0 0;
  border-left: 1px solid rgb(211.5, 211.5, 211.5);
}
.tab_item:last-of-type .tab_item-btn {
  border-radius: 0 5px 0 0;
}
.tab_item .tab_item-btn {
  display: grid;
  place-content: center;
  place-items: center;
  padding: 1rem;
  background: #efefef;
  border: 1px solid rgb(211.5, 211.5, 211.5);
  border-left: 0;
  border-bottom: 1px solid #8ab027;
  color: #5e5e5e;
  font-weight: 700;
  height: 100%;
}
.tab_item .tab_item-btn.is-active {
  background: #fff;
  border: 1px solid #8ab027;
  border-bottom: 0;
  color: #8ab027;
}

.function {
  padding: 0 0 4rem;
  margin-top: 4rem;
}
.function .function_container {
  margin: 3rem 0 0;
}
@media screen and (max-width: 640px) {
  .function .function_container.--pc {
    display: none;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .function .function_container.--pc {
    display: none;
  }
}
@media screen and (min-width: 961px) {
  .function .function_container.--sp {
    display: none;
  }
}
.function .function_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}
@media screen and (max-width: 640px) {
  .function .function_list {
    gap: 1rem;
  }
}
.function .function_item {
  padding: 1rem 1.5rem;
  background: rgb(249.7174418605, 252.3244186047, 242.9255813953);
  border: 1px solid #8ab027;
  border-radius: 17px;
}
.function .function_item .function_item-title {
  margin: 0 0 0.5rem;
  color: #8ab027;
  font-weight: 700;
  font-size: 20px;
}
.function .function_details .function_details-item {
  border: 1px solid #8ab027;
  border-radius: 16px;
}
.function .function_details .function_details-item:not(:last-of-type) {
  margin: 0 0 1rem;
}
.function .function_details .function_details-menu {
  display: grid;
  grid-template-columns: 1fr max-content;
  width: 100%;
  padding: 1rem;
  color: rgb(55.2, 70.4, 15.6);
  font-weight: 700;
  font-size: 18px;
  align-items: center;
}
.function .function_details .function_details-wrap {
  height: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.function .function_details .function_details-block {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: #fbfbfb;
}
.function .function_details .function_details-box {
  display: grid;
  gap: 0.1rem;
}
.function .function_details .function_details-box:not(:last-of-type) {
  padding: 0 0 1rem;
  border-bottom: 1px solid #8ab027;
}
.function .function_details .function_details-title {
  color: #8ab027;
  font-weight: 700;
  font-size: 16px;
}
.function .function_details .function_details-close {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 1rem;
  font-weight: 700;
  color: #333;
}
.function .function_details svg {
  transition: rotate 0.4s ease-in-out;
}
.function .function_details .is-active svg {
  rotate: 135deg;
}

.flow {
  display: grid;
  margin: 3rem auto 8rem;
}
@media screen and (max-width: 640px) {
  .flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 480px;
    margin: 3rem auto 2.5rem;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 560px;
  }
}
@media screen and (min-width: 961px) {
  .flow {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 2rem;
  }
}
.flow .flow_item {
  display: grid;
  place-items: center;
  grid-row: span 3;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  aspect-ratio: 1/1;
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 640px) {
  .flow .flow_item {
    padding: 0.6rem;
    border: 3px solid #8ab027;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .flow .flow_item {
    padding: 1.5rem;
    border: 4px solid #8ab027;
  }
}
@media screen and (min-width: 961px) {
  .flow .flow_item {
    padding: 6%;
    border: 5px solid #8ab027;
  }
}
.flow .flow_item:not(:first-of-type)::before {
  content: "";
  display: inline-block;
  background: #8ab027;
  clip-path: polygon(30% 0, 70% 50%, 70% 50%, 30% 100%);
  position: absolute;
}
@media screen and (max-width: 640px) {
  .flow .flow_item:not(:first-of-type)::before {
    width: 1rem;
    height: 1rem;
    left: calc(-1rem - 3px);
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .flow .flow_item:not(:first-of-type)::before {
    width: 1.5rem;
    height: 1.5rem;
    left: calc(-1.5rem - 4px);
  }
}
@media screen and (min-width: 961px) {
  .flow .flow_item:not(:first-of-type)::before {
    width: 2rem;
    height: 2rem;
    left: calc(-2rem - 5px);
  }
}
.flow .flow_item.is-active {
  opacity: 0.7;
  box-shadow: 0 0 10px #457753;
}
.flow .flow_num {
  display: inline-block;
  text-align: center;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(1rem, 0.8181818182rem + 0.9090909091vw, 1.5rem);
}
.flow .flow_num small {
  display: block;
  font-size: 50%;
}
.flow .flow_icon {
  display: grid;
  margin: 0.2rem 0;
}
@media screen and (max-width: 640px) {
  .flow .flow_icon {
    margin-top: 0;
  }
}
@media screen and (max-width: 640px) {
  .flow .flow_icon img {
    max-height: 8vw;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .flow .flow_icon img {
    max-height: 8vw;
  }
}
@media screen and (min-width: 961px) {
  .flow .flow_icon img {
    height: 2.5vw;
  }
}
.flow .flow_label {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.875rem, -1.135460251rem + 3.3472803347vw, 1.375rem);
}
@media screen and (max-width: 640px) {
  .flow .flow_label {
    font-size: 10px;
  }
}

.operate {
  padding: 4rem 0;
}
.operate .c-inner {
  overflow: hidden;
}
.operate .operate_details .operate_details-item {
  display: grid;
  place-items: start;
  height: 100%;
  padding: 6%;
  background: #fff;
  box-shadow: 0 0 8px rgba(235, 235, 235, 0.7);
  border-radius: 13px;
  position: relative;
}
@media screen and (max-width: 640px) {
  .operate .operate_details .operate_details-item {
    grid-template-rows: max-content max-content max-content 1fr;
    grid-template-areas: "image" "title" "text" "tag" "btn";
    padding: 2.4rem 1.6rem;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .operate .operate_details .operate_details-item {
    grid-template-rows: max-content max-content max-content 1fr;
    grid-template-areas: "image" "title" "text" "tag" "btn";
    padding: 2.4rem;
  }
}
@media screen and (min-width: 961px) {
  .operate .operate_details .operate_details-item {
    grid-template-columns: 60% 40%;
    grid-template-rows: max-content max-content 1fr;
    grid-template-areas: "title image" "text image" "tag tag" "btn btn";
  }
}
.operate .operate_details .splide__track {
  overflow: inherit;
}
@media screen and (max-width: 640px) {
  .operate .operate_details .splide__list {
    align-items: flex-start;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .operate .operate_details .splide__list {
    align-items: flex-start;
  }
}
.operate .operate_num {
  display: grid;
  place-content: center;
  place-items: center;
  height: auto;
  background: #8ab027;
  border-radius: 50%;
  aspect-ratio: 1/1;
  color: #fff;
  text-align: center;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(1.125rem, 0.7159090909rem + 2.0454545455vw, 2.25rem);
  position: absolute;
}
@media screen and (max-width: 640px) {
  .operate .operate_num {
    width: 4rem;
    top: -0.5rem;
    left: -0.5rem;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .operate .operate_num {
    width: 5rem;
    top: -1.5rem;
    left: -1.5rem;
  }
}
@media screen and (min-width: 961px) {
  .operate .operate_num {
    width: 8%;
    top: -2%;
    left: -2%;
    font-size: clamp(1.5rem, -1.5156903766rem + 5.0209205021vw, 2.25rem);
  }
}
.operate .operate_num .operate_num-small {
  display: block;
  font-size: clamp(0.75rem, 0.7045454545rem + 0.2272727273vw, 0.875rem);
}
@media screen and (min-width: 961px) {
  .operate .operate_num .operate_num-small {
    font-size: clamp(0.625rem, -0.3802301255rem + 1.6736401674vw, 0.875rem);
  }
}
.operate .operate_title {
  display: grid;
  gap: 0.5rem;
  grid-area: title;
  margin: 0 0 1rem;
  font-weight: 700;
}
.operate .operate_title .operate_title-main {
  font-size: clamp(1.125rem, 0.7159090909rem + 2.0454545455vw, 2.25rem);
}
.operate .operate_title .operate_title-sub {
  font-size: clamp(1rem, 0.9090909091rem + 0.4545454545vw, 1.25rem);
}
.operate .operate_text {
  grid-area: text;
  margin-bottom: 1rem;
}
.operate .operate_tag {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  grid-area: tag;
  gap: 0.5rem;
  margin: auto 0;
}
.operate .operate_tag .operate_tag-item {
  padding: 0.3rem 2rem;
  background: rgb(249.7174418605, 252.3244186047, 242.9255813953);
  border: 1px solid #8ab027;
  border-radius: 6px;
  color: #8ab027;
  font-weight: 700;
  font-size: 14px;
}
@media screen and (max-width: 640px) {
  .operate .operate_tag .operate_tag-item {
    font-size: clamp(0.6875rem, 0.4221698113rem + 1.1320754717vw, 0.875rem);
    padding: 0.3rem 1rem;
  }
}
.operate .operate_image {
  grid-area: image;
}
@media screen and (max-width: 640px) {
  .operate .operate_image {
    justify-self: center;
  }
  .operate .operate_image img {
    width: 60vw;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .operate .operate_image {
    justify-self: center;
  }
  .operate .operate_image img {
    width: 50vw;
  }
}
.operate .operate_btn {
  grid-area: btn;
  width: 100%;
  margin: 2rem auto 0;
  max-width: fit-content;
}
.operate .operate_btn .operate_btn-link {
  grid-template-columns: 25px 1fr 25px;
  width: 100%;
  padding: 10px;
}
.operate .operate_btn .text {
  font-size: 15px;
}

.movie {
  padding: 4rem 0;
}
@media screen and (max-width: 640px) {
  .movie .movie_area {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}
@media print, screen and (min-width: 641px) and (max-width: 960px) {
  .movie .movie_area {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 961px) {
  .movie .movie_area {
    position: sticky;
    top: calc(var(--headerHeight) + 1rem);
  }
}
.movie .movie_area iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 1px solid #ebebeb;
}
.movie .movie_text {
  margin: 3rem 0;
  text-align: center;
}
.movie .movie_contents {
  display: grid;
  align-items: flex-start;
  gap: 2rem;
}
@media screen and (min-width: 961px) {
  .movie .movie_contents {
    grid-template-columns: 60% 1fr;
  }
}
.movie .movie_table .movie_table-item:not(:last-of-type) {
  margin: 0 0 1rem;
}
.movie .movie_table .movie_table-menu {
  display: grid;
  grid-template-columns: 1fr max-content;
  width: 100%;
  font-weight: 700;
  border: 1px solid #8ab027;
  border-radius: 16px;
  padding: 1rem;
  align-items: center;
  color: #333;
}
.movie .movie_table .movie_table-block {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 0.5rem 1rem;
  height: 0;
  overflow: hidden;
}
.movie .movie_table .movie_table-box {
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  grid-column: span 3;
}
.movie .movie_table .movie_table-box:not(:last-of-type) {
  padding: 0 0 0.5rem;
  border-bottom: 1px solid #ebebeb;
}
.movie .movie_table .movie_table-box:first-of-type {
  margin: 1rem 0 0;
}
.movie .movie_table .num {
  display: grid;
  place-content: center;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #8ab027;
  border-radius: 50%;
  color: #fff;
}
.movie .movie_table .link {
  display: inline-block;
  color: #1863A5;
  text-decoration: underline;
}
.movie .movie_table .time {
  text-align: right;
  font-size: 12px;
}
.movie .movie_table svg {
  transition: rotate 0.4s ease-in-out;
}
.movie .movie_table .is-active svg {
  rotate: 135deg;
}

.pNone {
  margin-bottom: 1rem;
}

.app {
  margin-bottom: 5rem;
}

.apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "imgSp imgText" "imgSp text" "imgExposition imgExposition";
  row-gap: 1rem;
  place-content: center;
  place-items: center;
  margin-bottom: 3rem;
  column-gap: 1rem;
}

.apps_img-sp {
  grid-area: imgSp;
}

.apps_img-text {
  grid-area: imgText;
}

.apps_text {
  grid-area: text;
}

.apps_img-exposition {
  grid-area: imgExposition;
}

.app-download-wrap {
  text-align: center;
  display: grid;
  row-gap: 0.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #fff;
}
@media screen and (max-width: 640px) {
  table tbody {
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 640px) {
  table tr {
    display: block;
  }
}
table th {
  text-align: left;
  background: #9bbe47;
  color: #fff;
  padding: 1em;
  border: 2px solid #fff;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  table th {
    border-width: 0 0 1px;
    vertical-align: top;
  }
}
table td {
  text-align: left;
  padding: 1em;
  border-bottom: 2px solid #fff;
  background: #f5f6f2;
}
table td .blank {
  color: rgb(82.8, 105.6, 23.4);
  position: relative;
}
table td .blank::after {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='511.626px' height='511.627px' viewBox='0 0 511.626 511.627' style='enable-background:new 0 0 511.626 511.627;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%233e4f11' d='M392.857,292.354h-18.274c-2.669,0-4.859,0.855-6.563,2.573c-1.718,1.708-2.573,3.897-2.573,6.563v91.361 c0,12.563-4.47,23.315-13.415,32.262c-8.945,8.945-19.701,13.414-32.264,13.414H82.224c-12.562,0-23.317-4.469-32.264-13.414 c-8.945-8.946-13.417-19.698-13.417-32.262V155.31c0-12.562,4.471-23.313,13.417-32.259c8.947-8.947,19.702-13.418,32.264-13.418 h200.994c2.669,0,4.859-0.859,6.57-2.57c1.711-1.713,2.566-3.9,2.566-6.567V82.221c0-2.662-0.855-4.853-2.566-6.563 c-1.711-1.713-3.901-2.568-6.57-2.568H82.224c-22.648,0-42.016,8.042-58.102,24.125C8.042,113.297,0,132.665,0,155.313v237.542 c0,22.647,8.042,42.018,24.123,58.095c16.086,16.084,35.454,24.13,58.102,24.13h237.543c22.647,0,42.017-8.046,58.101-24.13 c16.085-16.077,24.127-35.447,24.127-58.095v-91.358c0-2.669-0.856-4.859-2.574-6.57 C397.709,293.209,395.519,292.354,392.857,292.354z'/%3E%3Cpath fill='%233e4f11' d='M506.199,41.971c-3.617-3.617-7.905-5.424-12.85-5.424H347.171c-4.948,0-9.233,1.807-12.847,5.424 c-3.617,3.615-5.428,7.898-5.428,12.847s1.811,9.233,5.428,12.85l50.247,50.248L198.424,304.067 c-1.906,1.903-2.856,4.093-2.856,6.563c0,2.479,0.953,4.668,2.856,6.571l32.548,32.544c1.903,1.903,4.093,2.852,6.567,2.852 s4.665-0.948,6.567-2.852l186.148-186.148l50.251,50.248c3.614,3.617,7.898,5.426,12.847,5.426s9.233-1.809,12.851-5.426 c3.617-3.616,5.424-7.898,5.424-12.847V54.818C511.626,49.866,509.813,45.586,506.199,41.971z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  color: #146ba9;
  padding-left: 1.5em;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.5s ease 0s;
}
@media screen and (max-width: 640px) {
  table th, table td {
    display: block;
    width: 100%;
    font-size: clamp(0.75rem, 0.6590909091rem + 0.4545454545vw, 1rem);
    height: 280px;
    max-height: 100%;
  }
}
table th a, table td a {
  transition: color 0.3s ease-in-out;
}
table th a::after, table td a::after {
  transition: color 0.3s ease-in-out;
}
@media (any-hover: hover) {
  table th a:hover, table td a:hover {
    color: #8ab027;
  }
  table th a:hover::after, table td a:hover::after {
    color: #8ab027;
  }
}
table strong {
  font-weight: 700;
  color: rgb(82.8, 105.6, 23.4);
}

/*# sourceMappingURL=product.css.map */