@charset "UTF-8";
:root {
  --text-color: #151C4B;
}

html {
  font-size: 100%;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-color);
}

img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: bottom;
}

li {
  list-style: none;
}

a {
  color: var(--text-color);
  text-decoration: none;
}

p {
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

article {
  margin-bottom: 110px;
}

section {
  padding-block: 100px;
}

h1 {
  width: 160px;
  margin-inline: 36px;
}
@media (max-width: 768px) {
  h1 {
    width: 144px;
    margin-inline: 0;
  }
}

h2 {
  font-size: clamp(4rem, 64px + 56 * (100vw - 500px) / 780, 7.5rem);
  font-family: "Lato", sans-serif;
}

h3 {
  font-size: clamp(1rem, 16px + 4 * (100vw - 768px) / 512, 1.25rem);
}
@media (max-width: 768px) {
  h3 {
    font-size: clamp(0.875rem, 14px + 6 * (100vw - 320px) / 180, 1.25rem);
  }
}

h4 {
  font-size: 2rem;
  font-family: "Lato", sans-serif;
}

h5 {
  font-size: clamp(1rem, 16px + 8 * (100vw - 500px) / 780, 1.5rem);
  font-weight: normal;
  padding-inline: 40px;
}
@media (max-width: 500px) {
  h5 {
    padding-inline: 20px;
  }
}

h6 {
  font-size: clamp(3rem, 48px + 16 * (100vw - 500px) / 780, 4rem);
  position: relative;
  color: #b0b0b0;
  letter-spacing: 0.08rem;
  margin-bottom: 40px;
}

.index .wrapper {
  padding-inline: 20px;
}

.title {
  display: flex;
  align-items: center;
  margin: 0 50px 50px;
}
@media (max-width: 768px) {
  .title {
    flex-direction: column;
  }
}
@media (max-width: 500px) {
  .title {
    margin: 0 0 50px;
  }
}

@media (max-width: 500px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media (max-width: 500px) {
  .sp {
    display: inline;
  }
}

.lower .top,
.single .top {
  background-image: url(../img/img_service_bg.jpg);
  background-position: top;
  background-size: cover;
  padding-block: 100px 0;
}
.lower .top .wrapper,
.single .top .wrapper {
  display: flex;
  align-items: center;
}

@media (max-width: 500px) {
  .lower .wrapper {
    flex-direction: column-reverse;
  }
}

@media (max-width: 768px) {
  .single .wrapper {
    flex-direction: column;
  }
}

.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}

.loaded-fadein,
.late-fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}

#header {
  position: fixed;
  top: 0;
  background: linear-gradient(#F8FAFF, rgba(248, 250, 255, 0.5019607843));
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}
@media (max-width: 768px) {
  #header {
    padding-inline: 10px;
    height: 80px;
  }
}
@media (max-width: 768px) {
  #header nav {
    display: none;
  }
}

.header-nav {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Roboto", sans-serif;
}
.header-nav li a {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media (max-width: 500px) {
  .header-nav li a {
    height: 80px;
  }
}
.header-nav li:not(:nth-of-type(5)):not(:nth-of-type(6)) a {
  padding-inline: 11px;
  transition: all 0.2s;
}
.header-nav li:not(:nth-of-type(5)):not(:nth-of-type(6)) a:hover {
  border-bottom: 5px solid var(--text-color);
}
.header-nav li:nth-of-type(5) a, .header-nav li:nth-of-type(6) a {
  font-size: 1.125rem;
  padding-inline: 22px;
  color: #d0d7e0;
  font-weight: bold;
}
.header-nav li:nth-of-type(5) a:hover, .header-nav li:nth-of-type(6) a:hover {
  color: var(--text-color);
  font-weight: normal;
}

.dl-btn {
  background-color: #57BDBA;
  transition: all 0.5s;
}
.dl-btn:hover {
  background-color: rgba(87, 189, 186, 0);
}

.contact-btn {
  background-color: #5F9FC7;
  transition: all 0.5s;
}
.contact-btn:hover {
  background-color: rgba(95, 159, 199, 0);
}

.toggle {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
  position: relative;
  z-index: 1000;
}
@media (max-width: 768px) {
  .toggle {
    display: block;
  }
}
.toggle span {
  display: block;
  position: absolute;
  left: 0;
  background-color: #333333;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  transition: all 0.5s;
}
.toggle span:nth-of-type(1) {
  top: 22%;
}
.toggle span:nth-of-type(2) {
  top: 50%;
}
.toggle span:nth-of-type(3) {
  top: 78%;
}

.mask {
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999;
  transition: all 0.5s;
}

.open .toggle span:nth-of-type(1) {
  top: 50%;
  transform: rotate(-315deg);
}
.open .toggle span:nth-of-type(2) {
  opacity: 0;
}
.open .toggle span:nth-of-type(3) {
  top: 50%;
  transform: rotate(315deg);
}
@media (max-width: 768px) {
  .open#header nav {
    display: block;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  }
}
.open .header-nav {
  display: flex;
  flex-direction: column;
}
.open .header-nav li:not(:nth-of-type(5)):not(:nth-of-type(6)) a:hover {
  border-bottom: none;
}
.open .header-nav li:nth-of-type(5) a:hover, .open .header-nav li:nth-of-type(6) a:hover {
  border-bottom: none;
}
.open .header-nav li .bi {
  display: none;
}
.open .dl-btn {
  background-color: initial;
}
.open .dl-btn:hover {
  background-color: initial;
}
.open .contact-btn {
  background-color: initial;
}
.open .contact-btn:hover {
  background-color: initial;
}
.open .mask {
  top: 0;
}

#contact-download {
  text-align: center;
  background: linear-gradient(#FFFFFF, #949699, #6E7175);
}
#contact-download .items {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 3%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
}
@media (max-width: 768px) {
  #contact-download .items {
    flex-direction: column;
    gap: 100px;
  }
}
#contact-download .items p {
  font-size: clamp(0.875rem, 14px + 4 * (100vw - 500px) / 780, 1.125rem);
  margin-bottom: 20px;
}
#contact-download .heading {
  font-size: clamp(1rem, 16px + 8 * (100vw - 500px) / 780, 1.5rem);
  margin-bottom: 50px;
}

.jp {
  font-size: clamp(1.5rem, 24px + 8 * (100vw - 768px) / 512, 2rem);
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  text-shadow: none;
  color: #151C4B;
  -webkit-text-stroke: initial;
  opacity: 0;
  transition: all 2s;
}

.download,
.contact {
  width: 50%;
}
@media (max-width: 768px) {
  .download,
.contact {
    width: 100%;
  }
}
.download .btn,
.contact .btn {
  border-radius: 36px;
  transition: all 0.5s;
  margin-inline: auto;
  width: 80%;
}
.download .btn a,
.contact .btn a {
  display: inline-block;
  width: 80%;
  font-size: clamp(1.1rem, 17.6px + 2.4 * (100vw - 500px) / 780, 1.25rem);
  font-weight: bold;
  padding-block: 20px;
}
.download .btn:hover,
.contact .btn:hover {
  transform: scale(1.2);
}

.download h6,
.download h3 {
  text-shadow: 1px 1px 0 #41908d, -1px -1px 0 #41908d, -1px 1px 0 #41908d, 1px -1px 0 #41908d, 0px 1px 0 #41908d, -1px 0 #41908d, -1px 0 0 #41908d, 1px 0 0 #41908d;
}
@media (max-width: 768px) {
  .download h6 {
    color: #c5c4c4;
  }
}

