@charset "UTF-8";
/*
@use "function" as *;
@use "reset";
@use "common";
@use "header";
@use "footer";
*/
/* CSS Document */
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

body {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

/* all */
h1, h2, h3, h4, h5, p, dt, dd, li, th, td, address, strong, em, table, dl, ul, ol, img,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  padding: 0;
  margin: 0;
  background: transparent;
}

/* font */
h1, h2, h3, h4, h5, p, dt, dd, li, th, td, a, address, strong, em, form, input, textarea, select, submit,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  color: inherit;
  line-height: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* indivisual */
a {
  border: none;
  color: inherit;
  text-decoration: none;
  word-wrap: break-word;
}

a:hover {
  text-decoration: underline;
}

address, em {
  font-style: normal;
}

ul, ol {
  list-style: none none outside;
}

img {
  display: block;
  border: none;
}

body {
  color: #231815;
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: justify;
  background: #FAFAFA;
  position: relative;
}

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

.check {
  pointer-events: none;
}
.check::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.check::after {
  content: "";
  display: block;
  color: #fff;
  padding: 0.25em;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateY(-100%);
}

.cm_link {
  display: block;
  width: 48.9166666667rem;
  height: 6.9166666667rem;
  color: #94D2DB;
  margin: 6rem auto 0;
  background: #FFF;
  border-radius: 0.5rem;
  filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, 0.15));
  position: relative;
  transition: 0.5s;
}
@media only screen and (max-width: 999px) {
  .cm_link {
    width: calc(100vw - 4rem);
    height: 5rem;
    margin: 5rem auto 0;
  }
}
.cm_link:hover {
  color: #FFF;
  background: #94D2DB;
}
.cm_link:hover::after {
  background: url("../img/arw-w.svg") center/contain no-repeat;
}
.cm_link span {
  display: block;
  width: 100%;
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1.25rem;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media only screen and (max-width: 999px) {
  .cm_link span {
    font-size: 1rem;
    letter-spacing: 0;
  }
}
.cm_link::after {
  content: "";
  width: 0.6666666667rem;
  height: 1.3333333333rem;
  background: url("../img/arw.svg") center/contain no-repeat;
  position: absolute;
  top: 50%;
  right: 2.1666666667rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  .cm_link::after {
    height: 1rem;
    right: 1.25rem;
  }
}

.cm_link2 {
  display: block;
  width: 12.5rem;
  height: 4.1666666667rem;
  margin: 0 auto 0;
  background: #94D2DB;
  border-radius: 0.5rem;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
  position: relative;
}
.cm_link2 img {
  height: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.post > *:first-child {
  margin-top: 0 !important;
}
.post h1 {
  font-size: 2em;
  letter-spacing: 0.4em;
  line-height: 1.5;
}
.post h2 {
  font-size: 1.75em;
  letter-spacing: 0.4em;
  line-height: 1.5;
}
.post h3 {
  font-size: 1.5em;
  letter-spacing: 0.4em;
  line-height: 1.5;
}
.post h4 {
  font-size: 1.25em;
  letter-spacing: 0.4em;
  line-height: 1.5;
}
.post h5 {
  letter-spacing: 0.4em;
  line-height: 1.5;
}
.post p {
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-align: justify;
}
.post ol,
.post ul {
  padding-left: 1.25em;
  margin: 2em 0 0 0.25em;
  list-style: disc none;
}
.post ol li,
.post ul li {
  font-weight: 400;
  line-height: 1.75;
  margin: 1.625em 0 -0.375em;
}
.post ol li:first-child,
.post ul li:first-child {
  margin-top: -0.375em;
}
.post ol {
  margin: 2em 0 0 0.5em;
  list-style: decimal none;
}
.post img {
  margin: 2em 0 0;
}

.subPage header .menu div {
  background: #ccc;
}

header {
  position: relative;
}
header nav {
  width: 25vw;
  height: 100vh;
  padding: 10.3333333333rem 3rem;
  background: rgba(148, 210, 219, 0.9);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  transition: 0.25s;
  transition: 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(-100%);
  visibility: hidden;
}
header nav.show {
  transform: translateX(0);
  visibility: visible;
}
header nav ul li {
  margin: 0 0 2.5rem;
}
header nav ul li:last-child {
  margin: 0;
}
header nav ul li a {
  display: block;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  white-space: nowrap;
}
@media only screen and (max-width: 999px) {
  header nav {
    width: 100%;
    padding: 6.6666666667rem 2rem;
  }
}
header .menu {
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  position: fixed;
  left: 2.8333333333rem;
  top: 3.8333333333rem;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}
@media only screen and (max-width: 999px) {
  header .menu {
    left: 2rem;
    top: 3rem;
  }
}
header .menu div {
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #FFF;
  transition: 0.25s;
  /*
  -webkit-transition: 0.5s;
  transition: 0.5s;
  */
}
header .menu .bar {
  top: calc(50% - 0.75rem);
}
header .menu .bar2 {
  top: calc(50% - 1px);
}
header .menu .bar3 {
  bottom: calc(50% - 0.75rem);
}
header .menu.open div {
  background: #FFF;
}
header .menu.open .bar {
  top: calc(50% - 1px);
  transform: rotate(330deg);
}
header .menu.open .bar2 {
  display: none;
}
header .menu.open .bar3 {
  bottom: calc(50% - 1px);
  transform: rotate(-330deg);
}

footer {
  padding: 2.3333333333rem 0;
}
@media only screen and (max-width: 999px) {
  footer {
    padding: 2.3333333333rem 0 7rem;
  }
}
footer p {
  color: #878787;
  font-size: 1.0833333333rem;
  letter-spacing: 0.1em;
  text-align: center;
}
@media only screen and (max-width: 999px) {
  footer p {
    font-size: 1rem;
  }
}
footer p strong {
  font-size: 1.5rem;
}
@media only screen and (max-width: 999px) {
  footer p strong {
    display: block;
    margin-top: 0.5em;
  }
}
@media only screen and (min-width: 1001px) {
  footer ul {
    display: flex;
    justify-content: center;
    gap: 0 2rem;
  }
}
footer ul li {
  margin: 1.5rem 0 0;
}
footer ul li a {
  display: block;
  width: 26.1666666667rem;
  height: 4.1666666667rem;
  background: #878787;
  border-radius: 0.4166666667rem;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
  position: relative;
}
@media only screen and (max-width: 999px) {
  footer ul li a {
    width: calc(100% - 4rem);
    height: calc(0.1592356688 * (100vw - 4rem));
    margin: 0 auto;
  }
}
footer ul li a img {
  height: 1.9166666667rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
footer ul li a img.mail {
  width: calc(100% - 4rem);
  height: auto;
}

.en {
  display: block;
  font-family: Century Gothic, "Questrial", sans-serif;
}

.jp {
  display: block;
}

@media only screen and (min-width: 1001px) {
  .flex {
    display: flex;
    flex-wrap: nowrap;
  }
}

.slideUp {
  transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(1.5em);
  opacity: 0;
}
.slideUp.motion.play {
  transform: translateY(0);
  opacity: 1;
}

.slideUp2 {
  opacity: 0;
}
.slideUp2.motion.play {
  -webkit-animation: animeSlideUp 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: animeSlideUp 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes animeSlideUp {
  0% {
    top: 1.5em;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes animeSlideUp {
  0% {
    top: 1.5em;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.slideLeft {
  transition: 1s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
@media only screen and (min-width: 1001px) {
  .slideLeft {
    transform: translateX(1em) translateY(0);
  }
}
@media only screen and (max-width: 999px) {
  .slideLeft {
    transform: translateX(0) translateY(1.5em);
  }
}
.slideLeft.motion.play {
  transform: translateX(0) translateY(0);
  opacity: 1;
}

.st {
  width: 44rem;
  height: 9.25rem;
  margin: 0 auto;
  position: relative;
  mix-blend-mode: overlay;
}
@media only screen and (max-width: 999px) {
  .st {
    width: 90vw;
    height: 18.9204545455vw;
    padding: 0 0 3rem;
    margin: 0 auto 3rem;
  }
}
.st.play svg path {
  opacity: 1;
}
.st svg {
  height: 9.25rem;
  margin: 0 auto;
}
@media only screen and (max-width: 999px) {
  .st svg {
    height: 18.9204545455vw;
  }
}
.st svg path {
  fill: #94D2DB;
  transition: 0.375s;
  opacity: 0;
}
.st svg path.num1 {
  transition-delay: 0.0625s;
}
.st svg path.num2 {
  transition-delay: 0.125s;
}
.st svg path.num3 {
  transition-delay: 0.1875s;
}
.st svg path.num4 {
  transition-delay: 0.25s;
}
.st svg path.num5 {
  transition-delay: 0.3125s;
}
.st svg path.num6 {
  transition-delay: 0.375s;
}
.st svg path.num7 {
  transition-delay: 0.4375s;
}
.st svg path.num8 {
  transition-delay: 0.5s;
}
.st svg path.num9 {
  transition-delay: 0.5625s;
}
.st svg path.num10 {
  transition-delay: 0.625s;
}
.st svg path.num11 {
  transition-delay: 0.6875s;
}
.st svg path.num12 {
  transition-delay: 0.75s;
}
.st svg path.num13 {
  transition-delay: 0.8125s;
}
.st svg path.num14 {
  transition-delay: 0.875s;
}
.st svg path.num15 {
  transition-delay: 0.9375s;
}
.st svg path.num16 {
  transition-delay: 1s;
}
.st svg path.num17 {
  transition-delay: 1.0625s;
}
.st svg path.num18 {
  transition-delay: 1.125s;
}
.st svg path.num19 {
  transition-delay: 1.1875s;
}
.st svg path.num20 {
  transition-delay: 1.25s;
}
.st svg path.num21 {
  transition-delay: 1.3125s;
}
.st svg path.num22 {
  transition-delay: 1.375s;
}
.st svg path.num23 {
  transition-delay: 1.4375s;
}
.st svg path.num24 {
  transition-delay: 1.5s;
}
.st svg path.num25 {
  transition-delay: 1.5625s;
}
.st svg path.num26 {
  transition-delay: 1.625s;
}
.st svg path.num27 {
  transition-delay: 1.6875s;
}
.st svg path.num28 {
  transition-delay: 1.75s;
}
.st svg path.num29 {
  transition-delay: 1.8125s;
}
.st svg path.num30 {
  transition-delay: 1.875s;
}
.st .wave {
  width: 8.5rem;
  height: 8.5rem;
  -webkit-clip-path: polygon(50% 50%, 0% 25%, 0% 75%);
          clip-path: polygon(50% 50%, 0% 25%, 0% 75%);
  position: absolute;
  bottom: 1.4701333333rem;
  left: 0;
  transform: translateY(50%);
}
@media only screen and (max-width: 999px) {
  .st .wave {
    width: 17.3863636364vw;
    height: 17.3863636364vw;
    bottom: 3.0070909091vw;
  }
}
.st .wave.right {
  left: auto;
  right: 0;
  transform: translateY(50%) rotate(180deg);
}
.st .wave .line {
  width: 0rem;
  height: 0rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  border: 4px solid #94D2DB;
  transform-origin: center;
  transform: translateY(-50%);
  opacity: 0;
}
@media only screen and (min-width: 1001px) {
  .st .wave .line {
    -webkit-animation: waveCircle 4s linear 0s infinite normal;
            animation: waveCircle 4s linear 0s infinite normal;
  }
}
@media only screen and (max-width: 999px) {
  .st .wave .line {
    border-width: 2px;
    -webkit-animation: waveCircle_sp 4s linear 0s infinite normal;
            animation: waveCircle_sp 4s linear 0s infinite normal;
  }
}
.st .wave .line:nth-child(1) {
  -webkit-animation-delay: 0.625s;
          animation-delay: 0.625s;
}
.st .wave .line:nth-child(2) {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.st .wave .line:nth-child(3) {
  -webkit-animation-delay: 1.875s;
          animation-delay: 1.875s;
}
.st .wave .line:nth-child(4) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.st .wave .line:nth-child(5) {
  -webkit-animation-delay: 3.125s;
          animation-delay: 3.125s;
}
@-webkit-keyframes waveCircle {
  0% {
    width: 0rem;
    height: 0rem;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    width: 8.5rem;
    height: 8.5rem;
    opacity: 0;
  }
}
@keyframes waveCircle {
  0% {
    width: 0rem;
    height: 0rem;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    width: 8.5rem;
    height: 8.5rem;
    opacity: 0;
  }
}
@-webkit-keyframes waveCircle_sp {
  0% {
    width: 0rem;
    height: 0rem;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    width: 17.3863636364vw;
    height: 17.3863636364vw;
    opacity: 0;
  }
}
@keyframes waveCircle_sp {
  0% {
    width: 0rem;
    height: 0rem;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    width: 17.3863636364vw;
    height: 17.3863636364vw;
    opacity: 0;
  }
}

@media only screen and (min-width: 1001px) {
  .userList ul {
    width: 100%;
    display: flex;
    gap: 0 1rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}
.userList ul li {
  background: #f5f6f6;
}
@media only screen and (min-width: 1001px) {
  .userList ul li {
    width: calc((100% - 2rem) / 3);
    margin: 2.6666666667rem auto 0;
  }
  .userList ul li:nth-child(2) {
    transition-delay: 0.125s;
  }
  .userList ul li:nth-child(3) {
    transition-delay: 0.25s;
  }
}
.userList ul li a:hover {
  text-decoration: none;
}
.userList ul li a:hover .img::after {
  background: #9e9e9f;
  opacity: 0;
}
.userList ul li a:hover .wrap .link {
  background: #FFF;
}
.userList ul li a:hover .wrap .link span {
  color: #94d2db;
}
.userList ul li .img {
  width: 100%;
  aspect-ratio: 288/300;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 999px) {
  .userList ul li .img {
    width: 100%;
  }
}
.userList ul li .img::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: #9e9e9f;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.375s;
  opacity: 1;
}
@media only screen and (max-width: 999px) {
  .userList ul li .img::after {
    opacity: 0;
  }
}
.userList ul li .img .num {
  font-family: Century Gothic, "Questrial", sans-serif;
  font-weight: normal;
  font-size: 3.13rem;
  color: #fff;
  position: absolute;
  right: 0.4166666667rem;
  bottom: 0.6666666667rem;
  z-index: 2;
}
.userList ul li .wrap {
  width: 100%;
  padding: 3.3333333333vw 0;
}
@media only screen and (max-width: 999px) {
  .userList ul li .wrap {
    width: 100%;
    padding: 3.3333333333rem 0;
  }
}
.userList ul li .wrap dl dt {
  font-family: "Noto Serif JP", serif;
  font-size: 1.5325rem;
  letter-spacing: 0.38em;
  line-height: 2.6583333333rem;
  text-align: center;
  padding: 0 0;
}
@media only screen and (min-width: 1001px) {
  .userList ul li .wrap dl dt {
    font-size: min(1.5rem,1.5325vw);
  }
}
.userList ul li .wrap dl dd {
  font-family: "Noto Serif JP", serif;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  line-height: 2.3133333333rem;
  color: #231815;
  margin-top: 1.3333333333rem;
  padding: 0 1.5rem;
}
@media only screen and (min-width: 1001px) {
  .userList ul li .wrap dl dd {
    margin-top: 1vw;
    padding: 0 2.4166666667vw;
  }
}
.userList ul li .wrap .link {
  display: block;
  width: 12.5rem;
  height: 4.1666666667rem;
  border-radius: 0.4166666667rem;
  background: #94d2db;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  margin: 1.6666666667rem auto 0;
  position: relative;
  transition: 0.5s;
}
.userList ul li .wrap .link span {
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 1.0833333333rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media only screen and (min-width: 1001px) {
  .fix_btn {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
  }
  .fix_btn.fixed {
    position: fixed;
  }
}
.fix_btn .kurashimanet {
  display: block;
  transition: 0.5s 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 1001px) {
  .fix_btn .kurashimanet {
    width: 9.75vw;
    height: 9.75vw;
    position: absolute;
    bottom: 9.25vw;
    right: 7.7083333333vw;
    z-index: 4;
    transform: translateX(50%) translateY(12.5%);
  }
  .fix_btn .kurashimanet.show {
    transform: translateX(50%) translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .fix_btn .kurashimanet.fixed {
    position: fixed;
  }
  .fix_btn .kurashimanet:hover img {
    opacity: 0.6;
  }
  .fix_btn .kurashimanet img {
    width: 100%;
    max-width: unset;
    transition: 0.375s;
  }
}
@media only screen and (max-width: 999px) {
  .fix_btn .kurashimanet {
    width: 6.7692307692rem;
    position: fixed;
    right: 1.5rem;
    bottom: 1rem;
    z-index: 4;
    transform: translateY(12.5%);
  }
  .fix_btn .kurashimanet.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}
@media only screen and (min-width: 1001px) {
  .fix_btn .baloon {
    width: 9.75vw;
    height: 9.75vw;
    position: absolute;
    bottom: 0rem;
    right: 7.7083333333vw;
    z-index: 4;
    transform: translateX(50%) translateY(12.5%);
  }
}
@media only screen and (max-width: 999px) {
  .fix_btn .baloon {
    width: calc(100% - 11rem);
    height: 3rem;
    position: fixed;
    bottom: 3rem;
    left: 1.5rem;
    z-index: 4;
  }
}
.fix_btn .baloon.show a {
  transform: translateY(0%);
  opacity: 1;
}
.fix_btn .baloon.fixed {
  position: fixed;
}
.fix_btn .baloon a {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(100%);
  opacity: 0;
}
@media only screen and (min-width: 1001px) {
  .fix_btn .baloon a {
    border-radius: 50%;
  }
}
@media only screen and (max-width: 999px) {
  .fix_btn .baloon a {
    border-radius: 0.5em;
  }
}
.fix_btn .baloon a:hover::after {
  transform: translateX(-50%) translateY(-50%) scale(1);
}
.fix_btn .baloon a:hover div {
  transform: translateX(-50%) translateY(-50%) scale(1.25);
}
.fix_btn .baloon a:hover div svg {
  fill: #fff;
}
.fix_btn .baloon a:hover div span {
  color: #fff;
}
.fix_btn .baloon a::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #94D2DB;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(-50%) translateY(-50%) scale(0);
}
.fix_btn .baloon a div {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transition: 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(-50%) translateY(-50%) scale(1);
}
@media only screen and (max-width: 999px) {
  .fix_btn .baloon a div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
}
.fix_btn .baloon a svg {
  display: block;
  fill: #3eaebe;
  transition: 0.25s;
}
@media only screen and (min-width: 1001px) {
  .fix_btn .baloon a svg {
    width: 100%;
    height: 1.4166666667vw;
    margin: 0 auto 0.6666666667vw;
  }
}
@media only screen and (max-width: 999px) {
  .fix_btn .baloon a svg {
    height: 1.5rem;
  }
}
.fix_btn .baloon a span {
  display: block;
  color: #3eaebe;
  font-size: 0.65vw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  line-height: 1.8;
  margin: -0.4em 0;
  transition: 0.25s;
}
@media only screen and (min-width: 1001px) {
  .fix_btn .baloon a span {
    width: 100%;
  }
}
@media only screen and (max-width: 999px) {
  .fix_btn .baloon a span {
    font-size: 0.875rem;
    text-align: left;
    letter-spacing: 0.1em;
  }
}

#index:not(.subPage) .mainImage {
  height: 100vh;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index:not(.subPage) .mainImage {
    height: 100vw;
  }
}
#index:not(.subPage) .contents > div {
  padding: 12.5vw 0;
}
@media only screen and (max-width: 999px) {
  #index:not(.subPage) .contents > div {
    padding: 17.5vw 0;
  }
}
#index .mainImage {
  /*
  height: 100vh;
  //background: url("../img/bg.jpg") center / cover no-repeat fixed;
  position: relative;

  @include sp {
  	height: 100vw;
  }
  */
}
#index .mainImage .loader {
  display: flex;
  gap: 16px;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  visibility: visible;
}
#index .mainImage .loader.hide {
  opacity: 0;
  visibility: hidden;
}
#index .mainImage .loader div {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #fff;
  -webkit-animation: loading 0.75s linear 0s infinite normal;
          animation: loading 0.75s linear 0s infinite normal;
}
@-webkit-keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#index .mainImage .loader div:nth-child(2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
#index .mainImage .loader div:nth-child(3) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#index .mainImage .bg {
  width: 100%;
  height: 100%;
  background-color: #94D2DB;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 1001px) {
  #index .mainImage .bg {
    height: 100vw;
    background: url("../img/bg.jpg") center/cover no-repeat fixed;
  }
}
#index .mainImage .bg.hide {
  opacity: 0;
  visibility: hidden;
}
#index .mainImage .overlay {
  width: 100%;
  height: 100%;
  background-color: #94D2DB;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  transition: 0.375s cubic-bezier(0.39, 0.01, 0.58, -0.03);
  transform: rotate(0deg) scale(1);
  opacity: 1;
  visibility: visible;
}
#index .mainImage .overlay.hide {
  transform: rotate(4deg) scale(0.875);
  opacity: 0;
  visibility: hidden;
}
#index .mainImage h1 {
  width: 38.8631583333vw;
  height: 8.6014416667vw;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 6;
  transition: 0.5s;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 999px) {
  #index .mainImage h1 {
    position: absolute;
    width: 66vw;
    height: 14.6075402604vw;
  }
}
#index .mainImage h1.show span.span img, #index .mainImage h1.show span.span2 img, #index .mainImage h1.show span.span3 img {
  transform: translateY(0%);
}
#index .mainImage h1.show2 span.span img, #index .mainImage h1.show2 span.span2 img, #index .mainImage h1.show2 span.span3 img {
  transition: 0s 0s;
}
@media only screen and (min-width: 1001px) {
  #index .mainImage h1.hide {
    opacity: 0;
    visibility: hidden;
  }
}
#index .mainImage h1 span {
  overflow: hidden;
  position: absolute;
}
#index .mainImage h1 span.span {
  width: 8.6840833333vw;
  height: 1.6901083333vw;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 999px) {
  #index .mainImage h1 span.span {
    width: 14.7478878346vw;
    height: 2.870254369vw;
  }
}
#index .mainImage h1 span.span img {
  transition: 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(100%);
}
#index .mainImage h1 span.span2 {
  width: 38.8631583333vw;
  height: 3.6379vw;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 999px) {
  #index .mainImage h1 span.span2 {
    width: 66vw;
    height: 6.1781237114vw;
  }
}
#index .mainImage h1 span.span2 img {
  transition: 0.625s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(100%);
}
#index .mainImage h1 span.span3 {
  width: 27.9692416667vw;
  height: 2.3505416667vw;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 999px) {
  #index .mainImage h1 span.span3 {
    width: 47.499226238vw;
    height: 3.9918461765vw;
  }
}
#index .mainImage h1 span.span3 img {
  transition: 0.5s 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(100%);
}
#index .mainImage .video {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 0.375s;
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 999px) {
  #index .mainImage .video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
#index .mainImage .video.hide {
  opacity: 0;
  visibility: hidden;
}
#index .mainImage .video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#index .contents {
  /*
  >div {
  	padding: c_vw(150) 0;

  	@include sp {
  		padding: 17.5vw 0;
  	}
  }
  */
}
#index .contents .userList {
  padding: 0;
  margin: 22.25vw 0 20.1666666667vw;
}
#index .contents .image1 {
  width: 69.75vw;
  height: 29.6666666667vw;
  padding: 0;
  margin: -8.8333333333vw auto 0;
  background: url("../img/03.jpg") center/auto 107.5% no-repeat;
  position: relative;
  z-index: 2;
  transition: 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  #index .contents .image1 {
    width: 100%;
    height: 50vw;
    margin: 0;
  }
}
#index .contents .image1.play {
  background-size: auto 100%;
  opacity: 1;
}
#index .contents .image2 {
  height: 41.6666666667vw;
  padding: 0;
  margin: 12.5vw 0 0;
  background: url("../img/04.jpg") center/107.5% no-repeat;
  transition: 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  #index .contents .image2 {
    width: 100%;
    height: 41.6666666667vw;
    margin: 0;
  }
}
#index .contents .image2.play {
  background-size: 100%;
  opacity: 1;
}
#index #index01 {
  color: #fff;
  font-family: "Noto Serif JP", serif;
  text-align: center;
  padding-bottom: 27.5vw;
  background: url("../img/bg.jpg") center/cover no-repeat fixed;
  /*
  .bg{
  	width: 100%;
  	height: 100%;
  	background: url("../img/bg.jpg") center / cover no-repeat fixed;
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: -1;
  	transform-origin: center top;
  	transform: rotate(-8deg) scale(0.5);
  	opacity: 0.5;
  */
}
@media only screen and (min-width: 1001px) {
  #index #index01 {
    position: relative;
  }
}
@media only screen and (max-width: 999px) {
  #index #index01 {
    padding: 30vw 0 20vw;
  }
}
#index #index01 .read {
  font-size: 2.75rem;
  letter-spacing: 0.26em;
  margin: calc(12.5rem - 0.5em) 0 -0.5em;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #index01 .read {
    letter-spacing: 0.13em;
    font-size: 5.46875vw;
    margin: calc(7.6923076923rem - 0.5em) 0 -0.5em;
  }
}
#index #index01 .read.play::after {
  transform: translateX(-50%) scale(1, 1);
}
#index #index01 .read.play .mask span {
  transform: translateY(0%);
}
#index #index01 .read::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #fff;
  position: absolute;
  top: calc(-6.25rem + 0.5em);
  left: 50%;
  transition: 0.75s cubic-bezier(0.5, 0, 0.75, 0);
  transform: translateX(-50%) scale(0, 1);
}
@media only screen and (max-width: 999px) {
  #index #index01 .read::after {
    top: calc(-3.8461538462rem + 0.5em);
  }
}
#index #index01 .read .mask {
  display: inline-block;
  height: 1em;
  overflow-y: hidden;
}
#index #index01 .read .mask.lower {
  margin-top: 1em;
}
#index #index01 .read .mask.lower span {
  transition-delay: 0.25s;
}
#index #index01 .read .mask span {
  display: block;
  transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(100%);
}
#index #index01 .txt {
  font-size: 1.1235583333rem;
  letter-spacing: 0.36em;
  line-height: 2;
  margin: 4.4166666667rem 0 -0.5em;
}
@media only screen and (max-width: 999px) {
  #index #index01 .txt {
    font-size: 3.125vw;
    margin-top: 3rem;
  }
}
#index #index01 .txt span {
  display: inline-block;
  transition: 1.25s 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(1em);
  opacity: 0;
}
#index #index01 .txt span.play {
  transform: translateY(0);
  opacity: 1;
}
#index #index02 {
  color: #fff;
  background: url("../img/bg.jpg") center/cover no-repeat fixed;
  position: relative;
  padding-bottom: 25.1666666667vw;
}
#index #index02::after {
  content: "";
  width: 52.5vw;
  height: 48.4166666667vw;
  background: url("../img/map.svg") center/cover no-repeat;
  position: absolute;
  left: 23vw;
  top: 39.1666666667vw;
  z-index: 1;
  mix-blend-mode: multiply;
}
#index #index02 > div {
  position: relative;
  z-index: 2;
}
#index #index02 h2 {
  width: 38rem;
  height: 15.3333333333rem;
  color: #94D2DB;
  font-size: 1.9166666667rem;
  font-weight: normal;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  margin: 0 auto;
  background: #fff;
  border-radius: 1rem;
  position: relative;
  transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(1.5em);
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  #index #index02 h2 {
    width: calc(100% - 4rem);
    max-width: 456px;
    height: 6rem;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
}
#index #index02 h2.play {
  transform: translateY(0);
  opacity: 1;
}
#index #index02 h2.play span {
  opacity: 1;
}
#index #index02 h2 span {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.25s 0.375s;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
}
#index #index02 h2::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6666666667rem 0.75rem 0 0.75rem;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#index #index02 .read {
  font-size: 1.3333333333rem;
  text-align: center;
  margin: 6rem 0 0;
  background: url("../img/05.svg") center bottom/auto 3.1666666667rem no-repeat;
}
@media only screen and (max-width: 999px) {
  #index #index02 .read {
    font-size: 1.25rem;
    background-size: auto 2.5rem;
    margin: 4rem 0 0;
  }
}
#index #index02 .read strong {
  display: block;
  font-size: 3.6666666667rem;
  font-weight: normal;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin: 1.6666666667rem 0 0;
}
@media only screen and (max-width: 999px) {
  #index #index02 .read strong {
    font-size: 2rem;
    margin: 1.25rem 0 0;
  }
}
#index #index02 .txt {
  max-width: 54.3333333333rem;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  line-height: 2;
  margin: calc(2.5rem - 0.5em) auto -0.5em;
}
@media only screen and (max-width: 999px) {
  #index #index02 .txt {
    font-size: 1rem;
    padding: 0 2rem;
  }
}
#index #index02 .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.25vw;
}
@media screen and (max-width: 1400px) {
  #index #index02 .list {
    gap: 0 1.6875vw;
  }
}
@media only screen and (max-width: 999px) {
  #index #index02 .list {
    max-width: 500px;
    gap: 1em;
    margin: 2.5rem auto 0;
  }
}
#index #index02 .list li {
  width: 19.5vw;
  height: 19.5vw;
  color: #94D2DB;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  margin: 3.4166666667rem 0 0;
  position: relative;
  transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(12.5%) scale(0.875);
  opacity: 0;
}
#index #index02 .list li:nth-child(1) {
  transition-delay: 0.25s;
}
#index #index02 .list li:nth-child(2) {
  transition-delay: 0.5s;
}
#index #index02 .list li:nth-child(3) {
  transition-delay: 0.75s;
}
#index #index02 .list li:nth-child(4) {
  transition-delay: 1s;
}
#index #index02 .list li:nth-child(5) {
  transition-delay: 1.25s;
}
#index #index02 .list li:nth-child(6) {
  transition-delay: 1.5s;
}
#index #index02 .list li:nth-child(7) {
  transition-delay: 1.75s;
}
#index #index02 .list li:nth-child(8) {
  transition-delay: 2s;
}
@media screen and (max-width: 1400px) {
  #index #index02 .list li {
    width: 14.625vw;
    height: 14.625vw;
  }
}
@media only screen and (max-width: 999px) {
  #index #index02 .list li {
    width: calc(50vw - 2rem);
    height: calc(50vw - 2rem);
    max-width: 234px;
    max-height: 234px;
    margin: 0;
  }
}
#index #index02 .list li.play {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#index #index02 .list li.play div {
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
}
#index #index02 .list li div {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.375s 0.5s;
  transform: translateX(-50%) translateY(-50%) scale(0.875);
  opacity: 0;
}
#index #index02 .list li img {
  height: 2.6666666667vw;
  margin: 0 auto;
}
@media screen and (max-width: 1400px) {
  #index #index02 .list li img {
    height: 2vw;
  }
}
@media only screen and (max-width: 999px) {
  #index #index02 .list li img {
    height: 2.6666666667rem;
  }
}
#index #index02 .list li img.h {
  height: 3.1666666667vw;
}
@media screen and (max-width: 1400px) {
  #index #index02 .list li img.h {
    height: 2.375vw;
  }
}
@media only screen and (max-width: 999px) {
  #index #index02 .list li img.h {
    height: 3.1666666667rem;
  }
}
#index #index02 .list li .jp {
  font-size: 1.3333333333vw;
  text-indent: 0.16em;
  margin: 1.5833333333vw 0 0;
}
@media screen and (max-width: 1400px) {
  #index #index02 .list li .jp {
    font-size: 1vw;
    margin: 1.1875vw 0 0;
  }
}
@media only screen and (max-width: 999px) {
  #index #index02 .list li .jp {
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-indent: 0.05em;
    margin: 1em 0 0;
  }
  #index #index02 .list li .jp.narrow {
    transform: scale(0.8, 1);
  }
}
#index #index02 .list li .en {
  font-size: 0.8333333333vw;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  margin: 0.75vw 0 0;
}
@media screen and (max-width: 1400px) {
  #index #index02 .list li .en {
    font-size: 0.625vw;
    margin: 0.5625vw 0 0;
  }
}
@media only screen and (max-width: 999px) {
  #index #index02 .list li .en {
    font-size: 0.75rem;
    margin: 1em 0 0;
    transform: scale(0.5);
  }
}
#index #usersVoices {
  width: 100%;
  overflow-x: hidden;
}
#index #usersVoices h2 {
  color: #94D2DB;
  font-weight: normal;
  text-align: center;
}
#index #usersVoices h2.play .en::after, #index #usersVoices h2.play .en::before {
  opacity: 1;
}
#index #usersVoices h2.play .en span {
  transform: translateY(0%);
}
#index #usersVoices h2.play .jp::after {
  transform: translateX(-50%) scale(1, 1);
}
#index #usersVoices h2.play .jp span span {
  transform: translateY(0%);
}
#index #usersVoices h2 .en {
  display: inline-block;
  height: 1em;
  overflow-y: hidden;
  font-size: 3.1302833333rem;
  letter-spacing: 0.5em;
  text-align: center;
  text-indent: 0.5em;
  padding: 0 4.1666666667rem;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices h2 .en {
    font-size: 1.4447461538rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    padding: 0 1.9230769231rem;
  }
}
#index #usersVoices h2 .en::before, #index #usersVoices h2 .en::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/h-left.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  transition: 0.5s 0.75s;
  transform: translateY(-50%);
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices h2 .en::before, #index #usersVoices h2 .en::after {
    width: 3.1153846154rem;
    height: 2.3846153846rem;
  }
}
#index #usersVoices h2 .en::after {
  background-image: url("../img/h-right.svg");
  left: auto;
  right: 0;
}
#index #usersVoices h2 .en span {
  display: block;
  transition: 0.5s 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(100%);
}
#index #usersVoices h2 .jp {
  display: block;
  font-size: 1.4166666667rem;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  margin: 5.3333333333rem 0 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices h2 .jp {
    font-size: 0.6538461538rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    margin: 2.4615384615rem 0 0;
  }
}
#index #usersVoices h2 .jp::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #94D2DB;
  position: absolute;
  top: -2.6666666667rem;
  left: 50%;
  transition: 0.5s cubic-bezier(0.39, 0.01, 0.58, -0.03);
  transform: translateX(-50%) scale(0, 1);
}
@media only screen and (max-width: 999px) {
  #index #usersVoices h2 .jp::after {
    width: 1.3846153846rem;
    top: -1.2307692308rem;
  }
}
#index #usersVoices h2 .jp span {
  display: block;
  height: 1em;
  overflow-y: hidden;
}
#index #usersVoices h2 .jp span span {
  display: block;
  transition: 0.5s 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(-100%);
}
#index #usersVoices .box {
  max-width: 1600px;
  margin: 12.5vw auto 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box {
    padding: 0 2em;
    margin: 5em auto 0;
  }
}
#index #usersVoices .box.flex {
  justify-content: space-between;
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .box.flex .txtBox {
    width: calc(44.0833333333vw - 1px);
    max-width: calc(44.0833333333rem - 1px);
    padding-right: 4.3333333333vw;
    padding-left: 8.3333333333vw;
  }
  #index #usersVoices .box.flex .imgBox2 {
    width: 55.9166666667vw;
    max-width: 55.9166666667rem;
  }
  #index #usersVoices .box.flex.re .txtBox {
    order: 2;
    padding-right: 8.3333333333vw;
    padding-left: 4.3333333333vw;
  }
  #index #usersVoices .box.flex.re .imgBox2 {
    order: 1;
  }
}
#index #usersVoices .box#first {
  max-width: 1800px;
  margin: 10.8333333333vw auto 0;
}
#index #usersVoices .box#first .txtBox {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .box#first .txtBox {
    padding-top: 6vw;
    padding-left: 8.3333333333vw;
  }
  #index #usersVoices .box#first .txtBox .bg {
    width: 37.5vw;
  }
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .box#first .imgBox1 {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
}
#index #usersVoices .box .txtBox h3 {
  color: #94D2DB;
  font-family: Century Gothic, "Questrial", sans-serif;
  font-weight: normal;
  font-size: 1.1666666667rem;
  letter-spacing: 0.5em;
  padding: 0 0 1.6666666667rem;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox h3 {
    font-size: 1rem;
  }
}
#index #usersVoices .box .txtBox h3::after {
  width: 1.6666666667rem;
  height: 1px;
  content: "";
  background: #94D2DB;
  position: absolute;
  bottom: 0;
  left: 0;
}
#index #usersVoices .box .txtBox h3 span {
  display: inline-block;
  position: relative;
}
#index #usersVoices .box .txtBox h3 span::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/h-right.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox h3 span::after {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    right: -2.5714285714rem;
  }
}
#index #usersVoices .box .txtBox .message {
  color: #000;
  font-family: "Noto Serif JP", serif;
  font-size: 2.1875rem;
  letter-spacing: 0.1em;
  line-height: 1.75;
  margin: -0.375em 0;
}
@media only screen and (min-width: 1501px) {
  #index #usersVoices .box .txtBox .message {
    font-size: 2.9166666667rem;
  }
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox .message {
    font-size: 1.5rem;
    letter-spacing: 0.075em;
    text-align: center;
  }
}
#index #usersVoices .box .txtBox .message span {
  position: relative;
}
#index #usersVoices .box .txtBox .message span::after {
  width: 100%;
  height: 2.8333333333rem;
  content: "";
  background-color: #FAFAFA;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}
