@charset "UTF-8";
/*----------------------------------------------------
  .about
----------------------------------------------------*/
.about {
  width:100%;
  height:auto;
  position:relative;
  padding:300px 0 150px 0;
}
.about::before {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-size:cover;
  background-position:bottom center;
}
.about::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url('../img/common/bg-noise.png');
  background-repeat:repeat;
  opacity:.05;
}
.about__body {
  width:90%;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:1;
}
.about__ttl {
  width:auto;
  margin-right:7.5%;
}
.about__ttl > h2 {
  line-height:1;
  margin-bottom:30px;
}
.about__ttl > p {
  font-size:2rem;
  font-weight:bold;
  margin-bottom:30px;
}
.about__item {
  flex:1;
}
.about__item > p:not(:last-child) {
  margin-bottom:20px;
}
.about__link {
  width:80%;
  margin:0 auto 0 0;
}
.about__link__sp {
  display:none;
}
.about__bg {
  width:95%;
  height:auto;
  position:absolute;
  top:10%;
  right:0;
  transform:translate(0,0);
}
.about__bg::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:52.35%;
}
.about__bg svg {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
  stroke-dasharray:6000;
  stroke-dashoffset:0;
}
.is-active svg {
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
  animation:line_animation 4s linear 0s 1;
  animation-fill-mode: forwards;
}
@keyframes line_animation {
0% { stroke-dashoffset: 6000;opacity:1; }
100% { stroke-dashoffset: 0;opacity:1; }
}
/*----------------------------------------------------
  .mes
----------------------------------------------------*/
.mes {
  width:100%;
  height:auto;
  position:relative;
  padding:150px 0;
  background:#f5fbfc;
}
.mes__bg {
  position:absolute;
  top:50%;
  right:0;
  transform:translate(0,-50%);
  width:auto;
  height:47.5%;
  opacity:.1;
}
.mes__bg > img {
  width:auto;
  height:100%;
}
.object__anima {
  width:120px;
  position:absolute;
  top:-130px;
  right:7.5%;
}
.object__anima > img {
  animation: object__anima 2.4s linear infinite;
  position:absolute;
  top:0;left:0;
}
@keyframes object__anima {
  0% {
    opacity: 1;
  }
  34% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
}
.object__anima > img:nth-of-type(2) {
  animation-delay: 0.8s;
}
.object__anima > img:nth-of-type(3) {
  animation-delay: 1.6s;
}
.mes__body {
  width:90%;
  max-width:1280px;
  height:auto;
  margin:0 auto;
}
.mes__col {
  width:100%;
  display:flex;
  justify-content:space-between;
  background:#fff;
  border-radius:80px;
}
.mes-sp,
.mes-sp2 {
  display:none;
}
.mes__img {
  width:45%;
  height:auto;
}
.mes__img > picture,
.mes__img img {
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:80px 0 0 80px;
}
.mes__item {
  width:55%;
  padding:50px;
  box-sizing:border-box;
}
.mes__ttl {
  line-height:1.4;
  margin-bottom:30px;
}
.mes__lead {
  font-size:3rem;
  font-weight:bold;
  line-height:1.8;
  margin-bottom:30px;
}
.mes__txt {
  width:100%;
  height:auto;
  margin-bottom:20px;
}
.mes__txt > p:not(:last-of-type) {
  margin-bottom:14px;
}
.mes__name {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.6;
  padding-right:20px;
  box-sizing:border-box;
}
.mes__name-main {
  font-size:1.2rem;
}
.mes__name-main > span {
  margin-left:8px;
  font-size:2rem;
}
/*----------------------------------------------------
  .company
----------------------------------------------------*/
.company {
  width:100%;
  height:auto;
  position:relative;
  padding:150px 0;
}
.company__body {
  width:90%;
  max-width:1280px;
  height:auto;
  margin:0 auto;
  position:relative;
}
.object__anima2 {
  width:100px;
  position:absolute;
  top:-100px;
  left:7.5%;
  z-index:1;
}
.object__anima2 > img {
  animation: object__anima2 1.6s linear infinite;
  position:absolute;
  top:0;left:0;
}
@keyframes object__anima2 {
  0% {
    opacity: 1;
  }
  54% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
}
.object__anima2 > img:nth-of-type(2) {
  animation-delay: 0.8s;
}
.company__item {
  width:100%;
  height:auto;
  background:#fff;
  padding:80px 0;
  box-sizing:border-box;
  box-shadow: 4px 16px 40px rgba(30, 103, 64, 0.16);
}
.company__ttl {
  width:100%;
  height:auto;
  line-height:1.4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.ttl__anima {
  width:60px;
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}
.ttl__anima > span {
  display:block;
  width:8px;
  height:8px;
  border-radius:50vh;
  animation: circle-blink 3s ease-in-out infinite alternate-reverse;
}
@keyframes circle-blink {
  0% {
    transform:scale(1);
    opacity:1;
  }
  50% {
    transform:scale(1.2);
    opacity:.6;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}
.ttl__anima > span:nth-of-type(1) {
  background:#7ec9d1;
}
.ttl__anima > span:nth-of-type(2) {
  background:#189ead;
  animation-delay:1s;
}
.ttl__anima > span:nth-of-type(3) {
  background:#4eb5c1;
  animation-delay:2s;
}
.company__item > dl {
  width:65%;
  display:flex;
  flex-wrap:wrap;
  margin:0 auto;
  font-size:1.8rem;
}
.company__item > dl > dt {
  width:25%;
  height:auto;
  padding:30px 20px;
  box-sizing:border-box;
  position:relative;
  border-bottom:1px solid #e2e9eb;
}
.company__item > dl > dt::before {
  display:block;
  content:'';
  width:80%;
  height:2px;
  position:absolute;
  bottom:-1px;
  left:0;
  background: linear-gradient(90deg,#01d8eb, #288e9e);
  opacity:.5;
}
.company__item > dl > dd {
  width:75%;
  height:auto;
  padding:30px 20px;
  box-sizing:border-box;
  border-bottom:1px solid #e2e9eb;
}
@media screen and (max-width:1280px) {
}
@media screen and (max-width:1024px) {
  /*--- about ---*/
  .about {
    padding:150px 0 100px 0;
  }
  .about__body {
    width:70%;
    flex-direction:column;
  }
  .about__ttl {
    margin-right:0;
    margin-bottom:60px;
  }
  .about__ttl > p {
    margin-bottom:0;
  }
  .about__item {
    margin-bottom:60px;
  }
  .about__link {
    max-width:320px;
  }
  .about__link__pc {
    display:none;
  }
  .about__link__sp {
    display:block;
  }
  .about__bg {
    width:140%;
    right:-30%;
  }
  /*--- mes ---*/
  .mes__body {
    width:70%;
  }
  .mes__col {
    flex-direction:column;
    align-items:center;
    border-radius:40px;
  }
  .mes__img {
    width:100%;
    margin-bottom:40px;
    position:relative;
  }
  .mes__img > picture,
  .mes__img img {
    height:auto;
    object-fit:initial;
    object-position:initial;
    border-radius:40px 40px 0 0;
  }
  .mes-pc {
    display:none;
  }
  .mes__ttl > h2 {
    letter-spacing:.025em;
  }
  .mes-sp {
    display:block;
    position:absolute;
    top:50%;
    left:10%;
    transform:translate(0,-50%);
    width:auto;
    z-index:1;
  }
  .mes__item {
    width:100%;
  }
  /*--- company ---*/
  .company__item > dl {
    width:75%;
  }
}
@media screen and (max-width:896px) {
}
@media screen and (max-width:786px) {
  .about__body {
    width:80%;
  }
  .about__item > p br {
    display:none;
  }
  /*--- mes ---*/
  .mes__body {
    width:80%;
  }
  /*--- company ---*/
  .company__item > dl {
    width:85%;
  }  
}
@media screen and (max-width:680px) {
  .company__item > dl > dt {
    width:100%;
    padding:20px 10px 5px 10px;
  }
  .company__item > dl > dt::before {
    width:20%;
  }
  .company__item > dl > dd {
    width:100%;
    padding:5px 10px 20px 10px;
    border-bottom:none;
  }
}
@media screen and (max-width:480px) {
  /*--- about ---*/
  .about {
    padding:100px 0;
  }
  .about__bg {
    width:105%;
    right:-1%;
    top:6%;
  }
  .about__body {
    width:85%;
  }
  .about__ttl {
    margin-bottom:30px;
  }
  .about__ttl > h2 {
    margin-bottom:20px;
  }
  .about__item {
    margin-bottom:40px;
  }
  .object__anima {
    width:80px;
    top:-60px;
  }
  /*--- mes ---*/
  .mes {
    padding:100px 0;
  }
  .mes__body {
    width:85%;
  }
  .mes__img {
    margin-bottom:20px;
  }
  .mes-sp {
    display:none;
  }
  .mes-sp2 {
    display:block;
    text-align: center;
  }
  .mes__item {
    padding:20px 20px 50px 20px;
  }
  .mes__lead {
    font-size:2.2rem;
  }
  .mes__txt > p br {
    display:none;
  }
  .mes__bg {
    height:25%;
    top:45%;
    right:-5%;
  }
  /*--- company ---*/
  .company {
    padding:100px 0;
  }
  .object__anima2 {
    width:90px;
    top:-90px;
  }
  .company__ttl {
    margin-bottom:20px;
  }
  .company__item > dl {
    font-size:1.4rem;
  }
}