.contact h6,
.contact h3 {
  text-shadow: 1px 1px 0 #3B92E9, -1px -1px 0 #3B92E9, -1px 1px 0 #3B92E9, 1px -1px 0 #3B92E9, 0px 1px 0 #3B92E9, -1px 0 #3B92E9, -1px 0 0 #3B92E9, 1px 0 0 #3B92E9;
}
@media (max-width: 768px) {
  .contact h6 {
    color: #888787;
  }
}
.contact .btn {
  background-color: #5F9FC7;
}
.contact .btn a {
  color: #FFFFFF;
}

footer .wrapper {
  background: linear-gradient(#6E7175, #2A2E33);
  padding: 100px 0;
  text-align: center;
}
footer .wrapper .outer {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 3%;
  color: #FFFFFF;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 100px;
  text-align: left;
}
@media (max-width: 768px) {
  footer .wrapper .outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
}
@media (max-width: 500px) {
  footer .wrapper .outer {
    display: flex;
    justify-content: center;
  }
}
footer .wrapper nav {
  width: 25%;
}
@media (max-width: 768px) {
  footer .wrapper nav {
    width: 100%;
  }
}
@media (max-width: 500px) {
  footer .wrapper nav:nth-of-type(1), footer .wrapper nav:nth-of-type(2), footer .wrapper nav:nth-of-type(3) {
    display: none;
  }
}
footer .wrapper nav li {
  margin-left: 20px;
  position: relative;
}
footer .wrapper nav li:not(:last-of-type) {
  margin-bottom: 15px;
}
footer .wrapper nav li::before {
  position: absolute;
  content: "";
  background-color: #FFFFFF;
  width: 5px;
  height: 1px;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
}
footer .wrapper nav h6 {
  margin-block: 0 20px;
  font-size: initial;
}
footer .wrapper nav h6 a {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}
footer .wrapper a {
  color: #FFFFFF;
  font-size: 1rem;
}

address {
  width: 25%;
  font-style: normal;
}
@media (max-width: 768px) {
  address {
    width: initial;
  }
}
address p {
  font-size: 0.875rem;
  margin-bottom: 15px;
}
address a {
  font-size: 0.875rem;
}
address .info {
  margin-top: 20px;
}

small {
  color: #FFFFFF;
}

.logo {
  width: 160px;
  margin-bottom: 15px;
}

#top {
  padding-block: 0;
}
#top .wrapper {
  display: flex;
  align-items: center;
  margin: 70px 30px;
  gap: 60px;
}
@media (max-width: 500px) {
  #top .wrapper {
    flex-direction: column;
    margin: 70px 0;
  }
}
#top .text {
  width: 50%;
}
@media (max-width: 500px) {
  #top .text {
    width: 100%;
  }
}
#top .text p:first-of-type {
  margin-bottom: 35px;
}

.mainvisual {
  background-image: url(../img/img_mv_bg.jpeg);
  background-size: cover;
  background-position: center;
  position: relative;
}
.mainvisual img {
  height: 100vh;
  opacity: 0.6;
}

.copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: normal;
  font-size: clamp(1.2rem, 19.2px + 20.8 * (100vw - 500px) / 780, 2.5rem);
  color: #EFF0F0;
  line-height: 1.8;
  letter-spacing: 0.1em;
  width: 100%;
  padding-inline: 20px;
}

.scrolldown {
  position: absolute;
  bottom: 30%;
  left: 50%;
}
.scrolldown span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: #ffffff;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
}
.scrolldown:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -4px;
  /*丸の形状*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  -webkit-animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
          animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
  /*下からの距離が変化して丸の全体が上から下に動く*/
  /*上から下にかけて丸が透過→不透明→透過する*/
}
@-webkit-keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}
@keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}
@-webkit-keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
.scrolldown:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 2px;
  height: 50px;
  background: #eee;
}

.glowAnime span {
  opacity: 0;
  display: inline-block;
}
.glowAnime.glow span {
  -webkit-animation: glow_anime_on 1s ease-out forwards;
          animation: glow_anime_on 1s ease-out forwards;
}

@-webkit-keyframes glow_anime_on {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #fff, 0 0 15px #fff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
}

@keyframes glow_anime_on {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #fff, 0 0 15px #fff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
}
.company-logo {
  width: 50%;
  overflow: hidden;
}
@media (max-width: 500px) {
  .company-logo {
    width: 100%;
  }
}

.loop {
  display: flex;
  align-items: center;
  gap: 20px;
}
.loop:first-of-type {
  margin-bottom: 20px;
}
.loop li {
  width: 100px;
}
.loop ul {
  display: flex;
  align-items: center;
  gap: 20px;
}
.loop-right {
  -webkit-animation: right 25s infinite linear 1s both;
          animation: right 25s infinite linear 1s both;
}
@-webkit-keyframes right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.loop-left {
  -webkit-animation: left 25s infinite linear 1s both;
          animation: left 25s infinite linear 1s both;
}
@-webkit-keyframes left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

#service {
  background-color: #F8FAFF;
  position: relative;
  z-index: 0;
}
#service::before {
  position: absolute;
  content: "";
  inset: 0;
  background: #343a39;
  -webkit-clip-path: polygon(0 0, 0% 250px, 75% 0);
          clip-path: polygon(0 0, 0% 250px, 75% 0);
  z-index: -1;
}
@media (max-width: 500px) {
  #service::before {
    -webkit-clip-path: polygon(0 0, 0% 250px, 100% 0);
            clip-path: polygon(0 0, 0% 250px, 100% 0);
  }
}
#service h2 {
  color: #F8FAFF;
  text-shadow: 1px 1px 0 #2A2E33, -1px -1px 0 #2A2E33, -1px 1px 0 #2A2E33, 1px -1px 0 #2A2E33, 0px 1px 0 #2A2E33, -1px 0 #2A2E33, -1px 0 0 #2A2E33, 1px 0 0 #2A2E33;
}
#service .title {
  gap: 20px;
  align-items: flex-start;
}
@media (max-width: 768px) {
  #service .title {
    align-items: center;
  }
}
#service .title p {
  margin-left: clamp(20px, 20px + 80 * (100vw - 500px) / 780, 100px);
}
@media (max-width: 768px) {
  #service .title p {
    margin-left: initial;
  }
}
#service ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  filter: drop-shadow(1px 2px 5px rgba(15, 21, 58, 0.3607843137));
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 768px) {
  #service ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
#service li {
  position: relative;
  inset: 0;
  background-color: #151C4B;
  -webkit-clip-path: polygon(calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%, 0 0);
  z-index: -1;
  text-align: center;
  min-height: 300px;
}
#service li::before {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: #fff;
  -webkit-clip-path: polygon(calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%, 0 0);
  z-index: 0;
}
#service li::after {
  position: absolute;
  content: "";
  right: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #d9d9d9;
  border-width: 60px 0px 0px 60px;
}
#service li .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
#service li h3,
#service li .icon {
  position: relative;
  z-index: 3;
}
#service li h3 {
  border-bottom: 4px solid #57BDBA;
  display: inline-block;
}
#service li .icon {
  width: 120px;
  margin: 10px auto 0;
  position: relative;
}
#service li .icon::before {
  content: "";
  position: absolute;
  background-color: rgba(87, 189, 186, 0.4);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  z-index: -1;
}
#service li .icon img {
  height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
}
#service a {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 20;
}