#index #usersVoices .box .txtBox .area {
  width: calc(100% - 3.5rem - 62.9166666667vw);
  margin: 3rem 0 0;
}
@media only screen and (min-width: 1601px) {
  #index #usersVoices .box .txtBox .area {
    width: auto;
  }
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox .area {
    width: auto;
    margin: 2.5rem 0 0;
  }
}
#index #usersVoices .box .txtBox .area img {
  height: 3.25rem;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox .area img {
    height: 2.75rem;
    margin: 0 auto;
  }
}
#index #usersVoices .box .txtBox .name {
  margin: 2.5rem 0 0;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox .name {
    text-align: center;
  }
}
#index #usersVoices .box .txtBox .name .en {
  font-size: 0.75rem;
  letter-spacing: 0.54em;
}
#index #usersVoices .box .txtBox .name .jp {
  font-size: 1rem;
  letter-spacing: 0.48em;
  margin: 1.1666666667rem 0 0;
}
#index #usersVoices .box .txtBox .name .jp strong {
  color: #595757;
  font-size: 1.8333333333rem;
  font-weight: normal;
}
#index #usersVoices .box .txtBox .txt {
  font-family: "Noto Serif JP", serif;
  font-size: 1.1666666667rem;
  letter-spacing: 0.14em;
  line-height: 2.25;
  margin: calc(3rem - 0.625em) 0 -0.625em;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox .txt {
    font-size: 1rem;
  }
}
#index #usersVoices .box .txtBox .txt2 {
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  line-height: 2;
  margin: calc(2.5rem - 0.5em) 0 -0.5em;
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .box .txtBox .bg {
    padding: 5.8333333333vw 5.8333333333vw 0 0;
    background: #fafafa;
  }
  #index #usersVoices .box .txtBox .bg .txt {
    margin: -0.625em 0;
  }
}
#index #usersVoices .box .txtBox .read {
  color: #3eaebe;
  font-size: 1.6666666667rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1.85;
  margin: calc(1.5rem - 0.425em) 0 -0.425em;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .box .txtBox .read {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
}
#index #usersVoices .box .txtBox .read.narrow {
  letter-spacing: 0.1em;
}
#index #usersVoices .txt3 {
  max-width: 100rem;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  line-height: 2;
  margin: calc(3.25rem - 0.5em) auto -0.5em;
  padding-right: 8.3333333333vw;
  padding-left: 8.3333333333vw;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .txt3 {
    padding: 0;
  }
}
#index #usersVoices .imgBox1 {
  width: 62.9166666667vw;
  height: 49.5833333333vw;
  max-width: 62.9166666667rem;
  max-height: 49.5833333333rem;
  background-repeat: no-repeat;
  background-size: auto 110%;
  background-position: center center;
  transition: 1.5s 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
