@charset "UTF-8";
body {
  font-family: "Kaisei opti";
}
/* ---- reset ---- */
canvas {
  display: block;
  vertical-align: bottom;
} /* ---- particles.js container ---- */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #110f22;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
} /* ---- stats.js ---- */
.count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13e8e9;
  font-size: 0.8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-weight: bold;
}
.js-count-particles {
  font-size: 1.1em;
}
#stats,
.count-particles {
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}
#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.count-particles {
  border-radius: 0 0 3px 3px;
}


/* top */
section {
  width: 100%;
  height: auto;
}
.fv  {
  height: 100vh;
}
.swiper-container {
  width: 100%;
  height: 100%;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  font-size: 18px;
  background: #fff;
  overflow: hidden;
}
.slide-image {
  position: absolute;
  top: -200px;
  left: -200px;
  width: calc(100% + 400px);
  height: calc(100% + 400px);
  background-position: 50% 50%;
  background-size: cover;
}
.slide-title {
  font-size: 4rem;
  line-height: 1;
  max-width: 50%;
  white-space: normal;
  word-break: break-word;
  z-index: 100;
  text-transform: uppercase;
  font-weight: normal;
  color: rgb(0 0 0 / 0.9);
  background: rgba(0, 0, 0, 1);
  text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(255, 255, 255, 0.4);
  -webkit-background-clip: text;
  font-family: 'Kaisei Opti', serif;
}
@media (min-width: 45em) {
  .slide-title {
    max-width: none;
  }
}
.slide-title span {
  white-space: pre;
  display: inline-block;
  opacity: 0;
}

.slideshow {
  position: relative;
}
.slideshow-pagination {
  position: absolute;
  bottom: 5rem;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: 0.3s opacity;
  z-index: 10;
}
.slideshow-pagination-item {
  display: flex;
  align-items: center;
}
.slideshow-pagination-item .pagination-number {
  opacity: 0.5;
}
.slideshow-pagination-item:hover, .slideshow-pagination-item:focus {
  cursor: pointer;
}
.slideshow-pagination-item:last-of-type .pagination-separator {
  width: 0;
}
.slideshow-pagination-item.active .pagination-number {
  opacity: 1;
}
.slideshow-pagination-item.active .pagination-separator {
  width: 10vw;
}
.slideshow-navigation-button {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 5rem;
  z-index: 1000;
  transition: all 0.3s ease;
  color: #FFF;
}
.slideshow-navigation-button:hover, .slideshow-navigation-button:focus {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
}
.slideshow-navigation-button.prev {
  left: 0;
}
.slideshow-navigation-button.next {
  right: 0;
}
.pagination-number {
  font-size: 1.8rem;
  color: #ffffff;
  padding: 0 0.5rem;
}
.pagination-separator {
  display: none;
  position: relative;
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
}
@media (min-width: 45em) {
  .pagination-separator {
    display: block;
  }
}
.pagination-separator-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  transform-origin: 0 0;
}
.slide-image {
  background-size: cover;
  background-position: center;
}

.image-01 {
  background-image: url('../img/template-mynavi/top-slide-01.jpg');
}
@media (max-width: 650px) {
  .image-01 {
    background-image: url('../img/template-mynavi/top-slidesp-01.jpg'); /
  }
}
.image-02 {
  background-image: url('../img/template-mynavi/top-slide-02.jpg');
}
@media (max-width: 650px) {
  .image-02 {
    background-image: url('../img/template-mynavi/top-slidesp-02.jpg'); /
  }
}
.image-03 {
  background-image: url('../img/template-mynavi/top-slide-03.jpg');
}
@media (max-width: 650px) {
  .image-03 {
    background-image: url('../img/template-mynavi/top-slidesp-03.jpg'); /
  }
}
/* 区切り */
.section-bubble, .section-bubble_type-b, .section-bubble_type-a, .section-bubble5, .section-bubble4, .section-bubble3, .section-bubble2, .section-bubble1 {
  margin-bottom: 20vw;
  position: relative;
}
.section-bubble:after, .section-bubble_type-b:after, .section-bubble_type-a:after, .section-bubble4:after, .section-bubble5:after, .section-bubble3:after, .section-bubble2:after, .section-bubble1:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20vw;
  background: url("") green;
  background-size: 100%;
  transform: translate(0, 100%);
}
.section-bubble1 {
  background-color: #ffffff;
}
.section-bubble1:after {
  background-color: #FFD2B0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble2 {
  background-color: #FFD2B0;
}
.section-bubble2:after {
  background-color: #384364;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='%23FFD2B0'/></svg>");
}
.section-bubble3 {
  background-color: #384364;
}
.section-bubble3:after {
  background-color: #cccccc;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23384364' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble4 {
  background-color: #cccccc;
}
.section-bubble4:after {
  background-color: #333333;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='%23cccccc'/></svg>");
}
.section-bubble5 {
  background: #333333;
}
.section-bubble5:after {
  background-color: #FFD2B0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble6 {
  background-color: #FFD2B0;
}
.section-bubble_type-a:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble_type-b:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='red'/></svg>");
}

