@charset "UTF-8";
@import "footer.css";


/*--------------------
　message
---------------------*/
.about_message {
  padding-bottom:calc(2*var(--size100));
}
.message_content {
  gap:calc(2*var(--size100));
}
.message_content .txt_box{
  width:50%;
}
.message_content .txt_box p {
  margin-left:calc(3.333em + 20px + 1.3333em);
  padding-left:var(--size100);
  letter-spacing: 0.05em;
}
.message_content .txt_box p + p{
  margin-top:2em;
}
.message_content .img_box{
  width:calc(50% - 2*var(--size100));
}
.message_content .img_box .about_img01 {
  width:calc(100% - (3.333em + 20px + 1.3333em + var(--size100)));
}
.message_content .img_box .about_img02,.message_content .img_box .about_img03 {
  width:min(50%,376px);
  margin-top:var(--size40);
}
.message_content .img_box .about_img02 {
  margin-left:min(29.65%,223px);
}

@media (max-width: 768px) {
  .message_content{
    flex-direction: column;
    gap:var(--size80);
  }
  .message_content .txt_box {
    width:100%;
  }
  .message_content .img_box{
    width:100%;
  }
  .message_content .txt_box p {
    margin-left:var(--outergap);
    padding-left:var(--innergap);
    padding-right:var(--innergap);
    letter-spacing: 0.025em;
  }
  .message_content .img_box .about_img01 {
    width:calc(100% - var(--outergap) - var(--innergap));
  }
  .message_content .img_box .about_img02,.message_content .img_box .about_img03 {
    width:70%;
    margin-top:var(--size40);
  }
  .message_content .img_box .about_img02 {
    width:70%;
    margin-right:0;
    margin-left:auto;
  }
}
/*--------------------
　value
---------------------*/
.about_value {
  padding-top:calc(1.2*var(--size100));
  padding-bottom:calc(2*var(--size100));
  overflow: visible;
}
.ttl_about__value {
  display: flex;
  justify-content: center;
}
.ttl_about__value:before{
  content: none;
}

.about_value_list_wrap {
  counter-reset: number 0;
}
.about_value_list_wrap dl {
  display: grid;
  grid-template-columns:11% auto;
  grid-template-rows:auto auto;
  grid-gap:var(--size10) var(--size60);
}
.about_value_list_wrap dl + dl {
  margin-top:var(--size80);
}
.about_value_list_wrap dl:before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero);
  font-family: var(--fontEn);
  font-style: italic;
  color:var(--yellow);
  color:transparent;
  -webkit-text-stroke: 1px var(--blue);
  text-stroke: 1px var(--blue);
  font-size:5.791em;
  text-shadow: 4px 4px 0 var(--yellow);
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  line-height: 0.75;

}
.about_value_list_wrap dl dt {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-size:1.5em;
  font-weight:700;
}
.about_value_list_wrap dl dd {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  font-size:0.83em;
}
.circle-wrap{
  width: 500px;
  height: 500px;
  position:absolute;
  left:50%;
  top:-80px;
  transform: translateX(-50%);
}
.rotate {
  width: 100%;
  height: 100%;
  animation: rotate-anime 30s linear infinite;
}
@keyframes rotate-anime {
    0%  {transform: rotate(0);}
  100%  {transform: rotate(-360deg);}
}
.circle {
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
  animation: round_anime 5s linear infinite;
}
@keyframes round_anime {
    0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
   50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
   75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
  100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}


@media (max-width: 768px) {
  .about_value_list_wrap dl {
    grid-gap:var(--size10) var(--size20);
  }
  .about_value_list_wrap dl + dl {
    margin-top:var(--size40);
  }
  .about_value_list_wrap dl:before {
    font-size:4em;
  }
}