@charset "UTF-8";
/*------------------------------------
 .vision
------------------------------------*/
.vision {
  width:100%;
  height:auto;
  padding:150px 0;
  position:relative;
}
.vision-body {
  width:90%;
  max-width:1100px;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.vision-col {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.vision-inner {
  width:50%;
}
.vision-ttl {
  width:100%;
  line-height:1.2;
  margin-bottom:20px;
}
.vision-ttl > h2 {
  display:flex;
  align-items:center;
  font-size:1.4rem;
}
.vision-ttl > h2::before {
  display:block;
  content:'';
  width:10px;
  border-top:1px solid #545454;
  margin-right:10px;
}
.vision-ttl > p {
  font-size:7rem;
  font-family:"Playfair Display", serif;
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
}
.vision-lead {
  width:100%;
  font-size:2.8rem;
  line-height:1.6;
  margin-bottom:20px;
}
.vision-lead--en {
  display:inline-flex;
  flex-direction:column-reverse;
  font-size:3.2rem;
  font-family:"Playfair Display", serif;
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
  line-height:1.1;
  margin-bottom:8px;
}
.vision-lead--en > span {
  font-size:1.2rem;
  margin-top:5px;
  font-weight:bold;
  font-family: "Roboto", "BIZ UDGothic", 'Hiragino Sans,', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', '游ゴシック', YuGothic, '游ゴシック体', 'BIZ UDPGothic', 'Meiryo', sans-serif;
}
.vision-lead .font-red {
  font-weight:bold;
}
.vision-txt {
  width:100%;
  margin-bottom:20px;
}
.vision-link {
  width:60%;
}
.vision-img {
  width:45%;
  position:relative;
}
.vision-img > img {
  position:relative;
  z-index:1;
}
.vision-img::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:50%;
  left:60%;
  transform:translate(-50%,-50%) rotate(8deg);
  background:#f6f6f6;
  background-size:cover;
}
.vision-sp {
  display:none;
}
/*------------------------------------
 .about
------------------------------------*/
.about {
  width:100%;
  height:auto;
  padding:0 0 150px 0;
  position:relative;
}
#particles-js {
  position:absolute;
  top:0;
  left:0;
  width:40%;
  height:100%;
  opacity:.5;
  overflow: hidden;
}
.about-body {
  width:90%;
  max-width:1200px;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.about-col {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items: center;
  margin-left:-5%;
}
.about-img {
  width:40%;
}
.about-img__item {
  width:50%;
  height:auto;
  position:relative;
}
.about-item__arrow {
  width:25%;
  height:auto;
  position:absolute;
  bottom:10%;
  right:-30%;
}
.about-item__arrow2 {
  width:25%;
  height:auto;
  transform:rotate(90deg);
  position:absolute;
  bottom:-30%;
  left:0;
}
.about-item__arrow3 {
  width:30%;
  height:auto;
  position:absolute;
  top:-70%;
  left:0;
  transform:rotate(225deg);
}
.about-img__item:nth-of-type(2) {
  margin-left:auto;
}
.about-img__item:nth-of-type(n+2) {
  margin-top:10px;
}
.about-img__item::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:100%;
}
.about-img__inner {
  width:100%;
  height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:1;
}
.about-img__inner > img {
  width:36px;
  margin:0 auto 5px auto;
}
.about-img__txt {
  width:100%;
  line-height:1.4;
  text-align:center;
}
.about-img__txt > p:nth-of-type(1) {
  font-size:2.6rem;
  font-family:"Playfair Display", serif;
  font-weight:400;
  font-style: normal;
}
.about-img__txt > p:nth-of-type(2) {
  font-size:1.4rem;
}
.about-img__circle {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:#fff;
  border-radius:50vh;
}
.about-img__circle > span {
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  animation: pulse 4s ease-out infinite;
  transform:translate(-50%,-50%);
  border-radius:50vh;
  opacity:0;
}
.about-img__item:nth-of-type(1) .about-img__circle > span {
  background:rgba(255, 0, 0,.05);
}
.about-img__item:nth-of-type(2) .about-img__circle > span {
  background:rgba(254, 255, 0,.1);
}
.about-img__item:nth-of-type(3) .about-img__circle > span {
  background:rgba(173, 255, 47,.1);
}
.about-img__circle > span {
  width:100%;
  height:100%;
}
.about-img__circle > span:nth-of-type(2) {
  animation: pulse 4s ease-out 1s infinite;
}
.about-img__circle > span:nth-of-type(3) {
  animation: pulse 4s ease-out 2s infinite;
}
@keyframes pulse {
  0% {
    transform:translate(-50%,-50%) scale(.7);
    opacity:0;
  }
  50% {
    transform:translate(-50%,-50%);
    opacity:1;
  }
  100% {
    transform:translate(-50%,-50%) scale(1);
    opacity:0;
  }
}
.about-inner {
  width:55%;
}
.about-item {
  width:100%;
  height:auto;
  display:flex;
  position:relative;
}
.about-item:nth-of-type(n+2) {
  margin-top:60px;
}
.about-item__inner {
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}
.about-item__ttl {
  width:100%;
  display:flex;
  align-items:baseline;
  line-height:1.4;
  margin-bottom:10px;
  padding-left:28px;
  position:relative;
}
.about-item__ttl::before {
  display:block;
  content:'';
  width:6px;
  height:100%;
  background: transparent linear-gradient(180deg, #ccc 0%, #ccc 50%, #eee 50%, #eee 100%) 0% 0% no-repeat padding-box;
  position:absolute;
  top:0;
  left:0;
}
.about-item__ttl > p {
  font-size:4rem;
  font-family:"Playfair Display", serif;
  font-weight:400;
  font-style: normal;
  order:1;
}
.about-item__ttl > h2 {
  font-size:1.8rem;
  font-weight:bold;
  margin-left:20px;
  order:2;
}
.about-item__lead {
  width:100%;
  color:#FF0000;
  font-size:2.2rem;
  font-weight:bold;
  display:flex;
  align-items:center;
}
.about-item__lead::after {
  display:block;
  content:'';
  width:50px;
  height:0;
  border-bottom:1px solid #F4EBEB;
  margin-left:8px;
}
.about-item__txt {
  width:100%;
  font-size:1.6rem;
  background:#FBFAFA;
  padding:14px;
  box-sizing:border-box;
}
.about-bg {
  width:auto;
  height:100%;
  position:absolute;
  top:0;
  right:0;
  transform:translate(0,0);
}
.about-bg > svg {
  display:block;
  width:auto;
  height:100%;
}
.about-bg {
  visibility:hidden;
  opacity:0;
  fill:none;
  stroke: rgb(212, 212, 212);
  stroke-miterlimit: 10;
}
.is-aboutAnima {
  visibility:visible;
  opacity:1;
  -webkit-animation: svg-stroke 4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s both;
  animation: svg-stroke 4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s both;
}
 @-webkit-keyframes svg-stroke {
  0% {
    stroke-dashoffset: 4324.08837890625px;stroke-dasharray: 4324.08837890625px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 4324.08837890625px;
  }
}
@keyframes svg-stroke {
  0% {
    stroke-dashoffset: 4324.08837890625px;
    stroke-dasharray: 4324.08837890625px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 4324.08837890625px;
  }
}
/*------------------------------------
 .ceo
------------------------------------*/
.ceo {
  width:100%;
  height:auto;
  padding:150px 0;
  position:relative;
}
.ceo::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  right:0;
  background:url(../img/common/bg-red.png);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:bottom right;
  transform:rotateY(180deg);
}
.ceo-body {
  width:90%;
  max-width:1200px;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.ceo-ttl {
  width:100%;
  line-height:1.4;
  margin-bottom:30px;
}
.ceo-sp {
  display:none;
}
.ceo-ttl > h2 {
  font-size:4rem;
}
.ceo-ttl > p {
  display:flex;
  align-items:center;
  font-size:2rem;
  font-family:"Playfair Display", serif;
  font-weight:400;
  font-style: normal;
}
.ceo-ttl > p > img {
  display: inline-block;
  width:16px;
  height:16px;
  margin-right: 5px;
}
.ceo-ttl > p::after {
  display: block;
  content: '';
  flex:1;
  height: 0;
  border-bottom: 1px solid #ccc;
  margin-left: 8px;
}
.ceo-col,
.ceo-col2 {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ceo-col2 {
  margin:100px 0 50px auto;
}
.ceo-img {
  width:40%;
  position:relative;
}
.ceo-img::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:50%;
  left:60%;
  transform:translate(-50%,-50%) rotate(8deg);
  background:#f6f6f6;
  background-size:cover;
}
.ceo-img2 {
  width:32.5%;
}
.ceo-img2::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:55%;
  left:0;
  transform:translate(0,-50%) rotate(-8deg);
  transform-origin: left bottom;
  background:rgba(255,0,0,.1);
  background-size:cover;
}
.ceo-img > img,
.ceo-img2 > img {
  position:relative;
  z-index:1;
}
.ceo-inner {
  width:55%;
  text-align:justify;
}
.ceo-inner2 {
  width:62.5%;
}
.quote {
  font-size:1.4rem;
  margin-left:5px;
  display:inline-flex;
  align-items:center;
}
.quote::before {
  display:inline-block;
  content:'';
  width:30px;
  height:0;
  border-top:1px solid #ccc;
}
.ceo-inner > p:not(:last-child),
.ceo-inner2 > p:not(:last-child) {
  margin-bottom:20px;
}
.ceo-name {
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  font-weight:bold;
  box-sizing:border-box;
}
.ceo-name__sub {
  font-size:1.6rem;
  margin-right:10px;
}
.ceo-name__main {
  font-size:3rem;
}
@media screen and (max-width:1280px) {
}
@media screen and (max-width:1024px) {
  .about-col {
    margin-left:initial;
  }
}
@media screen and (max-width:896px) {
  /*---vision---*/
  .vision {
    padding-bottom:100px;
  }
  .vision-body {
    width:70%;
  }
  .vision-inner {
    width:100%;
  }
  .vision-pc {
    display:none;
  }
  .vision-sp {
    display:block;
    width:75%;
    margin-top:30px;
    margin-bottom:30px;
  }
  /*---about---*/
  #particles-js {
    width:100%;
    height:35%;
  }
  .about-body {
    width:70%;
  }
  .about-col {
    flex-direction:column;
    margin-left:initial;
  }
  .about-img {
    width:80%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:80px;
  }
  .about-img__item {
    width:40%;
  }
  .about-img__item:nth-of-type(1) {
    margin:0 30% 50px 30%;
  }
  .about-img__item:nth-of-type(2) {
    margin-left:initial;
  }
  .about-img__item:nth-of-type(3) {
    margin-right:initial;
  }
  .about-inner {
    width:100%;
  }
  .about-bg {
    height:50%;
  }
  /*---ceo---*/
  .ceo-body {
    width:70%;
  }
  .ceo-sp {
    display:block;
  }
  .ceo-pc {
    display:none;
  }
  .ceo-col {
    flex-direction:column-reverse;
  }
  .ceo-col2 {
    flex-direction:column;
  }
  .ceo-img {
    width:60%;
    margin-bottom:50px;
  }
  .ceo-img2 {
    display:none;
    width:50%;
    margin-bottom:50px;
  }
  .ceo-inner,
  .ceo-inner2 {
    width:100%;
  }
  .ceo-col2 {
    margin-top:20px;
  }
}
@media screen and (max-width:786px) {
  .vision-body,
  .about-body,
  .ceo-body {
    width:75%;
  }
}
@media screen and (max-width:680px) {
  .vision-body,
  .about-body,
  .ceo-body {
    width:80%;
  }
}
@media screen and (max-width:480px) {
  #particles-js {
    opacity:.3;
  }
  /*---vision---*/
  .vision {
    padding:100px 0 0 0;
  }
  .vision-body {
    width:85%;
  }
  .vision-ttl > p {
    font-size:5rem;
  }
  .vision-sp {
    width:85%;
  }
  /*---about---*/
  .about {
    padding-bottom:100px;
  }
  .about-body {
    width:85%;
  }
  .about-img {
    width:100%;
    padding-top:50px;
  }
  .about-img__item {
    width:45%;
  }
  .about-img__item:nth-of-type(1) {
    margin: 0 27.5% 50px 27.5%;
  }
  .about-item:nth-of-type(n+2) {
    margin-top:40px;
  }

  .about-img__txt > p:nth-of-type(1) {
    font-size:2rem;
  }
  .about-item__ttl {
    padding-left:20px;
  }
  .about-item__ttl > p {
    font-size:2.6rem;
  }
  .about-item__ttl > h2 {
    font-size:1.4rem;
    margin-left:10px;
  }
  .about-item__lead {
    font-size:1.8rem;
  }
  .about-bg {
    height:30%;
  }
  /*---ceo---*/
  .ceo {
    padding:100px 0;
  }
  .ceo-body {
    width:85%;
  }
  .ceo-img {
    width:80%;
    margin-bottom:40px;
  }
  .ceo-col2 {
    margin-bottom:10px;
  }
  .ceo-name__main {
    font-size:2.6rem;
  }
}