/* -------------------
MAIN ORIGINAL
------------------- */
.box_01 {
  position: relative;
}
.wave-circle {
  animation: circle-wave 15s linear infinite;
  width: 300px;
  height: 100px;
  margin: 50px auto;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 2px 2px 5px #9d9d9d;
}
.wave-circle2 {
  animation: circle-wave 15s linear infinite;
  width: 300px;
  height: 150px;
  margin: 50px auto;
  background-color: rgba(255, 210, 176, 0.8);
  box-shadow: 2px 2px 5px #9d9d9d;
}
@keyframes circle-wave {
  0% {
    border-radius: 43% 27% 26% 52% / 36% 42% 59% 61% ; 
  }
  25% {
    border-radius: 30% 38% 36% 48% / 47% 38% 59% 52% ; 
  }
  50% {
    border-radius: 47% 26% 54% 24% / 77% 37% 52% 25% ; 
  }
  75% {
    border-radius: 30% 38% 36% 48% / 47% 38% 59% 52% ; 
  }
  100% {
    border-radius: 43% 27% 26% 52% / 36% 42% 59% 61% ; 
  }
}
.bg-clip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.bg-clip h2 {
  background: url(../img/space.jpeg) no-repeat center/cover;
  -webkit-background-clip: text;
  font: 40px /1 "RocknRoll One";
  font-weight: bold;
  color: transparent;
  background-color: antiquewhite;
  text-align: center;
}

.parts-title {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin: 60px 0 40px;
}
.parts-title p {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 1px 1px 2px #fff;
  letter-spacing: 5px;
  margin-bottom: 25px;
}
.parts-title p:before , .parts-title p:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}
.parts-title p:before {
  left: 0;
}
.parts-title p:after {
  right: 0;
}

.parts-title2 {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin: 60px 0 40px;
  color: #fff;
}
.parts-title2 p {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 1px 1px 2px #606060;
  letter-spacing: 5px;
  margin-bottom: 25px;
}
.parts-title2 p:before , .parts-title2 p:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px rgb(255, 255, 255);
  border-bottom: solid 1px rgb(255, 255, 255);
}
.parts-title2 p:before {
  left: 0;
}
.parts-title2 p:after {
  right: 0;
}

/* Greeding */
.greeding-box {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: row;
}
.ceo-img {
  width: 50%;
  order: 2;
}
.message-txt {
  width: 50%;
  order: 1;
}
.ceo-img img {
  aspect-ratio: 16/9;
  object-fit: cover;
}
/* interview slide */
.slide-interview {
  list-style: none;
  padding: 0;
  width: 95%;
  margin: 0 auto;
}
.hako {
  position: relative;
  text-align: center;
}
.hako-img {
  position: relative;
  width: 100%;
}
.hako-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.hako h3 {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  text-shadow: 1px 1px 2px #000;
  box-sizing: border-box;
  margin: 0;
  font-size: 2rem;
  display: inline-block;
}
.hako-txt {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  line-height: 1.8;
  padding: 1% 3%;
}
@media (max-width: 650px) {
  .hako-txt, .hako h3 {
    position: static;
    background: none;
    color: black;
    padding: 0;
  }
}
/* gallery slide */
.slide-gallery {
  list-style: none;
  padding: 0;
}
.slide-gallery li {
  text-align: center;
}
.slide-gallery img {
  width: 100%;
  height: auto;
}
.slide-gallery p {
  padding: 10px;
}
/* business-contents */
#business-contents {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#business-contents .contents {}
#business-contents .contents .text-area {}
#business-contents .contents .text-area p {
  line-height: 1.8;
  margin-top: 25px;
  text-align: center;
}

/* gaiyou */
#gaiyou {}
.table01 {
  margin: 0 auto;
}
.table01 tbody {
  background-color: rgb(255 255 255 / .4);
}
.table01 tr {}
.table01 tr th {
  border: 1px solid #000;
  padding: 10px  20px;
}
.table01 tr td {
  border: 1px solid #000;
  padding: 10px  20px;
}