.service {
  margin-bottom: initial;
}
.service .items {
  position: relative;
  background: linear-gradient(rgba(51, 51, 51, 0.04), rgba(51, 51, 51, 0.04)), url(../img/service_bg.png) top/contain repeat;
  padding-bottom: 300px;
}
@media (max-width: 500px) {
  .service .items {
    padding-bottom: 100px;
  }
}
.service .outer {
  max-width: 1280px;
  margin-inline: auto;
  padding: 50px 20px 0;
}
.service ul {
  margin-inline: auto;
  max-width: 1176px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 500px) {
  .service ul {
    grid-template-columns: 1fr;
  }
}
.service .heading {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
@media (max-width: 768px) {
  .service .heading {
    flex-direction: column;
  }
}
.service .heading h3 {
  font-size: clamp(1.5rem, 24px + 4 * (100vw - 500px) / 268, 1.75rem);
  font-weight: normal;
  white-space: nowrap;
}
.service .heading p {
  font-size: 0.875rem;
  min-height: 63px;
}
.service .icon {
  max-width: 220px;
  margin-inline: auto;
}
.service .icon img {
  height: 180px;
  -o-object-fit: contain;
     object-fit: contain;
}

.item {
  background-color: #FFFFFF;
  border-radius: 50px;
  padding-inline: clamp(20px, 20px + 36 * (100vw - 768px) / 512, 56px);
  padding-block: clamp(20px, 20px + 20 * (100vw - 768px) / 512, 40px);
  margin-block: 100px;
}
@media (max-width: 500px) {
  .item {
    margin-block: 20px;
  }
}
.item .en {
  color: #5F9FC7;
  font-size: 0.875rem;
}

.fadeleft {
  opacity: 0;
}
.fadeleft.is-visible {
  -webkit-animation-name: fadeLeftAnime;
          animation-name: fadeLeftAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
}

@-webkit-keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.faderight {
  opacity: 0;
}
.faderight.is-visible {
  -webkit-animation-name: fadeRightAnime;
          animation-name: fadeRightAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
}
@media (max-width: 500px) {
  .faderight.is-visible {
    -webkit-animation-name: sp-fadeRightAnime;
            animation-name: sp-fadeRightAnime;
  }
}

@-webkit-keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px) translateY(250px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(250px);
  }
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px) translateY(250px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(250px);
  }
}
@-webkit-keyframes sp-fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes sp-fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.detail-btn {
  text-align: right;
}
.detail-btn a {
  border: 1px solid #151C4B;
  border-radius: 22px;
  padding: 10px 40px;
  transition: all 0.5s;
}
.detail-btn a:hover {
  background-color: #151C4B;
  color: #FFFFFF;
}

.shine {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
}
.shine:hover::after {
  -webkit-animation: shine 0.8s ease;
          animation: shine 0.8s ease;
}

@-webkit-keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
#process {
  background-color: #E3F0EF;
  padding-block: 100px;
  position: relative;
  z-index: 0;
}
#process::before {
  position: absolute;
  content: "";
  inset: 0;
  background: #F8FAFF;
  -webkit-clip-path: polygon(0 0, 0% 250px, 100% 0);
          clip-path: polygon(0 0, 0% 250px, 100% 0);
  z-index: -1;
}
#process .title {
  gap: 20px;
}
#process .title p {
  margin-left: clamp(20px, 20px + 80 * (100vw - 500px) / 780, 100px);
}
@media (max-width: 768px) {
  #process .title p {
    margin-left: initial;
  }
}
#process h2 {
  font-weight: normal;
}
#process ol {
  max-width: 1000px;
  margin-inline: auto;
}
#process ol p {
  font-size: 1.5rem;
}
#process .inner {
  display: flex;
  align-items: center;
}
@media (max-width: 500px) {
  #process .inner {
    flex-direction: column;
  }
}
#process .inner ul {
  width: 70%;
}
@media (max-width: 500px) {
  #process .inner ul {
    width: 100%;
    padding-left: 20px;
  }
}
#process .inner li {
  list-style: initial;
  font-size: 1.25rem;
}
#process .icon {
  width: 30%;
  margin-right: 70px;
}
@media (max-width: 500px) {
  #process .icon {
    width: 100%;
  }
}

.flow {
  display: flex;
  gap: 50px;
}
@media (max-width: 500px) {
  .flow {
    gap: 20px;
  }
}

.arrow {
  width: 120px;
  height: auto;
  flex: 0 0 120px;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.2s linear;
}
@media (max-width: 500px) {
  .arrow {
    width: 64px;
  }
}

.detail {
  max-width: 800px;
  padding-block: 30px 50px;
}

.before .arrow {
  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%);
          clip-path: polygon(0% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%);
  background-color: #343A39;
}
.before h4 {
  color: #343A39;
}

.process,
.after {
  margin-top: -20px;
}
.process .arrow,
.after .arrow {
  -webkit-clip-path: polygon(100% 0, 99% 85%, 50% 100%, 0 85%, 0 0, 50% 15%);
          clip-path: polygon(100% 0, 99% 85%, 50% 100%, 0 85%, 0 0, 50% 15%);
}

.process .arrow {
  background-color: #093977;
}
.process h4 {
  color: #093977;
}

.after .arrow {
  background-color: #57BDBA;
}
.after h4 {
  color: #57BDBA;
}

#case {
  position: relative;
  z-index: 0;
  padding-block: 255px 30px;
  overflow: hidden;
}
@media (max-width: 500px) {
  #case {
    padding-block: 100px 30px;
  }
}
#case::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/img_case_bg.jpeg) top/contain repeat;
  opacity: 0.6;
  z-index: -1;
}
#case::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #E3F0EF;
  -webkit-clip-path: polygon(0 0, 100% 250px, 100% 0);
          clip-path: polygon(0 0, 100% 250px, 100% 0);
  z-index: -1;
}
@media (max-width: 500px) {
  #case::after {
    display: none;
  }
}
#case h2 {
  text-shadow: 1px 1px 0 #2A2E33, -1px -1px 0 #2A2E33, -1px 1px 0 #2A2E33, 1px -1px 0 #2A2E33, 0px 1px 0 #2A2E33, -1px 0 #2A2E33, -1px 0 0 #2A2E33, 1px 0 0 #2A2E33;
}
#case .title {
  color: #F8FAFF;
  gap: 20px;
  align-items: flex-start;
}
@media (max-width: 768px) {
  #case .title {
    align-items: center;
  }
}
#case .title p {
  margin-left: 100px;
}
@media (max-width: 768px) {
  #case .title p {
    margin-left: initial;
  }
}

