@charset "UTF-8";
/* @mixin -------------------------------------- */
.block--main {
  position: relative;
  height: 100%; }

.pic-top_mv {
  width: 100%;
  position: relative;
  top: auto;
  right: auto; }

.pic-top_mv img,
.pic-top_mv video {
  width: 100%;
  display: block; }

.wrap-mv:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_dot.png) left top repeat; }
  @media screen and (max-width: 750px) {
    .wrap-mv:after {
      display: none; } }

.block--main .title {
  position: absolute;
  top: 50%;
  margin-top: -90px;
  width: 100%;
  text-align: center; }
  @media screen and (max-width: 750px) {
    .block--main .title {
      margin-top: -4.5rem; } }

.block--main .title .title_img {
  line-height: 1;
  margin-bottom: 2rem; }
  @media screen and (max-width: 750px) {
    .block--main .title .title_img {
      width: 32%;
      margin: 0 auto; } }

.block--main .title .title_text {
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  line-height: 1; }
  @media screen and (max-width: 750px) {
    .block--main .title .title_text {
      font-size: 2.5rem; } }

.block--main .mouse {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 8%; }
  @media screen and (max-width: 750px) {
    .block--main .mouse {
      bottom: -2.5rem;
      display: none; } }

.mouse a {
  color: #fff;
  display: block; }
  @media screen and (max-width: 750px) {
    .mouse a {
      color: #47A497;
      font-size: 1rem;
      font-weight: bold; } }

.mouse a .pict {
  position: absolute;
  top: -80px;
  left: 50%;
  width: 30px;
  height: 70px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box; }
  @media screen and (max-width: 750px) {
    .mouse a .pict {
      top: -55px;
      width: 20px;
      height: 50px;
      margin-left: -10px;
      border: 2px solid #47A497; } }

.mouse a .pict::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 20px;
  margin-left: -3px;
  border-radius: 3px;
  border: 2px solid #fff;
  box-sizing: border-box; }
  @media screen and (max-width: 750px) {
    .mouse a .pict::before {
      width: 4px;
      height: 15px;
      margin-left: -2px;
      border-radius: 3px;
      border: 1px solid #47A497; } }

.mouse a .arrow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box; }
  @media screen and (max-width: 750px) {
    .mouse a .arrow {
      width: 10px;
      height: 10px;
      margin-left: -5px;
      border-left: 1px solid #47A497;
      border-bottom: 1px solid #47A497; } }

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    opacity: 0;
    @media screen and (max-width: 750px) {
      -webkit-transform: rotate(-45deg) translate(-10px, 10px); } } }
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: rotate(-45deg) translate(-10px, 10px);
    opacity: 0;
    @media screen and (max-width: 750px) {
      -webkit-transform: rotate(-45deg) translate(-10px, 10px); } } }
.h3-block, .block--company-philosophy h3 {
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-weight: bold;
  letter-spacing: .5em;
  font-size: 1.4rem; }
  @media screen and (max-width: 750px) {
    .h3-block, .block--company-philosophy h3 {
      font-size: 1rem; } }

.block--company-philosophy {
  position: relative;
  padding-top: 70px;
  margin-bottom: 70px; }
  @media screen and (max-width: 750px) {
    .block--company-philosophy {
      padding-top: 4rem;
      margin-bottom: 4rem;
      padding-bottom: 5rem; } }

.block--company-philosophy h3 {
  margin-bottom: 1rem; }

.block--company-philosophy .img {
  width: 53%; }
  @media screen and (max-width: 750px) {
    .block--company-philosophy .img {
      margin: 0 auto;
      width: 65%;
      margin-bottom: 2rem; } }

.block--company-philosophy .img img {
  width: 100%; }

.block--company-philosophy .description {
  position: absolute;
  width: 55%;
  right: 0;
  top: 100px; }
  @media screen and (max-width: 750px) {
    .block--company-philosophy .description {
      position: relative;
      top: 0;
      width: 100%;
      font-size: 1.3rem;
      line-height: 1.4; } }