/* history */
#history {}
.history-area {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: stretch;
  justify-content: space-between;
}
#history .box {
  width: 48%;
  position: relative;
  margin: 1%;
}
#history .box img {
  aspect-ratio: 16/9;
  object-fit: cover;
  position: relative;
}
#history .box p {
  background-color: rgba(56, 67, 100, 0.8);
  color: #fff;
  text-shadow: 1px 1px 2px #202020;
}
#history .box .ttl {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 20px;
}
#history .box .ex {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 10px 25px;
}


/* greeding */
#greeding {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}
.greeding-box {}
.greeding-box .ceo-img {}
.greeding-box .ceo-img img {}
.greeding-box .message-txt {}

/* interview */
#interview {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

/* gallery */
#gellery {}

/* recruit */
#recruit {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

/* cencept */
#concept {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}
#concept p {}
#concept p span {}

/* overview */
#overview {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}
.overview-table {}
.table02 {
  width: 90%;
  margin: 0 auto;
  background-color: rgb(204 204 204 / .8);
  color: #000;
  text-shadow: none;
  max-width: 1100px;
  padding: 1rem 2rem;
}
.table02 dl {}
.table02 dl dt {
  padding: 10px 20px 2px;
  border-bottom: 1px solid #575757;
  width: 20%;
  margin: 0;
}
.table02 dl dd {
  padding: 10px 20px;
}

/* entry */
#entry {}

/* footer */
footer {
  width: 100%;
  padding: 50px 0;
}
footer img {
  width: 100px;
  height: auto;
  margin: 0 auto;
  display: flex;
}
.ft-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ft-left {}
.ft-left .ttl {
  font-size: 28px;
  letter-spacing: 5px;
}
.ft-left .ex {
  margin-top: 15px;
}
.ft-right {}
.ft-right ul {
  display: flex;
  flex-wrap: wrap;
}
.ft-right ul li {
  margin-right: 5%;
  margin-bottom: 20px;
}
.ft-right ul li a {}
.copyright {
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}

@media screen and (max-width:768px) {
  .greeding-box {
    display: flex;
    flex-direction: column;
  }
  .ceo-img {
    width: 100%;
    order: 1;
  }
  .message-txt {
    width: 100%;
    order: 2;
    margin-top: 20px;
  }

  /* interview */
  .slide-interview {
    width: 90%;
    margin: 0 auto;
  }
  .hako-txt {
    position: relative;
    line-height: 1.2;
  }

  /* footer */
  .ft-area {
    align-items: center;
    flex-direction: column;
    margin: 30px 0;
  }
  .ft-right {
    width: 100%;
    margin: 0 auto;
  }
  .ft-right ul {
    justify-content: center;
    align-items: center;
    margin: 30px 0;
  }
}

@media screen and (max-width:650px) {
  .slide-title {
    font-size: 1.7rem;
    max-width: 90%;
    height: 76vh;
  }
  .fv {
    height: 100vh;
    width: 100vw;
  }
  .bg-clip h2 {
    font: 30px /1 "RocknRoll One";
  }
  .wave-circle2 {
    width: 280px;
    height: 120px;
  }
  #business-contents {
    margin-top: 20px;
  }
  #business-contents .contents .text-area p {
    font-size: 16px;
  }
  .slide-gallery {
    width: 90%;
    margin: 0 auto;
  }
  .parts-title2 p {
    font-size: 20px;
  }
  .parts-title2 p:before, .parts-title2 p:after {
    width: 30px;
  }
  /* table01 */
  .table01 tr {
    display: flex;
    flex-direction: column;
  }
  .table01 tr th {
    border: none;
    padding: 10px  20px 0px;
    font-weight: bold;
  }
  .table01 tr td {
    border: none;
    padding: 5px  20px;
  }
  /* base */
  #history .box {
    width: 95%;
    position: relative;
    margin: 0 auto;
    margin-bottom: 15px;
  }
  #history .box .ex {
    position: relative;
    padding: 8px 15px;
    font-size: 16px;
  }
  /* greeding */
  .greeding-box {
    width: 90%;
    margin: 0 auto;
  }
  .greeding-box .message-txt {
    font-size: 16px;
  }
  .hako-txt, .hako h3 {
    color: #fff;
    font-size: 18px;
    margin-top: 10px;
  }
  .hako-txt {
    font-size: 16px;
    margin-top: 20px;
  }
  .slide-gallery p {
    font-size: 16px;
  }
  .concept-txt {
    font-size: 16px;
  }
  /* table02 */
  .table02 dl dt {
    width: auto;
    margin: 0;
  }
  /* footer */
  .ft-left .ttl {
    font-size: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .ft-left .ex {
    margin-top: 15px;
    font-size: 16px;
  }
}