.area {
  border: 1px solid #151C4B;
  background-color: #ffffff;
  max-width: 1000px;
  margin: 0 auto 50px;
}
.area .label {
  display: inline-flex;
  align-items: center;
  height: 110px;
  position: relative;
}
.area .label::before {
  position: absolute;
  bottom: -1px;
  content: "";
  width: 0;
  height: 1px;
  background-color: #343A39;
}
.area .label.active::before {
  -webkit-animation: case-line 2s forwards;
          animation: case-line 2s forwards;
}
@-webkit-keyframes case-line {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes case-line {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.area .label p {
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  background-color: #343A39;
  color: #FFFFFF;
  line-height: 110px;
  padding-inline: 7px;
  position: relative;
}
.area .label p::before {
  position: absolute;
  right: -30px;
  top: 0;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #343a39;
  border-width: 112px 0px 0px 30px;
}
@media (max-width: 500px) {
  .area .label p::before {
    display: none;
  }
}
.area .label p span {
  font-size: 1.75rem;
  padding-left: 7px;
}
.area .wrapper {
  padding: 30px;
}
.area .heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.area .content {
  display: flex;
  align-items: flex-start;
}
@media (max-width: 500px) {
  .area .content {
    flex-direction: column;
  }
}
.area .content .left {
  width: 35%;
}
@media (max-width: 500px) {
  .area .content .left {
    display: none;
  }
}
.area .content .left dt {
  background-color: rgba(87, 189, 186, 0.4);
  border: 1px solid #57BDBA;
  border-radius: 39px;
  display: inline-block;
  padding: 6px 24px;
  font-size: 0.875rem;
}
.area .content .left dd {
  padding: 10px 0 20px 25px;
}
.area .content .right {
  width: 65%;
}
@media (max-width: 500px) {
  .area .content .right {
    width: 100%;
  }
}
.area .content .right .inner {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
@media (max-width: 500px) {
  .area .content .right .inner {
    flex-direction: column;
    gap: 20px;
  }
}
.area .content .right .count {
  width: 175px;
  margin-inline: 10px;
  text-align: center;
}
.area .content .right .count dt {
  letter-spacing: 0.05rem;
  padding-bottom: 20px;
  position: relative;
}
.area .content .right .count dt::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #151C4B transparent transparent transparent;
  border-width: 17.32px 10px 0px 10px;
}
.area .content .right .count dd {
  letter-spacing: 0.1rem;
}
.area .content .right .count dd span {
  font-size: 5rem;
  font-weight: bold;
  letter-spacing: initial;
  background: linear-gradient(#FFD700, #A67C00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.4));
}
.area .content .right p {
  width: calc(100% - 175px);
  font-size: 0.875rem;
}
@media (max-width: 500px) {
  .area .content .right p {
    width: 100%;
  }
}

.chart {
  display: flex;
}
.chart li {
  width: 33.3333333333%;
}

.case .bg {
  background: url(../img/img_case_bg_white.jpeg) top/contain repeat;
  padding-block: 100px;
}
.case .pc {
  display: block;
}
@media (max-width: 768px) {
  .case .pc {
    display: none;
  }
}
@media (max-width: 500px) {
  .case .pc {
    display: none;
  }
}
.case .tb {
  display: none;
}
@media (max-width: 768px) {
  .case .tb {
    display: block;
  }
}
@media (max-width: 500px) {
  .case .tb {
    display: none;
  }
}
.case .sp {
  display: none;
}
@media (max-width: 768px) {
  .case .sp {
    display: none;
  }
}
@media (max-width: 500px) {
  .case .sp {
    display: block;
  }
}

.accordion-area {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding-inline: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  gap: clamp(40px, 40px + 30 * (100vw - 768px) / 512, 70px);
}
@media (max-width: 768px) {
  .accordion-area {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .accordion-area {
    grid-template-columns: 1fr;
  }
}
.accordion-area li {
  background-color: #FFFFFF;
  border: 1px solid hsl(232deg, 56%, 19%);
  padding-block: clamp(20px, 20px + 20 * (100vw - 768px) / 512, 40px);
  padding-inline: clamp(20px, 20px + 12 * (100vw - 768px) / 512, 32px);
}
.accordion-area h3 {
  text-align: center;
  font-weight: bold;
  margin-block: 30px 20px;
}
.accordion-area dl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.accordion-area dt {
  width: 73px;
  font-size: 0.875rem;
  letter-spacing: 0.03rem;
  background-color: rgba(95, 199, 196, 0.4);
  border: 0.37px solid #5FC7C4;
  border-radius: 20px;
  text-align: center;
}
.accordion-area dd {
  font-size: 0.875rem;
  width: calc(100% - 83px);
  word-break: break-word;
  overflow-wrap: break-word;
}
.accordion-area .results {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border: 1px solid #151C4B;
  color: #FFFFFF;
  background-color: #151C4B;
  margin-block: 30px;
  padding: 10px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s ease;
}
.accordion-area .results::after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(180deg);
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
  border-width: 0px 12px 20.78px 12px;
  transition: all 0.5s ease;
}
.accordion-area .results.close {
  color: #151C4B;
  background-color: #ffffff;
}
.accordion-area .results.close::after {
  border-color: transparent transparent #151C4B transparent;
  transform: translateY(-50%) rotate(540deg);
}
.accordion-area .accordion {
  display: none;
}
.accordion-area .accordion p {
  font-size: 0.875rem;
}

.my-pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 60px;
  list-style: none;
}
.my-pagination li {
  width: 44px;
  height: 44px;
  text-align: center;
}
.my-pagination li .page-numbers {
  font-size: 1rem;
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 44px;
  background: #ffffff;
  border: 1px solid #151C4B;
  color: #151C4B;
  text-decoration: none;
  transition: all 0.5s;
}
.my-pagination li .page-numbers.current, .my-pagination li .page-numbers:hover {
  background: #151C4B;
  color: #ffffff;
}
.my-pagination li .next,
.my-pagination li .prev {
  display: none;
}

#message {
  position: relative;
  z-index: 0;
}
#message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../img/img_case_bg.jpeg) top/contain repeat;
  opacity: 0.6;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, 0% 308px, 100% 0);
          clip-path: polygon(0 0, 0% 308px, 100% 0);
}
@media (max-width: 500px) {
  #message::before {
    -webkit-clip-path: polygon(0 0, 0% 140px, 100% 0);
            clip-path: polygon(0 0, 0% 140px, 100% 0);
  }
}
#message h2 {
  font-weight: normal;
  text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, 0px 1px 0 #FFFFFF, -1px 0 #FFFFFF, -1px 0 0 #FFFFFF, 1px 0 0 #FFFFFF;
}
#message .title {
  color: #151C4B;
  gap: clamp(60px, 60px + 40 * (100vw - 500px) / 780, 100px);
}
@media (max-width: 500px) {
  #message .title {
    gap: 20px;
  }
}
#message .inner {
  display: flex;
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 3%;
  gap: 40px;
}
@media (max-width: 500px) {
  #message .inner {
    padding-inline: initial;
    flex-direction: column;
  }
}
#message .portrait {
  width: 40%;
  box-shadow: 40px 40px 0 0 rgba(21, 28, 75, 0.8);
}
@media (max-width: 768px) {
  #message .portrait {
    box-shadow: 20px 20px 0 0 rgba(21, 28, 75, 0.8);
  }
}
@media (max-width: 500px) {
  #message .portrait {
    width: 100%;
    box-shadow: none;
  }
}

.introduction {
  width: 60%;
}
@media (max-width: 500px) {
  .introduction {
    width: 100%;
  }
}
.introduction p {
  line-height: 1.7;
}
.introduction .name {
  margin-top: 50px;
  text-align: right;
}

