@charset "UTF-8";

/* about */
.about {
  margin: 70px 0 0 0;
}

/* dot */
#dot-container-1 {
  position: relative;
  overflow: hidden;
}
#dot-container-2 {
  position: relative;
  overflow: hidden;
}
#dot-container-3 {
  position: relative;
  overflow: hidden;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

/* section */
.philo {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 130px 0;
}
.philo-title {
  font-size: 2.2em;
  line-height: 36px;
  margin: 0;
}
.philo-txt {
  font-size: 1.6em;
  line-height: 28px;
  margin: 5px 0 0 0;
}
.philo-title-en {
  font-size: 2.2em;
  line-height: 36px;
  margin: 40px 0 0 0;
}
.philo-txt-en {
  font-size: 1.6em;
  line-height: 26px;
  margin: 5px 0 0 0;
}
.block {
  display: flex;
}
.block-l {
  width: 15%;
}
.block-l-inner {
  width: 100%;
  padding: 20px 15px 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.block-r {
  width: 85%;
  border-left: 1px solid #231815;
}
.block-r-inner {
  width: 100%;
  padding: 0 50px;
  display: flex;
  align-items: center;
}
.h350 {
  height: 350px;
}
.h300 {
  height: 300px;
}
.h800 {
  height: 750px;
}
.block-l p {
  font-size: 1.8em;
  color: #008bc1;
  mix-blend-mode: multiply;
  writing-mode: vertical-rl;
}
.block-caption-sub {
  font-size: 1.6em;
  line-height: 28px;
}
.block-caption {
  font-size: 2.2em;
  line-height: 36px;
  margin: 5px 0 0 0;
}
.block-txt {
  font-size: 1.6em;
  line-height: 28px;
  margin: 25px 0 0 0;
}
.block-br {
  display: block;
}
.block-r-ul {
  margin: 70px 0 0 0;
}
.block-r-ul:first-child {
  margin: 0;
}
.block-r-ul li {
  display: flex;
  margin: 20px 0 0 0;
}
.block-r-ul li a {
  font-size: 0.9em;
  color: #000;
  border-bottom: 1px solid #008bc1;
  padding: 0 3px 4px 0;
}
.block-r-ul li a:hover {
  color: #008bc1;
  padding: 0 8px 4px 0;
}
.block-r-ul li:first-child {
  margin: 0;
}
.block-li-l {
  font-size: 1.6em;
  line-height: 28px;
}
.block-li-r {
  font-size: 1.6em;
  line-height: 28px;
  padding: 0 0 0 20px;
}

@media screen and (max-width:1200px) {
  /* section */
  .block-br {
    display: none;
  }
}

@media screen and (max-width:1000px) {
  /* section */
  .h800 {
    height: 910px;
  }
  .block-r-ul {
    margin: 60px 0 0 0;
  }
  .block-r-ul li {
    display: block;
    margin: 20px 0 0 0;
  }
  .block-li-r {
    padding: 0;
  }
}

@media screen and (max-width:767px) {
  /* about */
  .about {
    margin: 60px 0 0 0;
  }
  /* section */
  .philo {
    padding: 60px 0;
  }
  .philo-title {
    font-size: 1.5em;
    line-height: 25px;
  }
  .philo-txt {
    font-size: 1.2em;
    line-height: 22px;
    margin: 5px 0 0 0;
  }
  .philo-title-en {
    font-size: 1.5em;
    line-height: 25px;
    margin: 30px 0 0 0;
  }
  .philo-txt-en {
    font-size: 1.2em;
    line-height: 20px;
    margin: 5px 0 0 0;
  }
  .block-l-inner {
    width: 100%;
    padding: 15px 8px 0 0;
  }
  .block-r-inner {
    width: 100%;
    padding: 0 20px;
  }
  .h350 {
    height: 350px;
  }
  .h300 {
    height: 300px;
  }
  .h800 {
    height: 820px;
  }
  .block-l p {
    font-size: 1.5em;
  }
  .block-caption-sub {
    font-size: 1.2em;
    line-height: 22px;
  }
  .block-caption {
    font-size: 1.5em;
    line-height: 25px;
    margin: 10px 0 0 0;
  }
  .block-txt {
    font-size: 1.2em;
    line-height: 22px;
    margin: 15px 0 0 0;
  }
  .block-r-ul {
    margin: 50px 0 0 0;
  }
  .block-r-ul li {
    display: block;
    margin: 20px 0 0 0;
  }
  .block-r-ul li:first-child {
    margin: 0;
  }
  .block-li-l {
    font-size: 1.3em;
    line-height: 23px;
  }
  .block-li-r {
    font-size: 1.3em;
    line-height: 23px;
    padding: 0;
  }
}