@media only screen and (min-width: 1601px) {
  #index #usersVoices .imgBox1 {
    width: 62.9166666667rem;
    height: 49.5833333333rem;
  }
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .imgBox1 {
    width: 100%;
    height: 60vw;
    margin: 3em auto 0;
    background-size: cover;
  }
}
#index #usersVoices .imgBox1.play {
  background-size: auto 100%;
  opacity: 1;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .imgBox1.play {
    background-size: cover;
  }
}
#index #usersVoices .imgBox2 {
  width: 55.9166666667vw;
  max-width: 55.9166666667rem;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .imgBox2 {
    width: 100%;
    margin: 3em auto 0;
  }
}
#index #usersVoices .imgBox2 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#index #usersVoices .imgBox2 ul.play li {
  background-size: auto 100%;
  opacity: 1;
}
#index #usersVoices .imgBox2 ul li {
  width: calc((100% - 6px) / 2);
  height: 15.3333333333vw;
  max-width: 28rem;
  max-height: 15.3333333333rem;
  background-repeat: no-repeat;
  background-size: auto 110%;
  background-position: center center;
  transition: 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
#index #usersVoices .imgBox2 ul li:nth-child(1) {
  transition-delay: 0.375s;
}
#index #usersVoices .imgBox2 ul li:nth-child(2) {
  transition-delay: 0.75s;
}
#index #usersVoices .imgBox2 ul li:nth-child(3) {
  transition-delay: 1.125s;
}
#index #usersVoices .imgBox2 ul li:nth-child(4) {
  transition-delay: 1.5s;
}
#index #usersVoices .imgBox2 ul li:nth-child(5) {
  transition-delay: 1.875s;
}
#index #usersVoices .imgBox2 ul li:nth-child(6) {
  transition-delay: 2.25s;
}
#index #usersVoices .imgBox2 ul li:nth-child(7) {
  transition-delay: 2.625s;
}
#index #usersVoices .imgBox2 ul li:nth-child(8) {
  transition-delay: 3s;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .imgBox2 ul li {
    height: 23.828125vw;
  }
}
#index #usersVoices .imgBox2 ul li:first-child {
  width: 100%;
  height: 39.9166666667vw;
  max-width: 55.9166666667rem;
  max-height: 39.9166666667rem;
  margin: 0 0 6px;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .imgBox2 ul li:first-child {
    height: 62.5vw;
  }
}
#index #usersVoices .detail {
  padding: 12.5vw 2em;
  margin: 12.5vw 0 0;
  background: #fff;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail {
    padding: 7em 0 5em;
    margin: 8rem 0 0;
  }
}
#index #usersVoices .detail.p_bottom {
  padding-bottom: 8vw;
}
#index #usersVoices .detail h3 {
  width: 38rem;
  height: 7.8333333333rem;
  color: #fff;
  font-size: 1.9166666667rem;
  font-weight: normal;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  margin: 0 auto;
  background: #94D2DB;
  border-radius: 1rem;
  position: absolute;
  top: -3.9166666667rem;
  left: 50%;
  transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(-50%) translateY(1.5em);
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail h3 {
    width: calc(100% - 8rem);
    max-width: 456px;
    height: 6rem;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    top: -3rem;
  }
}
#index #usersVoices .detail h3.play {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#index #usersVoices .detail h3.play span {
  opacity: 1;
}
#index #usersVoices .detail h3 span {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.25s 0.375s;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
}
#index #usersVoices .detail h3::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6666666667rem 0.75rem 0 0.75rem;
  border-color: #94D2DB transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#index #usersVoices .detail dl {
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.06em;
  margin: 2.3333333333rem 0 0;
}
#index #usersVoices .detail dl:first-of-type {
  margin: 0;
}
#index #usersVoices .detail dl dt {
  color: #94D2DB;
  font-size: 1.3333333333rem;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail dl dt {
    font-size: 1.1666666667rem;
    line-height: 1.5;
  }
}
#index #usersVoices .detail dl dd {
  color: #878787;
  font-size: 1.3333333333rem;
  margin: 0.6666666667rem 0 0;
}
#index #usersVoices .detail dl dd strong {
  font-size: 2.6666666667rem;
  font-family: Century Gothic, "Questrial", sans-serif;
  letter-spacing: 0.1em;
}
#index #usersVoices .detail dl dd span {
  display: block;
  color: #595757;
  font-weight: normal;
  font-size: 1.0833333333rem;
  margin: 0.6666666667rem 0 0;
}
#index #usersVoices .detail dl dd img {
  width: auto;
  height: 2.2226583333rem;
  margin: 0 auto;
}
#index #usersVoices .detail dl dd img.img_big {
  height: 3.9141416667rem;
}
#index #usersVoices .detail .read2 {
  color: #94D2DB;
  font-size: 2.0833333333rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1.75;
  text-align: center;
  margin: -0.375em 0;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail .read2 {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .detail .col2 {
    display: flex;
    justify-content: center;
    gap: 0 4rem;
    margin: 5.4166666667rem 0 0;
  }
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail .col2 li {
    margin: 3.5rem 2rem 0;
  }
}
#index #usersVoices .detail .col2 li:nth-child(2) {
  transition-delay: 0.5s;
}
#index #usersVoices .detail .col2 li img {
  height: 35.5833333333rem;
  margin: 0 auto;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail .col2 li img {
    height: 28rem;
  }
}
#index #usersVoices .detail .col2 p {
  display: block;
  max-width: 33.3333333333rem;
  font-size: 1rem;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.12em;
  line-height: 2;
  margin: 4.3333333333rem 0 0;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail .col2 p {
    margin: 2rem auto 0;
  }
}
#index #usersVoices .detail .col2 p span {
  color: #ff7479;
  font-size: 1.1666666667rem;
  font-weight: bold;
  text-decoration: underline;
}
#index #usersVoices .detail a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48.8938583333rem;
  height: 6.8675416667rem;
  box-shadow: 0px 0px 15px -5px #777777;
  border-radius: 10px;
  text-decoration: none;
  margin: 6rem auto 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .detail a {
    width: calc(100% - 2rem);
  }
}
#index #usersVoices .detail a::after {
  content: "";
  width: 0.6666666667rem;
  height: 1.3333333333rem;
  background-image: url(../img/user03/arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 2.6666666667rem;
  transform: translateY(-50%);
}
#index #usersVoices .detail a span {
  font-size: 1.25rem;
  line-height: 2.08;
  letter-spacing: 0.16em;
  color: #94D2DB;
}
#index #usersVoices .movie {
  width: 63.0833333333vw;
  height: 35.4166666667vw;
  margin: 12.5vw auto 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .movie {
    width: calc(100% - 4rem);
    padding-top: calc((100% - 4rem) * 0.5614266843);
    margin: 5rem auto 0;
  }
}
#index #usersVoices .movie iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#index #usersVoices .profile {
  padding: 12.5vw 2em;
  margin: 12.5vw 0 0;
  background: #fff;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile {
    margin: 5em 0 0;
    padding: 5em 2em 0;
  }
}
#index #usersVoices .profile h3 {
  color: #94D2DB;
  font-family: Century Gothic, "Questrial", sans-serif;
  font-weight: normal;
  font-size: 1.1666666667rem;
  letter-spacing: 0.5em;
  padding: 0 0 1.4166666667rem;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile h3 {
    font-size: 1rem;
  }
}
#index #usersVoices .profile h3::after {
  width: 1.6666666667rem;
  height: 1px;
  content: "";
  background: #94D2DB;
  position: absolute;
  bottom: 0;
  left: 0;
}
#index #usersVoices .profile h3 span {
  display: inline-block;
  position: relative;
}
#index #usersVoices .profile h3 span::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/h-right.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile h3 span::after {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    right: -2.5714285714rem;
  }
}
#index #usersVoices .profile h4 {
  color: #94D2DB;
  font-size: 1.4166666667rem;
  text-align: center;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  padding: 0 0 3.1666666667rem;
  margin: 12.5vw 0 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile h4 {
    letter-spacing: 0.2175em;
    margin: 5rem 0 0;
  }
}
#index #usersVoices .profile h4::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #94D2DB;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#index #usersVoices .profile h4 span {
  display: inline-block;
  position: relative;
}
#index #usersVoices .profile h4 span::before {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/h-left.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  left: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile h4 span::before {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    left: -2.5714285714rem;
  }
}
#index #usersVoices .profile h4 span::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/h-right.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile h4 span::after {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    right: -2.5714285714rem;
  }
}
#index #usersVoices .profile .area {
  margin: 1.4166666667rem 0 0;
}
#index #usersVoices .profile .area img {
  height: 3.25rem;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile .area img {
    height: 2.75rem;
  }
}
#index #usersVoices .profile .name {
  margin: 2.5rem 0 0;
}
#index #usersVoices .profile .name .en {
  font-size: 0.75rem;
  letter-spacing: 0.54em;
}
#index #usersVoices .profile .name .jp {
  font-size: 1rem;
  letter-spacing: 0.48em;
  margin: 1.1666666667rem 0 0;
}
#index #usersVoices .profile .name .jp strong {
  color: #595757;
  font-size: 1.8333333333rem;
  font-weight: normal;
}
#index #usersVoices .profile .txt {
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  line-height: 2.25;
  margin: calc(2.5rem - 0.625em) 0 -0.625em;
}
#index #usersVoices .profile .flex1 {
  margin: 0 auto;
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .profile .flex1 {
    display: flex;
    justify-content: space-between;
    max-width: 83.3333333333rem;
  }
  #index #usersVoices .profile .flex1 .left {
    width: 41.6666666667rem;
    padding-right: 3.75rem;
  }
}
#index #usersVoices .profile .flex1 .photo {
  width: 41.6666666667rem;
  height: 27.4166666667rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile .flex1 .photo {
    width: 100%;
    height: 57.421875vw;
    margin: 3rem auto 0;
  }
}
#index #usersVoices .profile .flex2 {
  margin: 3.3333333333rem auto 0;
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .profile .flex2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 54.4166666667rem;
  }
  #index #usersVoices .profile .flex2 p {
    width: 37.9166666667rem;
  }
}
#index #usersVoices .profile .flex2 p {
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  line-height: 2.25;
}
#index #usersVoices .profile .flex2 .photo {
  width: 14rem;
  height: 9rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .profile .flex2 .photo {
    margin: 0 auto 2em;
  }
}
#index #usersVoices .comment {
  padding: 16.6666666667vw 2em 9.5vw;
  background: #fff;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .comment {
    padding: 5em 2em;
  }
}
#index #usersVoices .comment h4 {
  color: #94D2DB;
  font-size: 1.4166666667rem;
  text-align: center;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  padding: 0 0 3.1666666667rem;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .comment h4 {
    letter-spacing: 0.2175em;
  }
}
#index #usersVoices .comment h4::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #9ED1A8;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#index #usersVoices .comment h4 span {
  display: inline-block;
  position: relative;
}
#index #usersVoices .comment h4 span::before {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/service/h-left.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  left: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .comment h4 span::before {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    left: -2.5714285714rem;
  }
}
#index #usersVoices .comment h4 span::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/service/h-right.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .comment h4 span::after {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    right: -2.5714285714rem;
  }
}
#index #usersVoices .comment .flex2 {
  margin: 3.3333333333rem auto 0;
}
@media only screen and (min-width: 1001px) {
  #index #usersVoices .comment .flex2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 54.4166666667rem;
  }
  #index #usersVoices .comment .flex2 p {
    width: 35rem;
  }
}
#index #usersVoices .comment .flex2 p {
  font-family: "Noto Serif JP", serif;
  font-size: 0.9166666667rem;
  line-height: 1.75;
  text-align: left;
}
#index #usersVoices .comment .flex2 p span {
  display: block;
  margin-top: 0.5em;
}
#index #usersVoices .comment .flex2 .photo {
  width: 17.1111111111rem;
  height: 11rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .comment .flex2 .photo {
    margin: 0 auto 2em;
  }
}
#index #usersVoices .userList {
  margin: 13.3333333333vw 0;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .userList {
    margin: 5em 0;
  }
}
#index #usersVoices .userList h2 {
  margin-bottom: 11.3333333333vw;
}
@media only screen and (max-width: 999px) {
  #index #usersVoices .userList h2 {
    margin: 0 auto 2em;
  }
}
#index #usersVoicesList {
  padding: 0 0 12.5vw;
}
#index #usersVoicesList h2 {
  color: #94D2DB;
  font-weight: normal;
  text-align: center;
}
#index #usersVoicesList h2 .en {
  display: inline-block;
  font-size: 3.1302833333rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  white-space: nowrap;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoicesList h2 .en {
    font-size: 2rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}
