@charset "utf-8";



/*****************************/
/********** Content **********/
/*****************************/

.content {
  clear: both;
  margin: auto;
  padding: 50px;
  width: 100%;
  max-width: 1100px;
  border-radius: 40px;
}
@media screen and ( max-width: 1024px ) {
  .content {
    padding: 40px;
  }
}
@media screen and ( max-width: 768px ) {
  .content {
    padding: 30px;
  }
}
@media screen and ( max-width: 480px ) {
  .content {
    padding: 20px;
  }
}



/****************************************/
/********** Header - Mainimage **********/
/****************************************/

#header {
  background-image: url("../images/image-main02.webp");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left -200px top 20px;
}
#header .mainimage {
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/image-main01.webp");
  background-repeat: no-repeat;
  background-size: auto 90%;
  background-position: right center;
  background-blend-mode: multiply;
  aspect-ratio: 16 / 9;
}
#header .mainimage h2 {
  margin: auto auto auto 200px;
  padding: 0;
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  animation-delay: 300ms;
}
@media screen and ( max-width: 1280px ) {
  #header .mainimage h2 {
    margin: auto auto auto 100px;
    width: 50vw;
  }
}
@media screen and ( max-width: 1024px ) {
  #header .mainimage h2 {
    margin: auto auto auto 40px;
  }
}
@media screen and ( max-width: 768px ) {
  #header .mainimage h2 {
    margin: auto auto auto 30px;
  }
}
@media screen and ( max-width: 480px ) {
  #header .mainimage h2 {
    margin: auto auto auto 20px;
  }
}



/**************************/
/********** News **********/
/**************************/