.contact-download .wrapper {
  margin-inline: auto;
  padding-inline: 20px;
  max-width: 1146px;
}
@media (max-width: 500px) {
  .contact-download .wrapper {
    padding-inline: 10px;
  }
}
.contact-download .top .wrapper {
  padding-inline: initial;
  max-width: initial;
}
.contact-download ul {
  display: flex;
  align-items: flex-start;
  text-align: center;
  position: relative;
  margin-block: 100px;
  padding-inline: 5px;
  max-width: 1146px;
}
@media (max-width: 500px) {
  .contact-download ul {
    flex-direction: column;
    gap: 100px;
  }
}
.contact-download ul::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 2px;
  height: 0;
  background-color: #151C4B;
  -webkit-animation: line-top 2s ease infinite;
          animation: line-top 2s ease infinite;
}
@-webkit-keyframes line-top {
  0% {
    height: 0;
    top: 0;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0;
    top: 100%;
  }
}
@keyframes line-top {
  0% {
    height: 0;
    top: 0;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0;
    top: 100%;
  }
}
@media (max-width: 500px) {
  .contact-download ul::before {
    display: none;
  }
}
.contact-download ul p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 30px;
}
.contact-download h3 {
  font-size: clamp(1.9rem, 30.4px + 33.6 * (100vw - 768px) / 512, 4rem);
  position: relative;
  color: #FFFFFF;
  letter-spacing: 0.08rem;
  margin-bottom: 40px;
  line-height: 40px;
}
.contact-download .download,
.contact-download .contact {
  width: 50%;
  padding-inline: 50px;
}
@media (max-width: 768px) {
  .contact-download .download,
.contact-download .contact {
    padding-inline: 10px;
  }
}
@media (max-width: 500px) {
  .contact-download .download,
.contact-download .contact {
    width: 100%;
    padding-inline: initial;
  }
}
.contact-download .contact {
  margin-left: 0;
}
.contact-download h4 {
  font-size: clamp(3rem, 48px + 72 * (100vw - 500px) / 780, 7.5rem);
  text-shadow: 1px 1px 0 #151C4B, -1px -1px 0 #151C4B, -1px 1px 0 #151C4B, 1px -1px 0 #151C4B, 0px 1px 0 #151C4B, -1px 0 #151C4B, -1px 0 0 #151C4B, 1px 0 0 #151C4B;
  text-align: center;
}

.jp-low {
  font-size: clamp(1.5rem, 24px + 8 * (100vw - 768px) / 512, 2rem);
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: -50px;
  transform: translateX(-50%);
  text-shadow: none;
  color: #151C4B;
  -webkit-text-stroke: initial;
  opacity: 0;
  transition: all 2s;
}

.form {
  font-size: 1.25rem;
}
.form .required {
  font-size: 1rem;
  color: #CE3434;
  margin-left: 5px;
}
.form input,
.form textarea {
  width: 100%;
  border: 1px solid #151C4B;
  border-radius: 8px;
  background-color: #FFFFFF;
  margin-block: 5px 15px;
  padding: 15px;
  font-size: 1rem;
}
.form textarea {
  margin-top: 20px;
  height: 200px;
}

.download .btn,
#download .btn {
  background-color: #57BDBA;
}
.download .btn a,
#download .btn a {
  color: #151C4B;
}

.contact .btn,
#contact .btn {
  background-color: #5F9FC7;
}
.contact .btn a,
#contact .btn a {
  color: #FFFFFF;
}

#download .btn,
#contact .btn {
  border-radius: 36px;
  transition: all 0.5s;
  margin: 20px auto 0;
  max-width: 325px;
  position: relative;
}
#download .btn:hover,
#contact .btn:hover {
  transform: scale(1.2);
}
#download .btn input,
#contact .btn input {
  border: initial;
  background-color: initial;
  margin-block: initial;
  padding-block: 20px;
}

#download {
  position: relative;
}
#download::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(95, 199, 196, 0.3019607843);
  -webkit-clip-path: polygon(100% calc(100% - 360px), 100% 100%, 0 360px, 0 0);
          clip-path: polygon(100% calc(100% - 360px), 100% 100%, 0 360px, 0 0);
  z-index: -1;
}
#download h4 {
  color: #5FC7C4;
}
#download .outer {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  margin-top: 60px;
}
@media (max-width: 500px) {
  #download .outer {
    flex-direction: column;
  }
}
#download .text,
#download .form {
  width: 50%;
}
@media (max-width: 500px) {
  #download .text,
#download .form {
    width: 100%;
  }
}
#download .lead {
  font-size: clamp(1.25rem, 20px + 4 * (100vw - 500px) / 780, 1.5rem);
  margin-bottom: 40px;
}
#download .lead span {
  display: inline-block;
  font-size: clamp(1.5rem, 24px + 8 * (100vw - 500px) / 780, 2rem);
  font-weight: bold;
  margin-bottom: 5px;
}
#download p {
  font-size: 1rem;
}
#download .first {
  margin-bottom: 20px;
}

#contact {
  position: relative;
  padding-block: 100px 0;
}
#contact::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(95, 159, 199, 0.3019607843);
  -webkit-clip-path: polygon(100% 20%, 100% 50%, 0 90%, 0 60%);
          clip-path: polygon(100% 20%, 100% 50%, 0 90%, 0 60%);
  z-index: -1;
}
#contact .wrapper {
  max-width: 850px;
}
#contact h4 {
  color: #5F9FC7;
}
#contact .lead {
  text-align: center;
  line-height: 1.6;
  font-size: clamp(1.25rem, 20px + 4 * (100vw - 500px) / 780, 1.5rem);
  margin-block: 60px 40px;
}
#contact fieldset {
  border: none;
}
#contact fieldset label {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 20px;
}
#contact fieldset label input {
  width: initial;
  margin-block: initial;
  margin-right: 10px;
}
#contact .form p {
  font-size: 1.25rem;
  text-align: left;
}

.wpcf7-spinner {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: initial;
}

.eachTextAnimeB span {
  opacity: 0;
  display: inline-block;
}
.eachTextAnimeB .text-border {
  display: inline-block;
  border-bottom: 8px solid #5FC7C4;
}
.eachTextAnimeB.appeartext span {
  -webkit-animation: eachTextAnimeB 0.5s forwards;
          animation: eachTextAnimeB 0.5s forwards;
}