#index #usersVoicesList h2 .en::before {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/h-left.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  left: -4rem;
  transform: translateY(-50%);
}
#index #usersVoicesList h2 .en::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/h-right.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
}
#index #usersVoicesList h2 .jp {
  display: block;
  font-size: 1.4166666667rem;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  padding: 2.6666666667rem 0 0;
  margin: 2.6666666667rem 0 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #index #usersVoicesList h2 .jp {
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    margin: 2rem 0 0;
    padding: 2rem 0 0;
  }
}
#index #usersVoicesList h2 .jp::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #94D2DB;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#index #usersVoicesList .voiceList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1.3333333333rem;
  margin: 10.8333333333vw 0 0;
}
#index #usersVoicesList .voiceList li {
  padding: 0 0 6.6666666667rem;
  background: #f5f6f6;
}
@media only screen and (max-width: 999px) {
  #index #usersVoicesList .voiceList li {
    padding-bottom: 3.5rem;
  }
}
#index #usersVoicesList .voiceList li .img {
  padding-top: 104.1666666667%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}
#index #usersVoicesList .voiceList li .img.off::after {
  width: 100%;
  height: 100%;
  content: "";
  background: rgb(158, 158, 159);
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#index #usersVoicesList .voiceList li .img .num {
  display: block;
  font-family: Century Gothic, "Questrial", sans-serif;
  color: #fff;
  font-size: 3.1666666667rem;
  letter-spacing: 0;
  position: absolute;
  right: 0.8333333333rem;
  bottom: 0.8333333333rem;
  z-index: 2;
}
#index #usersVoicesList .voiceList li dl {
  font-family: "Noto Serif JP", serif;
  padding: 3.3333333333rem 2.3333333333rem;
}
@media only screen and (max-width: 999px) {
  #index #usersVoicesList .voiceList li dl {
    padding: 3rem 2rem;
  }
}
#index #usersVoicesList .voiceList li dl dt {
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 1.75;
}
#index #usersVoicesList .voiceList li dl dd {
  font-size: 1rem;
  line-height: 2.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: calc(2.75rem - 0.65em) 0 -0.65em;
}