.section-news {
  clear: both;
  margin: auto;
  padding: 0;
  width: 100%;
  position: relative;
  color: #000000;
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #FFFFFF 50%, #FFFFFF 100%),
                    linear-gradient(to bottom, transparent 0%, transparent 110px, #FFFFFF 110px, #FFFFFF 100%);
}
.section-news .content {
  margin: auto;
  padding: 100px;
  width: 100%;
  max-width: 1200px;
  display: flex;
  gap: 80px;
  background-color: #FFFFFF;
}
.section-news .headline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-news .headline h3 {
  margin: 0;
  padding: 0;
  color: #000000;
  font-size: 5.6rem;
  font-weight: 700;
  letter-spacing: 0.4rem;
  line-height: 100%;
  background-image: linear-gradient(to right, #6064FF 0%, #3AD7FF 20%, #6064FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-news .headline .readmore {
  margin: auto auto 0 0;
}
.section-news .listing {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.section-news dl:nth-child(n+6) {
  display: none;
}
.section-news dl {
  margin: 0;
  padding: 20px 0;
  width: 100%;
  display: flex;
  gap: 5px 30px;
  color: #000000;
  border-bottom: 1px solid #BBBBBB;
}
.section-news dl:first-of-type {
  padding-top: 0;
}
.section-news dl dt {
  margin: 0;
  padding: 0;
  font-feature-settings: "tnum";
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 180%;
  color: #999999;
}
.section-news dl dd {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 180%;
  color: #000000;
}
@media screen and ( max-width: 1280px ) {
  .section-news .content {
    padding: 80px;
    flex-direction: column;
    gap: 40px 0;
    max-width: 1280px;
    border-radius: initial;
  }
  .section-news .headline {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .section-news .headline .readmore {
    margin: auto 0 0 auto;
  }
}
@media screen and ( max-width: 1024px ) {
  .section-news .content {
    padding: 40px;
  }
  .section-news .headline {
    margin: 10px 0;
  }
  .section-news .headline h3 {
    font-size: 5.0rem;
  }
  .section-news .headline .readmore a {
    font-size: 1.8rem;
  }
  .section-news dl {
    flex-direction: column;
    padding: 15px 0;
    gap: 0;
  }
}
@media screen and ( max-width: 768px ) {
  .section-news .content {
    padding: 30px;
    gap: 30px 0;
  }
  .section-news .headline {
    gap: 10px;
  }
  .section-news .headline h3 {
    font-size: 4.4rem;
    letter-spacing: 0.2rem;
  }
  .section-news .headline .readmore a {
    font-size: 1.6rem;
  }
  .section-news dl dt {
    font-size: 1.6rem;
    line-height: 160%;
  }
  .section-news dl dd {
    font-size: 1.6rem;
    letter-spacing: 0.04rem;
    line-height: 160%;
  }
}
@media screen and ( max-width: 480px ) {
  .section-news .content {
    padding: 20px;
    gap: 20px 0;
  }
  .section-news .headline h3 {
    font-size: 3.8rem;
    letter-spacing: 0.1rem;
  }
  .section-news .headline .readmore a {
    font-size: 1.4rem;
  }
}



/***************************/
/********** About **********/
/***************************/

.section-about {
  clear: both;
  margin: auto;
  padding: 0;
  width: 100%;
  position: relative;
  background-color: #FFFFFF;
}
.section-about .content {
  padding-bottom: 180px;
}
.section-about h3 {
  margin: 30px auto;
  padding: 0 0 30px 0;
  color: #3C3CAA;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 140%;
  text-align: center;
  background-image: linear-gradient(to right, #6064FF 0%, #3AD7FF 20%, #6064FF 100%);
  background-repeat: no-repeat;
  background-size: 140px 7px;
  background-position: center bottom;
}
.section-about p {
  font-size: 2.0rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 200%;
  color: #000000;
  text-align: center;
}
.section-about figure {
  margin: 30px auto;
}
@media screen and ( max-width: 1024px ) {
  .section-about .content {
    padding-bottom: 160px;
  }
  .section-about h3 {
    font-size: 3.2rem;
  }
  .section-about h3 br {
    display: none;
  }
  .section-about p {
    text-align: left;
  }
  .section-about p br {
    display: none;
  }
}
@media screen and ( max-width: 768px ) {
  .section-about .content {
    padding-bottom: 120px;
  }
  .section-about h3 {
    font-size: 2.8rem;
    letter-spacing: 0.1rem;
  }
  .section-about p {
    font-size: 1.8rem;
    line-height: 180%;
    text-align: left;
  }
}
@media screen and ( max-width: 480px ) {
  .section-about .content {
    padding-bottom: 60px;
  }
  .section-about h3 {
    font-size: 2.4rem;
    letter-spacing: 0.04rem;
  }
}



/*************************/
/********** Aim **********/
/*************************/

.section-aim {
  clear: both;
  margin: auto;
  padding: 0;
  width: 100%;
  position: relative;
  color: #FFFFFF;
  background-image: linear-gradient(to right, transparent 0%, transparent 85%, #FFFFFF 85%, #FFFFFF 100%);
}
.section-aim .wrap {
  margin: auto;
  padding: 50px 0 100px 0;
  width: 100%;
  max-width: 1200px;
  position: relative;
}
.section-aim .content {
  padding-right: 400px;
}
.section-aim h3 {
  margin: 30px auto;
  padding: 0 0 30px 0;
  color: #FFFFFF;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 140%;
  background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 100%);
  background-repeat: no-repeat;
  background-size: 140px 7px;
  background-position: left bottom;
}
.section-aim p {
  font-size: 2.0rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 200%;
  color: #FFFFFF;
}
.section-aim .button a {
  color: #3C3CAA;
  background-color: #FFFFFF;
  background-image: initial;
}
.section-aim .button a:hover {
  color: #FFFFFF;
  background-image: linear-gradient(to right, #3AD7FF 0%, #6064FF 100%);
}
.section-aim .button a:after {
  background-image: linear-gradient(to right, #3AD7FF 0%, #6064FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-aim .button a:hover:after {
  background-image: none;
  background-color: #FFFFFF;
}
.section-aim .ellipse-image {
  position: absolute;
  top: -100px;
  left: 680px;
  width: 800px;
  height: auto;
  clip-path: ellipse(50% 48% at center);
  transform: rotate(15deg);
  animation-delay: 200ms;
}
.section-aim .ellipse-image img {
  transform: rotate(-15deg);
}
@media screen and ( max-width: 1280px ) {
  .section-aim {
    background-image: initial;
  }
  .section-aim .wrap {
    padding: 0;
  }
  .section-aim .content {
    padding: 50px 420px 180px 50px;
  }
  .section-aim .ellipse-image {
    top: -120px;
    left: 50vw;
    width: 60vw;
    height: auto;
  }
}
@media screen and ( max-width: 1024px ) {
  .section-aim .content {
    padding: 40px 40px 160px 40px;
  }
  .section-aim h3 {
    font-size: 3.2rem;
  }
  .section-aim .ellipse-image {
    top: -120px;
    left: 60vw;
    width: 50vw;
  }
}
@media screen and ( max-width: 768px ) {
  .section-aim .content {
    padding: 30px 30px 80px 30px;
  }
  .section-aim h3 {
    font-size: 2.8rem;
    letter-spacing: 0.1rem;
  }
  .section-aim p {
    font-size: 1.8rem;
    line-height: 180%;
  }
  .section-aim .ellipse-image {
    top: -80px;
  }
}
@media screen and ( max-width: 480px ) {
  .section-aim h3 {
    font-size: 2.4rem;
    letter-spacing: 0.04rem;
  }
  .section-aim p {
    font-size: 1.6rem;
    line-height: 160%;
  }
  .section-aim .ellipse-image {
    top: -40px;
  }
}



/******************************/
/********** Approach **********/
/******************************/

.section-approach {
  clear: both;
  margin: auto;
  padding: 0;
  width: 100%;
  position: relative;
  color: #000000;
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #FFFFFF 50%, #FFFFFF 100%);
}
.section-approach .wrap {
  margin: auto;
  padding: 0;
  position: relative;
  width: 100%;
  max-width: 1280px;
  background-color: #FFFFFF;
  border-radius: 40px;
}
.section-approach h3 {
  margin: 30px auto;
  padding: 0 0 30px 0;
  color: #3C3CAA;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 150%;
  text-align: right;
  background-image: linear-gradient(to right, #6064FF 0%, #3AD7FF 20%, #6064FF 100%);
  background-repeat: no-repeat;
  background-size: 140px 7px;
  background-position: right bottom;
}
.section-approach p {
  color: #3C3CAA;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 200%;
  text-align: right;
}
.section-approach ol {
  margin: 60px auto;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 4%;
  counter-reset: item;
}
.section-approach ol li {
  margin: 0;
  padding: 0 0 20px 0;
  color: #000000;
  font-size: 2.0rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 160%;
  border-bottom: 1px solid #BBBBBB;
  width: 48%;
  display: flex;
  gap: 0 20px;
}
.section-approach ol li:before {
  color: #3C3CAA;
  font-feature-settings: "tnum";
  font-size: 2.6rem;
  font-weight: 700;
  counter-increment: item;
  content: counter(item, decimal-leading-zero) "";
}
.section-approach .button a {
  color: #FFFFFF;
  background-image: linear-gradient(to right, #3AD7FF 0%, #6064FF 100%);
}
.section-approach .button a:hover {
  background-image: linear-gradient(to right, #3AD7FF 0%, #6064FF 100%);
}
.section-approach .ellipse-image {
  position: absolute;
  top: -40px;
  left: 60px;
  width: 500px;
  height: auto;
  clip-path: ellipse(50% 48% at center);
  transform: rotate(-15deg);
  animation-delay: 200ms;
}
.section-approach .ellipse-image img {
  transform: rotate(15deg);
}
@media screen and ( max-width: 1280px ) {
  .section-approach .wrap {
    border-radius: initial;
  }
  .section-approach .ellipse-image {
    top: -100px;
    left: -10vw;
    width: 50vw;
    height: auto;
  }
}
@media screen and ( max-width: 1024px ) {
  .section-approach h3 {
    font-size: 3.2rem;
  }
  .section-approach .ellipse-image {
    top: -120px;
  }
}
@media screen and ( max-width: 768px ) {
  .section-approach h3 {
    font-size: 2.8rem;
    letter-spacing: 0.1rem;
  }
  .section-approach p {
    font-size: 2.0rem;
    line-height: 180%;
  }
  .section-approach ol {
    margin: 30px auto;
    gap: 15px 0;
  }
  .section-approach ol li {
    padding: 0 0 15px 0;
    width: 100%;
    font-size: 1.8rem;
    gap: 0 15px;
  }
  .section-approach ol li:before {
    font-size: 2.4rem;
  }
  .section-approach .ellipse-image {
    top: -80px;
  }
}
@media screen and ( max-width: 480px ) {
  .section-approach h3 {
    font-size: 2.4rem;
    letter-spacing: 0.1rem;
  }
  .section-approach p {
    font-size: 1.8rem;
    line-height: 160%;
  }
  .section-approach ol li {
    font-size: 1.6rem;
  }
  .section-approach ol li:before {
    font-size: 2.2rem;
  }
  .section-approach .ellipse-image {
    top: -60px;
  }
}



/***********************************************/
/********** Approach - Solve (Spacer) **********/
/***********************************************/

.approach-solve-spacer {
  clear: both;
  margin: auto;
  padding:0;
  width: 100%;
  height: 200px;
  background-image: linear-gradient(to right, transparent 0%, transparent 85%, #FFFFFF 85%, #FFFFFF 100%);
}
@media screen and ( max-width: 1280px ) {
  .approach-solve-spacer {
    display: none;
  }
}



/***************************/
/********** Solve **********/
/***************************/

.section-solve {
  clear: both;
  margin: auto;
  padding: 0;
  width: 100%;
  position: relative;
  color: #FFFFFF;
  background-image: linear-gradient(to right, #53A9FF 0%, #6064FF 100%),
                    url("../images/image-solve01.webp");
  background-repeat: no-repeat;
  background-size: auto,
                   cover;
  background-position: center center;
  background-blend-mode: multiply;
}
.section-solve .content {
  padding-bottom: 240px;
}
.section-solve h3 {
  margin: 30px auto;
  padding: 50px 0;
  color: #FFFFFF;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 140%;
  text-align: center;
}
.section-solve p {
  color: #FFFFFF;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 240%;
  text-align: center;
}
@media screen and ( max-width: 1024px ) {
  .section-solve h3 {
    font-size: 3.2rem;
  }
  .section-solve h3 br {
    display: none;
  }
  .section-solve p {
    font-size: 2.4rem;
    letter-spacing: 0.04rem;
    line-height: 220%;
    text-align: left;
  }
  .section-solve p br {
    display: none;
  }
}
@media screen and ( max-width: 768px ) {
  .section-solve h3 {
    margin: 30px auto;
    padding: 30px 0;
    font-size: 2.8rem;
    letter-spacing: 0.1rem;
  }
  .section-solve p {
    font-size: 2.0rem;
    line-height: 200%;
  }
}
@media screen and ( max-width: 480px ) {
  .section-solve h3 {
    font-size: 2.4rem;
    letter-spacing: 0.04rem;
  }
  .section-solve p {
    font-size: 1.8rem;
    line-height: 180%;
  }
}



/******************************/
/********** Suitable **********/
/******************************/

.section-suitable {
  clear: both;
  margin: auto auto 60px auto;
  padding: 0;
  width: 100%;
  position: relative;
  color: #000000;
}
.section-suitable .wrap {
  margin: auto;
  padding: 0 50px;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-top: -160px;
}
.section-suitable .content {
  margin: 0;
  padding: 40px 80px;
  background-color: #FFFFFF;
}
.section-suitable h3 {
  margin: 30px auto;
  padding: 0 0 30px 0;
  color: #3C3CAA;
  font-size: 4.0rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 140%;
  background-image: linear-gradient(to right, #6064FF 0%, #3AD7FF 20%, #6064FF 100%);
  background-repeat: no-repeat;
  background-size: 140px 7px;
  background-position: left bottom;
}
.section-suitable ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.section-suitable ul li {
  margin: 10px auto;
  padding: 0;
  color: #000000;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 200%;
}
.section-suitable ul li:before {
  font-family: "Font Awesome 6 Free";
  content: "\f00C";
  margin: 0 10px 0 0;
  font-size: 2.0rem;
  font-weight: 900;
  color: #3C3CAA;
}
.section-suitable .button a {
  color: #FFFFFF;
  background-image: linear-gradient(to right, #3AD7FF 0%, #6064FF 100%);
}
.section-suitable .ellipse-image {
  position: absolute;
  bottom: -60px;
  left: 600px;
  width: 500px;
  height: auto;
  clip-path: ellipse(50% 48% at center);
  transform: rotate(15deg);
  background-color: #FFFFFF;
}
.section-suitable .ellipse-image img {
  transform: rotate(-15deg);
  opacity: 0.5;
}
@media screen and ( max-width: 1024px ) {
  .section-suitable .content {
    padding: 30px 60px;
  }
  .section-suitable h3 {
    font-size: 3.4rem;
  }
  .section-suitable ul li {
    font-size: 2.0rem;
  }
  .section-suitable ul li:before {
    font-size: 1.8rem;
  }
  .section-suitable .ellipse-image {
    left: 55vw;
    width: 50vw;
  }
}
@media screen and ( max-width: 768px ) {
  .section-suitable {
    margin-bottom: 0;
  }
  .section-suitable .wrap {
    padding: 0;
  }
  .section-suitable .content {
    padding: 40px;
    border-radius: initial;
  }
  .section-suitable h3 {
    font-size: 3.0rem;
    letter-spacing: 0.1rem;
  }
  .section-suitable ul li {
    font-size: 1.8rem;
    line-height: 160%;
  }
  .section-suitable ul li:before {
    font-size: 1.6rem;
  }
  .section-suitable ul li br {
    display: none;
  }
  .section-suitable .ellipse-image {
    bottom: initial;
    top: -70px;
  }
}
@media screen and ( max-width: 480px ) {
  .section-suitable .content {
    padding: 30px;
  }
  .section-suitable h3 {
    font-size: 2.4rem;
    letter-spacing: 0.04rem;
  }
}