@charset "UTF-8";
/******************************************************/
@keyframes opening-clip-ani01 {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}
@keyframes opening-txt-ani01 {
  0% {
    transform: translate(8%, 0) scale(2.1);
  }
  100% {
    transform: translate(0) scale(1);
  }
}
@keyframes opening-txt-ani02 {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes open01-out {
  0% {
    transform: translate(0, 0) rotateX(0deg);
  }
  100% {
    transform: translate(0, 50%) rotateX(-100deg);
  }
}
@keyframes open02-in {
  0% {
    transform: translate(0, -100%) rotateX(100deg);
  }
  100% {
    transform: translate(0, 0%) rotateX(0deg);
  }
}
@keyframes open-curtain {
  0% {
    transform-origin: center bottom;
    transform: translate(-50%, -50%) scaleY(0);
  }
  45% {
    transform-origin: center bottom;
    transform: translate(-50%, -50%) scaleY(1);
  }
  50% {
    transform-origin: center bottom;
    transform: translate(-50%, -50%) scaleY(1);
  }
  51% {
    transform-origin: center top;
    transform: translate(-50%, -50%) scaleY(1);
  }
  100% {
    transform-origin: center top;
    transform: translate(-50%, -50%) scaleY(0);
  }
}
@keyframes opening-clip-ani02 {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
  100% {
    clip-path: polygon(0 100%, 0 100%, 0 0, 0 0);
  }
}
@keyframes hero-image-ani {
  0% {
    opacity: 0;
    transform: translate(30%, 0) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0) scale(1);
  }
}
@keyframes hero-copy-ani {
  0% {
    opacity: 0;
    transform: translate(30%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0);
  }
}
@keyframes hero-roop-slide-ani {
  0% {
    opacity: 0;
    transform: translate(30%, 100%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
}
/* 無限ループ（8個中、前半4個分だけ動かす＝-50%） */
@keyframes hero-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* 動きが苦手な人向け（任意） */
@media (prefers-reduced-motion: reduce) {
  .hero-roop-slide-inner {
    animation: none;
  }
}
/******************************************************/
@keyframes fadeup {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate(0, 10%);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0, 0%);
  }
}
@keyframes titleani {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate(50%, 0%) scale(1.1);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0, 0%) scale(1);
  }
}
@keyframes title-bgani {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}
@keyframes people-cont-pc-ani {
  0% {
    opacity: 0;
    transform: translate(100%, 10%);
  }
  100% {
    opacity: 1;
    transform: translate(100%, 0%);
  }
}
@keyframes whiteGreenBlack {
  /* 白でスタート */
  0% {
    background-position: 100% 0%;
    opacity: 0;
  }
  /* 左から緑が入る */
  70% {
    background-position: 45% 0%;
    opacity: 1;
  }
  /* 左から黒で全面 */
  100% {
    background-position: 0% 0%;
    opacity: 1;
  }
}
@keyframes image-scaleani {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes fukidashi-scaleani {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes image-cartain-clipani {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}
@keyframes hover-bg-ani {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  55% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  60% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}
@keyframes title-text-ani {
  0% {
    display: inline-block;
    transform: translate(0, 100%);
    opacity: 0;
  }
  100% {
    display: inline-block;
    transform: translate(0, 0%);
    opacity: 1;
  }
}
@keyframes title-text-fadeani {
  0% {
    opacity: 0;
    transform: translate(0, 30%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0%);
  }
}
@keyframes view-more-btn-clip-ani {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  40% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  90% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
@keyframes view-more-btn-ani {
  0% {
    transform: translate(0, -50%);
    opacity: 1;
  }
  40% {
    transform: translate(60%, -50%);
    opacity: 0;
  }
  50% {
    transform: translate(-60%, -50%);
    opacity: 0;
  }
  90% {
    transform: translate(0%, -50%);
    opacity: 1;
  }
  100% {
    transform: translate(0%, -50%);
    opacity: 1;
  }
}
main {
  width: 100%;
  overflow: hidden;
}

header.header-wrap {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

header.header-wrap.is-show {
  opacity: 1;
  transform: translateY(0);
}

div.hero-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  /******/
  /* 横に流すレーン */
  /* 各アイテムは縮まないように */
  /******/
  /*div.hero-opening{*/
}
div.hero-wrap h1.hero-copy {
  width: 65%;
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, 0);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  div.hero-wrap h1.hero-copy {
    width: 34%;
    left: 10%;
    top: 40%;
    transform: translate(0%, 0);
  }
}
div.hero-wrap h1.hero-copy span {
  display: inline-block;
  width: 100%;
  transform: translate(30%, 0);
  opacity: 0;
  animation: hero-copy-ani 0.4s 2.8s cubic-bezier(0, 0.68, 0.58, 1) forwards;
}
@media screen and (min-width: 768px) {
  div.hero-wrap h1.hero-copy span {
    animation: hero-copy-ani 0.4s 3.2s cubic-bezier(0, 0.68, 0.58, 1) forwards;
  }
}
div.hero-wrap div.hero-image {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translate(30%, 0) scale(1.1);
  z-index: 2;
  animation: hero-image-ani 0.6s 2.8s cubic-bezier(0, 0.68, 0.58, 1) forwards;
}
@media screen and (min-width: 768px) {
  div.hero-wrap div.hero-image {
    animation: hero-image-ani 0.8s 3s cubic-bezier(0, 0.68, 0.58, 1) forwards;
  }
}
div.hero-wrap .hero-roop-slide-wrap {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 4%;
  z-index: 1;
  opacity: 0;
  transform: translate(30%, 100%);
  animation: hero-roop-slide-ani 1.4s 3.2s cubic-bezier(0, 0.68, 0.58, 1) forwards;
}
@media screen and (min-width: 768px) {
  div.hero-wrap .hero-roop-slide-wrap {
    bottom: 50px;
    animation: hero-roop-slide-ani 1.4s 3.6s cubic-bezier(0, 0.68, 0.58, 1) forwards;
  }
}
div.hero-wrap .hero-roop-slide-box {
  width: 100%;
  overflow: hidden;
}
div.hero-wrap .hero-roop-slide-inner {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 24px; /* item間の余白。不要なら0 */
  animation: hero-loop 52s linear infinite;
  will-change: transform;
}
div.hero-wrap .hero-roop-slide-inner img {
  height: 75px;
  width: auto;
}
div.hero-wrap .hero-roop-slide-inner .loop__item {
  flex: 0 0 auto;
}
div.hero-wrap div.hero-opening {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #FFF;
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  animation: opening-clip-ani02 0.4s 2.6s cubic-bezier(0, 0.68, 0.46, 1.02) forwards;
  z-index: 3;
  /*div.opning-text*/
}
@media screen and (min-width: 768px) {
  div.hero-wrap div.hero-opening {
    animation: opening-clip-ani02 0.8s 2.6s cubic-bezier(0, 0.68, 0.46, 1.02) forwards;
  }
}
div.hero-wrap div.hero-opening span.open-curtain {
  display: block;
  width: 50%;
  padding-top: 10%;
  background: #00a040;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center bottom;
  transform: translate(-50%, -50%) scaleY(0);
  animation: open-curtain 0.3s cubic-bezier(0, 0.68, 0.46, 1.02) forwards;
}
@media screen and (min-width: 768px) {
  div.hero-wrap div.hero-opening span.open-curtain {
    padding-top: 15%;
  }
}
div.hero-wrap div.hero-opening div.opning-text {
  width: 50%;
  perspective: 900px; /* 3D感 */
  perspective-origin: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
  overflow: hidden;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  animation: opening-clip-ani01 0.6s 0.2s cubic-bezier(0, 0.68, 0.46, 1.02) forwards;
  /*p.open01{*/
}
@media screen and (min-width: 768px) {
  div.hero-wrap div.hero-opening div.opning-text {
    padding: 5% 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
div.hero-wrap div.hero-opening div.opning-text p.open01 {
  width: 100%;
  display: flex;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transform: rotateX(0deg);
  animation: open01-out 0.4s 1.7s cubic-bezier(0.3, 0.77, 0.58, 1) forwards;
}
div.hero-wrap div.hero-opening div.opning-text p.open01 span {
  display: block;
  width: 100%;
}
div.hero-wrap div.hero-opening div.opning-text p.open01 span.txt01 {
  width: 44%;
  transform-origin: left bottom;
  transform: translate(8%, 0) scale(2.1);
  animation: opening-txt-ani01 0.4s 0.9s cubic-bezier(0.99, 0.52, 0.58, 1) forwards;
}
div.hero-wrap div.hero-opening div.opning-text p.open01 span.txt02 {
  width: 52%;
  margin-left: 4%;
  transform: translate(102%, 0);
  animation: opening-txt-ani02 0.4s 0.9s cubic-bezier(0.99, 0.52, 0.58, 1) forwards;
}
div.hero-wrap div.hero-opening div.opning-text p.open02 {
  position: absolute;
  inset: 0;
  margin: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  opacity: 1;
  transform: translate(0, -100%) rotateX(100deg);
  animation: open02-in 0.4s 1.7s cubic-bezier(0.3, 0.77, 0.58, 1) forwards;
}
@media screen and (min-width: 768px) {
  div.hero-wrap div.hero-opening div.opning-text p.open02 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div.hero-wrap div.hero-opening div.opning-text p.open02 span {
    width: 100%;
  }
}

/*******************************************************/
span.text-ani {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
span.text-ani.ani span {
  opacity: 0;
  transform: translate(0, 30%);
}
span.text-ani.ani.animation span {
  opacity: 0;
  transform: translate(0, 30%);
  animation: title-text-fadeani 0.6s ease-in-out forwards;
}

/*******************************************************/
/********************/
span.arrow {
  display: block;
  width: 30px;
  height: 1px;
  background: #222;
  position: absolute;
  right: 26%;
  bottom: 15%;
}
@media screen and (min-width: 768px) {
  span.arrow {
    right: 5%;
    bottom: 50%;
  }
}
span.arrow::before {
  content: " ";
  display: block;
  width: 10px;
  height: 1px;
  background: #222;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(40deg);
}
span.arrow::after {
  content: " ";
  display: block;
  width: 10px;
  height: 1px;
  background: #222;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(-40deg);
}

.js-parallax {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.js-parallax picture {
  display: block;
  height: 100%;
}

.js-parallax img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120%; /* 余白（120〜150%で調整） */
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform;
}

.prologue-wrap {
  margin-top: 18%;
  /*.prologue-txt-box*/
  /*prologue-image-wrap*/
}
@media screen and (min-width: 768px) {
  .prologue-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
.prologue-wrap .prologue-txt-box {
  width: 82%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .prologue-wrap .prologue-txt-box {
    width: auto;
    margin: 0;
    margin-left: 2%;
    order: 2;
  }
}
.prologue-wrap .prologue-txt-box p {
  letter-spacing: 0.08em;
}
@media screen and (min-width: 768px) {
  .prologue-wrap .prologue-txt-box p {
    font-size: clamp(15px, 1.18vw, 24px);
    line-height: 2.4; /* 好みで調整 */
  }
}
@media screen and (min-width: 1200px) {
  .prologue-wrap .prologue-txt-box p {
    font-size: 18px;
  }
}
.prologue-wrap .prologue-txt-box p:nth-of-type(2) {
  margin-top: 8%;
  margin-bottom: 6%;
}
.prologue-wrap .prologue-txt-box p.large-txt {
  font-size: 2.5em;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1200px) {
  .prologue-wrap .prologue-txt-box p.large-txt {
    font-size: 70px;
  }
}
.prologue-wrap .prologue-txt-box p.large-txt.ani {
  color: #00a040;
}
.prologue-wrap .prologue-txt-box p.large-txt.ani.animation {
  color: #333;
  transition: all 0.6s;
  transition-delay: 0.4s;
}
.prologue-wrap .prologue-image-wrap {
  margin-top: 10%;
}
@media screen and (min-width: 768px) {
  .prologue-wrap .prologue-image-wrap {
    width: 50%;
    margin-top: 0;
    order: 1;
  }
}
.prologue-wrap .prologue-image-wrap .prologue-image01 {
  width: 81.2%;
  border-radius: 0 20px 20px 0;
  position: relative;
  overflow: hidden;
  opacity: 0;
  filter: blur(10px);
  /*span*/
}
.prologue-wrap .prologue-image-wrap .prologue-image01.animation {
  opacity: 1;
  filter: blur(0px);
  transition: all 0.6s;
  transition-duration: 0.8s;
  transition-delay: 0.4s;
}
.prologue-wrap .prologue-image-wrap .prologue-image01 span {
  display: block;
  width: 100%;
  aspect-ratio: 325/210;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .prologue-wrap .prologue-image-wrap .prologue-image01 span {
    aspect-ratio: 535/370;
  }
}
.prologue-wrap .prologue-image-wrap .prologue-image02 {
  width: 57.3%;
  border-radius: 20px;
  overflow: hidden;
  margin-left: auto;
  margin-right: 5%;
  margin-top: 6%;
  position: relative;
  filter: blur(10px);
}
.prologue-wrap .prologue-image-wrap .prologue-image02.animation {
  opacity: 1;
  filter: blur(0px);
  transition: all 0.6s;
  transition-duration: 0.2s;
}
@media screen and (min-width: 768px) {
  .prologue-wrap .prologue-image-wrap .prologue-image02.animation {
    transition-duration: 0.4s;
  }
}
.prologue-wrap .prologue-image-wrap .prologue-image02 span {
  display: block;
  width: 100%;
  aspect-ratio: 215/150;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .prologue-wrap .prologue-image-wrap .prologue-image02 span {
    aspect-ratio: 370/260;
  }
}

/*.prologue-wrap*/
.to-brand-bnr {
  width: 90%;
  margin: 0 auto;
  margin-top: 14%;
  /*a*/
}
@media screen and (min-width: 768px) {
  .to-brand-bnr {
    max-width: 610px;
    margin-top: 8%;
    position: relative;
  }
}
.to-brand-bnr a {
  display: block;
  border: solid 1px #222;
  position: relative;
  /*brand-bnr-txt*/
}
.to-brand-bnr a .brand-bnr-txt {
  width: 60%;
  position: absolute;
  right: 0;
  top: 45%;
  transform: translate(0, -50%);
  text-align: center;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .to-brand-bnr a .brand-bnr-txt {
    top: 50%;
    right: 3%;
  }
}
.to-brand-bnr a .brand-bnr-txt span {
  display: block;
}
.to-brand-bnr a .brand-bnr-txt span.txt-ja {
  font-size: 0.8rem;
  padding-bottom: 5%;
}
@media screen and (min-width: 768px) {
  .to-brand-bnr a .brand-bnr-txt span.txt-ja {
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 0%;
  }
}
.to-brand-bnr a .brand-bnr-txt span.txt-en {
  font-size: 1.8rem;
  line-height: 1em;
  color: #00a9a5;
}
@media screen and (min-width: 768px) {
  .to-brand-bnr a .brand-bnr-txt span.txt-en {
    font-size: 2.8rem;
  }
}

/**/
.prologue-wrap .prologue-txt-box p span {
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(80deg, #000 0%, #000 45%, #8cc35a 55%, #FFF 65%, #FFF 100%);
  background-size: 250% 100%;
  background-position: 100% 0%;
  opacity: 0;
}
.prologue-wrap .prologue-txt-box p span.animation {
  animation: whiteGreenBlack 0.6s 0.2s ease-out forwards;
}

.sec-title-head {
  /*p*/
}
.sec-title-head h2 {
  font-size: 2.2rem;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .sec-title-head h2 {
    font-size: 3.125em;
    line-height: 1;
    /*			font-size: clamp(2.92rem, 3.2vw, 3.33rem);
    /*			font-size: 3.125rem;*/
  }
}
@media screen and (min-width: 1200px) {
  .sec-title-head h2 {
    font-size: 48px;
  }
}
.sec-title-head h2 span.sub-ani {
  display: inline-block;
  opacity: 0;
}
.sec-title-head h2 span.sub-ani.animation {
  animation: fadeup 0.6s 0.2s ease-out forwards;
}
.sec-title-head h2 span.sub-ani02 {
  display: inline-block;
  overflow: hidden;
}
.sec-title-head h2 span.sub-ani02 span {
  display: inline-block;
  opacity: 0;
  transform: translate(0, 80%);
  /*
  background: linear-gradient( 80deg,#FFFFFF 0%,#c4fba1 20%,#D0EBB9 40%,#9abe71 60%,#2b341f 70%, #000000 100%);
  background-size: 300%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  */
}
.sec-title-head h2 span.sub-ani02.animation span {
  animation: titleani 0.4s cubic-bezier(0, 0.86, 0.58, 1) forwards, title-bgani 1.2s cubic-bezier(0, 0.86, 0.58, 1) forwards;
}
.sec-title-head p.title-en {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 2%;
}
@media screen and (min-width: 768px) {
  .sec-title-head p.title-en {
    text-align: left;
    font-size: 1.81em;
    margin-bottom: 1%;
  }
}
@media screen and (min-width: 1200px) {
  .sec-title-head p.title-en {
    font-size: 28px;
  }
}
.sec-title-head p.title-en.ani {
  opacity: 0;
}
.sec-title-head p.title-en.animation {
  opacity: 1;
}
.sec-title-head p.txt-ja {
  line-height: 1.5;
  margin-top: 5%;
}
@media screen and (min-width: 768px) {
  .sec-title-head p.txt-ja {
    font-size: clamp(15px, 1.18vw, 16px);
    margin-top: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .sec-title-head p.txt-ja {
    font-size: 16px;
  }
}
.sec-title-head p.txt-ja.ani {
  opacity: 0;
}
.sec-title-head p.txt-ja.animation {
  animation: fadeup 0.6s 0.2s ease-out forwards;
}

div.view-more-btn {
  width: 54%;
  margin: 0 auto;
  margin-top: 10%;
  /*a*/
}
@media screen and (min-width: 768px) {
  div.view-more-btn {
    width: 192px;
    margin: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
}
div.view-more-btn a {
  display: block;
  position: relative;
  background: #222;
  border-radius: 60px;
  /*span*/
}
@media screen and (min-width: 768px) {
  div.view-more-btn a {
    transition: all 0.4s;
    overflow: hidden;
    position: relative;
  }
  div.view-more-btn a::before {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background: #00a040;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0, 0) scaleX(0);
  }
  div.view-more-btn a:hover {
    transition: all 0.6s;
    transform-origin: center center;
    transform: scale(0.96);
  }
  div.view-more-btn a:hover::before {
    animation: hover-bg-ani 0.6s ease-out forwards;
  }
}
div.view-more-btn a span {
  display: block;
}
div.view-more-btn a span.txt {
  font-style: italic;
  padding: 0.2em 0 0.2em 2em;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  div.view-more-btn a span.txt {
    font-size: clamp(14px, 1.18vw, 16px);
    position: relative;
    z-index: 3;
  }
}
div.view-more-btn a span.arrow {
  background: none;
  right: auto;
  bottom: auto;
  right: 10%;
  top: 52%;
  transform: translate(0, -50%);
}
div.view-more-btn a span.arrow span {
  width: 100%;
  height: 1px;
  background: #FFF;
}
div.view-more-btn a span.arrow::after, div.view-more-btn a span.arrow::before {
  background: #FFF;
}
div.view-more-btn:hover a span.arrow {
  /*				animation: view-more-btn-ani 0.8s ease-in-out forwards;*/
}
div.view-more-btn:hover a span.arrow span {
  animation: view-more-btn-clip-ani 0.8s ease forwards;
}
div.view-more-btn:hover a span.arrow::before {
  animation: view-more-btn-clip-ani 0.8s ease-in-out forwards;
}
div.view-more-btn:hover a span.arrow::after {
  animation: view-more-btn-clip-ani 0.8s ease-in-out forwards;
}

/*div.view-more-btn{*/
section.sec-environment {
  background: linear-gradient(135deg, #9ec36f 0%, #b4db9a 35%, #c1e8b2 70%, #b5e29c 100%);
  border-radius: 50px;
  margin-top: 15%;
  padding: 12% 0 20% 0;
  /*
  @include mq(pc-middle) {
  	margin-top: 130px;
  	padding: 120px;
  }
  	*/
}
@media screen and (min-width: 768px) {
  section.sec-environment {
    margin-top: 140px;
    padding: 90px 60px;
  }
}
section.sec-environment .sec-environment-head {
  /*p*/
}
@media screen and (min-width: 768px) {
  section.sec-environment .sec-environment-head {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
}
section.sec-environment .sec-environment-head h2 {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-environment .sec-environment-head h2 {
    /*				font-size: 3.43em;
    /*				font-size: 3.125rem;*/
    text-align: left;
  }
}
section.sec-environment .sec-environment-head p.title-en-environment {
  text-align: center;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  section.sec-environment .sec-environment-head p.title-en-environment {
    text-align: left;
  }
}
section.sec-environment .sec-environment-head p.txt-ja {
  text-align: center;
  line-height: 1.5;
  margin-top: 5%;
}
@media screen and (min-width: 768px) {
  section.sec-environment .sec-environment-head p.txt-ja {
    margin-top: 20px;
    text-align: left;
    font-size: clamp(14px, 1.18vw, 16px);
  }
}

.sec-environment-cont {
  position: relative;
  margin-top: 10%;
}
@media screen and (min-width: 768px) {
  .sec-environment-cont {
    margin-top: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
  }
}
.sec-environment-cont .environment-inner {
  width: 100%;
  position: relative;
  padding: 10% 0 0 0;
}
@media screen and (min-width: 768px) {
  .sec-environment-cont .environment-inner {
    display: flex;
    max-width: 1200px;
    align-items: center;
    margin: 0 auto;
    padding: 0;
  }
}
.sec-environment-cont .environment-inner figure {
  width: 80%;
  aspect-ratio: 1/1;
  margin: 0 auto;
  position: relative;
}
.sec-environment-cont .environment-inner figure::before {
  content: " ";
  display: block;
  width: 110%;
  height: 110%;
  position: absolute;
  background: #FFF;
  opacity: 0.5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
@media screen and (min-width: 768px) {
  .sec-environment-cont .environment-inner figure {
    width: 42%;
    margin: 0;
  }
}
.sec-environment-cont .environment-inner figure span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 50%;
}
.sec-environment-cont .environment-inner figure picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 0.6s;
  transform: scale(0);
  border-radius: 50%;
}
.sec-environment-cont .environment-inner figure picture.is-shown {
  opacity: 1;
  transform: scale(1.01);
}
.sec-environment-cont .environment-inner figure picture.is-active {
  opacity: 0;
  transform: scale(0);
  animation: image-scaleani 1s 0s cubic-bezier(0, 0.64, 0.16, 1.01) forwards;
  z-index: 2;
}
.sec-environment-cont .environment-inner figure picture.is-shown:not(.is-active) {
  z-index: 1;
}

div.environment-list-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10%;
  /*
  @include mq(pc) {
  	width: 86%;
  	margin: 0 auto;
  	margin-top: 5%;
  }*/
}
@media screen and (min-width: 768px) {
  div.environment-list-wrap {
    width: 58%;
    display: block;
  }
}
div.environment-list-wrap div.environment-dots {
  position: absolute;
  left: 5%;
  top: 4%;
}
@media screen and (min-width: 768px) {
  div.environment-list-wrap div.environment-dots {
    display: none;
  }
}
div.environment-list-wrap div.environment-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFF;
  margin-bottom: 30px;
}
div.environment-list-wrap div.environment-dots span.is-active {
  background: #00a040;
}
div.environment-list-wrap .environment-list {
  width: 100%;
  /*environment-point*/
}
div.environment-list-wrap .environment-list .environment-point {
  position: relative;
  margin-left: 15%;
  margin-right: 5%;
  display: none;
  opacity: 0.4;
  transition: opacity 0.3s;
}
@media screen and (min-width: 768px) {
  div.environment-list-wrap .environment-list .environment-point {
    display: block;
    margin-left: 80px;
    margin-right: 0;
    margin-bottom: 30px;
    padding-bottom: 5px;
    transition: all 0.4s;
    /*is-active*/
  }
  div.environment-list-wrap .environment-list .environment-point::after {
    content: " ";
    display: block;
    width: 100%;
    height: 1px;
    background: #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(0, 0);
  }
  div.environment-list-wrap .environment-list .environment-point.is-active { /**/
    transition: all 0.4s;
    transform: scale(1.08);
  }
  div.environment-list-wrap .environment-list .environment-point.is-active::after {
    transform: scaleX(0);
    transform-origin: left center;
    animation: border-scale-X 0.6s ease-out forwards;
  }
  div.environment-list-wrap .environment-list .environment-point.is-active span.point__btn-arrow {
    background: #00A040;
    transition: all 0.4s;
    transform: scale(1.2);
  }
  div.environment-list-wrap .environment-list .environment-point.is-active span.point__btn-arrow span {
    background: #FFF;
    transition: all 0.4s;
  }
  div.environment-list-wrap .environment-list .environment-point.is-active span.point__btn-arrow span::before, div.environment-list-wrap .environment-list .environment-point.is-active span.point__btn-arrow span::after {
    background: #FFF;
    transition: all 0.4s;
  }
}
div.environment-list-wrap .environment-list .environment-point p.point__num {
  color: #FFF;
  line-height: 1;
}
div.environment-list-wrap .environment-list .environment-point h3.point__title {
  font-size: 1.4rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  div.environment-list-wrap .environment-list .environment-point h3.point__title {
    font-size: 1.37em;
  }
}
@media screen and (min-width: 1200px) {
  div.environment-list-wrap .environment-list .environment-point h3.point__title {
    font-size: 24px;
  }
}
div.environment-list-wrap .environment-list .environment-point p.point__desc {
  letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) {
  div.environment-list-wrap .environment-list .environment-point p.point__desc {
    font-size: 1.12em;
  }
}
@media screen and (min-width: 1200px) {
  div.environment-list-wrap .environment-list .environment-point p.point__desc {
    font-size: 16px;
  }
}
div.environment-list-wrap .environment-list .environment-point span.point__btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  width: 2em;
  height: 2em;
  line-height: 1;
  border-radius: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 768px) {
  div.environment-list-wrap .environment-list .environment-point span.point__btn-arrow {
    bottom: auto;
    top: 0;
  }
}
div.environment-list-wrap .environment-list .environment-point span.point__btn-arrow span {
  display: block;
  width: 1em;
  height: 1px;
  background: #222;
  position: relative;
  transition: all 0.4s;
}
div.environment-list-wrap .environment-list .environment-point span.point__btn-arrow span::before, div.environment-list-wrap .environment-list .environment-point span.point__btn-arrow span::after {
  content: " ";
  display: block;
  width: 0.5em;
  height: 1px;
  background: #222;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(30deg);
  transition: all 0.4s;
}
div.environment-list-wrap .environment-list .environment-point span.point__btn-arrow span::after {
  transform: rotate(-30deg);
}
div.environment-list-wrap .environment-list .environment-point.is-active {
  display: block;
  opacity: 1;
}

@keyframes border-scale-X {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  100% {
    transform-origin: left center;
    transform: scaleX(1);
  }
}
@keyframes sec-strengths-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**************************************************************************/
section.sec-strengths {
  position: relative;
  margin-top: 20%;
  margin-bottom: 60%;
}
@media screen and (min-width: 768px) {
  section.sec-strengths {
    margin-top: 220px;
    margin-bottom: 220px;
  }
}
section.sec-strengths div.sec-strengths-cont-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 20% 0 40%;
  background: linear-gradient(135deg, #d45a5a 0%, #dc6068 35%, #e56b7f 65%, #ef6f9a 100%);
  border-radius: 50px;
  position: relative;
  z-index: 1;
}
section.sec-strengths div.sec-strengths-cont-wrap.ani {
  opacity: 0;
}
section.sec-strengths div.sec-strengths-cont-wrap.ani.animation {
  animation: sec-strengths-ani 0.6s cubic-bezier(0.52, 0.08, 1, 1) forwards;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.sec-strengths-cont-wrap {
    width: 84%;
    padding: 100px 0 100px 75px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-strengths div.sec-strengths-cont-wrap {
    width: 74%;
    padding: 100px 0 100px 75px;
  }
}
section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head {
  color: #FFF;
  position: relative;
  z-index: 2;
}
section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head p.title-en-strengths {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head p.title-en-strengths {
    text-align: left;
  }
}
section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head h2 {
  text-align: center;
}
section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head h2 span.sub-ani02 {
  /*
  	span{
  		background: linear-gradient( 80deg,#FFFFFF 0%,#98DA6E 20%,#D0EBB9 40%,#556a3d 60%,#FFF 70%, #FFF 100%);
  		background-size: 300%;
  		background-position: 0% 0%;
  		-webkit-background-clip: text;
  		background-clip: text;
  		-webkit-text-fill-color: transparent;
  	}
  		*/
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head h2 {
    text-align: left;
  }
}
section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head p.txt-ja {
  text-align: center;
  margin-top: 5%;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head p.txt-ja {
    text-align: left;
    line-height: 1.8em;
    margin-top: 3%;
    margin-bottom: 3%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.sec-strengths-cont-wrap div.sec-strengths-head .view-more-btn {
    margin: 0;
  }
}
section.sec-strengths div.strengths-image {
  width: 82%;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  transform: translate(0, 50%);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.strengths-image {
    width: 48%;
    right: 0;
    bottom: auto;
    top: 0;
    transform: translate(37%, -15%);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-strengths div.strengths-image {
    width: 48%;
    right: 0;
    bottom: auto;
    top: 0;
    transform: translate(38%, -15%);
  }
}
@media screen and (min-width: 1200px) {
  section.sec-strengths div.strengths-image {
    width: 54%;
    right: 0;
    bottom: auto;
    top: 0;
    transform: translate(34%, -15%);
  }
}
section.sec-strengths div.strengths-image.ani {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  opacity: 0;
}
section.sec-strengths div.strengths-image.ani.animation {
  animation: image-cartain-clipani 0.6s 0.6s ease-out forwards;
}
section.sec-strengths div.view-more-btn {
  position: relative;
}
section.sec-strengths div.decobox {
  width: 100%;
  height: 100%;
  border-radius: 50px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
}
section.sec-strengths div.decobox span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  color: #FFF;
  opacity: 0.2;
  line-height: 0.6;
}
section.sec-strengths div.decobox span.deconum01 {
  font-size: clamp(128px, 4.02vw + 113.33px, 168px);
  top: 10%;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.decobox span.deconum01 {
    top: 2%;
    left: 2%;
  }
}
section.sec-strengths div.decobox span.deconum02 {
  font-size: clamp(100px, 3.52vw + 87.15px, 135px);
  top: 0;
  left: 80%;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.decobox span.deconum02 {
    top: 12%;
    left: 30%;
  }
}
section.sec-strengths div.decobox span.deconum03 {
  font-size: clamp(86px, 6.43vw + 62.53px, 150px);
  top: 21%;
  left: 70%;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.decobox span.deconum03 {
    top: 2%;
    left: 43%;
  }
}
section.sec-strengths div.decobox span.deconum04 {
  font-size: 88px;
  top: 60%;
  left: 0;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.decobox span.deconum04 {
    top: 37%;
    left: -2%;
  }
}
section.sec-strengths div.decobox span.deconum05 {
  font-size: clamp(118px, -0.2vw + 120.73px, 120px);
  top: 80%;
  left: 0;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.decobox span.deconum05 {
    top: 45%;
    left: 49%;
  }
}
section.sec-strengths div.decobox span.deconum06 {
  font-size: clamp(62px, 10.05vw + 25.32px, 162px);
  top: 36%;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.decobox span.deconum06 {
    top: 78%;
    left: 2%;
  }
}
section.sec-strengths div.decobox span.deconum07 {
  font-size: clamp(90px, 2.81vw + 79.74px, 118px);
  top: 67%;
  left: 68%;
}
@media screen and (min-width: 768px) {
  section.sec-strengths div.decobox span.deconum07 {
    top: 74%;
    left: 42%;
  }
}

/*section.sec-strengths*/
/**************************************************************************/
section.sec-ourbusiness {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  background: url(../myimg/top/business-bg_sp.jpg) no-repeat center bottom;
  padding: 12% 0;
  border-radius: 20px 20px 0 0;
}
@media screen and (min-width: 768px) {
  section.sec-ourbusiness {
    background: url(../myimg/top/business-bg_pc.jpg) no-repeat center bottom;
    background-size: cover;
    padding: 8% 0 150px 0;
  }
}
section.sec-ourbusiness div.sec-ourbusiness-head p.title-en-ourbusiness {
  text-align: center;
}
section.sec-ourbusiness div.sec-ourbusiness-head h2 {
  text-align: center;
}

.ourbusiness-link-wrap {
  /*ul*/
}
.ourbusiness-link-wrap ul {
  width: 82%;
  margin: 0 auto;
  margin-top: 10%;
  /*li*/
}
@media screen and (min-width: 768px) {
  .ourbusiness-link-wrap ul {
    width: 74.2%;
    margin-top: 60px;
    display: flex;
  }
}
.ourbusiness-link-wrap ul li {
  /*a*/
}
@media screen and (min-width: 768px) {
  .ourbusiness-link-wrap ul li {
    width: 48.6%;
  }
}
.ourbusiness-link-wrap ul li:first-child {
  margin-bottom: 5%;
}
@media screen and (min-width: 768px) {
  .ourbusiness-link-wrap ul li:first-child {
    margin-bottom: 0;
    margin-right: 2.8%;
  }
}
.ourbusiness-link-wrap ul li a {
  display: block;
  position: relative;
}
.ourbusiness-link-wrap ul li a div.ourbusiness-card-img.ani {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  opacity: 0;
}
.ourbusiness-link-wrap ul li a div.ourbusiness-card-img.ani.animation {
  animation: image-cartain-clipani 0.6s 0.2s ease-out forwards;
}
.ourbusiness-link-wrap ul li a .ourbusiness-card-title {
  position: absolute;
  width: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 3rem;
  letter-spacing: 0.1em;
}
.ourbusiness-link-wrap ul li a .ourbusiness-card-title.ani {
  opacity: 0;
}
.ourbusiness-link-wrap ul li a .ourbusiness-card-title.ani.animation {
  animation: fadeup 0.6s 0.6s ease-out forwards;
  transition: all 0.6s;
}
.ourbusiness-link-wrap ul li a span.ourbusiness-card-sub {
  display: block;
  color: #FFF;
  font-size: 0.9rem;
  position: absolute;
  left: 5%;
  bottom: 3%;
  z-index: 2;
  transform: translate(0, 0);
  animation: business-ani-bk 0.6s 0s ease forwards;
}
.ourbusiness-link-wrap ul li a span.arrow {
  background: #FFF;
  right: 5%;
  bottom: 8%;
  transition: all 0.4s;
}
@media screen and (min-width: 1000px) {
  .ourbusiness-link-wrap ul li a span.arrow {
    bottom: 7%;
  }
}
.ourbusiness-link-wrap ul li a span.arrow::before, .ourbusiness-link-wrap ul li a span.arrow::after {
  background: #FFF;
}
.ourbusiness-link-wrap ul li a:hover div.ourbusiness-card-title {
  color: #F81E66;
  transition: all 0.4s;
}
.ourbusiness-link-wrap ul li a:hover span.arrow {
  background: #F81E66;
}
.ourbusiness-link-wrap ul li a:hover span.arrow::before, .ourbusiness-link-wrap ul li a:hover span.arrow::after {
  background: #F81E66;
}
.ourbusiness-link-wrap ul li a:hover span.ourbusiness-card-sub {
  animation: business-ani 0.6s 0s ease forwards;
}
.ourbusiness-link-wrap ul li:last-child a span.ourbusiness-card-sub {
  animation: business-ani-bk-ranta 0.6s 0s ease forwards;
}
.ourbusiness-link-wrap ul li:last-child a span.arrow {
  transition: all 0.4s;
}
.ourbusiness-link-wrap ul li:last-child a:hover div.ourbusiness-card-title {
  color: #8CC359;
  transition: all 0.4s;
}
.ourbusiness-link-wrap ul li:last-child a:hover span.ourbusiness-card-sub {
  animation: business-ani-ranta 0.6s 0s ease forwards;
}
.ourbusiness-link-wrap ul li:last-child a:hover span.arrow {
  background: #8CC359;
}
.ourbusiness-link-wrap ul li:last-child a:hover span.arrow::before, .ourbusiness-link-wrap ul li:last-child a:hover span.arrow::after {
  background: #8CC359;
}

/*ourbusiness-link-wrap*/
@keyframes business-ani {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #FFF;
  }
  40% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #F81E66;
  }
  50% {
    transform: translate(0, 40%);
    opacity: 0;
    color: #F81E66;
  }
  80% {
    transform: translate(0, 0%);
    opacity: 1;
    color: #F81E66;
  }
  100% {
    transform: translate(0, 0);
    color: #F81E66;
  }
}
@keyframes business-ani-bk {
  0% {
    transform: translate(0, 0);
    color: #F81E66;
  }
  30% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #F81E66;
  }
  40% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #F81E66;
  }
  50% {
    transform: translate(0, 40%);
    opacity: 0;
    color: #FFF;
  }
  80% {
    transform: translate(0, 0%);
    opacity: 1;
    color: #FFF;
  }
  100% {
    transform: translate(0, 0);
    color: #FFF;
  }
}
@keyframes business-ani-ranta {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #FFF;
  }
  40% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #8CC359;
  }
  50% {
    transform: translate(0, 40%);
    opacity: 0;
    color: #8CC359;
  }
  80% {
    transform: translate(0, 0%);
    opacity: 1;
    color: #8CC359;
  }
  100% {
    transform: translate(0, 0);
    color: #8CC359;
  }
}
@keyframes business-ani-bk-ranta {
  0% {
    transform: translate(0, 0);
    color: #8CC359;
  }
  30% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #8CC359;
  }
  40% {
    transform: translate(0, -40%);
    opacity: 0;
    color: #8CC359;
  }
  50% {
    transform: translate(0, 40%);
    opacity: 0;
    color: #FFF;
  }
  80% {
    transform: translate(0, 0%);
    opacity: 1;
    color: #FFF;
  }
  100% {
    transform: translate(0, 0);
    color: #FFF;
  }
}
/**************************************************************************/
section.sec-people {
  padding: 20% 0 25%;
}
@media screen and (min-width: 768px) {
  section.sec-people {
    padding: 180px 0 180px 0;
  }
}
section.sec-people .sec-people-head {
  /*p*/
}
@media screen and (min-width: 768px) {
  section.sec-people .sec-people-head {
    width: 96%;
    max-width: 1200px;
    margin: 0;
    padding: 0 60px 0 60px;
    position: relative;
    box-sizing: border-box;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-people .sec-people-head {
    margin: 0 auto;
  }
}
section.sec-people .sec-people-head h2 {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-people .sec-people-head h2 {
    /*				font-size: 3.125rem;*/
    text-align: left;
  }
}
section.sec-people .sec-people-head p.title-en-people {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-people .sec-people-head p.title-en-people {
    text-align: left;
  }
}
section.sec-people .sec-people-head p.txt-ja {
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-top: 5%;
}
@media screen and (min-width: 768px) {
  section.sec-people .sec-people-head p.txt-ja {
    text-align: left;
    font-size: clamp(15px, 1.18vw, 16px);
  }
}
@media screen and (min-width: 768px) {
  section.sec-people .sec-people-head div.view-more-btn {
    width: 192px;
    margin: 0;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

/* ===== スライド部分 ===== */
.people-slide-wrap {
  width: 100%;
  overflow: hidden;
  margin-top: 10%;
  /*
  &.ani{
  	opacity: 0; transform: translate(30%, 100%);
  	&.animation{
  		animation: hero-roop-slide-ani 0.6s cubic-bezier(0, 0.68, 0.58, 1) forwards;
  		@include mq(pc) {
  			animation: hero-roop-slide-ani 0.6s cubic-bezier(0, 0.68, 0.58, 1) forwards;
  		}
  	}
  }
  	*/
}
@media screen and (min-width: 768px) {
  .people-slide-wrap {
    width: 93%;
    margin: 0;
    margin-top: 60px;
    margin-left: auto;
    padding-bottom: 60px;
    overflow-x: hidden;
  }
}
@media screen and (min-width: 1200px) {
  .people-slide-wrap {
    width: 98%;
  }
}
@media screen and (min-width: 1200px) {
  .people-slide-wrap {
    width: calc(1200px + (100% - 1320px) / 2);
  }
}

.people-slide-box {
  display: flex;
}
@media screen and (min-width: 768px) {
  .people-slide-box {
    align-items: flex-end;
  }
}
.people-card.swiper-slide {
  box-sizing: border-box;
  transition: transform 0.3s ease;
  width: 100%;
  transform: none;
  /*people-image*/
}
@media screen and (min-width: 768px) {
  .people-card.swiper-slide {
    width: auto;
    transform-origin: left bottom;
    transition: transform 450ms ease;
    will-change: transform;
    transition: all 0.4s;
    margin-top: 2.52em;
    /* .swiper-slide-active */
  }
  .people-card.swiper-slide.swiper-slide-active {
    width: 24% !important;
    transition: all 0.4s;
    transform-origin: left bottom;
    z-index: 2;
    margin-top: 0;
  }
  .people-card.swiper-slide.swiper-slide-active .people-image {
    width: 100%;
    margin: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-image a {
    display: block;
  }
  .people-card.swiper-slide.swiper-slide-active .people-image a picture {
    display: block;
    transform: scale(1);
    transition: all 0.4s;
    opacity: 1;
  }
  .people-card.swiper-slide.swiper-slide-active .people-image a:hover picture {
    transform: scale(1.1);
    opacity: 0.8;
    transition: all 0.4s;
  }
}
@media screen and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont {
    margin: 0;
    display: block;
    width: 100%;
    min-width: 400px;
    position: absolute;
    right: -12%;
    top: 0;
    transform: translate(100%, 0);
    opacity: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1000px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont {
    width: 600px;
  }
}
@media screen and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont a p {
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont a p {
    font-size: clamp(15px, 1.18vw, 18px);
  }
}
@media screen and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont a div.prof {
    margin-top: 0;
  }
  .people-card.swiper-slide.swiper-slide-active .people-cont a div.prof span.part {
    display: inline-block;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont a div.prof span.part {
    font-size: clamp(14px, 1.18vw, 14px);
  }
}
@media screen and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont a div.prof span.part.green {
    color: #00a040;
  }
  .people-card.swiper-slide.swiper-slide-active .people-cont a div.prof span.name {
    display: inline-block;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (min-width: 1000px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont a div.prof span.name {
    font-size: clamp(14px, 1.18vw, 14px);
  }
}
.people-card.swiper-slide .people-image {
  width: 90%;
  margin: 0 auto;
  position: relative;
  border-radius: 0 20px 20px 20px;
  overflow: hidden;
}
@media screen and (min-width: 1000px) {
  .people-card.swiper-slide .people-image {
    width: 100%;
    margin: 0;
  }
}
.people-card.swiper-slide .people-image span.type {
  display: block;
  width: 5em;
  height: 5em;
  padding: 2% 0 2% 4%;
  box-sizing: border-box;
  line-height: 1.2em;
  color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.people-card.swiper-slide .people-image span.type.type-new::before {
  content: " ";
  display: block;
  width: 110%;
  height: 110%;
  background: #62c5d8;
  clip-path: polygon(0 0, 0 100%, 100% 0);
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0, 0);
  z-index: -1;
}
.people-card.swiper-slide .people-image span.type.type-career::before {
  content: " ";
  display: block;
  width: 110%;
  height: 110%;
  background: #fbb03b;
  clip-path: polygon(0 0, 0 100%, 100% 0);
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0, 0);
  z-index: -1;
}
.people-card.swiper-slide .people-cont {
  opacity: 0;
  margin-top: 25%;
}
@media screen and (min-width: 768px) {
  .people-card.swiper-slide .people-cont {
    margin-top: 0;
    display: none;
  }
}
.people-card.swiper-slide .people-cont p {
  text-align: center;
  font-weight: 600;
  line-height: 1.4em;
}
.people-card.swiper-slide .people-cont .prof {
  margin-top: 4%;
}
.people-card.swiper-slide .people-cont .prof span.part {
  display: block;
  text-align: center;
  color: #ED232A;
  line-height: 1;
  margin-bottom: 4%;
}
.people-card.swiper-slide .people-cont .prof span.part.green {
  color: #00a040;
}
.people-card.swiper-slide .people-cont .prof span.name {
  display: block;
  text-align: center;
  line-height: 1;
}
.people-card.swiper-slide .people-cont .prof span.name span.small-txt {
  font-size: 0.8em;
}
.people-card.swiper-slide.swiper-slide-active .people-cont {
  animation: fadeup 0.6s 0.4s ease-out forwards;
}
@media screen and (min-width: 768px) {
  .people-card.swiper-slide.swiper-slide-active .people-cont {
    animation: people-cont-pc-ani 0.4s 0.4s ease forwards;
  }
}

/**/
/* ===== ナビ（矢印 + 1/8） ===== */
.people-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: absolute;
  left: 50%;
  bottom: 23%;
  transform: translate(-50%, 0);
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .people-nav {
    left: 0;
    bottom: 0;
    transform: translate(0%, 0);
  }
}

.message-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .message-nav {
    display: none;
  }
}

.message-next,
.message-prev,
.people-prev,
.people-next {
  width: 2em;
  height: 2em;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border-radius: 9999px; /* 50%より強い保険 */
  display: inline-flex; /* 中身で崩れない */
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  background: #fff;
  padding: 0;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .message-next,
  .message-prev,
  .people-prev,
  .people-next {
    cursor: pointer;
  }
}

.message-fraction,
.people-fraction {
  font-weight: 600;
}
.message-fraction span.message-current,
.message-fraction span.people-current,
.people-fraction span.message-current,
.people-fraction span.people-current {
  font-size: 1.1rem;
  color: #00a040;
}
.message-fraction span.message-total,
.message-fraction span.people-total,
.people-fraction span.message-total,
.people-fraction span.people-total {
  font-size: 0.9rem;
}

/**************************************************************************/
section.sec-message {
  background: radial-gradient(120% 120% at 20% 20%, rgba(155, 190, 90, 0.45) 0%, rgba(155, 190, 90, 0.15) 35%, rgba(155, 190, 90, 0) 60%), linear-gradient(135deg, #9fc36a 0%, #b7dd8f 35%, #c6e8a4 65%, #b6e4b0 100%);
  padding-bottom: 15%;
  padding: 15% 0;
  border-radius: 50px;
  /*.sec-message-head{*/
  /*/message-wrap*/
}
@media screen and (min-width: 768px) {
  section.sec-message {
    padding: 80px 0;
    border-radius: 50px 50px 0 0;
  }
}
section.sec-message .sec-message-head {
  margin-bottom: 8%;
  /*p*/
}
@media screen and (min-width: 768px) {
  section.sec-message .sec-message-head {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 60px;
    position: relative;
    /*			background: #F00;*/
  }
}
section.sec-message .sec-message-head h2 {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-message .sec-message-head h2 {
    /*				font-size: 3.125rem;*/
    text-align: left;
  }
}
section.sec-message .sec-message-head p.title-en-message {
  text-align: center;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  section.sec-message .sec-message-head p.title-en-message {
    text-align: left;
  }
}
section.sec-message .message-wrap .message-cont {
  width: 92%;
  margin: 0 auto;
  overflow: hidden;
  /*.swiper-wrapper {*/
}
@media screen and (min-width: 768px) {
  section.sec-message .message-wrap .message-cont {
    width: 96%;
    max-width: 1200px;
    box-sizing: border-box;
  }
}
section.sec-message .message-wrap .message-cont .swiper-wrapper {
  /*.message-card*/
}
@media screen and (min-width: 768px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card {
  /*.message-txt-box{*/
}
@media screen and (min-width: 768px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card {
    width: 48%;
  }
}
section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-img.ani {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  opacity: 0;
}
section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-img.ani.animation {
  animation: image-cartain-clipani 0.6s 0.2s ease-out forwards;
}
section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box {
  margin-top: 4%;
}
@media screen and (min-width: 768px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1200px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box p.message-txt01 {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box p.message-txt02 {
    font-size: clamp(15px, 1.18vw, 16px);
  }
}
@media screen and (min-width: 1200px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box p.message-txt02 {
    font-size: 16px;
  }
}
section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box p.message-prof {
  line-height: 1.5;
  margin-top: 5%;
}
@media screen and (min-width: 768px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box p.message-prof {
    font-size: clamp(14px, 1vw, 18px);
  }
}
@media screen and (min-width: 1200px) {
  section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box p.message-prof {
    font-size: 20px;
    margin-top: 20px;
  }
}
section.sec-message .message-wrap .message-cont .swiper-wrapper .message-card .message-txt-box p.message-prof span.name span.small-txt {
  display: block;
  font-size: 0.7em;
}
section.sec-message div.miryoku-box {
  width: 90%;
  margin: 0 auto;
  margin-top: 10%;
  padding: 10%;
  border-radius: 10px;
  background: #FFF;
}
@media screen and (min-width: 768px) {
  section.sec-message div.miryoku-box {
    width: 96%;
    max-width: 1000px;
    padding: 20px;
    margin-top: 60px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.miryoku-box {
    width: 96%;
    max-width: 1000px;
    padding: 40px;
    margin-top: 60px;
  }
}
section.sec-message div.miryoku-box h3 {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 3%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-message div.miryoku-box h3 {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    font-size: clamp(20px, 1.2em, 24px);
  }
}
@media screen and (min-width: 1200px) {
  section.sec-message div.miryoku-box h3 {
    font-size: 24px;
  }
}
section.sec-message div.miryoku-box ul {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-message div.miryoku-box ul {
    width: 80%;
    margin: 0 auto;
    margin-top: 15px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.miryoku-box ul {
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
  }
}
section.sec-message div.miryoku-box ul li {
  display: block;
  line-height: 1.6;
  margin-bottom: 1em;
  padding-left: 1.8em;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section.sec-message div.miryoku-box ul li {
    font-size: clamp(15px, 1.2em, 18px);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.miryoku-box ul li {
    font-size: 20px;
  }
}
section.sec-message div.miryoku-box ul li span.num {
  line-height: 1;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 10%;
}
section.sec-message div.miryoku-box ul li span.num::before {
  content: " ";
  display: block;
  width: 1.6em;
  height: 1.6em;
  background: #00a040;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/**/
/**************************************************************************/
section.sec-crosstalk {
  margin-bottom: 25%;
  /*.sec-message-head{*/
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk {
    margin-bottom: 180px;
    overflow: hidden;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap {
  background: linear-gradient(135deg, #d65f5b 0%, #dd5f67 35%, #e85f7f 65%, #f06b95 100%);
  padding: 25% 0 15% 0;
  border-radius: 50px;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap {
    background: linear-gradient(90deg, #d56c67 0%, #dd6f72 30%, #e97585 60%, #f07ea0 100%);
    width: 88%;
    margin-left: auto;
    padding: 0 0 0 0;
    border-radius: 50px 0 0 50px;
  }
}
@media screen and (min-width: 1200px) {
  section.sec-crosstalk .crosstalk-cont-wrap {
    padding: 40px 0 10px 0;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap::after, section.sec-crosstalk .crosstalk-cont-wrap::before {
  content: " ";
  display: block;
  width: 120vh;
  height: 75px;
  background: #FFF;
  position: absolute;
  left: 50%;
  top: 60%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(55deg);
  opacity: 0.4;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap::after, section.sec-crosstalk .crosstalk-cont-wrap::before {
    left: 65%;
    top: 50%;
    opacity: 0.1;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}
section.sec-crosstalk .crosstalk-cont-wrap::after {
  transform: translate(-50%, -50%) rotate(-55deg);
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont {
    width: 48%;
    margin-left: auto;
    margin-right: 10%;
    padding-bottom: 6%;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap {
  width: 100%;
  padding-top: 20%;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 25%;
  }
}
@media screen and (min-width: 1200px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap {
    padding-top: 20%;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span {
  display: block;
  position: absolute;
  opacity: 0;
  transform: scale(0);
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.animation {
  animation: fukidashi-scaleani 1s cubic-bezier(0.38, 0.1, 0.33, 0.95) forwards;
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi01 {
  width: 60%;
  left: 1%;
  top: 0%;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi01 {
    width: 40%;
    left: 3%;
    top: 32%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi01 {
    max-width: 226px;
    left: 0%;
    top: 32%;
  }
}
@media screen and (min-width: 1200px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi01 {
    max-width: 226px;
    left: 3%;
    top: 32%;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi02 {
  width: 38.2%;
  left: 35%;
  top: -100%;
  z-index: 2;
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi02.animation {
  animation-duration: 0.6s;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi02 {
    width: 25%;
    left: 60%;
    top: 50%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi02 {
    max-width: 140px;
    left: 60%;
    top: 50%;
  }
}
@media screen and (min-width: 1200px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi02 {
    max-width: 140px;
    left: 60%;
    top: 40%;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi03 {
  width: 30%;
  right: 6%;
  top: -35%;
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi03.animation {
  animation-duration: 0.8s;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi03 {
    width: 20%;
    right: 38%;
    top: 2%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi03 {
    /*							max-width: 112px;*/
    right: 38%;
    top: 2%;
  }
}
@media screen and (min-width: 1200px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-cont .crosstalk-fukidashi-wrap span.fukidashi03 {
    max-width: 112px;
    right: 38%;
    top: 2%;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img {
  opacity: 0;
  filter: blur(10px);
  transition: all 0.8s;
  transition-duration: 0.4s;
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img .crosstalk-slide-wrap {
  position: relative;
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img .crosstalk-slide-wrap .crosstalk-slide-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 365/220;
  overflow: hidden;
  /* 表示中 */
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img .crosstalk-slide-wrap .crosstalk-slide-inner {
    aspect-ratio: 620/380;
  }
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img .crosstalk-slide-wrap .crosstalk-slide-inner .crosstalk-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img .crosstalk-slide-wrap .crosstalk-slide-inner .crosstalk-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img.animation {
  opacity: 1;
  filter: blur(0px);
  transition: all 0.8s;
  transition-duration: 0.6s;
  transition-delay: 0.2s;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img {
    width: 52%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-30%, -50%);
    border-radius: 50px;
    overflow: hidden;
  }
}
@media screen and (min-width: 1200px) {
  section.sec-crosstalk .crosstalk-cont-wrap .crosstalk-img {
    width: 48%;
  }
}
section.sec-crosstalk .sec-crosstalk-head {
  margin-bottom: 8%;
  /*p*/
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .sec-crosstalk-head {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 0;
    position: relative;
  }
}
section.sec-crosstalk .sec-crosstalk-head h2 {
  text-align: center;
  color: #FFF;
}
section.sec-crosstalk .sec-crosstalk-head h2 span.sub-ani02 {
  /*
  span{
  	background: linear-gradient( 80deg,#FFFFFF 0%,#c4fba1 20%,#D0EBB9 40%,#9abe71 60%,#FFF 70%, #FFF 100%);
  	background-size: 300%;
  	background-position: 0% 0%;
  	-webkit-background-clip: text;
  	background-clip: text;
  	-webkit-text-fill-color: transparent;
  }
  	*/
}
@media screen and (min-width: 1000px) {
  section.sec-crosstalk .sec-crosstalk-head h2 {
    /*				font-size: 3.125rem;*/
    text-align: center;
  }
}
section.sec-crosstalk .sec-crosstalk-head p.title-en-crosstalk {
  text-align: center;
  color: #FFF;
}
@media screen and (min-width: 1000px) {
  section.sec-crosstalk .sec-crosstalk-head p.title-en-crosstalk {
    text-align: center;
  }
}
section.sec-crosstalk .sec-crosstalk-head p.txt-ja {
  line-height: 1.8em;
  text-align: center;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  section.sec-crosstalk .sec-crosstalk-head .view-more-btn {
    position: relative;
    margin: 0 auto;
    margin-top: 3%;
  }
}

/**************************************************************************/
section.sec-about {
  margin-top: 25%;
  /*about-cont-wrap*/
}
@media screen and (min-width: 768px) {
  section.sec-about {
    margin-top: 180px;
  }
}
section.sec-about .about-cont-wrap {
  /*.sec-message-head{*/
  /**/
  /*about-list*/
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    padding-bottom: 12%;
    position: relative;
  }
}
section.sec-about .about-cont-wrap .sec-about-head {
  margin-bottom: 8%;
  /*p*/
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .sec-about-head {
    width: 100%;
    margin: 0;
    position: relative;
  }
}
section.sec-about .about-cont-wrap .sec-about-head h2 {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .sec-about-head h2 {
    /*					font-size: 3.125rem;*/
    text-align: left;
  }
}
section.sec-about .about-cont-wrap .sec-about-head p.title-en-about {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .sec-about-head p.title-en-about {
    text-align: left;
  }
}
section.sec-about .about-cont-wrap .sec-about-head p.txt-ja {
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.2em;
  margin-top: 5%;
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .sec-about-head p.txt-ja {
    text-align: left;
    font-size: clamp(14px, 1.18vw, 16px);
  }
}
section.sec-about .about-cont-wrap .about-cont-img {
  width: 80%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .about-cont-img {
    width: 46%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-about .about-cont-wrap .about-cont-img {
    width: 50%;
    top: -10%;
    transform: translate(0, 0%);
  }
}
section.sec-about .about-cont-wrap .about-list {
  margin-top: 8%;
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .about-list {
    margin-top: 0;
  }
}
section.sec-about .about-cont-wrap .about-list ul {
  width: 86%;
  margin: 0 auto;
  /*li*/
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .about-list ul {
    width: 45%;
    margin: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-about .about-cont-wrap .about-list ul {
    width: 50%;
    max-width: 420px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .about-list ul li {
    font-size: clamp(12px, 1.2em, 18px);
  }
}
section.sec-about .about-cont-wrap .about-list ul li a {
  display: block;
  padding-top: 3%;
  padding-bottom: 4%;
  position: relative;
  /*span.circle-arrow*/
}
@media screen and (min-width: 768px) {
  section.sec-about .about-cont-wrap .about-list ul li a {
    /*							&:hover{
    								color: #00a040;
    								transition: all 0.6s;
    								span.circle-arrow{
    									background: #FFF;
    									border: solid 2px #00a040;
    									transition: all 0.6s;
    									span{
    										display: block;
    										width: 0.8em;
    										height: 1px;
    										background: #00a040;
    										position: absolute;
    										right: 50%;
    										top: 50%;
    										transform: translate( 50%, -50% );
    										&::before{
    											content: " ";
    											display: block;
    											width: 0.4em;
    											height: 1px;
    											background: #00a040;
    											position: absolute;
    											right: 0;
    											bottom: 0;
    											transform-origin: right bottom;
    											transform: rotate(40deg);
    										}
    										&::after{
    											content: " ";
    											display: block;
    											width: 0.4em;
    											height: 1px;
    											background: #00a040;
    											position: absolute;
    											right: 0;
    											bottom: 0;
    											transform-origin: right bottom;
    											transform: rotate(-40deg);
    										}
    									}
    								}
    							}/*&:hover{*/
  }
}
section.sec-about .about-cont-wrap .about-list ul li a::after {
  content: " ";
  display: block;
  width: 100%;
  height: 1px;
  background: #222;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(0, 0);
}
section.sec-about .about-cont-wrap .about-list ul li a span.circle-arrow {
  display: block;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: #00a040;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
section.sec-about .about-cont-wrap .about-list ul li a span.circle-arrow span {
  display: block;
  width: 0.8em;
  height: 1px;
  background: #FFF;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
}
section.sec-about .about-cont-wrap .about-list ul li a span.circle-arrow span::before {
  content: " ";
  display: block;
  width: 0.4em;
  height: 1px;
  background: #FFF;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(40deg);
}
section.sec-about .about-cont-wrap .about-list ul li a span.circle-arrow span::after {
  content: " ";
  display: block;
  width: 0.4em;
  height: 1px;
  background: #FFF;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(-40deg);
}

div.group-wrap {
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  div.group-wrap {
    margin-top: 80px;
  }
}

div.group-box01 {
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  div.group-box01 {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
  }
}
div.group-box01 figure {
  width: 65%;
  margin: 0 auto;
  margin-bottom: 5%;
}
@media screen and (min-width: 768px) {
  div.group-box01 figure {
    width: 42%;
    margin: 0;
  }
}
div.group-box01 div.group-txt {
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  div.group-box01 div.group-txt {
    width: calc(58% - 60px);
    margin: 0;
    margin-left: 60px;
  }
}
div.group-box01 div.group-txt p.group-txt {
  text-align: center;
  font-size: 1.6em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  div.group-box01 div.group-txt p.group-txt {
    text-align: left;
    font-size: 34px;
  }
}

div.group-box02 {
  width: 90%;
  margin: 0 auto;
  margin-top: 5%;
  padding: 2% 0;
  border-top: solid 1px #dadada;
  border-bottom: solid 1px #dadada;
}
@media screen and (min-width: 768px) {
  div.group-box02 {
    max-width: 900px;
    margin: 0 auto;
    margin-top: 80px;
    padding: 30px 0;
  }
}
div.group-box02 ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  div.group-box02 ul {
    width: 97%;
    margin: auto;
  }
}
div.group-box02 ul li {
  position: relative;
  width: 50%;
}
@media screen and (min-width: 768px) {
  div.group-box02 ul li {
    width: 25%;
  }
  div.group-box02 ul li:nth-of-type(4n-3) {
    width: 23.2%;
  }
  div.group-box02 ul li:nth-of-type(4n-2) {
    width: 26.6%;
  }
  div.group-box02 ul li:nth-of-type(4n-1) {
    width: 30%;
  }
  div.group-box02 ul li:nth-of-type(4n) {
    width: 20.2%;
  }
}
div.group-box02 ul li span.plus {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  transform: translate(-50%, 50%);
}
div.group-box02 ul li span.plus::after, div.group-box02 ul li span.plus::before {
  content: "";
  display: block;
  background: #dadada;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.group-box02 ul li span.plus::after {
  width: 100%;
  height: 1px;
}
div.group-box02 ul li span.plus::before {
  width: 1px;
  height: 100%;
}
div.group-box02 ul li span.plus.plus02 {
  left: auto;
  right: 0;
  transform: translate(50%, 50%);
}
@media screen and (min-width: 768px) {
  div.group-box02 ul li span.plus.smp-block {
    display: none;
  }
}

.bnr-to-groupsite {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 10%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .bnr-to-groupsite {
    margin-top: 50px;
  }
}
.bnr-to-groupsite a {
  display: block;
  width: 80%;
  margin: 0 auto;
  background: #333;
  padding: 5% 20% 5% 8%;
  position: relative;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .bnr-to-groupsite a {
    max-width: 420px;
    padding: 5% 20% 5% 8%;
  }
  .bnr-to-groupsite a:hover {
    transition: all 0.4s;
    background: #00a040;
  }
}
.bnr-to-groupsite a span.txt {
  display: block;
  font-size: 0.8rem;
  color: #FFF;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .bnr-to-groupsite a span.txt {
    font-size: 14px;
    line-height: 1;
  }
}
.bnr-to-groupsite a span.arrow02 {
  display: block;
  line-height: 1;
  width: 30px;
  position: absolute;
  right: 5%;
  top: 42%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  .bnr-to-groupsite a span.arrow02 {
    top: 45%;
  }
}

.image-slider-wrap {
  background: #f0efed;
  margin-top: 15%;
  padding: 12% 0;
}
@media screen and (min-width: 768px) {
  .image-slider-wrap {
    padding: 80px 0;
  }
}
@media screen and (min-width: 1200px) {
  .image-slider-wrap {
    padding: 100px 0;
  }
}

.image-slider {
  width: 100%;
  padding-bottom: 10%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .image-slider {
    padding-bottom: 3.6%;
  }
}

.image-slide-inner {
  display: flex;
  align-items: flex-start;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  gap: clamp(24px, 60 / 1360 * 100vw, 60px);
  animation: image-marquee var(--duration, 32s) linear infinite;
}

@keyframes image-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/*
.image-slider:hover .image-slide-inner {
  animation-play-state: paused;
}
*/
@media (prefers-reduced-motion: reduce) {
  .image-slide-inner {
    animation: none;
  }
}
.image-slide-inner > div {
  flex: 0 0 auto;
}

.image-slide01 {
  width: clamp(220px, 312 / 1360 * 100vw, 312px);
}

.image-slide02 {
  width: clamp(140px, 188 / 1360 * 100vw, 188px);
  transform: translate(0, 50%);
}

.image-slide03 {
  width: clamp(240px, 325 / 1360 * 100vw, 325px);
}

.image-slide04 {
  width: clamp(140px, 186 / 1360 * 100vw, 186px);
  transform: translate(0, 50%);
}

.image-slide05 {
  width: clamp(200px, 290 / 1360 * 100vw, 290px);
}/*# sourceMappingURL=style.css.map */