#service .mainImage {
  height: 38.8959333333vw;
  background: url("../img/service/main.jpg") center/cover no-repeat;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service .mainImage {
    height: 100vw;
  }
}
#service .mainImage .st {
  /*
  &::after {
  	width: c_vw(36);
  	height: 1px;
  	content: "";
  	background: #fff;
  	position: absolute;
  	bottom: c_vw(-36);
  	left: 50%;
  	transform: translateX(-50%);

  	@include sp {
  		width: 2.5rem;
  		bottom: -2rem;
  	}
  }
  */
}
@media only screen and (min-width: 1001px) {
  #service .mainImage .st {
    position: absolute;
    top: calc(50% + 2.3333333333vw);
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
  }
}
#service .mainImage .st svg path {
  fill: #fff;
}
#service .mainImage .st .wave .line {
  border-color: #fff;
}
@media only screen and (max-width: 999px) {
  #service .mainImage .absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
#service .mainImage h2 {
  width: 3.5833333333rem;
  height: 3.5833333333rem;
  color: #9ED1A8;
  text-align: center;
  background: #fff;
  border-radius: 1.75rem;
  transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
@media only screen and (min-width: 1001px) {
  #service .mainImage h2 {
    position: absolute;
    top: calc(50% + 8.3333333333vw);
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 999px) {
  #service .mainImage h2 {
    width: 3.3076923077rem;
    height: 3.3076923077rem;
    border-radius: 1.6153846154rem;
    margin: 7.6923076923rem auto 0;
    position: relative;
  }
}
#service .mainImage h2::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #fff;
  position: absolute;
  left: 50%;
  transition: 0.75s cubic-bezier(0.5, 0, 0.75, 0);
  transform: translateX(-50%) scale(0, 1);
}
@media only screen and (min-width: 1001px) {
  #service .mainImage h2::after {
    top: -3vw;
  }
}
@media only screen and (max-width: 999px) {
  #service .mainImage h2::after {
    top: -3.8461538462rem;
  }
}
#service .mainImage h2.play {
  width: 21.4166666667rem;
  opacity: 1;
}
@media only screen and (max-width: 999px) {
  #service .mainImage h2.play {
    width: 19.7692307692rem;
  }
}
#service .mainImage h2.play::after {
  transform: translateX(-50%) scale(1, 1);
}
#service .mainImage h2.play span {
  opacity: 1;
}
#service .mainImage h2 span {
  display: block;
  width: 100%;
  font-size: 1.4106166667rem;
  text-align: center;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.375s 0.375s;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  #service .mainImage h2 span {
    font-size: 1.25rem;
  }
}