@-webkit-keyframes eachTextAnimeB {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes eachTextAnimeB {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.greeting {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: 0 0 70px;
}
@media (max-width: 500px) {
  .greeting {
    flex-direction: column-reverse;
  }
}
.greeting::before {
  position: absolute;
  content: "";
  background-color: #E3F0EF;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 60%);
          clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 60%);
  z-index: -1;
}
@media (max-width: 500px) {
  .greeting::before {
    -webkit-clip-path: polygon(100% 200px, 100% 650px, 0 890px, 0 440px);
            clip-path: polygon(100% 200px, 100% 650px, 0 890px, 0 440px);
  }
}
.greeting .portrait {
  max-width: 400px;
  margin-top: 210px;
}
@media (max-width: 768px) {
  .greeting .portrait {
    max-width: clamp(230px, 230px + 40 * (100vw - 500px) / 268, 270px);
  }
}
@media (max-width: 500px) {
  .greeting .portrait {
    max-width: initial;
    width: 100%;
    margin-top: initial;
  }
}
.greeting .text {
  margin: 100px 50px 100px 70px;
}
@media (max-width: 768px) {
  .greeting .text {
    margin: 100px 30px;
  }
}
.greeting .text p:nth-of-type(2) {
  line-height: 1.8;
}
.greeting .lead {
  font-size: 2rem;
  font-family: "Shippori Mincho", serif;
  line-height: 2;
  letter-spacing: 0.1rem;
  margin-bottom: 30px;
}
.greeting .eachTextAnimeA span {
  opacity: 0;
}
.greeting .eachTextAnimeA.appeartext span {
  -webkit-animation: text_anime_on 1s ease-out forwards;
          animation: text_anime_on 1s ease-out forwards;
}
@-webkit-keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.greeting .line {
  position: relative;
  opacity: 1;
}
.greeting .line::before {
  position: absolute;
  bottom: 0;
  content: "";
  background-color: #151C4B;
  width: 10px;
  height: 1px;
}
.greeting .name {
  font-size: 1rem;
  text-align: right;
  margin-top: 30px;
}

.features {
  background: linear-gradient(#FFFFFF, rgba(208, 205, 205, 0.6), rgba(208, 205, 205, 0.6), #FFFFFF);
}
.features .wrapper {
  max-width: 1240px;
  padding-inline: 20px;
  margin-inline: auto;
}
.features .wrapper .summary {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", sans-serif;
  margin-top: clamp(0px, 0px + 100 * (100vw - 768px) / 512, 100px);
  margin-bottom: 150px;
  gap: 50px;
}
@media (max-width: 768px) {
  .features .wrapper .summary {
    flex-direction: column;
    align-items: flex-start;
  }
}
.features .wrapper .summary dl {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .features .wrapper .summary dl {
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
  }
}
.features .wrapper .summary dt:not(:first-of-type),
.features .wrapper .summary dd:not(:first-of-type) {
  margin-top: 30px;
}
.features .wrapper .summary dt {
  width: 50%;
  font-size: clamp(2.5rem, 40px + 24 * (100vw - 768px) / 512, 4rem);
  font-weight: bold;
}
@media (max-width: 500px) {
  .features .wrapper .summary dt {
    font-size: clamp(2rem, 32px + 8 * (100vw - 320px) / 180, 2.5rem);
  }
}
.features .wrapper .summary dt::first-letter {
  color: #57BDBA;
}
.features .wrapper .summary dd {
  width: 50%;
  font-size: clamp(1.5rem, 24px + 8 * (100vw - 768px) / 512, 2rem);
  text-align: right;
  display: flex;
  align-items: center;
  padding-left: 15px;
}
@media (max-width: 500px) {
  .features .wrapper .summary dd {
    font-size: clamp(1rem, 16px + 16 * (100vw - 320px) / 180, 2rem);
  }
}
.features .wrapper .summary .line {
  flex: 1;
  height: 1px;
  background-color: #151C4B;
}
.features .wrapper .summary ul {
  width: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 30px;
  justify-items: center;
}
@media (max-width: 768px) {
  .features .wrapper .summary ul {
    width: 100%;
  }
}
.features .wrapper .summary li {
  width: clamp(165px, 165px + 15 * (100vw - 768px) / 512, 180px);
  height: clamp(165px, 165px + 15 * (100vw - 768px) / 512, 180px);
  border-radius: 50%;
  position: relative;
}
@media (max-width: 768px) {
  .features .wrapper .summary li {
    width: clamp(165px, 165px + 15 * (100vw - 500px) / 268, 180px);
    height: clamp(165px, 165px + 15 * (100vw - 500px) / 268, 180px);
  }
}
@media (max-width: 500px) {
  .features .wrapper .summary li {
    width: clamp(130px, 130px + 35 * (100vw - 320px) / 180, 165px);
    height: clamp(130px, 130px + 35 * (100vw - 320px) / 180, 165px);
  }
}
.features .wrapper .summary li::before {
  position: absolute;
  top: 10px;
  left: 10px;
  content: "";
  width: clamp(165px, 165px + 15 * (100vw - 768px) / 512, 180px);
  height: clamp(165px, 165px + 15 * (100vw - 768px) / 512, 180px);
  border-radius: 50%;
}
@media (max-width: 768px) {
  .features .wrapper .summary li::before {
    width: clamp(165px, 165px + 15 * (100vw - 500px) / 268, 180px);
    height: clamp(165px, 165px + 15 * (100vw - 500px) / 268, 180px);
  }
}
@media (max-width: 500px) {
  .features .wrapper .summary li::before {
    width: clamp(130px, 130px + 35 * (100vw - 320px) / 180, 165px);
    height: clamp(130px, 130px + 35 * (100vw - 320px) / 180, 165px);
  }
}
.features .wrapper .summary li span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.features .wrapper .summary .mission {
  grid-column: 1/3;
  background-color: rgba(87, 189, 186, 0.3019607843);
  border: 0.75px solid #57BDBA;
}
.features .wrapper .summary .mission::before {
  border: 0.75px solid #57BDBA;
}
.features .wrapper .summary .value {
  background-color: rgba(103, 162, 175, 0.3019607843);
  border: 0.75px solid #67A2AF;
}
.features .wrapper .summary .value::before {
  border: 0.75px solid #67A2AF;
}
.features .wrapper .summary .vision {
  background-color: rgba(127, 201, 199, 0.3019607843);
  border: 0.75px solid #7FC9C7;
}
.features .wrapper .summary .vision::before {
  border: 0.75px solid #7FC9C7;
}
.features .detail {
  max-width: 1240px;
  padding-inline: 30px;
  margin-inline: auto;
}
.features .detail li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-inline: 20px;
}
@media (max-width: 500px) {
  .features .detail li {
    flex-direction: column;
    align-items: center;
    margin-inline: initial;
  }
}
@media (max-width: 500px) {
  .features .detail li:nth-of-type(2) {
    flex-direction: column-reverse;
  }
}
.features .detail h4 {
  font-size: clamp(2rem, 32px + 16 * (100vw - 500px) / 780, 3rem);
  font-weight: bold;
  position: relative;
  z-index: 0;
}
.features .detail h4::before, .features .detail h4::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  z-index: -1;
}
.features .detail .line-left, .features .detail .line-right {
  position: relative;
  width: 120px;
  height: clamp(45px, 45px + 27 * (100vw - 500px) / 780, 72px);
  z-index: 3;
}
@media (max-width: 500px) {
  .features .detail .line-left, .features .detail .line-right {
    height: 40px;
  }
}
.features .detail .line-left::before, .features .detail .line-right::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #151C4B;
  width: 0;
  height: 3px;
}
.features .detail .line-left::before {
  left: 0;
  -webkit-animation: line-left 2s ease infinite;
          animation: line-left 2s ease infinite;
}
@-webkit-keyframes line-left {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes line-left {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
.features .detail .line-right::before {
  right: 0;
  -webkit-animation: line-right 2s ease infinite;
          animation: line-right 2s ease infinite;
}
@-webkit-keyframes line-right {
  0% {
    width: 0;
    right: 0;
  }
  50% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@keyframes line-right {
  0% {
    width: 0;
    right: 0;
  }
  50% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
.features .detail .text {
  width: 60%;
  position: relative;
  z-index: 3;
}
@media (max-width: 500px) {
  .features .detail .text {
    width: 100%;
  }
}
.features .detail .lead {
  font-size: clamp(1.5rem, 24px + 8 * (100vw - 500px) / 780, 2rem);
  font-weight: bold;
  margin-bottom: 30px;
}
@media (max-width: 500px) {
  .features .detail .lead {
    text-align: center;
  }
}
.features .detail .mission,
.features .detail .vision {
  margin-bottom: 200px;
}
.features .detail .mission h4::before,
.features .detail .value h4::before {
  top: -30px;
  left: -30px;
}
@media (max-width: 500px) {
  .features .detail .mission h4::before,
.features .detail .value h4::before {
    top: -20px;
    left: -50px;
  }
}
.features .detail .mission h4::after,
.features .detail .value h4::after {
  top: -20px;
  left: -20px;
}
@media (max-width: 500px) {
  .features .detail .mission h4::after,
.features .detail .value h4::after {
    top: -10px;
    left: -40px;
  }
}
.features .detail .mission h4::before {
  background-color: rgba(87, 189, 186, 0.3019607843);
  border: 0.75px solid #57BDBA;
}
.features .detail .mission h4::after {
  border: 0.75px solid #57BDBA;
}
.features .detail .mission .lead {
  line-height: 72px;
  line-height: clamp(45px, 45px + 27 * (100vw - 500px) / 780, 72px);
}
.features .detail .vision h4::before {
  background-color: rgba(127, 201, 199, 0.3019607843);
  border: 0.75px solid #7FC9C7;
  top: -30px;
  right: -30px;
}
@media (max-width: 500px) {
  .features .detail .vision h4::before {
    top: -20px;
    right: -60px;
  }
}
.features .detail .vision h4::after {
  border: 0.75px solid #7FC9C7;
  top: -20px;
  right: -40px;
}
@media (max-width: 500px) {
  .features .detail .vision h4::after {
    top: -10px;
    right: -70px;
  }
}
.features .detail .value h4::before {
  background-color: rgba(103, 162, 175, 0.3019607843);
  border: 0.75px solid #67A2AF;
}
.features .detail .value h4::after {
  border: 0.75px solid #67A2AF;
}

.company {
  position: relative;
}
.company::before {
  position: absolute;
  content: "";
  background-color: #DADFE9;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(100% 55%, 100% 90%, 0 45%, 0 10%);
          clip-path: polygon(100% 55%, 100% 90%, 0 45%, 0 10%);
  z-index: -1;
}
@media (max-width: 500px) {
  .company::before {
    -webkit-clip-path: polygon(100% 550px, 100% 1050px, 0 830px, 0 330px);
            clip-path: polygon(100% 550px, 100% 1050px, 0 830px, 0 330px);
  }
}
.company .wrapper {
  max-width: 840px;
  margin-inline: auto;
  padding-inline: 20px;
}
.company h3 {
  font-family: "Lato", sans-serif;
  text-align: center;
  font-size: clamp(4rem, 64px + 56 * (100vw - 500px) / 780, 7.5rem);
  background: linear-gradient(90deg, #262626, #DBDBDB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #2A2E33;
  margin-block: 30px 70px;
}
@media (max-width: 500px) {
  .company h3 {
    font-size: clamp(3.5rem, 56px + 8 * (100vw - 320px) / 180, 4rem);
  }
}
.company dl {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.5rem;
  text-align: center;
}
@media (max-width: 500px) {
  .company dl {
    flex-direction: column;
  }
}
.company dt,
.company dd {
  border-bottom: 1px solid #151C4B;
  padding-block: 30px;
}
.company dt {
  width: 30%;
  font-weight: bold;
  letter-spacing: 0.4rem;
}
@media (max-width: 500px) {
  .company dt {
    padding-block: 30px 0;
    border-bottom: none;
    width: 100%;
  }
}
.company dd {
  width: 70%;
}
@media (max-width: 500px) {
  .company dd {
    padding-block: 5px 30px;
    width: 100%;
  }
}

.box {
  opacity: 0;
}

.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.delayfadeIn {
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 共通: 最初は非表示 */
.delayScroll > *,
.delayScroll2 > * {
  opacity: 0;
  transform: translateY(20px);
  /* 下から持ち上がる */
}

/* fadeUp クラスが付与されたときに実行 */
.fadeUp {
  -webkit-animation: fadeUpAnime 0.6s ease forwards;
          animation: fadeUpAnime 0.6s ease forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.privacy-policy {
  padding-top: 150px;
  color: #1E1E1E;
  position: relative;
}
.privacy-policy::before {
  position: absolute;
  content: "";
  background-color: #E3F0EF;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(100% 10%, 100% calc(100% - 600px), 0 90%, 0 600px);
          clip-path: polygon(100% 10%, 100% calc(100% - 600px), 0 90%, 0 600px);
  z-index: -1;
}
.privacy-policy .wrapper {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 20px;
}
.privacy-policy h2 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  text-align: center;
  margin-bottom: 50px;
}
.privacy-policy .lead {
  font-size: 1rem;
  margin-bottom: 50px;
}
.privacy-policy li {
  list-style: decimal inside;
  font-size: 1.25rem;
  font-weight: 500;
  padding-left: 20px;
  position: relative;
}
.privacy-policy li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 6px;
  height: 38px;
  background-color: #57BDBA;
}
.privacy-policy li h3 {
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: 0.1rem;
}
.privacy-policy li p {
  font-size: 1rem;
  font-weight: normal;
  margin-left: 20px;
  margin-bottom: 30px;
}
.privacy-policy .day,
.privacy-policy .name {
  font-size: 1rem;
  text-align: right;
}
.privacy-policy .day {
  margin-bottom: 20px;
}

.lower h2 {
  font-size: 1.25rem;
  letter-spacing: 0.08rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.lower h2 .en {
  font-size: clamp(3.5rem, 56px + 44 * (100vw - 500px) / 780, 6.25rem);
  position: relative;
}
.lower h2 .en::before {
  content: "";
  position: absolute;
  bottom: 10px;
  background-color: #57BDBA;
  width: 85px;
  height: 8px;
}
@media (max-width: 768px) {
  .lower h2 .en::before {
    bottom: 0;
  }
}
.lower .top {
  background-image: url(../img/img_page-title_bg.jpeg);
  background-position: top;
  background-size: cover;
  padding-block: 100px 0;
}
@media (max-width: 500px) {
  .lower .top {
    padding-block: 80px 0;
  }
}
.lower .top .wrapper {
  padding-block: 70px;
}
@media (max-width: 500px) {
  .lower .top .wrapper {
    padding-block: 0 70px;
  }
}
.lower .top p {
  font-size: clamp(1rem, 16px + 8 * (100vw - 500px) / 780, 1.5rem);
}
.lower .top .text {
  width: 50%;
  margin-inline: 50px;
}
@media (max-width: 500px) {
  .lower .top .text {
    width: 100%;
    margin-inline: 0;
    margin-top: 50px;
    padding-inline: 20px;
  }
}
.lower .top .visual {
  width: 50%;
}
@media (max-width: 500px) {
  .lower .top .visual {
    width: 100%;
  }
}
.lower .top .visual img {
  border-radius: 100px 0 0 100px;
}
@media (max-width: 500px) {
  .lower .top .visual img {
    border-radius: initial;
    height: 160px;
    -o-object-position: center;
       object-position: center;
  }
}

.single .wrapper {
  max-width: 1010px;
  margin-inline: auto;
  padding: 100px 20px;
}
@media (max-width: 768px) {
  .single .wrapper {
    padding: 50px;
  }
}
@media (max-width: 500px) {
  .single .wrapper {
    padding: 50px 20px;
  }
}
.single h2 {
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  margin-right: 50px;
  width: 30%;
}
@media (max-width: 768px) {
  .single h2 {
    width: 100%;
    margin-right: initial;
    text-align: center;
  }
}
.single h2 .en {
  font-size: 1.25rem;
  color: #5F9FC7;
}
.single .top p {
  width: 70%;
  letter-spacing: 0.1rem;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .single .top p {
    width: 100%;
  }
}
.single .inner {
  max-width: 1200px;
  margin-inline: auto;
}
.single .heading {
  display: flex;
  align-items: center;
  margin-block: 70px;
}
@media (max-width: 500px) {
  .single .heading {
    flex-direction: column;
    padding-inline: 20px;
  }
}
.single .heading .icon {
  width: 40%;
}
@media (max-width: 500px) {
  .single .heading .icon {
    width: 100%;
  }
}
.single .heading .text {
  width: 60%;
  padding-inline: 70px;
}
@media (max-width: 768px) {
  .single .heading .text {
    padding-inline: clamp(10px, 10px + 60 * (100vw - 500px) / 268, 70px);
  }
}
@media (max-width: 500px) {
  .single .heading .text {
    width: 100%;
    padding-inline: initial;
  }
}
.single .heading .text p {
  line-height: 1.8;
  letter-spacing: 0.08rem;
}
@media (max-width: 768px) {
  .single .heading .text p {
    font-size: clamp(1rem, 16px + 4 * (100vw - 500px) / 268, 1.25rem);
  }
}
.single .heading .text .lead {
  font-size: clamp(1.5rem, 24px + 8 * (100vw - 500px) / 780, 2rem);
  font-weight: bold;
  margin-bottom: 30px;
}

.worries {
  display: flex;
  border-top: 2px solid #151C4B;
  border-bottom: 2px solid #151C4B;
  padding-block: initial;
}
@media (max-width: 500px) {
  .worries {
    flex-direction: column;
    border: none;
  }
}
.worries .head {
  background-color: #151C4B;
  width: 40%;
  display: flex;
  justify-content: center;
}
@media (max-width: 500px) {
  .worries .head {
    width: 100%;
    text-align: center;
    padding-block: 64px;
  }
}
.worries h3 {
  height: 100%;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.08rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  padding-inline: 10px;
}
@media (max-width: 768px) {
  .worries h3 {
    font-size: clamp(1.5rem, 20px + 8 * (100vw - 500px) / 268, 2rem);
  }
}
@media (max-width: 500px) {
  .worries h3 {
    font-size: 2rem;
  }
}
.worries h3 .en {
  font-size: 1.125rem;
  font-weight: normal;
  color: #5F9FC7;
}
.worries ul {
  width: 60%;
  padding: 50px;
}
@media (max-width: 500px) {
  .worries ul {
    width: 100%;
    padding: 64px 30px;
  }
}
.worries li {
  display: flex;
  align-items: flex-start;
}
.worries li:not(:last-of-type) {
  margin-bottom: 30px;
}
.worries li p {
  flex: 1;
}
.worries .check {
  width: 36px;
  opacity: 0;
  transition: all 0.5s;
}

.solution {
  background-image: url(../img/img_solution_bg.jpg);
  background-size: cover;
}
.solution h4 {
  font-size: clamp(3rem, 48px + 72 * (100vw - 500px) / 780, 7.5rem);
  font-weight: bold;
  color: #D9D9D9;
  text-shadow: 1px 1px 0 #504F4F, -1px -1px 0 #504F4F, -1px 1px 0 #504F4F, 1px -1px 0 #504F4F, 0px 1px 0 #504F4F, -1px 0 #504F4F, -1px 0 0 #504F4F, 1px 0 0 #504F4F;
  text-align: center;
  margin-bottom: 50px;
}
.solution ol {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  padding-inline: 20px;
}
@media (max-width: 768px) {
  .solution ol {
    display: initial;
    gap: 0;
    padding-inline: initial;
  }
}
.solution li {
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid #151C4B;
  max-width: 320px;
  min-height: 513px;
  overflow: hidden;
  position: relative;
  padding: 24px;
  width: 33.3333333333%;
}
@media (max-width: 768px) {
  .solution li {
    max-width: initial;
    width: 100%;
    margin: 0 15px;
  }
}
.solution li::before {
  position: absolute;
  top: -115px;
  left: -100px;
  content: "";
  width: 260px;
  height: 260px;
  background: linear-gradient(#151C4B, #4557CF);
  border-radius: 50%;
}
.solution li:nth-of-type(2) {
  margin-top: 100px;
}
@media (max-width: 768px) {
  .solution li:nth-of-type(2) {
    margin-top: 0;
  }
}
.solution .step {
  display: inline-block;
  position: relative;
  font-family: "Lato", sans-serif;
  color: #ffffff;
  z-index: 2;
}
.solution .step p {
  font-size: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
}
.solution .number {
  font-size: 1.25rem;
}
.solution .lead {
  font-size: 1.5rem;
  font-weight: bold;
  margin-block: 60px 30px;
}

/* ボタン本体 */
.slick-prev,
.slick-next {
  z-index: 10;
  width: 64px;
  height: 64px;
  background: #2D398D;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  /* フォーカス枠を消す */
  border: none;
  overflow: hidden;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  position: absolute !important;
}
@media (max-width: 768px) {
  .slick-prev,
.slick-next {
    bottom: -65px !important;
  }
}
@media (max-width: 500px) {
  .slick-prev,
.slick-next {
    top: initial !important;
  }
}
.slick-prev::before,
.slick-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: none !important;
  /* hoverなどで濃くなるのを無効化 */
}
.slick-prev::after,
.slick-next::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  transform: skewX(-25deg);
  pointer-events: none;
}
.slick-prev.active::after,
.slick-next.active::after {
  -webkit-animation: slick 0.5s forwards;
          animation: slick 0.5s forwards;
}

@-webkit-keyframes slick {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

@keyframes slick {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
.slick-prev {
  left: 30px !important;
}

.slick-next {
  right: 30px !important;
}

/* prevボタン三角形を常に白で固定 */
.slick-prev::before,
.slick-prev:hover::before,
.slick-prev:focus::before,
.slick-prev:active::before {
  border-style: solid;
  border-color: transparent #ffffff transparent transparent !important;
  border-width: 15px 25.98px 15px 0px;
  opacity: 1 !important;
}

/* nextボタン三角形を常に白で固定 */
.slick-next::before,
.slick-next:hover::before,
.slick-next:focus::before,
.slick-next:active::before {
  border-style: solid;
  border-color: transparent transparent transparent #ffffff !important;
  border-width: 15px 0px 15px 25.98px;
  opacity: 1 !important;
}

/* hover / focus / active の背景も固定 */
.slick-prev:hover,
.slick-prev:focus,
.slick-prev:active,
.slick-next:hover,
.slick-next:focus,
.slick-next:active {
  background: #2D398D !important;
}

.eachTextAnimeC span {
  opacity: 0;
  display: inline-block;
}
.eachTextAnimeC.appeartext span {
  -webkit-animation: eachTextAnimeC 0.5s forwards;
          animation: eachTextAnimeC 0.5s forwards;
}

@-webkit-keyframes eachTextAnimeC {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes eachTextAnimeC {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.slide-wrapper {
  position: relative;
}
/*# sourceMappingURL=main.css.map */