.block--company-philosophy .description .copy {
  font-size: 1.3rem;
  line-height: 2.2em;
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
  @media screen and (max-width: 750px) {
    .block--company-philosophy .description .copy {
      font-size: 1.2rem;
      line-height: 1.8; } }

@media screen and (max-width: 1100px) {
  .block--company-philosophy .description .copy .pc {
    display: none; } }

.block--company-philosoph_title {
  margin-bottom: 10px; }
  @media screen and (max-width: 750px) {
    .block--company-philosoph_title {
      width: 70%;
      margin-bottom: 0; } }

.block--company-philosoph_title img {
  width: 100%; }

.animation-img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%; }
  @media screen and (max-width: 750px) {
    .animation-img {
      width: 80%; } }

.animation-img svg {
  width: 100%; }

.block--comment {
  margin-bottom: 70px;
  margin-top: -70px;
  padding-top: 70px; }
  @media screen and (max-width: 750px) {
    .block--comment {
      margin-bottom: 5vh; } }

.block--comment .h3-block, .block--comment .block--company-philosophy h3, .block--company-philosophy .block--comment h3 {
  color: #fff;
  margin-bottom: 5px; }

.block--comment_inner {
  background: url(../images/bg_comment.jpg) no-repeat top center;
  padding: 60px 0; }
  @media screen and (max-width: 750px) {
    .block--comment_inner {
      padding: 5vh 0;
      background-size: cover; } }

.block--comment_inner .pc {
  display: block; }
  @media screen and (max-width: 750px) {
    .block--comment_inner .pc {
      display: none; } }

.block--comment_inner .sp {
  display: none; }
  @media screen and (max-width: 750px) {
    .block--comment_inner .sp {
      display: block;
      color: #fff;
      font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; } }

.block--comment_inner .sp .title {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: .5rem; }

.block--comment_inner .sp .body {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: .5rem; }

.block--comment_inner .sp .sign {
  text-align: right; }

.block--comment_inner .sp .sign span {
  font-size: 1rem;
  margin-right: 1rem; }

.block--comment_inner .img img {
  width: 90%; }

.block--comment_inner img {
  width: 100%; }

.block--works {
  margin-top: -70px;
  padding-top: 70px;
  margin-bottom: 100px; }
  @media screen and (max-width: 750px) {
    .block--works {
      margin-bottom: 7rem;
      margin-top: -48px;
      padding-top: 48px; } }

.block--works .h3-block, .block--works .block--company-philosophy h3, .block--company-philosophy .block--works h3 {
  margin-bottom: 10px; }

.block--works_wrap {
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -ms-flex-pack: justify;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap; }
  @media screen and (max-width: 750px) {
    .block--works_wrap {
      display: block; } }

.block--works_wrap .unit {
  width: 48%; }
  @media screen and (max-width: 750px) {
    .block--works_wrap .unit {
      width: 100%;
      margin-bottom: 4rem; } }

.block--works_wrap .unit img {
  width: 100%; }

.block--works_wrap .unit .title {
  position: relative;
  font-size: 1.8rem;
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  height: 75px; }
  @media screen and (max-width: 750px) {
    .block--works_wrap .unit .title {
      height: 40px;
      font-size: 1.6rem; } }

@media screen and (max-width: 750px) {
  .block--works_wrap .unit .discription {
    font-size: 1.2rem;
    line-height: 1.8; } }

.block--works_wrap .title_text {
  font-weight: bold;
  padding-top: 30px;
  padding-left: 170px; }
  @media screen and (max-width: 750px) {
    .block--works_wrap .title_text {
      padding-left: 100px;
      padding-top: 7px; } }

.block--works_wrap .title_num {
  background: #47A497;
  width: 110px;
  height: 110px;
  box-sizing: border-box;
  padding: 30px 0;
  text-align: center;
  color: #fff;
  font-size: 4.2rem;
  font-family: 'Biryani', sans-serif;
  line-height: 1;
  position: absolute;
  top: -55px;
  left: 35px; }
  @media screen and (max-width: 750px) {
    .block--works_wrap .title_num {
      width: 60px;
      height: 60px;
      padding: 15px 0;
      font-size: 2rem;
      top: -30px;
      left: 20px; } }

.title_num span {
  font-size: 1.2rem;
  display: block;
  font-weight: bold;
  margin-bottom: .5rem; }
  @media screen and (max-width: 750px) {
    .title_num span {
      font-size: 1rem; } }