#service01 {
  padding: 9.5833333333rem 0 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service01 {
    padding: 6rem 0 0;
  }
}
#service01 h2 {
  width: 38rem;
  height: 15rem;
  background: #c7c8c8;
  border-radius: 1rem;
  position: absolute;
  top: -10.3333333333rem;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 999px) {
  #service01 h2 {
    width: calc(100% - 4rem);
    max-width: 456px;
    height: 6rem;
    top: -3rem;
  }
}
#service01 h2::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6666666667rem 0.75rem 0 0.75rem;
  border-color: #c7c8c8 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#service01 h2 span {
  display: block;
  font-weight: normal;
  font-size: 1.9166666667rem;
  letter-spacing: 0.6em;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.25s 0.375s;
  transform: translateX(-50%) translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #service01 h2 span {
    font-size: 1.5rem;
  }
}
#service01 h3 {
  color: #3e3a39;
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  text-align: center;
}
@media only screen and (max-width: 999px) {
  #service01 h3 {
    font-size: 1.5rem;
    line-height: 2;
    margin: -0.5em 0;
  }
}
#service01 .txt {
  max-width: 54.3333333333rem;
  color: #595757;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  line-height: 2;
  margin: calc(2.75rem - 0.5em) auto -0.5em;
}
@media only screen and (max-width: 999px) {
  #service01 .txt {
    font-size: 1rem;
    padding: 0 2rem;
  }
}
#service01 .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.3333333333vw;
}
@media only screen and (max-width: 999px) {
  #service01 .list {
    max-width: 500px;
    gap: 1em;
    margin: 2.5rem auto 0;
  }
}
#service01 .list li {
  width: 19.5vw;
  height: 19.5vw;
  margin: 4.8333333333rem 0 0;
  color: #fff;
  text-align: center;
  background: #9ED1A8;
  border-radius: 50%;
  position: relative;
  transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(12.5%) scale(0.875);
  opacity: 0;
}
#service01 .list li:nth-child(1) {
  transition-delay: 0.25s;
}
#service01 .list li:nth-child(2) {
  transition-delay: 0.5s;
}
#service01 .list li:nth-child(3) {
  transition-delay: 0.75s;
}
#service01 .list li:nth-child(4) {
  transition-delay: 1s;
}
#service01 .list li:nth-child(5) {
  transition-delay: 1.25s;
}
#service01 .list li:nth-child(6) {
  transition-delay: 1.5s;
}
#service01 .list li:nth-child(7) {
  transition-delay: 1.75s;
}
#service01 .list li:nth-child(8) {
  transition-delay: 2s;
}
@media screen and (max-width: 1400px) {
  #service01 .list li {
    width: 14.625vw;
    height: 14.625vw;
  }
}
@media only screen and (max-width: 999px) {
  #service01 .list li {
    width: calc(50vw - 2rem);
    height: calc(50vw - 2rem);
    max-width: 234px;
    max-height: 234px;
    margin: 0;
  }
}
#service01 .list li.play {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#service01 .list li.play div {
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
}
#service01 .list li div {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#service01 .list li img {
  height: 2.6666666667vw;
  margin: 0 auto;
}
@media screen and (max-width: 1400px) {
  #service01 .list li img {
    height: 2vw;
  }
}
@media only screen and (max-width: 999px) {
  #service01 .list li img {
    height: 2.6666666667rem;
  }
}
#service01 .list li img.h {
  height: 3.1666666667vw;
}
@media screen and (max-width: 1400px) {
  #service01 .list li img.h {
    height: 2.375vw;
  }
}
@media only screen and (max-width: 999px) {
  #service01 .list li img.h {
    height: 3.1666666667rem;
  }
}
#service01 .list li .jp {
  font-size: 1.3333333333vw;
  text-indent: 0.16em;
  margin: 1.5833333333vw 0 0;
}
@media screen and (max-width: 1400px) {
  #service01 .list li .jp {
    font-size: 1vw;
    margin: 1.1875vw 0 0;
  }
}
@media only screen and (max-width: 999px) {
  #service01 .list li .jp {
    font-size: 1rem;
    margin: 1em 0 0;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }
}
#service01 .list li .en {
  font-size: 0.8333333333vw;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  margin: 0.75vw 0 0;
}
@media screen and (max-width: 1400px) {
  #service01 .list li .en {
    font-size: 0.625vw;
    margin: 0.5625vw 0 0;
  }
}
@media only screen and (max-width: 999px) {
  #service01 .list li .en {
    font-size: 0.75rem;
    margin: 1em 0 0;
  }
}
#service01 .image {
  height: 41.6666666667vw;
  margin: 10vw 0 0;
  background: url("../img/service/06.jpg") center/107.5% no-repeat;
  transition: 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
#service01 .image.play {
  background-size: 100%;
  opacity: 1;
}

#service02 .num {
  width: 10.1666666667rem;
  height: 10.1666666667rem;
  color: #fff;
  font-family: Century Gothic, "Questrial", sans-serif;
  text-align: center;
  background: #9ED1A8;
  border-radius: 50%;
  position: absolute;
  top: -1.6666666667rem;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 999px) {
  #service02 .num {
    width: 8rem;
    height: 8rem;
  }
}
#service02 .num span {
  width: 100%;
  font-size: 3.75rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #service02 .num span {
    font-size: 3rem;
  }
}
#service02 h2 {
  color: #9ED1A8;
  font-size: 1.75rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0 0 2.5rem;
  margin: -0.25em 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service02 h2 {
    font-size: 1.5rem;
  }
}
#service02 h2::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #9ED1A8;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#service02 h2 span {
  display: inline-block;
  position: relative;
}
#service02 h2 span::before {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/service/h-left.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  left: -4.5833333333rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #service02 h2 span::before {
    left: -3.5rem;
  }
}
#service02 h2 span::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/service/h-right.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: -4.5833333333rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #service02 h2 span::after {
    right: -3.5rem;
  }
}
#service02 h3 {
  color: #9ED1A8;
  font-size: 1.6666666667rem;
  letter-spacing: 0;
  text-align: center;
  margin: 4.3333333333rem auto 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service02 h3 {
    font-size: 1.375rem;
  }
}
#service02 .fs12 {
  font-size: 1rem;
  line-height: 1.75;
  margin: calc(1rem - 0.375em) 0 -0.375em;
}
#service02 .fs13 {
  font-size: 1.0833333333rem;
  line-height: 1.75;
  margin: calc(1.5rem - 0.375em) 0 -0.375em;
}
#service02 .fs14 {
  font-size: 1.1666666667rem;
  line-height: 1.75;
  margin: calc(2.25rem - 0.375em) 0 -0.375em;
}
#service02 .fs16 {
  font-size: 1.3333333333rem;
  line-height: 2;
  margin: calc(3rem - 0.5em) 0 -0.5em;
}
@media only screen and (max-width: 999px) {
  #service02 .fs16 {
    font-size: 1.125rem;
  }
}
#service02 .fs20 {
  font-size: 1.6666666667rem;
  margin: 3.8333333333rem 0 0;
}
@media only screen and (max-width: 999px) {
  #service02 .fs20 {
    font-size: 1.375rem;
  }
}
#service02 .green-back {
  max-width: 48.9166666667rem;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.75;
  letter-spacing: 0;
  padding: 2rem 2rem;
  margin: 3.3333333333rem auto 0;
  background: #9ED1A8;
  border-radius: 0.4166666667rem;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
}
@media only screen and (max-width: 999px) {
  #service02 .green-back {
    font-size: 1.25rem;
  }
}
#service02 .green-back span {
  display: block;
  font-size: 0.8333333333rem;
}
#service02 .list1 {
  color: #9ED1A8;
  font-weight: bold;
  text-align: center;
}
#service02 .list1 li {
  margin: 1.3333333333rem 0 0;
}
#service02 .list1 li:first-child {
  margin: 2.3333333333rem 0 0;
}
#service02 .list1 li a {
  display: inline-block;
  font-size: 1.3333333333rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  transition: 0.5s;
  position: relative;
}
#service02 .list1 li a:hover {
  text-decoration: none;
}
#service02 .list1 li a::before {
  content: "■";
  position: absolute;
  left: -1em;
}
#service02 > div {
  padding: 10vw 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service02 > div {
    padding: 5rem 2rem;
  }
}
#service02 > div:nth-child(odd) {
  background: #fff;
}
#service02 > div p {
  color: #595757;
  text-align: center;
  letter-spacing: 0.06em;
}
#service02 > div p.green {
  color: #9ED1A8;
  font-weight: bold;
}
#service02 > div p.green a {
  text-decoration: underline;
  transition: 0.5s;
}
#service02 > div p.green a:hover {
  text-decoration: none;
}
#service02 #no1,
#service02 #no2,
#service02 #no3,
#service02 #no4 {
  padding: 12.5rem 0 10vw;
}
@media only screen and (max-width: 999px) {
  #service02 #no1,
#service02 #no2,
#service02 #no3,
#service02 #no4 {
    padding: 9rem 2rem 5rem;
  }
}
#service02 #no2 dl {
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.06em;
  margin: 2.3333333333rem 0 0;
}
#service02 #no2 dl:first-of-type {
  margin: 4.3333333333rem 0 0;
}
#service02 #no2 dl dt {
  color: #9ED1A8;
  font-size: 1.3333333333rem;
}
@media only screen and (max-width: 999px) {
  #service02 #no2 dl dt {
    line-height: 1.5;
  }
}
#service02 #no2 dl dd {
  color: #878787;
  font-size: 1.3333333333rem;
  margin: 0.6666666667rem 0 0;
}
#service02 #no2 dl dd strong {
  font-size: 2.6666666667rem;
  font-family: Century Gothic, "Questrial", sans-serif;
  letter-spacing: 0.1em;
}
#service02 #no2 dl dd span {
  display: block;
  color: #595757;
  font-weight: normal;
  font-size: 1.0833333333rem;
  margin: 0.3333333333rem 0 0;
}
#service02 #no2 dl + .fs13 {
  margin: calc(3rem - 0.375em) 0 -0.375em;
}
#service02 #no5 h4 {
  color: #9ED1A8;
  font-size: 1.4166666667rem;
  text-align: center;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  padding: 0 0 3.1666666667rem;
  margin: 12.5vw 0 0;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service02 #no5 h4 {
    letter-spacing: 0.2175em;
    margin: 5rem 0 0;
  }
}
#service02 #no5 h4::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #9ED1A8;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#service02 #no5 h4 span {
  display: inline-block;
  position: relative;
}
#service02 #no5 h4 span::before {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/service/h-left.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  left: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #service02 #no5 h4 span::before {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    left: -2.5714285714rem;
  }
}
#service02 #no5 h4 span::after {
  width: 6.75rem;
  height: 5.1666666667rem;
  content: "";
  background: url("../img/service/h-right.svg") center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
}
@media only screen and (max-width: 999px) {
  #service02 #no5 h4 span::after {
    width: 5.7857142857rem;
    height: 4.4285714286rem;
    right: -2.5714285714rem;
  }
}
#service02 #no5 .flex2 {
  margin: 3.3333333333rem auto 0;
}
@media only screen and (min-width: 1001px) {
  #service02 #no5 .flex2 {
    max-width: 50rem;
  }
}
#service02 #no5 .flex2 p {
  font-family: "Noto Serif JP", serif;
  font-size: 0.9166666667rem;
  line-height: 1.75;
  text-align: left;
}
#service02 #no5 .flex2 p span {
  display: block;
  margin-top: 0.5em;
}
#service02 #no5 .flex2 .photo {
  display: none;
  width: 17.1111111111rem;
  height: 11rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media only screen and (max-width: 999px) {
  #service02 #no5 .flex2 .photo {
    margin: 0 auto 2em;
  }
}
#service02 #no6 {
  padding-bottom: 19.3333333333rem;
}
@media only screen and (max-width: 999px) {
  #service02 #no6 {
    padding-bottom: 8rem;
  }
}
#service02 #no6 .flex {
  max-width: 58.3333333333rem;
  justify-content: space-between;
  margin: 2.6666666667rem auto 0;
}
#service02 #no6 .flex dl {
  color: #595757;
  font-size: 1.3333333333rem;
  letter-spacing: 0;
}
@media only screen and (max-width: 999px) {
  #service02 #no6 .flex dl {
    font-size: 1rem;
  }
}
#service02 #no6 .flex dl dt {
  color: #9ED1A8;
}
#service02 #no6 .flex dl dd {
  line-height: 2;
  margin: calc(1.25rem - 0.5em) 0 -0.5em;
}
#service02 #no6 .flex .photo {
  width: 14rem;
  height: 9rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media only screen and (max-width: 999px) {
  #service02 #no6 .flex .photo {
    margin: 2rem auto 0;
  }
}
#service02 #no6 p {
  margin: 7.1666666667rem 0 0;
  font-size: 1.3333333333rem;
  color: #000;
}
@media only screen and (max-width: 999px) {
  #service02 #no6 p {
    margin: 6.6153846154rem 0 0;
    font-size: 1.0769230769rem;
    letter-spacing: 0;
  }
}
#service02 #no6 .link {
  text-align: center;
}
#service02 #no6 .link a img {
  display: inline;
  width: 100%;
  max-width: 33.3333333333rem;
  margin: 1.9166666667rem 0 0;
}
#service02 #no7 {
  padding-top: 20.8333333333rem;
}
@media only screen and (max-width: 999px) {
  #service02 #no7 {
    padding-top: 10rem;
  }
}
#service02 #no7 .flow {
  width: 38rem;
  height: 15.3333333333rem;
  color: #fff;
  font-size: 1.9166666667rem;
  font-weight: normal;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  margin: 0 auto;
  background: #9ED1A8;
  border-radius: 1rem;
  position: absolute;
  top: -7.8333333333rem;
  left: 50%;
  transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(-50%) translateY(1.5em);
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  #service02 #no7 .flow {
    width: calc(100% - 4rem);
    max-width: 456px;
    height: 6rem;
    font-size: 1.5rem;
    top: -3rem;
  }
}
#service02 #no7 .flow.play {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#service02 #no7 .flow.play span {
  opacity: 1;
}
#service02 #no7 .flow span {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.25s 0.375s;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
}
#service02 #no7 .flow::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6666666667rem 0.75rem 0 0.75rem;
  border-color: #9ED1A8 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#service02 #no7 h3 {
  margin: 0;
}
#service02 #no7 h3.border::after {
  width: 3rem;
  height: 1px;
  content: "";
  background: #9ED1A8;
  position: absolute;
  top: -3.3333333333rem;
  left: 50%;
  transform: translateX(-50%);
}
#service02 #no7 .flowList + h3 {
  margin: 4.3333333333rem 0 0;
}
#service02 #no7 .flowList {
  max-width: 54.3333333333rem;
  margin: 0 auto;
}
#service02 #no7 .flowList li {
  color: #595757;
  font-size: 1.6666666667rem;
  letter-spacing: 0;
  text-align: center;
  padding: 4.1666666667rem 2rem;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service02 #no7 .flowList li {
    font-size: 1.25rem;
    padding: 2rem 1rem;
  }
}
#service02 #no7 .flowList li:last-child::after {
  display: none;
}
#service02 #no7 .flowList li::after {
  width: 100%;
  height: 6rem;
  content: "";
  background: url("../img/service/07.svg") top center/100% no-repeat;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 2;
  mix-blend-mode: multiply;
}
@media only screen and (max-width: 999px) {
  #service02 #no7 .flowList li::after {
    background-size: 1000px;
  }
}
#service02 #no7 .flowList li.green {
  color: #fff;
  background: #9ED1A8;
}
#service02 #no7 .flowList li.green h3 {
  color: #fff;
  margin: 0 0 2.9166666667rem;
}
@media only screen and (max-width: 999px) {
  #service02 #no7 .flowList li.green h3 {
    margin-bottom: 2rem;
  }
}
#service02 #no7 .flowList li.green::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 9px 0 9px;
  border-color: #9ED1A8 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
#service02 #no7 .flowList li.white::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 9px 0 9px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
#service02 #no7 .flowList li span {
  display: block;
  font-size: 1.3333333333rem;
  line-height: 2;
  margin: calc(1.5rem - 0.5em) 0 -0.5em;
}
@media only screen and (max-width: 999px) {
  #service02 #no7 .flowList li span {
    font-size: 1rem;
  }
}
#service02 #no8 h3 {
  margin: 3.3333333333rem 0 0;
}
#service02 #no8 .fs16 {
  margin: 1.6666666667rem 0 0;
}
@media only screen and (max-width: 999px) {
  #service02 #no8 .fs16 {
    margin-top: 1.5rem;
  }
}
#service02 #no9 {
  padding: 7.8333333333rem 2em 12.5rem;
}
@media only screen and (max-width: 999px) {
  #service02 #no9 {
    padding: 5rem 2rem;
  }
}
@media only screen and (max-width: 999px) {
  #service02 #no9 .scroll {
    overflow-x: scroll;
  }
}
#service02 #no9 h3 {
  text-align: left;
}
#service02 #no9 table {
  width: 100%;
  max-width: 82.8333333333rem;
  font-size: 1.3333333333rem;
  letter-spacing: 0;
  margin: 6.5rem auto 0;
}
@media only screen and (max-width: 999px) {
  #service02 #no9 table {
    font-size: 0.875rem;
    margin: 1.5rem 0 0;
  }
}
#service02 #no9 table th {
  color: #9ED1A8;
  font-weight: bold;
  text-align: center;
  padding: 0 0 1em;
}
#service02 #no9 table td {
  color: #595757;
  line-height: 1.5;
  border-bottom: 1px solid rgba(158, 209, 168, 0.7);
  padding: 0.75em 1em;
}
@media only screen and (max-width: 999px) {
  #service02 #no9 table td {
    text-align: left;
    padding: 0.75rem 0;
  }
}
#service02 #no9 table td:first-child {
  max-width: 10rem;
  padding: 0.75em 0;
  text-align: center;
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service02 #no9 table td:first-child {
    text-align: left;
    white-space: nowrap;
    padding-right: 0.5em;
  }
}
#service02 #no9 table td:first-child::after {
  width: 1.3333333333rem;
  height: 1.3333333333rem;
  content: "";
  background: #fafafa;
  position: absolute;
  left: 100%;
  bottom: -0.5rem;
  z-index: 1;
}
@media only screen and (max-width: 999px) {
  #service02 #no9 table td:first-child::after {
    display: none;
  }
}
#service02 #no9 table td:nth-child(3) {
  position: relative;
}
@media only screen and (max-width: 999px) {
  #service02 #no9 table td:nth-child(3) {
    white-space: nowrap;
  }
}
#service02 #no9 table td:nth-child(3)::after {
  width: 1.3333333333rem;
  height: 1.3333333333rem;
  content: "";
  background: #fafafa;
  position: absolute;
  left: 100%;
  bottom: -0.5rem;
}

.subPage #usersVoices .userList {
  margin-bottom: 0 !important;
}
.subPage .contents {
  position: relative;
  padding: 12.5vw 0;
  /*
  		.baloon{
  			//display: none;//debug

  			@include pc {
  				width: c_vw(234 * 0.75);
  				//height: c_vw(234 * 0.75);
  				height: 8vw;
  				position: absolute;
  				bottom: c_rem(0);
  				right: c_vw(185 * 0.75);
  				z-index: 4;
  				transform: translateX(50%) translateY(12.5%);
  			}
  			@include sp {
  				width: calc(100% - 11rem);
  				height: 3rem;
  				position: fixed;
  				bottom: 3rem;
  				left: 1.5rem;
  				z-index: 4;
  				//transition: 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  				//transform-origin: right bottom;
  				//transform: scale(1);
  			}

  			&.show{
  				a{
  					transform: translateY(0%);
  					opacity: 1;
  					//visibility: visible;
  				}

  			}

  			&.fixed{
  				position: fixed;
  				a{

  				}
  			}

  			&.hide{
  				@include sp {
  					//right: cs_rem(-16);
  					//transform: scale(0.8);
  				}
  			}

  			a {
  				display: block;
  				width: 100%;
  				height: 100%;
  				background: #fff;
  				transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  				transform: translateY(100%);
  				opacity: 0;
  				//visibility: hidden;
  				@include pc {
  					//border-radius: 50%;
  					border-radius: 1em;
  				}
  				@include sp {
  					border-radius: 0.5em;
  				}

  				&:hover {
  					&::after{
  						transform: translateX(-50%) translateY(-50%) scale(1);
  					}

  					div{
  						transform: translateX(-50%) translateY(-50%) scale(1.25);
  						svg {
  							fill: #fff;
  						}

  						span {
  							color: #fff;
  						}
  					}


  				}

  				&::after{
  					content: '';
  					display: block;
  					width: 100%;
  					height: 100%;
  					background-color: $blue;
  					border-radius: 50%;
  					position: absolute;
  					top: 50%;
  					left: 50%;
  					transition: 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  					transform: translateX(-50%) translateY(-50%) scale(0);
  				}

  				div {
  					width: 100%;
  					text-align: center;
  					position: absolute;
  					top: 50%;
  					left: 50%;
  					z-index: 1;
  					transition: 0.375s cubic-bezier(0.25, 1, 0.5, 1);
  					transform: translateX(-50%) translateY(-50%) scale(1);
  					@include sp {
  						display: flex;
  						align-items: center;
  						justify-content: center;
  						gap: 0.5rem;
  					}
  				}

  				svg {
  					display: block;
  					fill: #3eaebe;
  					transition: 0.25s;
  					@include pc {
  						width: 100%;
  						height: c_vw(34 * 0.75);
  						//margin: 0 auto c_vw(20 * 0.75);
  						margin: 0 auto c_vw(16 * 0.75);
  					}
  					@include sp {
  						height: 1.5rem;
  					}
  				}

  				span {
  					display: block;
  					color: #3eaebe;
  					font-size: c_vw(13 * 0.75);
  					letter-spacing: 0.2em;
  					text-indent: 0.2em;
  					text-align: center;
  					line-height: 1.8;
  					margin: -0.4em 0;
  					transition: 0.25s;
  					@include pc {
  						width: 100%;
  					}
  					@include sp {
  						font-size: 0.875rem;
  						text-align: left;
  						letter-spacing: 0.1em;
  					}
  				}
  			}
  		}
  */
}
@media only screen and (max-width: 999px) {
  .subPage .contents {
    padding: 17.5vw 0;
  }
}
.subPage .contents .fix_btn {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
}
.subPage .contents .fix_btn .baloon, .subPage .contents .fix_btn .kurashimanet {
  pointer-events: auto;
}
.subPage .contents .fix_btn.fixed {
  height: auto;
  position: fixed;
}
.subPage .contents #usersVoices {
  overflow: unset !important;
}

@media screen and (min-width: 1000px) {
  .pcNone {
    display: none !important;
  }
  html {
    width: 100%;
    height: 100%;
    font-size: 16px;
  }
  body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-size: 1rem;
  }
  img {
    display: block;
    height: auto;
  }
}
@media screen and (max-width: 999px) {
  .spNone {
    display: none !important;
  }
  html {
    width: 100%;
    height: 100%;
    font-size: 13px;
  }
  body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-size: 1rem;
  }
  img {
    display: block;
    max-width: 100%;
    width: auto;
  }
}